From d28c023b72e199f553e8fa6a1c3965061bd280e3 Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 4 Sep 2023 17:06:29 +0800 Subject: [PATCH] update to formik --- .../OrganizationCard_loadFromUser.js | 333 ++++++------------ .../UserInformationCard_Organization.js | 1 - 2 files changed, 105 insertions(+), 229 deletions(-) diff --git a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js index 8c4d14c..7cfd6e7 100644 --- a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js +++ b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js @@ -2,8 +2,8 @@ import { Grid, TextField, Typography, Button } from '@mui/material'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +// 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"; @@ -12,6 +12,7 @@ import * as DateUtils from '../../utils/DateUtils'; import * as HttpUtils from '../../utils/HttpUtils'; import * as UrlUtils from "../../utils/ApiPathConst"; import {useNavigate} from "react-router-dom"; +import { useFormik } from 'formik'; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -20,10 +21,49 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { const [currentUserData, setCurrentUserData] = useState(userData); const form = useForm({defaultValues: userData}); - const {register,reset, handleSubmit} = form; + const {register,reset} = form; const navigate = useNavigate(); + const formik = useFormik({ + enableReinitialize:true, + initialValues:currentUserData, + onSubmit: values =>{ + HttpUtils.post({ + url: UrlUtils.POST_ORG_SAVE_PATH, + params: { + id:id>0?id:null, + enCompanyName: values.enCompanyName, + chCompanyName: values.chCompanyName, + brNo: values.brNo, + brExpiryDate: values.brExpiryDate, + enCompanyNameTemp: values.enCompanyNameTemp, + chCompanyNameTemp: values.chCompanyNameTemp, + brExpiryDateTemp: values.brExpiryDateTemp, + contactPerson: values.contactPerson, + contactTel: { + countryCode: values.tel_countryCode, + phoneNumber: values.phoneNumber + }, + faxNo: { + countryCode: values.fax_countryCode, + faxNumber: values.faxNumber + }, + addressTemp: { + country: values.country, + district: values.district, + addressLine1: values.addressLine1, + addressLine2: values.addressLine2, + addressLine3: values.addressLine3, + } + }, + onSuccess: function(responseData){ + navigate('/org/'+responseData.id); + } + }); + } + }); + useEffect(() => { if(id>0){ userData["country"] = userData.addressTemp?.country; @@ -54,42 +94,57 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { useEffect(() => { reset(currentUserData); }, [currentUserData]); + + const getTextField=(label, key, form)=>{ + return + + + {label} + + + + + + ; + } - - const onSubmitForm=(_formData)=>{ - console.log(_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(responseData){ - navigate('/org/'+responseData.id); - } - }); + const getPhoneField=(label, key, key2, form)=>{ + return + + + {label} + + + + + + + + + ; } return ( @@ -101,7 +156,7 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { Information -
+ {/*bottom top*/} @@ -124,196 +179,18 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { {/*bottom top*/} - - - - BR No.: - - - - - - - - - - - - - - Name (Eng): - - - - - - - - - - - - Name (Ch): - - - - - - - - - - - - Expiry Date: - - - - - - - - - - - - - - - Contact Person: - - - - - - - - - - - - Contact Tel: - - - - - - - - - - - - - - Fax No: - - - - - - - - - - - - - - Country : - - - - - - - - - - - District : - - - - - - - + {getTextField("BR No.:","brNo",formik)} + + {getTextField("Name (Eng):","enCompanyName",formik)} + {getTextField("Name (Ch):","chCompanyName",formik)} + {getTextField("Expiry Date:","brExpiryDate",formik)} {/* TODO: date field */} + {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)} + {getTextField("Expiry Date:","brExpiryDate",formik)} diff --git a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js index 969599a..c0d867c 100644 --- a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js @@ -36,7 +36,6 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { const formik = useFormik({ initialValues:(currentUserData), validationSchema:yup.object().shape({ - enName: yup.string().max(255).required('請輸入英文姓名'), enCompanyName: yup.string().max(255).required('請輸入英文名稱'), chName: yup.string().max(255).required('請輸入中文姓名'),