alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update to formik

master
Anna Ho 2 years ago
parent
2075ce8286
commit
d28c023b72
2 changed files with 105 additions and 229 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +105
    -228
      src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
  2. +0
    -1
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js

+ 105
- 228
src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js View File

@@ -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 <Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
{label}
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
id={key}
name={key}
type="text"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
</Grid>
</Grid>;
}


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 <Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
{label}
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
id={key}
name={key}
type="number"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
id={key2}
name={key2}
type="number"
onChange={form.handleChange}
value={form.values[key2]}
/>
</Grid>
</Grid>
</Grid>;
}

return (
@@ -101,7 +156,7 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
Information
</Typography>

<form onSubmit={handleSubmit(onSubmitForm)}>
<form onSubmit={formik.handleSubmit}>

<Grid container spacing={1}>
{/*bottom top*/}
@@ -124,196 +179,18 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
</Grid>
{/*bottom top*/}
<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
BR No.:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
id='brNo'
inputProps={{ maxLength: 8 }}
{...register("brNo")}
/>
</Grid>
</Grid>
</Grid>
<Grid item lg={8} >
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Name (Eng):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("enCompanyName")}
id='enCompanyName'
inputProps={{ maxLength: 150 }}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Name (Ch):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("chCompanyName")}
id='chCompanyName'
inputProps={{ maxLength: 150 }}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Expiry Date:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<LocalizationProvider fullWidth dateAdapter={AdapterDayjs}>
<TextField
fullWidth
{...register("brExpiryDate")}
id='brExpiryDate'
/>
</LocalizationProvider>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Contact Person:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("contactPerson")}
id='contactPerson'
inputProps={{ maxLength: 150 }}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Contact Tel:
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
type="number"
defaultValue="852"
{...register("tel_countryCode")}
id='tel_countryCode'
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
type="tel"
inputProps={{ maxLength: 20 }}
{...register("phoneNumber")}
id='phoneNumber'
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Fax No:
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
type="number"
defaultValue="852"
{...register("fax_countryCode")}
id='fax_countryCode'
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
inputProps={{ maxLength: 20 }}
type="number"
{...register("faxNumber")}
id='faxNumber'
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Country :
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("country")}
id='country'
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
District :
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("district")}
id='district'
/>
</Grid>
</Grid>
</Grid>
{getTextField("BR No.:","brNo",formik)}
<Grid item lg={8}></Grid>
{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)}

<Grid item lg={4} >
<Grid container alignItems={"top"}>


+ 0
- 1
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js View File

@@ -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('請輸入中文姓名'),


Write Preview
Loading…
Cancel
Save