From 0ee39a7fde4993c2e5002d451644632f6e4e6f77 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Wed, 14 Aug 2024 15:42:17 +0800 Subject: [PATCH] update ui layout --- .../DetailPage/OrganizationCard.js | 43 +++++++++--------- .../DetailPage/OrganizationPubCard.js | 33 +++++++------- .../OrganizationCard_loadFromUser.js | 27 +++++------ .../ApplyForm/PublicNoticeApplyForm.js | 6 +++ .../Details_GLD/GazetteDetailCard.js | 45 ++++++++++++++++++- .../UserInformationCard_Individual.js | 43 +++++++++--------- .../UserInformationCard_Individual_Pub.js | 43 +++++++++--------- .../auth-forms/BusCustomFormWizard.js | 8 ++-- .../auth-forms/CustomFormWizard.js | 8 ++-- .../auth-forms/IAmSmartFormWizard.js | 8 ++-- src/translations/en.json | 1 + src/translations/zh-CN.json | 3 +- src/translations/zh-HK.json | 3 +- src/utils/FieldUtils.js | 28 ++++++++++++ src/utils/statusUtils/ProofStatus.js | 2 +- 15 files changed, 192 insertions(+), 109 deletions(-) diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js index 312deb1..9850a91 100644 --- a/src/pages/Organization/DetailPage/OrganizationCard.js +++ b/src/pages/Organization/DetailPage/OrganizationCard.js @@ -517,27 +517,6 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => { })} - - {FieldUtils.getComboField({ - label: FieldUtils.notNullFieldLabel("Country:"), - valueName: "country", - disabled: true, - dataList: ComboData.country, - getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", - form: formik - })} - - - - {FieldUtils.getComboField({ - label: FieldUtils.notNullFieldLabel("District:"), - valueName: "district", - disabled: (!editMode && !createMode), - dataList: ComboData.district, - getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", - form: formik - })} - { currentUserData.creditor ? @@ -562,6 +541,28 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => { })} + + {FieldUtils.getProfileComboField({ + label: "", + valueName: "district", + disabled: (!editMode && !createMode), + dataList: ComboData.district, + getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", + form: formik + })} + + + + {FieldUtils.getProfileComboField({ + label: "", + valueName: "country", + disabled: true, + dataList: ComboData.country, + getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", + form: formik + })} + + diff --git a/src/pages/Organization/DetailPage/OrganizationPubCard.js b/src/pages/Organization/DetailPage/OrganizationPubCard.js index 61f7640..ac75497 100644 --- a/src/pages/Organization/DetailPage/OrganizationPubCard.js +++ b/src/pages/Organization/DetailPage/OrganizationPubCard.js @@ -289,20 +289,19 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => { })} - - {FieldUtils.getComboField({ - label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'country' }) + ":"), - valueName: "country", - disabled: true, - dataList: ComboData.country, - getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", + + {FieldUtils.getAddressField({ + label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'formAddress' }) + ":"), + valueName: ["addressLine1", "addressLine2", "addressLine3"], + disabled: (!editMode && !createMode), form: formik })} - - {FieldUtils.getComboField({ - label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'district' }) + ":"), + + {FieldUtils.getProfileComboField({ + // label: FieldUtils.notNullFieldLabel(""), + label: "", valueName: "district", disabled: (!editMode && !createMode), dataList: ComboData.district, @@ -310,13 +309,15 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => { form: formik })} - - + - {FieldUtils.getAddressField({ - label: FieldUtils.notNullFieldLabel(intl.formatMessage({ id: 'formAddress' }) + ":"), - valueName: ["addressLine1", "addressLine2", "addressLine3"], - disabled: (!editMode && !createMode), + {FieldUtils.getProfileComboField({ + // label: FieldUtils.notNullFieldLabel(""), + label: "", + valueName: "country", + disabled: true, + dataList: ComboData.country, + getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", form: formik })} diff --git a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js index f785b8a..a6829af 100644 --- a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js +++ b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js @@ -310,20 +310,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => { })} - - {FieldUtils.getComboField({ - label: FieldUtils.notNullFieldLabel("Country:"), - valueName: "country", - disabled: true, - dataList: ComboData.country, - getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", + + {FieldUtils.getAddressField({ + label: FieldUtils.notNullFieldLabel("Address:"), + valueName: ["addressLine1", "addressLine2", "addressLine3"], form: formik })} - + {FieldUtils.getComboField({ - label: FieldUtils.notNullFieldLabel("District:"), + label: "", valueName: "district", dataList: ComboData.district, getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", @@ -331,13 +328,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => { })} - - {FieldUtils.getAddressField({ - label: FieldUtils.notNullFieldLabel("Address:"), - valueName: ["addressLine1", "addressLine2", "addressLine3"], + + {FieldUtils.getComboField({ + label: "", + valueName: "country", + disabled: true, + dataList: ComboData.country, + getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", form: formik })} + } diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js index 0bac8ab..8b915a8 100644 --- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js +++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js @@ -587,6 +587,12 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => + + +
+ + + diff --git a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js index 101190c..f76484f 100644 --- a/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js +++ b/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js @@ -33,6 +33,8 @@ const GazetteDetailCard = ( const [groupTitle, setGroupTitle] = useState(""); const [verified, setVerified] = useState(null); const [currentStatus, setCurrentStatus] = useState({}); + const [sysType, setSysType] = useState(null); + const [careOf, setCareOf] = useState(""); const [isWarningPopUp, setIsWarningPopUp] = useState(false); const [warningText, setWarningText] = useState(""); @@ -49,7 +51,9 @@ const GazetteDetailCard = ( + " No. " + applicationDetailData.gazetteIssueDetail.issueNo); setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); setGazetteCode(applicationDetailData.data.groupNo) - console.log(gazetteCode) + console.log(applicationDetailData) + setSysType(applicationDetailData.userData.sysType) + setCareOf(applicationDetailData.data.careOf) setGroupTitle(applicationDetailData.data.groupTitle) } }, [applicationDetailData]); @@ -178,7 +182,7 @@ const GazetteDetailCard = ( + alignItems="center" > + { + sysType != null && sysType == "dummy"? + + + + + + Customer's Client/ Case No: + + + + + + + + + + + + : null + } diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js index 9de9eb6..8dd310b 100644 --- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js +++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js @@ -575,11 +575,11 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { {FieldUtils.getComboField({ - label: "Country:", - valueName: "country", - getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", - dataList: ComboData.country, - disabled: true, + label: intl.formatMessage({ id: 'language' }) + ":", + valueName: "preferLocale", + dataList: ComboData.Locale, + getOptionLabel: (option) => option.label ? option.label : "", + disabled: (!editMode), form: formik })} @@ -649,36 +649,37 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { - - {FieldUtils.getComboField({ - label: "District:", - valueName: "district", - dataList: ComboData.district, - getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", + + {FieldUtils.getAddressField({ + label: "Address:", + valueName: ["addressLine1", "addressLine2", "addressLine3"], disabled: (!editMode), form: formik })} - - {FieldUtils.getComboField({ - label: intl.formatMessage({ id: 'language' }) + ":", - valueName: "preferLocale", - dataList: ComboData.Locale, - getOptionLabel: (option) => option.label ? option.label : "", + + {FieldUtils.getProfileComboField({ + label: "", + valueName: "district", + dataList: ComboData.district, + getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", disabled: (!editMode), form: formik })} - {FieldUtils.getAddressField({ - label: "Address:", - valueName: ["addressLine1", "addressLine2", "addressLine3"], - disabled: (!editMode), + {FieldUtils.getProfileComboField({ + label: "", + valueName: "country", + getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "", + dataList: ComboData.country, + disabled: true, form: formik })} + diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js index 31bb932..188acab 100644 --- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js +++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js @@ -330,11 +330,11 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => { {FieldUtils.getComboField({ - label: intl.formatMessage({id: 'country'}) + ":", - valueName: "country", - getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "", - dataList: ComboData.country, - disabled: true, + label: intl.formatMessage({id: 'language'}) + ":", + valueName: "preferLocale", + dataList: ComboData.Locale, + getOptionLabel: (option) => option.label? option.label: "", + disabled: (!editMode), form: formik })} @@ -359,33 +359,34 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => { form: formik })} - - {FieldUtils.getComboField({ - label: intl.formatMessage({id: 'district'}) + ":", - valueName: "district", - dataList: ComboData.district, - getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "", + + + {FieldUtils.getAddressField({ + label: intl.formatMessage({id: 'userAddress'}) + ":", + valueName: ["addressLine1", "addressLine2", "addressLine3"], disabled: (!editMode), form: formik })} - - {FieldUtils.getComboField({ - label: intl.formatMessage({id: 'language'}) + ":", - valueName: "preferLocale", - dataList: ComboData.Locale, - getOptionLabel: (option) => option.label? option.label: "", + + {FieldUtils.getProfileComboField({ + label: "", + valueName: "district", + dataList: ComboData.district, + getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "", disabled: (!editMode), form: formik })} - {FieldUtils.getAddressField({ - label: intl.formatMessage({id: 'userAddress'}) + ":", - valueName: ["addressLine1", "addressLine2", "addressLine3"], - disabled: (!editMode), + {FieldUtils.getProfileComboField({ + label: "", + valueName: "country", + getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "", + dataList: ComboData.country, + disabled: true, form: formik })} diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index 971bdc2..ad2329a 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -1602,18 +1602,18 @@ const BusCustomFormWizard = (props) => { : null} {selectedAddress5.type === "hongKong" ? - + {/* : - + */} {!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})} : null} - + {/* : - + */} {intl.formatMessage({id: selectedAddress5.type})} diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 6c15d65..f09460d 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -1830,18 +1830,18 @@ const CustomFormWizard = (props) => { : null} {selectedAddress5.type === "hongKong" ? - + {/* : - + */} {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })} : null} - + {/* : - + */} {intl.formatMessage({ id: selectedAddress5.type })} diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index d6751ce..ad11b29 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -1075,18 +1075,18 @@ const CustomFormWizard = (props) => { : null} {selectedAddress5.type === "hongKong" ? - + {/* : - + */} {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })} : null} - + {/* : - + */} {intl.formatMessage({ id: selectedAddress5.type })} diff --git a/src/translations/en.json b/src/translations/en.json index 4ff8fc3..15b8e3b 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -338,6 +338,7 @@ "applyPublicNotice": "Apply for Public Notice", + "applyPublicNoticeText": "
After successful submission, the application will appear under “Processing” on “My Public Notices” page. A notification email with the Application Number will reach your mailbox.
", "attention": "Attention", "to": "To", "all": "All", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index db20d59..08cbd04 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -370,6 +370,7 @@ "pwStrong": "强", "applyPublicNotice": "申请公共启事", + "applyPublicNoticeText": "
成功提交申请后，申请将列在「我的公共启事」页面下的「处理中」。你将收到附有申请号码的通知电邮。
", "attention": "注意", "to": "到", "all": "全部", @@ -528,7 +529,7 @@ "idType": "身份证类型", "idNo": "身份证号码", "country": "国家", - "district": "区域", + "district": "地区", "noRecordFound": "找不到记录", "rowsPerPage": "每页项数", "date" : "日期", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index c4fad5d..7a5a711 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -371,6 +371,7 @@ "pwStrong": "強", "applyPublicNotice": "申請公共啟事", + "applyPublicNoticeText": "
成功提交申請後，申請將列在「我的公共啟事」頁面下的「處理中」。你將收到附有申請號碼的通知電郵。
", "attention": "注意", "to": "到", "all": "全部", @@ -529,7 +530,7 @@ "idType": "身分證類型", "idNo": "身分證號碼", "country": "國家", - "district": "區域", + "district": "地區", "noRecordFound": "找不到記錄", "rowsPerPage": "每頁項數", "date" : "日期", diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js index fc7a891..b9a46e4 100644 --- a/src/utils/FieldUtils.js +++ b/src/utils/FieldUtils.js @@ -204,6 +204,34 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO ; } +export const getProfileComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => { + let err = Boolean(form.errors[valueName]); + return + + + {label} + + + + + + + + ; +} + export const initField = ({ type, valueName, form, disabled, autoFocus, multiline, handleChange, placeholder, inputProps, InputProps, width, ...props }) => { let err = Boolean(form.errors[valueName]); diff --git a/src/utils/statusUtils/ProofStatus.js b/src/utils/statusUtils/ProofStatus.js index b5a26c4..e0fd6db 100644 --- a/src/utils/statusUtils/ProofStatus.js +++ b/src/utils/statusUtils/ProofStatus.js @@ -42,7 +42,7 @@ function getStatus(params) { if(isCancelled) return cancel; - console.log(replyDate) + // console.log(replyDate) if(replyDate){ return action?confirm:unable; }else{