From d28c023b72e199f553e8fa6a1c3965061bd280e3 Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 4 Sep 2023 17:06:29 +0800 Subject: [PATCH 1/2] 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('請輸入中文姓名'), From ef3ba27a04eb7074571ba1442744fd4948651293 Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 4 Sep 2023 17:34:14 +0800 Subject: [PATCH 2/2] fix dateUtils bug --- .../OrganizationCard_loadFromUser.js | 264 ++++++++++-------- src/utils/DateUtils.js | 6 +- 2 files changed, 146 insertions(+), 124 deletions(-) diff --git a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js index 7cfd6e7..283bf5a 100644 --- a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js +++ b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js @@ -2,11 +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 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 HttpUtils from '../../utils/HttpUtils'; @@ -20,8 +17,6 @@ import { useFormik } from 'formik'; const OrganizationCard_loadFromUser = ({userData, id}) => { const [currentUserData, setCurrentUserData] = useState(userData); - const form = useForm({defaultValues: userData}); - const {register,reset} = form; const navigate = useNavigate(); @@ -32,7 +27,7 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { HttpUtils.post({ url: UrlUtils.POST_ORG_SAVE_PATH, params: { - id:id>0?id:null, + id:null, enCompanyName: values.enCompanyName, chCompanyName: values.chCompanyName, brNo: values.brNo, @@ -92,60 +87,9 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { }, [userData]); useEffect(() => { - reset(currentUserData); }, [currentUserData]); - const getTextField=(label, key, form)=>{ - return - - - {label} - - - - - - ; - } - - const getPhoneField=(label, key, key2, form)=>{ - return - - - {label} - - - - - - - - - ; - } + return ( { - {/*bottom top*/} - - - - - - - - - {/*bottom top*/} + {/*bottom top*/} + + + + + + + + + {/*bottom top*/} {getTextField("BR No.:","brNo",formik)} {getTextField("Name (Eng):","enCompanyName",formik)} {getTextField("Name (Ch):","chCompanyName",formik)} - {getTextField("Expiry Date:","brExpiryDate",formik)} {/* TODO: date field */} + {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)} - {getTextField("Expiry Date:","brExpiryDate",formik)} - - - - - Address : - - - - - - - - - - - - - - - - + {getAddressField("Address:","addressLine1","addressLine2","addressLine3",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/utils/DateUtils.js b/src/utils/DateUtils.js index 551cc01..8320e51 100644 --- a/src/utils/DateUtils.js +++ b/src/utils/DateUtils.js @@ -11,8 +11,12 @@ export const dateStr = (date) =>{ }; export const convertToDate = (date)=>{ + console.log(date); if(Array.isArray(date)){ - return new Date(date[0],date[1],date[2],date[3],date[4],date[5]); + if(date.length==3){ + return new Date(date[0],date[1]-1,date[2],0,0,0); + } + return new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]); } if(typeof date == 'number'){ return dayjs(date*1000);