From bc0713dd0881c14a54f00c90708ed1f5a6e21d2d Mon Sep 17 00:00:00 2001 From: anna Date: Tue, 19 Sep 2023 14:49:59 +0800 Subject: [PATCH] fix bug --- .../OrganizationCard.js | 267 +++---- .../UserInformationCard_Individual.js | 2 +- .../UserInformationCard_Organization.js | 687 ++++++++++-------- 3 files changed, 515 insertions(+), 441 deletions(-) diff --git a/src/pages/OrganizationDetailPage/OrganizationCard.js b/src/pages/OrganizationDetailPage/OrganizationCard.js index b71639e..a6481a6 100644 --- a/src/pages/OrganizationDetailPage/OrganizationCard.js +++ b/src/pages/OrganizationDetailPage/OrganizationCard.js @@ -6,7 +6,7 @@ import MainCard from "../../components/MainCard"; import * as React from "react"; import { useFormik } from 'formik'; import * as yup from 'yup'; -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import * as HttpUtils from '../../utils/HttpUtils'; import * as UrlUtils from "../../utils/ApiPathConst"; import * as FieldUtils from "../../utils/FieldUtils"; @@ -15,34 +15,34 @@ import * as ComboData from "../../utils/ComboData"; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const OrganizationCard = ({userData, loadDataFun, id}) => { +const OrganizationCard = ({ userData, loadDataFun, id }) => { const [currentUserData, setCurrentUserData] = useState(userData); const [editMode, setEditMode] = useState(false); const [createMode, setCreateMode] = useState(false); const formik = useFormik({ - enableReinitialize:true, - initialValues:currentUserData, - validationSchema:yup.object().shape({ - enCompanyName: yup.string().max(255).required('請輸入英文名稱'), - chCompanyName: yup.string().max(255).required('請輸入中文姓名'), - addressLine1: yup.string().max(255).required('請輸入第一行地址'), - addressLine2: yup.string().max(255, "length must <= 255"), - addressLine3: yup.string().max(255, "length must <= 255"), - fax_countryCode: yup.string().min(3).required('請輸入國際區號'), - tel_countryCode: yup.string().min(3).required('請輸入國際區號'), - phoneNumber: yup.string().min(8).required('請輸入聯絡電話'), - faxNumber: yup.string().min(8).required('請輸入8位數字'), - brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'), - brNo: yup.string().min(8).required('請輸入商業登記證號碼'), - }), - onSubmit: vaule =>{ + enableReinitialize: true, + initialValues: currentUserData, + validationSchema: yup.object().shape({ + enCompanyName: yup.string().max(255).required('請輸入英文名稱'), + chCompanyName: yup.string().max(255).required('請輸入中文姓名'), + addressLine1: yup.string().max(255).required('請輸入第一行地址'), + addressLine2: yup.string().max(255, "length must <= 255"), + addressLine3: yup.string().max(255, "length must <= 255"), + fax_countryCode: yup.string().min(3).required('請輸入國際區號'), + tel_countryCode: yup.string().min(3).required('請輸入國際區號'), + phoneNumber: yup.string().min(8).required('請輸入聯絡電話'), + faxNumber: yup.string().min(8).required('請輸入8位數字'), + brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'), + brNo: yup.string().min(8).required('請輸入商業登記證號碼'), + }), + onSubmit: vaule => { console.log(vaule) HttpUtils.post({ url: UrlUtils.POST_ORG_SAVE_PATH, params: { - id:id>0?id:null, + id: id > 0 ? id : null, enCompanyName: vaule.enCompanyName, chCompanyName: vaule.chCompanyName, brNo: vaule.brNo, @@ -64,10 +64,10 @@ const OrganizationCard = ({userData, loadDataFun, id}) => { district: vaule.district, addressLine1: vaule.addressLine1, addressLine2: vaule.addressLine2, - addressLine3: vaule.addressLine3, + addressLine3: vaule.addressLine3, } }, - onSuccess: function(){ + onSuccess: function () { loadDataFun(); setEditMode(false); } @@ -76,8 +76,8 @@ const OrganizationCard = ({userData, loadDataFun, id}) => { }); useEffect(() => { - setCreateMode(id<=0); - setEditMode(id<=0); + setCreateMode(id <= 0); + setEditMode(id <= 0); setCurrentUserData(userData); }, [userData]); @@ -87,59 +87,72 @@ const OrganizationCard = ({userData, loadDataFun, id}) => { }; return ( - - - Information - - -
- - {/*top*/} - + + + Information + + + + + {/*top*/} + - {editMode? - <> - {createMode? - <> - - - - : + {editMode ? <> - - - - - } + {createMode ? + <> + + + + : + <> + + + + + + + + } - : - <> - + : + <> + - - } + + } {/*top*/} - + {FieldUtils.getTextField({ - label:"BR No.:", - valueName:"brNo", - disabled:(!editMode&&!createMode), - form: formik})} + label: "BR No.:", + valueName: "brNo", + disabled: (!editMode && !createMode), + form: formik + })} {FieldUtils.getTextField({ - label:"Name (Eng):", - valueName:"enCompanyName", - disabled:(!editMode&&!createMode), - form: formik})} + label: "Name (Eng):", + valueName: "enCompanyName", + disabled: (!editMode && !createMode), + form: formik + })} {FieldUtils.getTextField({ - label:"Name (Ch):", - valueName:"chCompanyName", - disabled:(!editMode&&!createMode), - form: formik})} + label: "Name (Ch):", + valueName: "chCompanyName", + disabled: (!editMode && !createMode), + form: formik + })} {FieldUtils.getDateField({ - label:"Expiry Date:", - valueName:"brExpiryDate", - disabled:(!editMode&&!createMode), - form: formik})} + label: "Expiry Date:", + valueName: "brExpiryDate", + disabled: (!editMode && !createMode), + form: formik + })} {FieldUtils.getTextField({ - label:"Contact Person:", - valueName:"contactPerson", - disabled:(!editMode&&!createMode), - form: formik})} + label: "Contact Person:", + valueName: "contactPerson", + disabled: (!editMode && !createMode), + form: formik + })} {FieldUtils.getPhoneField({ - label:"Contact Tel:", - valueName:{ - code:"tel_countryCode", - num:"phoneNumber" + label: "Contact Tel:", + valueName: { + code: "tel_countryCode", + num: "phoneNumber" }, - disabled:(!editMode&&!createMode), - form: formik})} + disabled: (!editMode && !createMode), + form: formik + })} {FieldUtils.getPhoneField({ - label:"Fax No:", - valueName:{ - code:"fax_countryCode", - num:"faxNumber" + label: "Fax No:", + valueName: { + code: "fax_countryCode", + num: "faxNumber" }, - disabled:(!editMode&&!createMode), - form: formik})} + disabled: (!editMode && !createMode), + form: formik + })} {FieldUtils.getComboField({ - label:"Country:", - valueName:"country", - disabled:(!editMode&&!createMode), + label: "Country:", + valueName: "country", + disabled: (!editMode && !createMode), dataList: ComboData.country, - form: formik})} + form: formik + })} {FieldUtils.getComboField({ - label:"District:", - valueName:"district", - disabled:(!editMode&&!createMode), + label: "District:", + valueName: "district", + disabled: (!editMode && !createMode), dataList: ComboData.district, - form: formik})} + form: formik + })} {FieldUtils.getAddressField({ - label:"Address:", - valueName:["addressLine1","addressLine2","addressLine3"], - disabled:(!editMode&&!createMode), - form: formik})} + label: "Address:", + valueName: ["addressLine1", "addressLine2", "addressLine3"], + disabled: (!editMode && !createMode), + form: formik + })} - + - - + +
); }; diff --git a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js index 8754b54..df20eb4 100644 --- a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js +++ b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js @@ -143,7 +143,7 @@ const UserInformationCard_Individual = ({formData, loadDataFun}) => { alignItems: 'end' }} > - Cancel Edit + Reset & Back diff --git a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js index 9940827..cdb70ec 100644 --- a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js @@ -1,10 +1,10 @@ // material-ui import { Grid, Typography, Button, + Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'; import MainCard from "../../components/MainCard"; import * as React from "react"; -import {useEffect, useState} from "react"; import * as FieldUtils from "../../utils/FieldUtils"; import * as HttpUtils from '../../utils/HttpUtils'; @@ -17,15 +17,20 @@ import * as yup from 'yup'; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => { +const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => { + + const [currentUserData, setCurrentUserData] = React.useState(userData); + const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); + const [warningText, setWarningText] = React.useState(""); + const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false); + const [confirmText, setConfirmText] = React.useState(""); + const [confirmAction, setConfirmAction] = React.useState(); + const [editMode, setEditMode] = React.useState(false); - const [currentUserData, setCurrentUserData] = useState(userData); - const [editMode, setEditMode] = useState(false); - const formik = useFormik({ - enableReinitialize:true, - initialValues:currentUserData, - validationSchema:yup.object().shape({ + enableReinitialize: true, + initialValues: currentUserData, + validationSchema: yup.object().shape({ contactPerson: yup.string().max(255).required('請輸入姓名'), enCompanyName: yup.string().max(255), chCompanyName: yup.string().max(255), @@ -33,16 +38,16 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => { addressLine2: yup.string().max(255), addressLine3: yup.string().max(255), emailBus: yup.string().max(255).required('請輸入電郵'), - tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'), - fax_countryCode: yup.string().min(3,'請輸入3位數字'), - phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'), - faxNumber: yup.string().min(8,'請輸入8位數字'), - brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'), - brNo: yup.string().min(8,'請輸入商業登記證號碼'), + tel_countryCode: yup.string().min(3, '請輸入3位數字').required('請輸入國際區號'), + fax_countryCode: yup.string().min(3, '請輸入3位數字'), + phoneNumber: yup.string().min(8, '請輸入8位數字').required('請輸入聯絡電話'), + faxNumber: yup.string().min(8, '請輸入8位數字'), + brExpiryDate: yup.string().min(8, '請輸入商業登記證有效日期'), + brNo: yup.string().min(8, '請輸入商業登記證號碼'), }), - onSubmit:(values)=>{ + onSubmit: (values) => { HttpUtils.post({ - url: UrlUtils.POST_IND_USER+"/"+userData.id, + url: UrlUtils.POST_IND_USER + "/" + userData.id, params: { contactTel: { countryCode: values.tel_countryCode, @@ -60,25 +65,25 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => { addressLine3: values.addressLine3, }, identification: values.identification, - emailBus:values.emailBus, + emailBus: values.emailBus, contactPerson: values.contactPerson, enCompanyName: values.enCompanyName, chCompanyName: values.chCompanyName, orgId: values.orgId, brNo: values.brNo, brExpiryDate: values.brExpiryDate, - + }, - onSuccess: function(){ + onSuccess: function () { loadDataFun(); } }); } - + }); - useEffect(() => { + React.useEffect(() => { setCurrentUserData(userData); }, [userData]); @@ -87,197 +92,216 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => { }; const createOrgClick = () => { - window.open("/org/fromUser/"+userData.id, "_blank", "noreferrer"); + window.open("/org/fromUser/" + userData.id, "_blank", "noreferrer"); window.addEventListener("focus", onFocus) }; - - const onFocus=()=>{ + + const onFocus = () => { loadDataFun(); window.removeEventListener("focus", onFocus) } const onVerifiedClick = () => { - HttpUtils.get({ - url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id, - onSuccess: function(){ - loadDataFun(); - } - }); + if (formik?.values?.orgId) { + HttpUtils.get({ + url: UrlUtils.GET_IND_USER_VERIFY + "/" + userData.id, + onSuccess: function () { + loadDataFun(); + } + }); + } else { + setWarningText("Please select Organization before active this account.") + setIsWarningPopUp(true); + } + }; const doLock = () => { - HttpUtils.get({ - url: UrlUtils.GET_USER_LOCK+"/"+userData.id, - onSuccess: function(){ - loadDataFun(); + setConfirmText("Confirm to Lock this Account?"); + setConfirmAction({ + function: function(){ + HttpUtils.get({ + url: UrlUtils.GET_USER_LOCK + "/" + userData.id, + onSuccess: function () { + loadDataFun(); + } + }); } - }); + }); + setIsConfirmPopUp(true); }; const doUnlock = () => { - HttpUtils.get({ - url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id, - onSuccess: function(){ - loadDataFun(); + setConfirmText("Confirm to Un-Lock this Account?"); + + setConfirmAction({ + function:function(){ + HttpUtils.get({ + url: UrlUtils.GET_USER_UNLOCK + "/" + userData.id, + onSuccess: function () { + loadDataFun(); + } + }); } - }); + }); + setIsConfirmPopUp(true); }; - + return ( - - - Information - + + + Information + + - -
+ {/*top button*/} - + - - {editMode? - <> - - - - - - - - - : - <> - - - - - - } - - + + {editMode ? + <> + + + + + + + + + : + <> + + + + + + } + + - {/*end top button*/} - - {FieldUtils.getTextField({ - label:"Username:", - valueName:"username", - disabled:true, - form: formik - })} - - {FieldUtils.getTextField({ - label:"Name:", - valueName:"contactPerson", - disabled:(!editMode), - form: formik - })} - - {FieldUtils.getTextField({ - label:"Created Date:", - valueName:"createDate", - disabled:true, - form: formik - })} - - - {FieldUtils.getTextField({ - label:"Email:", - valueName:"emailBus", - disabled:(!editMode), + {/*end top button*/} + + {FieldUtils.getTextField({ + label: "Username:", + valueName: "username", + disabled: true, form: formik })} - {FieldUtils.getPhoneField({ - label:"Contact Tel:", - valueName:{ - code: "tel_countryCode", - num:"phoneNumber" - }, - disabled:(!editMode), - form: formik - })} + {FieldUtils.getTextField({ + label: "Name:", + valueName: "contactPerson", + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label: "Created Date:", + valueName: "createDate", + disabled: true, + form: formik + })} - {FieldUtils.getTextField({ - label:"Last Updated:", - valueName:"modifieDate", - disabled:true, - form: formik - })} + + {FieldUtils.getTextField({ + label: "Email:", + valueName: "emailBus", + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getPhoneField({ + label: "Contact Tel:", + valueName: { + code: "tel_countryCode", + num: "phoneNumber" + }, + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label: "Last Updated:", + valueName: "modifieDate", + disabled: true, + form: formik + })} {FieldUtils.getComboField({ - label:"Organization:", - valueName:"orgId", - disabled:(!editMode), + label: "Organization:", + valueName: "orgId", + disabled: (!editMode), dataList: orgData, - filterOptions:(options, state)=>{ - if(!state || !state.inputValue) return options; + filterOptions: (options, state) => { + if (!state || !state.inputValue) return options; let searchStr = state.inputValue.toLowerCase().toLowerCase().trim(); - const displayOptions = options.filter((option) =>{ - let brNo=option.brNo.toLowerCase().trim(); - let enCompanyName=option.enCompanyName?option.enCompanyName.toLowerCase().trim():""; - let chCompanyName=option.chCompanyName?option.chCompanyName.toLowerCase().trim():""; - return brNo.includes(searchStr) || enCompanyName.includes(searchStr)|| chCompanyName.includes(searchStr); + const displayOptions = options.filter((option) => { + let brNo = option.brNo.toLowerCase().trim(); + let enCompanyName = option.enCompanyName ? option.enCompanyName.toLowerCase().trim() : ""; + let chCompanyName = option.chCompanyName ? option.chCompanyName.toLowerCase().trim() : ""; + return brNo.includes(searchStr) || enCompanyName.includes(searchStr) || chCompanyName.includes(searchStr); }, - ); - return displayOptions; + ); + return displayOptions; }, - getOptionLabel:(item) => item?typeof item==='number'?item+"":(item["brNo"]?item["brNo"]+"-"+item["enCompanyName"]:""):"", - isOptionEqualToValue:(option, newValue, setValue, setInputValue) => { - if(option.id == newValue){ + getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? item["brNo"] + "-" + item["enCompanyName"] : "") : "", + isOptionEqualToValue: (option, newValue, setValue, setInputValue) => { + if (option.id == newValue) { setValue(option); - setInputValue(option["brNo"]+"-"+option["enCompanyName"]); + setInputValue(option["brNo"] + "-" + option["enCompanyName"]); return true; } return option == newValue; }, - onInputChange:(event, newValue, setInputValue)=>{ - if(newValue != null){ + onInputChange: (event, newValue, setInputValue) => { + if (newValue != null) { setInputValue(newValue); } }, - onChange:(event, newValue)=>{ - if(newValue == null){ - formik.setFieldValue("orgId",""); + onChange: (event, newValue) => { + if (newValue == null) { + formik.setFieldValue("orgId", ""); return; } - formik.setFieldValue("orgId",newValue.id); + formik.setFieldValue("orgId", newValue.id); }, form: formik })} @@ -285,29 +309,29 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => { - - - - Verified: - + + + + Verified: + + - - { - currentUserData.verifiedBy || editMode? + { + currentUserData.verifiedBy || editMode ? {FieldUtils.initField({ - valueName:"verifiedStatus", - disabled:true, - form: formik, - })} + valueName: "verifiedStatus", + disabled: true, + form: formik, + })} : <> {FieldUtils.initField({ - valueName:"verifiedStatus", - disabled:true, + valueName: "verifiedStatus", + disabled: true, form: formik, })} @@ -319,176 +343,203 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => { textTransform: 'capitalize', alignItems: 'end' }} - onClick={onVerifiedClick} + onClick={()=>{onVerifiedClick()}} > Verify - } - - + } + + - {FieldUtils.getTextField({ - label:"Last Login:", - valueName:"lastLoginDate", - disabled:true, + {FieldUtils.getTextField({ + label: "Last Login:", + valueName: "lastLoginDate", + disabled: true, form: formik })} - - - - - - - Status: - - { - editMode? - - {FieldUtils.initField({ - valueName:"status", - disabled:true, - form: formik, - })} - - : - <> - + + + + + + Status: + + { + editMode ? + {FieldUtils.initField({ - valueName:"status", - disabled:true, + valueName: "status", + disabled: true, + form: formik, + })} + + : + <> + + + {FieldUtils.initField({ + valueName: "status", + disabled: true, form: formik, })} - - {formik.values.locked? - - - - : - - - + + {formik.values.locked ? + + + + : + + + } - - } - + + } + - + - - - - Organization - - + + + + Organization + + - + - + - {FieldUtils.getTextField({ - label:"Org.Name (English):", - valueName:"enCompanyName", - disabled:(!editMode), - form: formik - })} - - {FieldUtils.getTextField({ - label:"Org.Name (Chinese):", - valueName:"chCompanyName", - disabled:(!editMode), - form: formik - })} - - {FieldUtils.getTextField({ - label:"BR No.:", - valueName:"brNo", - disabled:(!editMode), - form: formik - })} - - {FieldUtils.getComboField({ - label:"Country:", - valueName:"country", - dataList: ComboData.country, - disabled:(!editMode), - form: formik - })} - - {FieldUtils.getPhoneField({ - label:"Fax No.:", - valueName:{ - code: "fax_countryCode", - num:"faxNumber" - }, - disabled:(!editMode), - form: formik - })} - - {FieldUtils.getDateField({ - label:"BR Expiry Date.:", - valueName:"brExpiryDate", - disabled:(!editMode), - form: formik - })} - - {FieldUtils.getAddressField({ - label:"Address:", - valueName:["addressLine1","addressLine2","addressLine3"], - disabled:(!editMode), - form: formik})} - - {FieldUtils.getComboField({ - label:"District:", - valueName:"district", - dataList: ComboData.district, - disabled:(!editMode), - form: formik})} + {FieldUtils.getTextField({ + label: "Org.Name (English):", + valueName: "enCompanyName", + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label: "Org.Name (Chinese):", + valueName: "chCompanyName", + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label: "BR No.:", + valueName: "brNo", + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getComboField({ + label: "Country:", + valueName: "country", + dataList: ComboData.country, + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getPhoneField({ + label: "Fax No.:", + valueName: { + code: "fax_countryCode", + num: "faxNumber" + }, + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getDateField({ + label: "BR Expiry Date.:", + valueName: "brExpiryDate", + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getAddressField({ + label: "Address:", + valueName: ["addressLine1", "addressLine2", "addressLine3"], + disabled: (!editMode), + form: formik + })} + + {FieldUtils.getComboField({ + label: "District:", + valueName: "district", + dataList: ComboData.district, + disabled: (!editMode), + form: formik + })} - - -
+ + + +
+ setIsWarningPopUp(false)} > + Warning + + {warningText} + + + + + +
+
+ setIsConfirmPopUp(false)} > + Confirm + + {confirmText} + + + + + + +
+ + ); };