diff --git a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js index 8c4d14c..283bf5a 100644 --- a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js +++ b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js @@ -2,16 +2,14 @@ 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'; import * as UrlUtils from "../../utils/ApiPathConst"; import {useNavigate} from "react-router-dom"; +import { useFormik } from 'formik'; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -19,11 +17,48 @@ import {useNavigate} from "react-router-dom"; const OrganizationCard_loadFromUser = ({userData, id}) => { const [currentUserData, setCurrentUserData] = useState(userData); - const form = useForm({defaultValues: userData}); - const {register,reset, handleSubmit} = form; const navigate = useNavigate(); + const formik = useFormik({ + enableReinitialize:true, + initialValues:currentUserData, + onSubmit: values =>{ + HttpUtils.post({ + url: UrlUtils.POST_ORG_SAVE_PATH, + params: { + 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; @@ -52,45 +87,9 @@ const OrganizationCard_loadFromUser = ({userData, id}) => { }, [userData]); useEffect(() => { - reset(currentUserData); }, [currentUserData]); - - - 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); - } - }); - } + + return ( { Information -
+ - {/*bottom top*/} - - - - - - - - - {/*bottom top*/} - - - - BR No.: + {/*bottom top*/} + + + + + - - - - - - - + - - - - - Name (Eng): - - - - - - - - - - - - Name (Ch): - - - - - - - - - - - - Expiry Date: - - - - - - - - - - - - - - - Contact Person: - - - - - - - - - - - - Contact Tel: - - - - - - - - - - - - - - Fax No: - - - - - - - - - - - - - - Country : - - - - - - - - - - - - District : - - - - - - - - - - - - Address : - - - - - - - - - - - - - - - - + {/*bottom top*/} + + {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)} - - -
); }; +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/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('請輸入中文姓名'), 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);