diff --git a/src/pages/OrganizationDetailPage/OrganizationCard.js b/src/pages/OrganizationDetailPage/OrganizationCard.js index df5d58f..b71639e 100644 --- a/src/pages/OrganizationDetailPage/OrganizationCard.js +++ b/src/pages/OrganizationDetailPage/OrganizationCard.js @@ -24,19 +24,19 @@ const OrganizationCard = ({userData, loadDataFun, 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('請輸入商業登記證號碼'), - }), + 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({ diff --git a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js index a5415c7..1950021 100644 --- a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js +++ b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js @@ -16,7 +16,7 @@ import { useFormik } from 'formik'; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const OrganizationCard_loadFromUser = ({userData}) => { +const OrganizationCard_loadFromUser = ({userData,userId}) => { const [currentUserData, setCurrentUserData] = useState(userData); @@ -26,15 +26,15 @@ const OrganizationCard_loadFromUser = ({userData}) => { 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('請輸入國際區號'), + enCompanyName: yup.string().max(255,"請輸入英文名稱"), + chCompanyName: yup.string().max(255,'請輸入中文名稱'), + addressLine1: yup.string().max(255).required('請輸入第一行地址'), + addressLine2: yup.string().max(255), + addressLine3: yup.string().max(255), + fax_countryCode: yup.string().min(3,"請輸入國際區號"), + tel_countryCode: yup.string().min(3,"請輸入國際區號"), phoneNumber: yup.string().min(8).required('請輸入聯絡電話'), - faxNumber: yup.string().min(8).required('請輸入8位數字'), + faxNumber: yup.string().min(8), brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'), brNo: yup.string().min(8).required('請輸入商業登記證號碼'), }), @@ -43,6 +43,7 @@ const OrganizationCard_loadFromUser = ({userData}) => { url: UrlUtils.POST_ORG_SAVE_PATH, params: { id:null, + primaryUserId:userId, enCompanyName: values.enCompanyName, chCompanyName: values.chCompanyName, brNo: values.brNo, @@ -87,6 +88,17 @@ const OrganizationCard_loadFromUser = ({userData}) => { Information + + {/*
+ TODO: Error Summary + {Object.values(formik.errors).map(error => ( +
{error}
+ ))} +
*/} + + + +
diff --git a/src/pages/OrganizationDetailPage_FromUser/index.js b/src/pages/OrganizationDetailPage_FromUser/index.js index 3fc0f84..a7784f3 100644 --- a/src/pages/OrganizationDetailPage_FromUser/index.js +++ b/src/pages/OrganizationDetailPage_FromUser/index.js @@ -74,6 +74,7 @@ const OrganizationDetailPage_FromUser = () => { diff --git a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js index d12cafe..7e2c9ff 100644 --- a/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js +++ b/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js @@ -12,9 +12,6 @@ import * as FieldUtils from "../../utils/FieldUtils"; 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"; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -32,8 +29,8 @@ const UserInformationCard_Individual = ({formData,userFile, loadDataFun}) => { 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('請輸入第三行地址'), + addressLine2: yup.string().max(255), + addressLine3: yup.string().max(255), emailAddress: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'), identification: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'), checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'), diff --git a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js index 5be8aa6..9a8066e 100644 --- a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js @@ -1,142 +1,103 @@ // material-ui import { - Grid, TextField, Typography, Button, - Autocomplete, - // OutlinedInput, FormHelperText + 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 DateUtils from '../../utils/DateUtils'; + +import * as FieldUtils from "../../utils/FieldUtils"; import * as HttpUtils from '../../utils/HttpUtils'; import * as UrlUtils from "../../utils/ApiPathConst"; import * as ComboData from "../../utils/ComboData"; -import { useFormik,FormikProvider } from 'formik'; +import { useFormik } from 'formik'; import * as yup from 'yup'; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const UserInformationCard_Organization = ({userData, loadDataFun}) => { +const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => { const [currentUserData, setCurrentUserData] = useState(userData); const [editMode, setEditMode] = useState(false); - const [locked, setLocked] = useState(false); - - const [district, setDistrict] = useState(null); - const [country, setCountry] = useState(ComboData.country[0]); - const [orgId, setOrgId] = useState(""); - - 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('請輸入英文姓名'), - enCompanyName: 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], '請輸入相同電郵'), - 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位數字'), + chName: yup.string().max(255), + enCompanyName: yup.string().max(255), + chCompanyName: yup.string().max(255), + addressLine1: yup.string().max(255).required('請輸入第一行地址'), + 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,'請輸入商業登記證號碼'), - }) + }), + onSubmit:(values)=>{ + HttpUtils.post({ + url: UrlUtils.POST_IND_USER+"/"+userData.id, + params: { + chName: values.chName, + enName: values.enName, + contactTel: { + countryCode: values.tel_countryCode, + phoneNumber: values.phoneNumber + }, + faxNo: { + countryCode: values.fax_countryCode, + faxNumber: values.faxNumber + }, + addressBus: { + country: values.country, + district: values.district, + addressLine1: values.addressLine1, + addressLine2: values.addressLine2, + addressLine3: values.addressLine3, + }, + identification: values.identification, + emailBus:values.emailBus, + contactPerson: values.contactPerson, + enCompanyName: values.enCompanyName, + chCompanyName: values.chCompanyName, + orgId: values.orgId, + brNo: values.brNo, + brExpiryDate: values.brExpiryDate, + + }, + 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["lastLoginDate"] = userData.lastLogin?DateUtils.datetimeStr(lastLoginDate):""; - - userData["country"] = userData.addressBus?.country; - userData["district"] = userData.addressBus?.district; - userData["addressLine1"] = userData.addressBus?.addressLine1; - userData["addressLine2"] = userData.addressBus?.addressLine2; - userData["addressLine3"] = userData.addressBus?.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(brExpiryDate):""; - - - setDistrict(userData.district); - setCountry(userData.country); - setOrgId(userData.emailVerifyHash); - setCurrentUserData(userData); }, [userData]); - useEffect(() => { - reset(currentUserData); - setLocked(currentUserData.locked); - }, [currentUserData]); - - - - function onSubmitForm(_data) { - HttpUtils.post({ - url: UrlUtils.POST_IND_USER+"/"+userData.id, - params: { - chName: _data.chName, - enName: _data.enName, - contactTel: { - countryCode: _data.tel_countryCode, - phoneNumber: _data.phoneNumber - }, - faxNo: { - countryCode: _data.fax_countryCode, - faxNumber: _data.faxNumber - }, - addressBus: { - country: country, - district: district, - addressLine1: _data.addressLine1, - addressLine2: _data.addressLine2, - addressLine3: _data.addressLine3, - }, - identification: _data.identification, - emailBus:_data.emailBus, - contactPerson: _data.contactPerson, - enCompanyName: _data.enCompanyName, - chCompanyName: _data.chCompanyName, - emailVerifyHash: orgId, - brNo: _data.brNo, - //brExpiryDate: _data.brExpiryDate, - - }, - onSuccess: function(){ - loadDataFun(); - } - }); - } - const onEditClick = () => { setEditMode(true); }; const createOrgClick = () => { window.open("/org/fromUser/"+userData.id, "_blank", "noreferrer"); + window.addEventListener("focus", onFocus) }; + + const onFocus=()=>{ + loadDataFun(); + window.removeEventListener("focus", onFocus) + } const onVerifiedClick = () => { HttpUtils.get({ @@ -175,8 +136,8 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { Information - - + + {/*top button*/} @@ -236,174 +197,101 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { {/*end top button*/} - - - - - - Username: - - - - - - - - - - - - English Name: - - - - - - - - - - - - Created Date: - - - - - - - - - - - - Chinese Name: - - - - - - - - - - - - Contact Tel: - - - - - - - - - - - - - - Last Updated: - - - - - - - - - - - - - Organization: - - - - {/* */} - { - setOrgId(newValue); - }} - - sx={{"& .MuiInputBase-root": { height: "41px" },"#emailVerifyHash":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - - - - - - - - - Email: - - - - - - - + + {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:"Chinese Name:", + valueName:"chName", + 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), + dataList: orgData, + 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); + }, + ); + return displayOptions; + }, + 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"]); + return true; + } + return option == newValue; + }, + onInputChange:(event, newValue, setInputValue)=>{ + if(newValue != null){ + setInputValue(newValue); + } + }, + onChange:(event, newValue)=>{ + if(newValue == null){ + formik.setFieldValue("orgId",""); + return; + } + formik.setFieldValue("orgId",newValue.id); + }, + form: formik + })} + + + {FieldUtils.getTextField({ + label:"Email:", + valueName:"emailBus", + disabled:(!editMode), + form: formik + })} @@ -417,22 +305,20 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { { currentUserData.verifiedBy || editMode? - + {FieldUtils.initField({ + valueName:"verifiedStatus", + disabled:true, + form: formik, + })} : <> - + {FieldUtils.initField({ + valueName:"verifiedStatus", + disabled:true, + form: formik, + })}