From 09813db4c1a6450e1b1c71daf56f4202e6ff68a8 Mon Sep 17 00:00:00 2001 From: "jason.lam" Date: Tue, 16 Jan 2024 11:26:40 +0800 Subject: [PATCH] update combo --- .../DetailPage/OrganizationCard.js | 4 +- src/pages/Organization/DetailPage/index.js | 6 ++- .../OrganizationCard_loadFromUser.js | 2 +- .../ApplyForm/PublicNoticeApplyForm.js | 4 +- .../UserInformationCard_Individual.js | 8 +-- .../User/DetailsPage_Individual/index.js | 6 ++- .../UserInformationCard_Organization.js | 4 +- .../auth-forms/BusCustomFormWizard.js | 16 +++--- .../auth-forms/CustomFormWizard.js | 25 +++++---- .../auth-forms/IAmSmartFormWizard.js | 4 +- src/translations/en.json | 1 + src/translations/zh-CN.json | 1 + src/translations/zh-HK.json | 1 + src/utils/ComboData.js | 52 ++++++++++++------- src/utils/CommonFunction.js | 18 +++++++ 15 files changed, 101 insertions(+), 51 deletions(-) diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js index c0cb932..566dff7 100644 --- a/src/pages/Organization/DetailPage/OrganizationCard.js +++ b/src/pages/Organization/DetailPage/OrganizationCard.js @@ -363,6 +363,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => { valueName: "country", disabled: (!editMode && !createMode), dataList: ComboData.country, + getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }), form: formik })} @@ -372,7 +373,8 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => { label: FieldUtils.notNullFieldLabel("District:"), valueName: "district", disabled: (!editMode && !createMode), - dataList: ComboData.district(intl), + dataList: ComboData.district, + getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }), form: formik })} diff --git a/src/pages/Organization/DetailPage/index.js b/src/pages/Organization/DetailPage/index.js index 0c40b35..546155e 100644 --- a/src/pages/Organization/DetailPage/index.js +++ b/src/pages/Organization/DetailPage/index.js @@ -13,6 +13,8 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa import ForwardIcon from '@mui/icons-material/Forward'; import { useNavigate, useParams } from 'react-router-dom'; import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +import {getObjectByValue} from "../../../utils/CommonFunction"; +import * as ComboData from "../../../utils/ComboData"; const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, @@ -46,8 +48,8 @@ const OrganizationDetailPage = () => { HttpUtils.get({ url: UrlUtils.GET_ORG_PATH + "/" + params.id, onSuccess: function (response) { - response.data["country"] = response.data.addressTemp?.country; - response.data["district"] = response.data.addressTemp?.district; + response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country); + response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district); response.data["addressLine1"] = response.data.addressTemp?.addressLine1; response.data["addressLine2"] = response.data.addressTemp?.addressLine2; response.data["addressLine3"] = response.data.addressTemp?.addressLine3; diff --git a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js index b9bcf99..c0c89e2 100644 --- a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js +++ b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js @@ -236,7 +236,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => { {FieldUtils.getComboField({ label: FieldUtils.notNullFieldLabel("District:"), valueName: "district", - dataList: ComboData.district(intl), + dataList: ComboData.district, form: formik })} diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js index e3e448a..1ecf631 100644 --- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js +++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js @@ -160,7 +160,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { {FieldUtils.getPhoneField({ - label: "聯繫電話:", + label: intl.formatMessage({id: 'userContactNumber'}) + ":", disabled: true, valueName: { code: "tel_countryCode", @@ -171,7 +171,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { {FieldUtils.getPhoneField({ - label: "聯繫傳真:", + label: intl.formatMessage({id: 'contactFaxNumber'}) + ":", disabled: true, valueName: { code: "fax_countryCode", diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js index ac879e6..dc29d3f 100644 --- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js +++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js @@ -75,8 +75,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { }, emailAddress: values.emailAddress, address: { - country: values.country, - district: values.district, + country: values.country.key, + district: values.district.key, addressLine1: values.addressLine1, addressLine2: values.addressLine2, addressLine3: values.addressLine3, @@ -411,6 +411,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { {FieldUtils.getComboField({ label: "Country:", valueName: "country", + getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }), dataList: ComboData.country, disabled: (!editMode), form: formik @@ -498,7 +499,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { {FieldUtils.getComboField({ label: "District:", valueName: "district", - dataList: ComboData.district(intl), + dataList: ComboData.district, + getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "islandCombo" }), disabled: (!editMode), form: formik })} diff --git a/src/pages/User/DetailsPage_Individual/index.js b/src/pages/User/DetailsPage_Individual/index.js index 91bc636..d344cfb 100644 --- a/src/pages/User/DetailsPage_Individual/index.js +++ b/src/pages/User/DetailsPage_Individual/index.js @@ -22,6 +22,8 @@ const BackgroundHead = { } import Loadable from 'components/Loadable'; import { useNavigate } from "react-router-dom"; +import {getObjectByValue} from "../../../utils/CommonFunction"; +import * as ComboData from "../../../utils/ComboData"; const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent'))); const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual'))); @@ -54,8 +56,8 @@ const UserMaintainPage_Individual = () => { response.data["modifieDate"] = modifiedBy; response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified"; - response.data["country"] = response.data.address?.country; - response.data["district"] = response.data.address?.district; + response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country); + response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district); response.data["addressLine1"] = response.data.address?.addressLine1; response.data["addressLine2"] = response.data.address?.addressLine2; response.data["addressLine3"] = response.data.address?.addressLine3; diff --git a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js index 07d3444..8581baf 100644 --- a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js @@ -525,6 +525,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => label: "Country:", valueName: "country", dataList: ComboData.country, + getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "hongKong" }), disabled: true, form: formik })} @@ -564,7 +565,8 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => {FieldUtils.getComboField({ label: "District:", valueName: "district", - dataList: ComboData.district(intl), + dataList: ComboData.district, + getOptionLabel: (option) => intl.formatMessage({ id: option.type? option.type : "islandCombo" }), disabled: true, form: formik })} diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index 87a6dfa..9918105 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -89,7 +89,7 @@ const BusCustomFormWizard = (props) => { }; const [selectedAddress4, setSelectedAddress4] = useState(null); - const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country(intl)[0]); + const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]); const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [isValid, setisValid] = useState(false); @@ -101,8 +101,8 @@ const BusCustomFormWizard = (props) => { const [checkEmail, setCheckEmail] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false) - const address4ComboList = ComboData.district(intl); - const address5ComboList = ComboData.country(intl); + const address4ComboList = ComboData.district; + const address5ComboList = ComboData.country; const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評" @@ -546,7 +546,7 @@ const BusCustomFormWizard = (props) => { const handleReset = (resetForm) => { resetForm(); setSelectedAddress4("") - setSelectedAddress5(ComboData.country(intl)[0]) + setSelectedAddress5(ComboData.country[0]) setCheckCountry(false) setFileList([]) setFileListData([]) @@ -972,6 +972,7 @@ const BusCustomFormWizard = (props) => { value={selectedAddress4} options={address4ComboList} disabled={checkCountry} + getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { setSelectedAddress4(newValue); }} @@ -986,10 +987,11 @@ const BusCustomFormWizard = (props) => { id="address5-combo" value={selectedAddress5} options={address5ComboList} + getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { if (newValue !== null) { setSelectedAddress5(newValue); - if (newValue === intl.formatMessage({id: 'hongKong'})) { + if (newValue.type === 'hongKong') { setCheckCountry(false) } else { setSelectedAddress4(""); @@ -1534,7 +1536,7 @@ const BusCustomFormWizard = (props) => { {formik.values.address3} : null} - {selectedAddress5 === "香港" ? + {selectedAddress5.label === "hongKong" ? : @@ -1549,7 +1551,7 @@ const BusCustomFormWizard = (props) => { : - {selectedAddress5} + {intl.formatMessage({id: selectedAddress5.label})} diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 3fcd37e..f2a7144 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -89,7 +89,8 @@ const CustomFormWizard = (props) => { const [selectedIdDocInputType, setSelectedIdDocInputType] = useState(""); // const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null); const [selectedAddress4, setSelectedAddress4] = useState(null); - const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country(intl)[0]); + console.log(ComboData.country[0]); + const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]); const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [isValid, setisValid] = useState(false); @@ -102,8 +103,6 @@ const CustomFormWizard = (props) => { const [checkEmailBlur, setCheckEmailBlur] = useState(false) const idDocTypeComboList = ComboData.idDocType; - const address4ComboList = ComboData.district(intl); - const address5ComboList = ComboData.country(intl); const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評" @@ -315,8 +314,8 @@ const CustomFormWizard = (props) => { const _onSubmit = () => { setLoding(true); values.idDocType = selectedIdDocType.type - values.address4 = selectedAddress4 - values.address5 = selectedAddress5 + values.address4 = selectedAddress4.key + values.address5 = selectedAddress5.key const userAddress = { "addressLine1": "", "addressLine2": "", @@ -638,7 +637,7 @@ const CustomFormWizard = (props) => { const handleReset = (resetForm) => { resetForm(); setSelectedAddress4("") - setSelectedAddress5(ComboData.country(intl)[0]) + setSelectedAddress5(ComboData.country[0]) setCheckCountry(false) setSelectedIdDocType({}) setSelectedIdDocInputType(""); @@ -1176,8 +1175,9 @@ const CustomFormWizard = (props) => { disablePortal id="address4-combo" value={selectedAddress4} - options={address4ComboList} + options={ComboData.district} disabled={checkCountry} + getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { setSelectedAddress4(newValue); }} @@ -1191,11 +1191,12 @@ const CustomFormWizard = (props) => { disablePortal id="address5-combo" value={selectedAddress5} - options={address5ComboList} + options={ComboData.country} + getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { if (newValue !== null) { setSelectedAddress5(newValue); - if (newValue === intl.formatMessage({id: 'hongKong'})) { + if (newValue.type === 'hongKong') { setCheckCountry(false) } else { setSelectedAddress4(""); @@ -1707,7 +1708,7 @@ const CustomFormWizard = (props) => { {formik.values.address3} : null} - {selectedAddress5 == ("香港") ? + {selectedAddress5.label === "hongKong" ? : @@ -1719,7 +1720,9 @@ const CustomFormWizard = (props) => { : - {selectedAddress5} + + {intl.formatMessage({id: selectedAddress5.label})} + diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index e00a83e..1f9ee73 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -64,7 +64,7 @@ const CustomFormWizard = (props) => { const [checkEmail, setCheckEmail] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false) - const address4ComboList = ComboData.district(intl); + const address4ComboList = ComboData.district; const address5ComboList = ComboData.country; const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" @@ -522,7 +522,7 @@ const CustomFormWizard = (props) => { onChange={(event, newValue) => { if (newValue !== null) { setSelectedAddress5(newValue); - if (newValue === intl.formatMessage({id: 'hongKong'})) { + if (newValue.type === 'hongKong') { setCheckCountry(false) } else { setSelectedAddress4(""); diff --git a/src/translations/en.json b/src/translations/en.json index 4120eac..778e58b 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -75,6 +75,7 @@ "emailUsed": "This email has been registered, please use another email", "emailSent": "A verification email will be sent to your email address. Please follow the instructions to complete the verification and log in to the system.", "userContactNumber": "Contact Number", + "contactFaxNumber": "Contact Fax", "requiredValidNumber": "Please enter a valid contact number", "requireContactNumber": "Please enter your contact number", "require3Number": "Please enter an 3-digit number", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index 8786dfe..dc8870f 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -75,6 +75,7 @@ "emailUsed": "此电邮已被注册，请使用其他电邮", "emailSent": "验证电邮将发送到你的电邮地址，请依指示完成验证及登入系统。", "userContactNumber": "联络电话", + "contactFaxNumber": "联络传真", "requiredValidNumber": "请输入有效联络电话", "requireContactNumber": "请输入联络电话", "require3Number": "请输入3位数字", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index 5a6de35..75449ab 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -75,6 +75,7 @@ "emailUsed": "此電郵已被注冊，請使用其他電郵", "emailSent": "驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。", "userContactNumber": "聯絡電話", + "contactFaxNumber": "聯絡傳真", "requiredValidNumber": "請輸入有效聯絡電話", "requireContactNumber": "請輸入聯絡電話", "require3Number": "請輸入3位數字", diff --git a/src/utils/ComboData.js b/src/utils/ComboData.js index 52c4adb..de70425 100644 --- a/src/utils/ComboData.js +++ b/src/utils/ComboData.js @@ -1,25 +1,39 @@ export const idDocType = [ - { key: 1, label: 'passport', type: 'passport' }, - { key: 2, label: 'HKIDcard', type: 'HKID' }, - { key: 3, label: 'mainlandIDCard', type: 'CNID' }, - { key: 4, label: 'proCert', type: 'otherCert' } + { id:1, key: 1, label: 'passport', type: 'passport' }, + { id:2, key: 2, label: 'HKIDcard', type: 'HKID' }, + { id:3, key: 3, label: 'mainlandIDCard', type: 'CNID' }, + { id:4, key: 4, label: 'proCert', type: 'otherCert' } ]; -export const district = (intl) =>{ - return [ - 'islandCombo', 'kwaiTsingCombo', 'northCombo', 'saiKungCombo', - 'shaTinCombo', 'taiPoCombo', 'tsuenWanCombo', 'tuenMunCombo', - 'yuenLongCombo', 'kowloonCityCombo', 'kwunTongCombo', 'shamShuiPoCombo', - 'wongTaiSinCombo', 'yauTsimMongCombo', 'centralAndWesternCombo', 'easternCombo', - 'southernCombo', 'wanChaiCombo', 'lantauIslandCombo', 'lammaIslandCombo', - 'pengChauCombo' - ].map((district) => intl.formatMessage({id: district})); -}; - -export const country = (intl) => { - return ["hongKong", "mainland", "macau"] - .map((country) => intl.formatMessage({ id: country })); -}; +export const district = [ + { id: 1, key: 1, label: '離島區', type: 'islandCombo' }, + { id: 2, key: 2, label: '葵青區', type: 'kwaiTsingCombo' }, + { id: 3, key: 3, label: '北區', type: 'northCombo' }, + { id: 4, key: 4, label: '西貢區', type: 'saiKungCombo' }, + { id: 5, key: 5, label: '沙田區', type: 'shaTinCombo' }, + { id: 6, key: 6, label: '大埔區', type: 'taiPoCombo' }, + { id: 7, key: 7, label: '荃灣區', type: 'tsuenWanCombo' }, + { id: 8, key: 8, label: '屯門區', type: 'tuenMunCombo' }, + { id: 9, key: 9, label: '元朗區', type: 'yuenLongCombo' }, + { id: 10, key: 10, label: '九龍城區', type: 'kowloonCityCombo' }, + { id: 11, key: 11, label: '觀塘區', type: 'kwunTongCombo' }, + { id: 12, key: 12, label: '深水埗區', type: 'shamShuiPoCombo' }, + { id: 13, key: 13, label: '黃大仙區', type: 'wongTaiSinCombo' }, + { id: 14, key: 14, label: '油尖旺區', type: 'yauTsimMongCombo' }, + { id: 15, key: 15, label: '中西區', type: 'centralAndWesternCombo' }, + { id: 16, key: 16, label: '東區', type: 'easternCombo' }, + { id: 17, key: 17, label: '南區', type: 'southernCombo' }, + { id: 18, key: 18, label: '灣仔區', type: 'wanChaiCombo' }, + { id: 19, key: 19, label: '大嶼山區', type: 'lantauIslandCombo' }, + { id: 20, key: 20, label: '南丫島區', type: 'lammaIslandCombo' }, + { id: 21, key: 21, label: '坪洲區', type: 'pengChauCombo' } +]; + +export const country = [ + { id:1, key: 1, label: '香港', type: 'hongKong' }, + { id:2, key: 2, label: '內地', type: 'mainland' }, + { id:3, key: 3, label: '澳門', type: 'macau' } +]; export const accountFilter = [{ id: 1, key: 1, label: 'Active', type: 'active' }, { id: 2, key: 2, label: 'Locked', type: 'locked' }, { id: 3, key: 3, label: 'Not verified', type: 'notVerified' }]; diff --git a/src/utils/CommonFunction.js b/src/utils/CommonFunction.js index 4ac4443..f278c5a 100644 --- a/src/utils/CommonFunction.js +++ b/src/utils/CommonFunction.js @@ -26,6 +26,15 @@ export function getObjectById(list, id) { return obj === undefined || Object.keys(obj).length <= 0 ? null : obj } +export function getObjectByValue(list, valueName, value) { + const obj = list.find((element) => { + return element[valueName] === parseInt(value); + }); + console.log(obj); + return obj === undefined || Object.keys(obj).length <= 0 ? null : obj +} + + export function removeObjectWithId(arr, id) { const arrCopy = Array.from(arr); const objWithIdIndex = arrCopy.findIndex((obj) => obj.id === id); @@ -33,6 +42,15 @@ export function removeObjectWithId(arr, id) { return arrCopy; } +export function getComboValueByLabel(comboList, input) { + for (let i = 0; i < comboList.length; i++) { + if (comboList[i].label === input) { + return comboList[i]; + } + } + return input === undefined ? null : input; +} + export function getDateString(queryDateArray) { return ( queryDateArray[0]