diff --git a/src/pages/OrganizationDetailPage/OrganizationCard.js b/src/pages/OrganizationDetailPage/OrganizationCard.js index ca85a91..df5d58f 100644 --- a/src/pages/OrganizationDetailPage/OrganizationCard.js +++ b/src/pages/OrganizationDetailPage/OrganizationCard.js @@ -1,17 +1,16 @@ // material-ui import { - Grid, TextField, Typography, Button + Grid, Typography, Button } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import MainCard from "../../components/MainCard"; import * as React from "react"; -import {useForm} from "react-hook-form"; +import { useFormik } from 'formik'; +import * as yup from 'yup'; import {useEffect, useState} from "react"; -//import * as DateUtils from '../../utils/DateUtils'; import * as HttpUtils from '../../utils/HttpUtils'; import * as UrlUtils from "../../utils/ApiPathConst"; +import * as FieldUtils from "../../utils/FieldUtils"; +import * as ComboData from "../../utils/ComboData"; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -22,76 +21,66 @@ const OrganizationCard = ({userData, loadDataFun, id}) => { const [editMode, setEditMode] = useState(false); const [createMode, setCreateMode] = useState(false); - const from = useForm({defaultValues: userData}); - const {register,reset, handleSubmit} = from; + const formik = useFormik({ + enableReinitialize:true, + initialValues:currentUserData, + validationSchema:yup.object().shape({ + enCompanyName: yup.string().max(255).required('請輸入英文名稱'), + chCompanyName: yup.string().max(255).required('請輸入中文姓名'), + address1: yup.string().max(255).required('請輸入第一行地址'), + address2: yup.string().max(255).required('請輸入第二行地址'), + address3: yup.string().max(255).required('請輸入第三行地址'), + 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, + enCompanyName: vaule.enCompanyName, + chCompanyName: vaule.chCompanyName, + brNo: vaule.brNo, + brExpiryDate: vaule.brExpiryDate, + enCompanyNameTemp: vaule.enCompanyNameTemp, + chCompanyNameTemp: vaule.chCompanyNameTemp, + brExpiryDateTemp: vaule.brExpiryDateTemp, + contactPerson: vaule.contactPerson, + contactTel: { + countryCode: vaule.tel_countryCode, + phoneNumber: vaule.phoneNumber + }, + faxNo: { + countryCode: vaule.fax_countryCode, + faxNumber: vaule.faxNumber + }, + addressTemp: { + country: vaule.country, + district: vaule.district, + addressLine1: vaule.addressLine1, + addressLine2: vaule.addressLine2, + addressLine3: vaule.addressLine3, + } + }, + onSuccess: function(){ + loadDataFun(); + setEditMode(false); + } + }); + } + }); useEffect(() => { - if(id>0){ - userData["country"] = userData.addressTemp?.country; - userData["district"] = userData.addressTemp?.district; - userData["addressLine1"] = userData.addressTemp?.addressLine1; - userData["addressLine2"] = userData.addressTemp?.addressLine2; - userData["addressLine3"] = userData.addressTemp?.addressLine3; - - userData["phoneNumber"] = userData.contactTel?.phoneNumber; - userData["tel_countryCode"] = userData.contactTel?.countryCode; - - userData["faxNumber"] = userData.faxNo?.faxNumber; - userData["fax_countryCode"] = userData.faxNo?.countryCode; - - userData["brExpiryDate"] = userData.brExpiryDate?userData.brExpiryDate: ""; - userData["brExpiryDateTemp"] = userData.brExpiryDateTemp?userData.brExpiryDate: ""; - }else{ - setCreateMode(id==0); - setEditMode(id==0); - - userData["brExpiryDate"] = ""; - userData["brExpiryDateTemp"] = ""; - } - + setCreateMode(id<=0); + setEditMode(id<=0); setCurrentUserData(userData); }, [userData]); - useEffect(() => { - reset(currentUserData); - }, [currentUserData]); - - - function onSubmitForm(_formData) { - HttpUtils.post({ - url: UrlUtils.POST_ORG_SAVE_PATH, - params: { - id:id>0?id:null, - enCompanyName: _formData.enCompanyName, - chCompanyName: _formData.chCompanyName, - brNo: _formData.brNo, - brExpiryDate: _formData.brExpiryDate, - enCompanyNameTemp: _formData.enCompanyNameTemp, - chCompanyNameTemp: _formData.chCompanyNameTemp, - brExpiryDateTemp: _formData.brExpiryDateTemp, - contactPerson: _formData.contactPerson, - contactTel: { - countryCode: _formData.tel_countryCode, - phoneNumber: _formData.phoneNumber - }, - faxNo: { - countryCode: _formData.fax_countryCode, - faxNumber: _formData.faxNumber - }, - addressTemp: { - country: _formData.country, - district: _formData.district, - addressLine1: _formData.addressLine1, - addressLine2: _formData.addressLine2, - addressLine3: _formData.addressLine3, - } - }, - onSuccess: function(){ - loadDataFun(); - setEditMode(false); - } - }); - } const onEditClick = () => { setEditMode(true); @@ -106,310 +95,11 @@ const OrganizationCard = ({userData, loadDataFun, id}) => { Information -
- - - - - - - BR No.: - - - - - - - - - - - - - - Name (Eng): - - - - - - - - - - - - Name (Ch): - - - - - - - - - - - - Expiry Date: - - - - - - - - - - - - - - - - Temp Name (Eng): - - - - - - - - - - - - Temp Name (Ch): - - - - - - - - - - - - Temp Expiry Date: - - - - - - - - - - - - - - - Contact Person: - - - - - - - - - - - - Contact Tel: - - - - - - - - - - - - - - fax No: - - - - - - - - - - - - - - Country : - - - - - - - - - - - - District : - - - - - - - - - - - - Adress : - - - - - - - - - - - - - - - - - - - {/*bottom button*/} - - + + {/*top*/} + + {editMode? <> @@ -464,12 +154,87 @@ const OrganizationCard = ({userData, loadDataFun, id}) => { } - - - - + {/*top*/} + + + + + {FieldUtils.getTextField({ + label:"BR No.:", + valueName:"brNo", + disabled:(!editMode&&!createMode), + form: formik})} + + + + {FieldUtils.getTextField({ + label:"Name (Eng):", + valueName:"enCompanyName", + disabled:(!editMode&&!createMode), + form: formik})} + + {FieldUtils.getTextField({ + label:"Name (Ch):", + valueName:"chCompanyName", + disabled:(!editMode&&!createMode), + form: formik})} + + {FieldUtils.getDateField({ + label:"Expiry Date:", + valueName:"brExpiryDate", + disabled:(!editMode&&!createMode), + form: formik})} + + {FieldUtils.getTextField({ + label:"Contact Person:", + valueName:"contactPerson", + disabled:(!editMode&&!createMode), + form: formik})} + + {FieldUtils.getPhoneField({ + label:"Contact Tel:", + valueName:{ + code:"tel_countryCode", + num:"phoneNumber" + }, + disabled:(!editMode&&!createMode), + form: formik})} + + {FieldUtils.getPhoneField({ + label:"Fax No:", + valueName:{ + code:"fax_countryCode", + num:"faxNumber" + }, + disabled:(!editMode&&!createMode), + form: formik})} + + {FieldUtils.getComboField({ + label:"Country:", + valueName:"country", + disabled:(!editMode&&!createMode), + dataList: ComboData.country, + form: formik})} + + {FieldUtils.getComboField({ + label:"District:", + valueName:"district", + disabled:(!editMode&&!createMode), + dataList: ComboData.district, + form: formik})} + + + {FieldUtils.getAddressField({ + label:"Address:", + valueName:["addressLine1","addressLine2","addressLine3"], + disabled:(!editMode&&!createMode), + form: formik})} + + + + diff --git a/src/pages/OrganizationDetailPage/index.js b/src/pages/OrganizationDetailPage/index.js index 4edc913..f40b011 100644 --- a/src/pages/OrganizationDetailPage/index.js +++ b/src/pages/OrganizationDetailPage/index.js @@ -5,13 +5,12 @@ import * as React from "react"; import * as HttpUtils from "../../utils/HttpUtils"; import {useParams} from "react-router-dom"; import * as UrlUtils from "../../utils/ApiPathConst"; +import * as DateUtils from "../../utils/DateUtils"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; const InfoCard = Loadable(lazy(() => import('./OrganizationCard'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); -// import InfoCard from "./OrganizationCard"; -// import LoadingComponent from "../extra-pages/LoadingComponent"; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -34,6 +33,19 @@ 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["addressLine1"] = response.data.addressTemp?.addressLine1; + response.data["addressLine2"] = response.data.addressTemp?.addressLine2; + response.data["addressLine3"] = response.data.addressTemp?.addressLine3; + + response.data["phoneNumber"] = response.data.contactTel?.phoneNumber; + response.data["tel_countryCode"] = response.data.contactTel?.countryCode; + + response.data["faxNumber"] = response.data.faxNo?.faxNumber; + response.data["fax_countryCode"] = response.data.faxNo?.countryCode; + + response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): ""; setFormData(response.data) } }); diff --git a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js index 283bf5a..a5415c7 100644 --- a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js +++ b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js @@ -1,20 +1,22 @@ // material-ui import { - Grid, TextField, Typography, Button + Grid, Typography, Button } from '@mui/material'; import MainCard from "../../components/MainCard"; import * as React from "react"; +import * as yup from 'yup'; import {useEffect, useState} from "react"; -import * as DateUtils from '../../utils/DateUtils'; import * as HttpUtils from '../../utils/HttpUtils'; import * as UrlUtils from "../../utils/ApiPathConst"; +import * as FieldUtils from "../../utils/FieldUtils"; +import * as ComboData from "../../utils/ComboData"; import {useNavigate} from "react-router-dom"; import { useFormik } from 'formik'; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const OrganizationCard_loadFromUser = ({userData, id}) => { +const OrganizationCard_loadFromUser = ({userData}) => { const [currentUserData, setCurrentUserData] = useState(userData); @@ -23,6 +25,19 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { const formik = useFormik({ enableReinitialize:true, initialValues:currentUserData, + validationSchema:yup.object().shape({ + enCompanyName: yup.string().max(255).required('請輸入英文名稱'), + chCompanyName: yup.string().max(255).required('請輸入中文姓名'), + address1: yup.string().max(255).required('請輸入第一行地址'), + address2: yup.string().max(255).required('請輸入第二行地址'), + address3: yup.string().max(255).required('請輸入第三行地址'), + 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: values =>{ HttpUtils.post({ url: UrlUtils.POST_ORG_SAVE_PATH, @@ -60,37 +75,9 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { }); useEffect(() => { - if(id>0){ - userData["country"] = userData.addressTemp?.country; - userData["district"] = userData.addressTemp?.district; - userData["addressLine1"] = userData.addressTemp?.addressLine1; - userData["addressLine2"] = userData.addressTemp?.addressLine2; - userData["addressLine3"] = userData.addressTemp?.addressLine3; - - userData["phoneNumber"] = userData.contactTel?.phoneNumber; - userData["tel_countryCode"] = userData.contactTel?.countryCode; - - userData["faxNumber"] = userData.faxNo?.faxNumber; - userData["fax_countryCode"] = userData.faxNo?.countryCode; - - userData["brExpiryDate"] = userData.brExpiryDate?DateUtils.dateStr(userData.brExpiryDate): ""; - userData["brExpiryDateTemp"] = userData.brExpiryDateTemp?userData.brExpiryDate: ""; - }else{ - setCreateMode(id==0); - setEditMode(id==0); - - userData["brExpiryDate"] = ""; - userData["brExpiryDateTemp"] = ""; - } - setCurrentUserData(userData); }, [userData]); - useEffect(() => { - }, [currentUserData]); - - - return ( {
- {/*bottom top*/} + {/*top*/} @@ -122,140 +109,71 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { - {/*bottom top*/} + {/*top*/} + + {FieldUtils.getTextField({ + label:"BR No.:", + valueName:"brNo", + form: formik})} - {getTextField("BR No.:","brNo",formik)} - {getTextField("Name (Eng):","enCompanyName",formik)} - {getTextField("Name (Ch):","chCompanyName",formik)} - {getDateField("Expiry Date:","brExpiryDate",formik)} - {getTextField("Contact Person:","contactPerson",formik)} - {getPhoneField("Contact Tel:","tel_countryCode", "phoneNumber",formik)} - {getPhoneField("Fax No.:","fax_countryCode", "faxNumber",formik)} - {getTextField("Country:","country",formik)} - {getTextField("District :","district", formik)} - {getAddressField("Address:","addressLine1","addressLine2","addressLine3",formik)} + + {FieldUtils.getTextField({ + label:"Name (Eng):", + valueName:"enCompanyName", + form: formik})} + + {FieldUtils.getTextField({ + label:"Name (Ch):", + valueName:"chCompanyName", + form: formik})} + + {FieldUtils.getDateField({ + label:"Expiry Date:", + valueName:"brExpiryDate", + form: formik})} + + {FieldUtils.getTextField({ + label:"Contact Person:", + valueName:"contactPerson", + form: formik})} + + {FieldUtils.getPhoneField({ + label:"Contact Tel:", + valueName:{ + code:"tel_countryCode", + num:"phoneNumber" + }, + form: formik})} + + {FieldUtils.getPhoneField({ + label:"Fax No:", + valueName:{ + code:"fax_countryCode", + num:"faxNumber" + }, + form: formik})} + + {FieldUtils.getComboField({ + label:"Country:", + valueName:"country", + dataList: ComboData.country, + form: formik})} + + {FieldUtils.getComboField({ + label:"District:", + valueName:"district", + dataList: ComboData.district, + form: formik})} + + {FieldUtils.getAddressField({ + label:"Address:", + valueName:["addressLine1","addressLine2","addressLine3"], + form: formik})}
); }; -const getDateField=(label, key, form)=>{ - return - - - {label} - - - - - - ; -} - - -const getTextField=(label, key, form)=>{ - return - - - {label} - - - - - - ; -} - -const getPhoneField=(label, key, key2, form)=>{ - return - - - {label} - - - - - - - - -; -} - -const getAddressField=(label, key, key2, key3, form)=>{ - return - - - {label} - - - - - - - - - - - - - -; -} - export default OrganizationCard_loadFromUser; diff --git a/src/pages/OrganizationDetailPage_FromUser/index.js b/src/pages/OrganizationDetailPage_FromUser/index.js index b7fb411..3fc0f84 100644 --- a/src/pages/OrganizationDetailPage_FromUser/index.js +++ b/src/pages/OrganizationDetailPage_FromUser/index.js @@ -6,13 +6,12 @@ import * as HttpUtils from "../../utils/HttpUtils"; import {useParams} from "react-router-dom"; import {useNavigate} from "react-router-dom"; import * as UrlUtils from "../../utils/ApiPathConst"; +import * as DateUtils from "../../utils/DateUtils"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); -// import InfoCard from "./OrganizationCard_loadFromUser"; -// import LoadingComponent from "../extra-pages/LoadingComponent"; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -35,6 +34,19 @@ const OrganizationDetailPage_FromUser = () => { HttpUtils.get({ url: UrlUtils.GET_ORG_FROM_USER_PATH+"/"+params.id, onSuccess: function(response){ + response.data["country"] = response.data.addressTemp?.country; + response.data["district"] = response.data.addressTemp?.district; + response.data["addressLine1"] = response.data.addressTemp?.addressLine1; + response.data["addressLine2"] = response.data.addressTemp?.addressLine2; + response.data["addressLine3"] = response.data.addressTemp?.addressLine3; + + response.data["phoneNumber"] = response.data.contactTel?.phoneNumber; + response.data["tel_countryCode"] = response.data.contactTel?.countryCode; + + response.data["faxNumber"] = response.data.faxNo?.faxNumber; + response.data["fax_countryCode"] = response.data.faxNo?.countryCode; + + response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): ""; setFormData(response.data) } }); @@ -62,7 +74,6 @@ const OrganizationDetailPage_FromUser = () => { diff --git a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js index a686f87..d12cafe 100644 --- a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js +++ b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js @@ -1,17 +1,14 @@ // material-ui import { - Grid, TextField, Typography, Button, Autocomplete, Stack, FormHelperText, OutlinedInput + Grid, Typography, Button } from '@mui/material'; import MainCard from "../../components/MainCard"; import * as React from "react"; -import {useForm} from "react-hook-form"; import {useEffect, useState} from "react"; import * as yup from 'yup'; -//import Checkbox from "@mui/material/Checkbox"; -//import LoadingComponent from "../extra-pages/LoadingComponent"; -import { useFormik,FormikProvider } from 'formik'; -import * as DateUtils from '../../utils/DateUtils'; +import { useFormik } from 'formik'; +import * as FieldUtils from "../../utils/FieldUtils"; import * as HttpUtils from '../../utils/HttpUtils'; import * as UrlUtils from "../../utils/ApiPathConst"; import * as ComboData from "../../utils/ComboData"; @@ -22,25 +19,15 @@ import * as ComboData from "../../utils/ComboData"; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { +const UserInformationCard_Individual = ({formData,userFile, loadDataFun}) => { - const [currentUserData, setCurrentUserData] = useState(userData); + const [currentUserData, setCurrentUserData] = useState(formData); const [editMode, setEditMode] = useState(false); const [locked, setLocked] = useState(false); - const [idDocType, setIdDocType] = useState(null); - const [district, setDistrict] = useState(null); - const [country, setCountry] = useState(ComboData.country[0]); - - - const from = useForm({defaultValues: userData}); - const {register,reset, handleSubmit} = from; - - - - const formik = useFormik({ - initialValues:(currentUserData), + enableReinitialize:true, + initialValues:currentUserData, validationSchema:yup.object().shape({ enName: yup.string().max(255).required('請輸入英文姓名'), chName: yup.string().max(255).required('請輸入中文姓名'), @@ -54,87 +41,60 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { 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位數字'), + faxNumber: yup.string().min(8,'請輸入8位數字').required('請輸入8位數字'), }), + onSubmit:values=>{ + console.log(values); + HttpUtils.post({ + url: UrlUtils.POST_IND_USER+"/"+formData.id, + params: { + prefix: values.prefix, + enName: values.enName, + chName: values.chName, + idDocType: values.idDocType, + contactTel: { + countryCode: values.tel_countryCode, + phoneNumber: values.phoneNumber + }, + identification: values.identification, + checkDigit: values.checkDigit, + faxNo:{ + countryCode: values.fax_countryCode, + faxNumber: values.faxNumber + }, + emailAddress:values.emailAddress, + address:{ + country:values.country, + district:values.district, + addressLine1: values.addressLine1, + addressLine2: values.addressLine2, + addressLine3: values.addressLine3, + }, + }, + onSuccess: function(){ + loadDataFun(); + } + }); + } }); useEffect(() => { - let createDate = DateUtils.datetimeStr(userData.created); - let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy; - userData["createDate"] = createDate; - userData["modifieDate"] = modifiedBy; - userData["verifiedStatus"] = userData.verifiedBy? DateUtils.datetimeStr(userData.verifiedDate)+", "+userData.verifiedByName: "Not verify yet"; - - userData["country"] = userData.address?.country; - userData["district"] = userData.address?.district; - userData["addressLine1"] = userData.address?.addressLine1; - userData["addressLine2"] = userData.address?.addressLine2; - userData["addressLine3"] = userData.address?.addressLine3; - - userData["phoneNumber"] = userData.contactTel?.phoneNumber; - userData["tel_countryCode"] = userData.contactTel?.countryCode; - - userData["faxNumber"] = userData.faxNo?.faxNumber; - userData["fax_countryCode"] = userData.faxNo?.countryCode; - - userData["lastLoginDate"] = userData.lastLogin?DateUtils.datetimeStr(userData.lastLogin):""; - - setIdDocType(userData.idDocType); - setDistrict(userData.district); - setCountry(userData.country); - - setCurrentUserData(userData); - }, [userData]); + setCurrentUserData(formData); + }, [formData]); useEffect(() => { - reset(currentUserData); setLocked(currentUserData.locked); }, [currentUserData]); - - function onSubmitForm(_data) { - - HttpUtils.post({ - url: UrlUtils.POST_IND_USER+"/"+userData.id, - params: { - prefix: _data.prefix, - enName: formik.values.enName, - chName: _data.chName, - idDocType: idDocType, - contactTel: { - countryCode: _data.tel_countryCode, - phoneNumber: _data.phoneNumber - }, - identification: formik.values.identification, - checkDigit: formik.values.checkDigit, - faxNo:{ - countryCode: _data.fax_countryCode, - faxNumber: _data.faxNumber - }, - emailAddress:_data.emailAddress, - address:{ - country:country, - district:district, - addressLine1: _data.addressLine1, - addressLine2: _data.addressLine2, - addressLine3: _data.addressLine3, - }, - }, - onSuccess: function(){ - loadDataFun(); - } - }); - } - const onEditClick = () => { setEditMode(true); }; const onVerifiedClick = () => { HttpUtils.get({ - url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id, + url: UrlUtils.GET_IND_USER_VERIFY+"/"+formData.id, onSuccess: function(){ loadDataFun(); } @@ -143,7 +103,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { const doLock = () => { HttpUtils.get({ - url: UrlUtils.GET_USER_LOCK+"/"+userData.id, + url: UrlUtils.GET_USER_LOCK+"/"+formData.id, onSuccess: function(){ loadDataFun(); } @@ -152,7 +112,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { const doUnlock = () => { HttpUtils.get({ - url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id, + url: UrlUtils.GET_USER_UNLOCK+"/"+formData.id, onSuccess: function(){ loadDataFun(); } @@ -176,9 +136,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { Information - -
- + {/*top button*/} @@ -236,219 +194,90 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { {/*end top button*/} - + - - - - Username: - - - - - - - - - - - - English Name: - - - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {formik.touched.enName && formik.errors.enName && ( - - {formik.errors.enName} - - )} - - - - - - - - - Created Date: - - - - - - - - - - - - Prefix: - - - - - - - - - - - - Chinese Name: - - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {formik.touched.chName && formik.errors.chName && ( - - {formik.errors.chName} - - )} - - - - - - - - Last Updated: - - - - - - - - - - - - - ID Type: - - - - - - { - setIdDocType(newValue); - }} - sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - {formik.touched.idDocType && ( - idDocType===null? - - 請輸入證件類別 - :'' - )} - - - - - - - - - - - Contact Tel: - - - - - - - - - + {FieldUtils.getTextField({ + label:"Username:", + valueName:"username", + disabled:true, + form: formik + })} + + {FieldUtils.getTextField({ + label:"English Name:", + valueName:"enName", + disabled:(!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label:"Created Date:", + valueName:"createDate", + disabled:true, + form: formik + })} + + {FieldUtils.getTextField({ + label:"Prefix:", + valueName:"prefix", + disabled:(!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label:"Chinese Name:", + valueName:"chName", + disabled:(!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label:"Last Updated:", + valueName:"modifieDate", + disabled:true, + form: formik + })} + + {FieldUtils.getComboField({ + label:"ID Type:", + valueName:"idDocType", + disabled:(!editMode), + dataList: ComboData.idDocType, + filterOptions:(options) => options, + getOptionLabel:(item) => item?typeof item==='string'?item:(item["type"]?item["type"]+"-"+item["label"]:""):"", + // getOptionSelected: (option, value) => option.label === value.label, + // isOptionEqualToValue:(option, newValue) => { + // return option.type === newValue; + // }, + onInputChange:(event, newValue, setInputValue)=>{ + if(newValue == null){ + setInputValue(""); + } + let _val = newValue.split("-"); + if(_val[0]){ + setInputValue(_val[0]); + } + }, + onChange:(event, newValue)=>{ + if(newValue == null){ + formik.setFieldValue("idDocType",""); + return; + } + formik.setFieldValue("idDocType",newValue.type); + }, + form: formik + })} + + {FieldUtils.getPhoneField({ + label:"Contact Tel:", + valueName:{ + code: "tel_countryCode", + num:"phoneNumber" + }, + disabled:(!editMode), + form: formik + })} @@ -461,22 +290,20 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { { currentUserData.verifiedBy || editMode? - + {FieldUtils.initField({ + valueName:"verifiedStatus", + disabled:true, + form: formik, + })} : <> - + {FieldUtils.initField({ + valueName:"verifiedStatus", + disabled:true, + form: formik, + })} - - - - - - - - - Fax No.: - - - - - - - - - - - - Last Login: - + {FieldUtils.getPhoneField({ + label:"Fax No.:", + valueName:{ + code: "fax_countryCode", + num:"faxNumber" + }, + disabled:(!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label:"Last Login:", + valueName:"lastLoginDate", + disabled:true, + form: formik + })} + + {FieldUtils.getComboField({ + label:"Country:", + valueName:"country", + dataList: ComboData.country, + disabled:(!editMode), + form: formik + })} + + {FieldUtils.getTextField({ + label:"Email:", + valueName:"emailAddress", + disabled:(!editMode), + form: formik + })} - - - - - - - - - - - - Country: - - - - { - setCountry(newValue); - }} - - sx={{"& .MuiInputBase-root": { height: "41px" },"#country":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - - - - - - - - - - Email: - - - - - - - @@ -714,22 +417,20 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { { editMode? - + {FieldUtils.initField({ + valueName:"status", + disabled:true, + form: formik, + })} : <> - + {FieldUtils.initField({ + valueName:"status", + disabled:true, + form: formik, + })} {locked? @@ -764,84 +465,28 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { } } - - - + {FieldUtils.getAddressField({ + label:"Address:", + valueName:["addressLine1","addressLine2","addressLine3"], + disabled:(!editMode), + form: formik})} - - - - Address: - + {FieldUtils.getComboField({ + label:"District:", + valueName:"district", + dataList: ComboData.district, + disabled:(!editMode), + form: formik})} - - - - - - - - - - - District: - - - - { - setDistrict(newValue); - }} - disabled={!editMode} - sx={{"& .MuiInputBase-root": { height: "41px" },"#district":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - - - - -
); }; diff --git a/src/pages/pnspsUserDetailPage_Individual/index.js b/src/pages/pnspsUserDetailPage_Individual/index.js index 4b3660a..68922dd 100644 --- a/src/pages/pnspsUserDetailPage_Individual/index.js +++ b/src/pages/pnspsUserDetailPage_Individual/index.js @@ -6,6 +6,7 @@ import * as React from "react"; import * as HttpUtils from "../../utils/HttpUtils"; import {useParams} from "react-router-dom"; import * as UrlUtils from "../../utils/ApiPathConst"; +import * as DateUtils from '../../utils/DateUtils'; import Loadable from 'components/Loadable'; import { lazy } from 'react'; @@ -21,7 +22,7 @@ const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_In const UserMaintainPage_Individual = () => { const params = useParams(); - const [userData, setUserData] = useState({}) + const [formData, setFormData] = useState({}) const [userFile, setUserFile] = useState({}) const [isLoading, setLoding] = useState(true); @@ -38,7 +39,28 @@ const UserMaintainPage_Individual = () => { response.data["address"] = JSON.parse(response.data["address"]); response.data["contactTel"] = JSON.parse(response.data["contactTel"]); response.data["faxNo"] = JSON.parse(response.data["faxNo"]); - setUserData(response.data); + + let createDate = DateUtils.datetimeStr(response.data.created); + let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy; + response.data["createDate"] = createDate; + response.data["modifieDate"] = modifiedBy; + response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verify yet"; + + response.data["country"] = response.data.address?.country; + response.data["district"] = 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; + + response.data["phoneNumber"] = response.data.contactTel?.phoneNumber; + response.data["tel_countryCode"] = response.data.contactTel?.countryCode; + + response.data["faxNumber"] = response.data.faxNo?.faxNumber; + response.data["fax_countryCode"] = response.data.faxNo?.countryCode; + + response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLogin):""; + + setFormData(response.data); setUserFile(response.userFile) } }); @@ -47,7 +69,7 @@ const UserMaintainPage_Individual = () => { useEffect(() => { setLoding(false); - }, [userData]); + }, [formData]); return ( isLoading ? @@ -62,7 +84,7 @@ const UserMaintainPage_Individual = () => { diff --git a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js index c0d867c..5be8aa6 100644 --- a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js @@ -353,6 +353,7 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { + { + setInputValue(newValue); + if(onInputChange){ + onInputChange(event,newValue, setInputValue) + } + }} + onChange={(event, newValue) => { + setValue(newValue); + setInputValue(newValue); + if (!onChange){ + form.setFieldValue(valueName, newValue); + }else{ + onChange(event, newValue); + } + }} + sx={{"& .MuiInputBase-root": { height: "41px", padding: "0px 0px 0px 8px" }, + "& .MuiAutocomplete-endAdornment": { top: "auto" },}} + renderInput={(params) => } + /> + ); +} \ No newline at end of file diff --git a/src/utils/ComboData.js b/src/utils/ComboData.js index b02e450..fa1901d 100644 --- a/src/utils/ComboData.js +++ b/src/utils/ComboData.js @@ -7,6 +7,6 @@ export const idDocType = [ export const district = ['北區', '長洲區', '大埔區', '大嶼山區', '東區', '觀塘區', '黃大仙區', '九龍城區', '葵青區', '南區', '南丫島區', '坪洲區', '荃灣區', '沙田區', '深水埗區', '屯門區', '灣仔區', '西貢區', '油尖旺區', '元朗區', '中西區']; -export const country = ['中國香港', '中國', '中國澳門']; +export const country = ["香港","內地","澳門"]; 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/DateUtils.js b/src/utils/DateUtils.js index 8320e51..e9a5416 100644 --- a/src/utils/DateUtils.js +++ b/src/utils/DateUtils.js @@ -11,7 +11,6 @@ export const dateStr = (date) =>{ }; export const convertToDate = (date)=>{ - console.log(date); if(Array.isArray(date)){ if(date.length==3){ return new Date(date[0],date[1]-1,date[2],0,0,0); diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js new file mode 100644 index 0000000..5761fe9 --- /dev/null +++ b/src/utils/FieldUtils.js @@ -0,0 +1,200 @@ + +import { + Grid, TextField +} from '@mui/material'; + +import Combo from "./Combo"; + +export const getDateField=({label, valueName, form, disabled})=>{ + return + + + {label} + + + {initField({ + label:"date", + valueName:valueName, + form:form, + disabled:disabled + })} + + + ; +} + +export const getTextField=({label, valueName, form, disabled})=>{ + return + + + {label} + + + {initField({ + label:"text", + valueName:valueName, + form:form, + disabled:disabled + })} + + + ; +} + +export const getPhoneField=({label, valueName, form, disabled})=>{ + return + + + {label} + + + {initField({ + label:"tel", + valueName:valueName.code, + form:form, + disabled:disabled + })} + + + {initField({ + label:"tel", + valueName:valueName.num, + form:form, + disabled:disabled + })} + + +; +} + +export const getIdField=({label, valueName, form, disabled})=>{ + return + + + {label} + + + {initField({ + label:"text", + valueName:valueName.code, + form:form, + disabled:disabled + })} + + + {initField({ + label:"text", + valueName:valueName.num, + form:form, + disabled:disabled + })} + + +; +} + +export const getAddressField=({label, valueName, form, disabled})=>{ + return + + + {label} + + + + {initField({ + label:"text", + valueName:valueName[0], + form:form, + disabled:disabled + })} + + + {initField({ + label:"text", + valueName:valueName[1], + form:form, + disabled:disabled + })} + + + {initField({ + label:"text", + valueName:valueName[2], + form:form, + disabled:disabled + })} + + + +; +} + +export const getComboField=({label,dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props})=>{ + return + + + {label} + + + + {/* option?(displayField?option[displayField]:option):""} + onChange={(e, val) => { + console.log(val); + let v = val; + if(valueKey){ + v = val[valueKey]; + } + form.setFieldValue(key, v); + }} + renderInput={params => ( + + )} + /> */} + + + ; +} + +export const initField=({type, valueName, form, disabled, placeholder, inputProps})=>{ + let err = Boolean(form.errors[valueName]); + + return +} \ No newline at end of file