add select language in user page

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -95,6 +95,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 addressLine2: values.addressLine2,
                                 addressLine3: values.addressLine3,
                             },
+                            preferLocale: values.preferLocale.type
                         },
                         onSuccess: function () {
                             notifySaveSuccess();
@@ -512,6 +513,17 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                     form: formik
                                 })}
                             </Grid>
+
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
+                                {FieldUtils.getComboField({
+                                    label: intl.formatMessage({id: 'language'}) + ":",
+                                    valueName: "preferLocale",
+                                    dataList: ComboData.Locale,
+                                    getOptionLabel: (option) => option.label? option.label: "",
+                                    disabled: (!editMode),
+                                    form: formik
+                                })}
+                            </Grid>
                         </Grid>
                     </Grid>
                 </form>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -60,6 +60,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
             faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).nullable(),
         }),
         onSubmit: values => {
+            // console.log(values)
             if (values.country==null){
                 setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
             } else {
@@ -86,6 +87,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                 addressLine2: values.addressLine2,
                                 addressLine3: values.addressLine3,
                             },
+                            preferLocale: values.preferLocale.type
                         },
                         onSuccess: function () {
                             notifySaveSuccess();
@@ -351,6 +353,17 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                     form: formik
                                 })}
                             </Grid>
+
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
+                                {FieldUtils.getComboField({
+                                    label: intl.formatMessage({id: 'language'}) + ":",
+                                    valueName: "preferLocale",
+                                    dataList: ComboData.Locale,
+                                    getOptionLabel: (option) => option.label? option.label: "",
+                                    disabled: (!editMode),
+                                    form: formik
+                                })}
+                            </Grid>
                         </Grid>
                     </Grid>
                 </form>

src/pages/User/DetailsPage_Individual/index.js

@@ -22,7 +22,7 @@ const BackgroundHead = {
 }
 import Loadable from 'components/Loadable';
 import { useNavigate } from "react-router-dom";
-import {getObjectByValue} from "utils/CommonFunction";
+import {getObjectByValue,getObjectByType} 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')));
@@ -80,6 +80,7 @@ const UserMaintainPage_Individual = () => {
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
     
                     response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLogin) : "";
+                    response.data["preferLocale"] = getObjectByType(ComboData.Locale, "type", response.data?.preferLocale);
     
                     setFormData(response.data);
                 }
@@ -104,7 +105,9 @@ const UserMaintainPage_Individual = () => {
     
                     response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
-        
+                    
+                    response.data["preferLocale"] = getObjectByType(ComboData.Locale, "type", response.data?.preferLocale);
+                    // console.log(response.data)
                     setFormData(response.data);
                 }
             });

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -101,7 +101,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                     orgId: values.orgId,
                     // brNo: values.brNo,
                     // brExpiryDate: values.brExpiryDate,
-
+                    preferLocale: values.preferLocale.type
                 },
                 onSuccess: function () {
                     notifySaveSuccess()
@@ -394,8 +394,17 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                     form: formik
                                 })}
                             </Grid>
-
-                            <Grid item lg={8}></Grid>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
+                                {FieldUtils.getComboField({
+                                    label: intl.formatMessage({id: 'language'}) + ":",
+                                    valueName: "preferLocale",
+                                    dataList: ComboData.Locale,
+                                    getOptionLabel: (option) => option.label? option.label: "",
+                                    disabled: (!editMode),
+                                    form: formik
+                                })}
+                            </Grid>
+                            <Grid item lg={4}></Grid>
 
                             <Grid item lg={4}>
                                 <Grid container alignItems={"center"}>

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js

@@ -19,6 +19,7 @@ import { notifySaveSuccess, } from 'utils/CommonFunction';
 import {FormattedMessage, useIntl} from "react-intl";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import * as ComboData from "utils/ComboData";
 
 // import {
 //     isPrimaryLoggedIn,
@@ -67,6 +68,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                         countryCode: values.tel_countryCode,
                         phoneNumber: values.phoneNumber
                     },
+                    preferLocale: values.preferLocale.type
                 },
                 onSuccess: function () {
                     notifySaveSuccess()
@@ -202,6 +204,16 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                     form: formik
                                 })}
                             </Grid>
+                            <Grid item xs={12} lg={12}>
+                                {FieldUtils.getComboField({
+                                    label: intl.formatMessage({id: 'language'}) + ":",
+                                    valueName: "preferLocale",
+                                    dataList: ComboData.Locale,
+                                    getOptionLabel: (option) => option.label? option.label: "",
+                                    disabled: (!editMode),
+                                    form: formik
+                                })}
+                            </Grid>
 
                         </Grid>
                     </div>

src/pages/User/DetailsPage_Organization/index.js

@@ -19,7 +19,7 @@ import ForwardIcon from '@mui/icons-material/Forward';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import { useNavigate } from 'react-router-dom';
 import * as ComboData from "utils/ComboData";
-import {getObjectByValue} from "utils/CommonFunction";
+import {getObjectByValue,getObjectByType} from "utils/CommonFunction";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -140,6 +140,7 @@ const UserMaintainPage_Organization = () => {
                     response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
                     response.data["status"] = response.data?.locked?"locked":response.data?.status;
+                    response.data["preferLocale"] = getObjectByType(ComboData.Locale, "type", response.data?.preferLocale);
     
                     //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
     
@@ -163,6 +164,7 @@ const UserMaintainPage_Organization = () => {
     
                     response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
+                    response.data["preferLocale"] = getObjectByType(ComboData.Locale, "type", response.data?.preferLocale);
     
                     //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
                     setUserData(response.data);

src/pages/authentication/auth-forms/AuthLoginCustom.js

@@ -109,6 +109,10 @@ const AuthLoginCustom = () => {
               // setLocale("zh-CN");
               localStorage.setItem('locale','zh-CN');
             }
+            if (response.data.preferLocale ==="en"){
+              // setLocale("zh-CN");
+              localStorage.setItem('locale','en');
+            }
           }
           dispatch(handleLogin(data))
           navigate('/dashboard');

src/pages/iAmSmart/AuthCallback/index.js

@@ -61,6 +61,10 @@ const Index = () => {
                                 // setLocale("zh-CN");
                                 localStorage.setItem('locale','zh-CN');
                             }
+                            if (response.data.preferLocale ==="en"){
+                                // setLocale("zh-CN");
+                                localStorage.setItem('locale','en');
+                            }
                         }
                         dispatch(handleLogin(data))
                         navigate('/dashboard');

src/translations/en.json

@@ -2,7 +2,8 @@
   "en": "English",
   "zh-HK": "繁體中文",
   "zh-CN": "简体中文",
-
+  "language":"Language",
+  
   "PNSPS": "PNSPS",
   "HKSARGOV": "HKSAR Government",
   "HKGLD": "Government Logistics Department",

src/translations/zh-CN.json

@@ -2,6 +2,7 @@
   "en": "English",
   "zh-HK": "繁體中文",
   "zh-CN": "简体中文",
+  "language":"語言",
 
   "PNSPS": "公共启事提交及缴费系统",
   "HKSARGOV": "香港特别行政区政府",

src/translations/zh-HK.json

@@ -2,6 +2,7 @@
   "en": "English",
   "zh-HK": "繁體中文",
   "zh-CN": "简体中文",
+  "language":"語言",
 
   "PNSPS": "公共啟事提交及繳費系統",
   "HKSARGOV": "香港特別行政區政府",

src/utils/ComboData.js

@@ -124,4 +124,10 @@ export const CreditorStatus = [
     { key: 0, labelCht: '全部', label: 'All',  type: 'all' }, 
     { key: 1, labelCht: '債權人', label:'Credit Client',  type: 'true' },
     { key: 2, labelCht: '非債權人', label:'Non-Credit Client', type: 'false' }, 
+];
+
+export const Locale = [
+    { id: 1, key: 1, label: 'English',  type: 'en' },
+    { id: 2, key: 2, label: '繁體中文',  type: 'zh_HK' },
+    { id: 3, key: 3, label: '简体中文',  type: 'zh_CN' },
 ];

src/utils/CommonFunction.js

@@ -30,7 +30,19 @@ export function getObjectByValue(list, valueName, value) {
     const obj = list.find((element) => {
         return element[valueName] === parseInt(value);
     });
-    console.log(obj);
+    // console.log(obj);
+    return obj === undefined || Object.keys(obj).length <= 0 ? null : obj
+}
+
+export function getObjectByType(list, valueName, value) {
+    // console.log(list)
+    // console.log(valueName)
+    // console.log(value)
+    const obj = list.find((element) => {
+        // console.log(element[valueName])
+        return element[valueName] === value;
+    });
+    // console.log(obj);
     return obj === undefined || Object.keys(obj).length <= 0 ? null : obj
 }