diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 79d08d8..bebbd05 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -39,6 +39,8 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; import { Link } from 'react-router-dom'; + +import * as ComboData from "../../../utils/ComboData"; // ============================|| FIREBASE - REGISTER ||============================ // const CustomFormWizard = (props) => { @@ -68,16 +70,14 @@ const CustomFormWizard = (props) => { const [selectedIdDocType, setSelectedIdDocType] = useState(null); const [selectedAddress4, setSelectedAddress4] = useState(null); - const [selectedAddress5, setSelectedAddress5] = useState("香港"); + const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]); const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [isValid, setisValid] = useState(false); - const idDocTypeComboList = ["passport","HKID","CNID","BR","otherCert"]; - const address4ComboList = - ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", - "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; - const address5ComboList = ["香港","內地","澳門"]; + const idDocTypeComboList = ComboData.idDocType; + const address4ComboList = ComboData.district; + const address5ComboList = ComboData.country; const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評" diff --git a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js index fe35a9b..11ac6cc 100644 --- a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js +++ b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js @@ -1,16 +1,20 @@ // material-ui import { - Grid, TextField, Typography, Button + Grid, TextField, Typography, Button, Autocomplete, Stack, FormHelperText, OutlinedInput } 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 * as HttpUtils from '../../utils/HttpUtils'; import * as UrlUtils from "../../utils/ApiPathConst"; +import * as ComboData from "../../utils/ComboData"; //import axios from 'axios'; //import {useParams} from "react-router-dom"; @@ -24,28 +28,60 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { 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), + validationSchema:yup.object().shape({ + enName: yup.string().max(255).required('請輸入英文姓名'), + chName: yup.string().max(255).required('請輸入中文姓名'), + addressLine1: yup.string().max(255).required('請輸入第一行地址'), + addressLine2: yup.string().max(255).required('請輸入第二行地址'), + addressLine3: yup.string().max(255).required('請輸入第三行地址'), + emailAddress: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'), + identification: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'), + checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'), + idDocType: 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位數字'), + }), + }); + + + useEffect(() => { let createDate = DateUtils.datetimeStr(userData.created); let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy; userData["createDate"] = createDate; userData["modifieDate"] = modifiedBy; - userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified"; + 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["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; + + setIdDocType(userData.idDocType); + setDistrict(userData.district); + setCountry(userData.country); setCurrentUserData(userData); }, [userData]); @@ -56,29 +92,31 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { }, [currentUserData]); - function onSubmitForm(_formData) { + function onSubmitForm() { HttpUtils.post({ url: UrlUtils.POST_IND_USER+"/"+userData.id, params: { - prefix: _formData.prefix, - enName: _formData.enName, - chName: _formData.chName, - idDocType: _formData.idDocType, + prefix: formik.values.prefix, + enName: formik.values.enName, + chName: formik.values.chName, + idDocType: idDocType, contactTel: { - countryCode: _formData.tel_countryCode, - phoneNumber: _formData.phoneNumber + countryCode: formik.values.tel_countryCode, + phoneNumber: formik.values.phoneNumber }, - identification: _formData.identification, + identification: formik.values.identification, + checkDigit: formik.values.checkDigit, faxNo:{ - countryCode: _formData.fax_countryCode, - faxNumber: _formData.faxNumber + countryCode: formik.values.fax_countryCode, + faxNumber: formik.values.faxNumber }, - emailAddress:_formData.emailAddress, + emailAddress:formik.values.emailAddress, address:{ - country:_formData.country, - addressLine1: _formData.addressLine1, - addressLine2: _formData.addressLine2, - addressLine3: _formData.addressLine3, + country:country, + district:district, + addressLine1: formik.values.addressLine1, + addressLine2: formik.values.addressLine2, + addressLine3: formik.values.addressLine3, }, }, onSuccess: function(){ @@ -93,7 +131,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { const onVerifiedClick = () => { HttpUtils.get({ - url: UrlUtils.GET_IND_USER_VERIFY+"/"+id, + url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id, onSuccess: function(){ loadDataFun(); } @@ -135,7 +173,66 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { Information +
+ + + {/*top button*/} + + + + {editMode? + <> + + + + + + + + + : + <> + + + + + } + + + + {/*end top button*/} @@ -164,12 +261,33 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { - + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.enName && formik.errors.enName && ( + + {formik.errors.enName} + + )} + @@ -218,12 +336,30 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { - + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.chName && formik.errors.chName && ( + + {formik.errors.chName} + + )} @@ -255,12 +391,32 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { - + + + { + setIdDocType(newValue); + }} + sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} + renderInput={(params) => } + /> + {formik.touched.idDocType && ( + idDocType===null? + + 請輸入證件類別 + :'' + )} + + + @@ -300,7 +456,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { { - currentUserData.verified || editMode? + currentUserData.verifiedBy || editMode? { }} onClick={onVerifiedClick} > - Verified + Verify @@ -346,17 +502,109 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { ID No.: - - - + + + {idDocType =="HKID"? + <> + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.identification && formik.errors.identification && ( + + {formik.errors.identification} + + )} + {formik.touched.checkDigit && formik.errors.checkDigit && ( + + {formik.errors.checkDigit} + + )} + + + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + fullWidth + error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)} + onBlur={formik.handleBlur} + /> + + + : + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.identification && formik.errors.identification && ( + + {formik.errors.identification} + + )} + + + } + + + + + @@ -417,13 +665,24 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { - { + setCountry(newValue); + }} + + sx={{"& .MuiInputBase-root": { height: "41px" },"#country":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} + renderInput={(params) => } /> + + @@ -452,20 +711,68 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { Status: - - - + { + editMode? + + + + : + <> + + + + {locked? + + + + : + + + + } + + } + + + - + Address: @@ -502,97 +809,39 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { + + + + District: + - - - {/*bottom button*/} - - - - {editMode? - <> - - - - - - - - : - <> - {locked? - - - - : - - - - } - - + + { + 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 ccf4567..e2927bd 100644 --- a/src/pages/pnspsUserDetailPage_Individual/index.js +++ b/src/pages/pnspsUserDetailPage_Individual/index.js @@ -29,6 +29,9 @@ const UserMaintainPage_Individual = () => { HttpUtils.get({ url: `${UrlUtils.GET_IND_USER_PATH}/${params.id}`, onSuccess: function(response){ + 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); setUserFile(response.userFile) } diff --git a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js index e3ba146..5ea7a8f 100644 --- a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js @@ -28,13 +28,13 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy; userData["createDate"] = createDate; userData["modifieDate"] = modifiedBy; - userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified"; + userData["verifiedStatus"] = userData.verifiedBy? "Not verify yet":DateUtils.datetimeStr(userData.verifiedDate)+", "+userData.verifiedByName; 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["addressLine3"] = userData.address?.addressLine3; userData["phoneNumber"] = userData.contactTel?.phoneNumber; userData["tel_countryCode"] = userData.contactTel?.countryCode; @@ -55,14 +55,25 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { HttpUtils.post({ url: UrlUtils.POST_IND_USER+"/"+userData.id, params: { - name: _formData.name, - prefix: _formData.prefix, + chName: _formData.chName, + enName: _formData.enName, contactTel: { countryCode: _formData.tel_countryCode, phoneNumber: _formData.phoneNumber }, + faxNo: { + countryCode: _formData.fax_countryCode, + faxNumber: _formData.faxNumber + }, + addressBus: { + country: _formData.country, + district: _formData.district, + addressLine1: _formData.addressLine1, + addressLine2: _formData.addressLine2, + addressLine3: _formData.addressLine3, + }, identification: _formData.identification, - emailAddress:_formData.emailAddress, + emailBus:_formData.emailBus, }, onSuccess: function(){ loadDataFun(); @@ -130,14 +141,14 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { - Name: + English Name: @@ -166,14 +177,14 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { - Prefix: + Chinese Name: @@ -513,6 +524,23 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { + + + + Contact Person: + + + + + + + @@ -524,86 +552,114 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { - + - Contact Tel: + BR Expiry Date.: - + + - + + + + + + + Address : + + + + + - - - + - Email: + District: - - BR Expiry Date.: + Country: - diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index cab39b6..8d60ee9 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -15,7 +15,7 @@ export const GET_USER_LOCK = apiPath+'/user/lock'; export const GET_USER_UNLOCK = apiPath+'/user/unlock'; export const GET_IND_USER_PATH = apiPath+'/user/ind'; -export const GET_IND_USER_VERIFY = apiPath+'/user/ind/verify'; +export const GET_IND_USER_VERIFY = apiPath+'/user/verify'; export const POST_IND_USER = apiPath+'/user/ind'; export const GET_ORG_USER_PATH = apiPath+'/user/org'; diff --git a/src/utils/ComboData.js b/src/utils/ComboData.js new file mode 100644 index 0000000..a3d50ed --- /dev/null +++ b/src/utils/ComboData.js @@ -0,0 +1,32 @@ +import * as yup from 'yup'; + +export const idDocType = ["passport","HKID","CNID","BR","otherCert"]; +export const district = ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", +"坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; +export const country = ["香港","內地","澳門"]; + +export const validationSchema = ()=>{ + return yup.object().shape({ + username: yup.string().min(8,"用戶名稱最少8位").required('請輸入用戶名稱'), + password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼') + .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') + .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') + .matches(/^(?=.*[0-9])/, '請包括最少1個數字') + .matches(/^(?=.*[!@#%&])/, '請包括最少1個特殊字符'), + confirmPassword: yup.string().min(8,'請最少輸入8位密碼').required('請確認密碼').oneOf([yup.ref('password'), null], '請輸入相同密碼'), + enName: yup.string().max(255).required('請輸入英文姓名'), + chName: yup.string().max(255).required('請輸入中文姓名'), + address1: yup.string().max(255).required('請輸入第一行地址'), + address2: yup.string().max(255).required('請輸入第二行地址'), + address3: yup.string().max(255).required('請輸入第三行地址'), + email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'), + emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'), + idNo: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'), + checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'), + idDocType: yup.string().max(255).required('請輸入證件類別'), + phoneCountryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'), + faxCountryCode: yup.string().min(3,'請輸入3位數字'), + phone: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'), + fax: yup.string().min(8,'請輸入8位數字'), + }); +} \ No newline at end of file