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

add combo and use formik

master
Anna Ho 2 years ago
parent
3fab9da24a
commit
bb49fa03ca
11 changed files with 746 additions and 1129 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +143
    -378
      src/pages/OrganizationDetailPage/OrganizationCard.js
  2. +14
    -2
      src/pages/OrganizationDetailPage/index.js
  3. +78
    -160
      src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
  4. +14
    -3
      src/pages/OrganizationDetailPage_FromUser/index.js
  5. +225
    -580
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  6. +26
    -4
      src/pages/pnspsUserDetailPage_Individual/index.js
  7. +1
    -0
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  8. +44
    -0
      src/utils/Combo.js
  9. +1
    -1
      src/utils/ComboData.js
  10. +0
    -1
      src/utils/DateUtils.js
  11. +200
    -0
      src/utils/FieldUtils.js

+ 143
- 378
src/pages/OrganizationDetailPage/OrganizationCard.js View File

@@ -1,17 +1,16 @@
// material-ui // material-ui
import { import {
Grid, TextField, Typography, Button
Grid, Typography, Button
} from '@mui/material'; } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import * as React from "react"; import * as React from "react";
import {useForm} from "react-hook-form";
import { useFormik } from 'formik';
import * as yup from 'yup';
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
//import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils'; import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";
import * as FieldUtils from "../../utils/FieldUtils";
import * as ComboData from "../../utils/ComboData";


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


@@ -22,76 +21,66 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const [createMode, setCreateMode] = useState(false); const [createMode, setCreateMode] = useState(false);


const from = useForm({defaultValues: userData});
const {register,reset, handleSubmit} = from;
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('請輸入商業登記證號碼'),
}),
onSubmit: vaule =>{
console.log(vaule)
HttpUtils.post({
url: UrlUtils.POST_ORG_SAVE_PATH,
params: {
id:id>0?id:null,
enCompanyName: vaule.enCompanyName,
chCompanyName: vaule.chCompanyName,
brNo: vaule.brNo,
brExpiryDate: vaule.brExpiryDate,
enCompanyNameTemp: vaule.enCompanyNameTemp,
chCompanyNameTemp: vaule.chCompanyNameTemp,
brExpiryDateTemp: vaule.brExpiryDateTemp,
contactPerson: vaule.contactPerson,
contactTel: {
countryCode: vaule.tel_countryCode,
phoneNumber: vaule.phoneNumber
},
faxNo: {
countryCode: vaule.fax_countryCode,
faxNumber: vaule.faxNumber
},
addressTemp: {
country: vaule.country,
district: vaule.district,
addressLine1: vaule.addressLine1,
addressLine2: vaule.addressLine2,
addressLine3: vaule.addressLine3,
}
},
onSuccess: function(){
loadDataFun();
setEditMode(false);
}
});
}
});


useEffect(() => { useEffect(() => {
if(id>0){
userData["country"] = userData.addressTemp?.country;
userData["district"] = userData.addressTemp?.district;
userData["addressLine1"] = userData.addressTemp?.addressLine1;
userData["addressLine2"] = userData.addressTemp?.addressLine2;
userData["addressLine3"] = userData.addressTemp?.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?userData.brExpiryDate: "";
userData["brExpiryDateTemp"] = userData.brExpiryDateTemp?userData.brExpiryDate: "";
}else{
setCreateMode(id==0);
setEditMode(id==0);

userData["brExpiryDate"] = "";
userData["brExpiryDateTemp"] = "";
}
setCreateMode(id<=0);
setEditMode(id<=0);
setCurrentUserData(userData); setCurrentUserData(userData);
}, [userData]); }, [userData]);


useEffect(() => {
reset(currentUserData);
}, [currentUserData]);


function onSubmitForm(_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(){
loadDataFun();
setEditMode(false);
}
});
}


const onEditClick = () => { const onEditClick = () => {
setEditMode(true); setEditMode(true);
@@ -106,310 +95,11 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
Information Information
</Typography> </Typography>


<form onSubmit={handleSubmit(onSubmitForm)}>

<Grid container spacing={1}>
<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 }}
disabled={!editMode}
{...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'
disabled={!editMode}
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'
disabled={!editMode}
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}>
<DatePicker
fullWidth
{...register("brExpiryDate")}
id='brExpiryDate'
name='brExpiryDate'
disabled={!editMode}
/>
</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'}}>
Temp Name (Eng):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("enCompanyNameTemp")}
id='enCompanyNameTemp'
disabled={!editMode}
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'}}>
Temp Name (Ch):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("chCompanyNameTemp")}
id='chCompanyNameTemp'
disabled={!editMode}
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'}}>
Temp Expiry Date:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<LocalizationProvider fullWidth dateAdapter={AdapterDayjs}>
<DatePicker
fullWidth
{...register("brExpiryDateTemp")}
id='brExpiryDateTemp'
name='brExpiryDateTemp'
disabled={!editMode}
/>
</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'
disabled={!editMode}
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'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
type="tel"
inputProps={{ maxLength: 20 }}
{...register("phoneNumber")}
id='phoneNumber'
disabled={!editMode}
/>
</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'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
inputProps={{ maxLength: 20 }}
type="number"
{...register("faxNumber")}
id='faxNumber'
disabled={!editMode}
/>
</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'
disabled={!editMode}
/>
</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'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"top"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
<Grid item lg={12} sx={{alignItems: 'center'}}>Adress :</Grid>
</Grid>
<Grid item lg={6}>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine1")}
id='addressLine1'
disabled={!editMode}
inputProps={{ maxLength: 255 }}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine2")}
id='addressLine2'
disabled={!editMode}
inputProps={{ maxLength: 255 }}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine3")}
id='addressLine3'
disabled={!editMode}
inputProps={{ maxLength: 255 }}
/>
</Grid>
</Grid>
</Grid>
</Grid>


</Grid>

{/*bottom button*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-end">
<form onSubmit={formik.handleSubmit}>


{/*top*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">


{editMode? {editMode?
<> <>
@@ -464,12 +154,87 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
</Grid> </Grid>
</> </>
} }
</Grid> </Grid>
</Grid> </Grid>
{/*top*/}

<Grid container spacing={1}>

{FieldUtils.getTextField({
label:"BR No.:",
valueName:"brNo",
disabled:(!editMode&&!createMode),
form: formik})}

<Grid item lg={8} ></Grid>

{FieldUtils.getTextField({
label:"Name (Eng):",
valueName:"enCompanyName",
disabled:(!editMode&&!createMode),
form: formik})}

{FieldUtils.getTextField({
label:"Name (Ch):",
valueName:"chCompanyName",
disabled:(!editMode&&!createMode),
form: formik})}

{FieldUtils.getDateField({
label:"Expiry Date:",
valueName:"brExpiryDate",
disabled:(!editMode&&!createMode),
form: formik})}

{FieldUtils.getTextField({
label:"Contact Person:",
valueName:"contactPerson",
disabled:(!editMode&&!createMode),
form: formik})}

{FieldUtils.getPhoneField({
label:"Contact Tel:",
valueName:{
code:"tel_countryCode",
num:"phoneNumber"
},
disabled:(!editMode&&!createMode),
form: formik})}

{FieldUtils.getPhoneField({
label:"Fax No:",
valueName:{
code:"fax_countryCode",
num:"faxNumber"
},
disabled:(!editMode&&!createMode),
form: formik})}

{FieldUtils.getComboField({
label:"Country:",
valueName:"country",
disabled:(!editMode&&!createMode),
dataList: ComboData.country,
form: formik})}

{FieldUtils.getComboField({
label:"District:",
valueName:"district",
disabled:(!editMode&&!createMode),
dataList: ComboData.district,
form: formik})}


{FieldUtils.getAddressField({
label:"Address:",
valueName:["addressLine1","addressLine2","addressLine3"],
disabled:(!editMode&&!createMode),
form: formik})}

<Grid item lg={12} ></Grid>

</Grid>


</form> </form>
</MainCard> </MainCard>


+ 14
- 2
src/pages/OrganizationDetailPage/index.js View File

@@ -5,13 +5,12 @@ import * as React from "react";
import * as HttpUtils from "../../utils/HttpUtils"; import * as HttpUtils from "../../utils/HttpUtils";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";
import * as DateUtils from "../../utils/DateUtils";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
const InfoCard = Loadable(lazy(() => import('./OrganizationCard'))); const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
// import InfoCard from "./OrganizationCard";
// import LoadingComponent from "../extra-pages/LoadingComponent";




// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -34,6 +33,19 @@ const OrganizationDetailPage = () => {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_ORG_PATH+"/"+params.id, url: UrlUtils.GET_ORG_PATH+"/"+params.id,
onSuccess: function(response){ onSuccess: function(response){
response.data["country"] = response.data.addressTemp?.country;
response.data["district"] = response.data.addressTemp?.district;
response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
response.data["tel_countryCode"] = response.data.contactTel?.countryCode;

response.data["faxNumber"] = response.data.faxNo?.faxNumber;
response.data["fax_countryCode"] = response.data.faxNo?.countryCode;

response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): "";
setFormData(response.data) setFormData(response.data)
} }
}); });


+ 78
- 160
src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js View File

@@ -1,20 +1,22 @@
// material-ui // material-ui
import { import {
Grid, TextField, Typography, Button
Grid, Typography, Button
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import * as React from "react"; import * as React from "react";
import * as yup from 'yup';
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils'; import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";
import * as FieldUtils from "../../utils/FieldUtils";
import * as ComboData from "../../utils/ComboData";
import {useNavigate} from "react-router-dom"; import {useNavigate} from "react-router-dom";
import { useFormik } from 'formik'; import { useFormik } from 'formik';


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const OrganizationCard_loadFromUser = ({userData, id}) => {
const OrganizationCard_loadFromUser = ({userData}) => {


const [currentUserData, setCurrentUserData] = useState(userData); const [currentUserData, setCurrentUserData] = useState(userData);


@@ -23,6 +25,19 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
const formik = useFormik({ const formik = useFormik({
enableReinitialize:true, enableReinitialize:true,
initialValues:currentUserData, 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('請輸入商業登記證號碼'),
}),
onSubmit: values =>{ onSubmit: values =>{
HttpUtils.post({ HttpUtils.post({
url: UrlUtils.POST_ORG_SAVE_PATH, url: UrlUtils.POST_ORG_SAVE_PATH,
@@ -60,37 +75,9 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
}); });


useEffect(() => { useEffect(() => {
if(id>0){
userData["country"] = userData.addressTemp?.country;
userData["district"] = userData.addressTemp?.district;
userData["addressLine1"] = userData.addressTemp?.addressLine1;
userData["addressLine2"] = userData.addressTemp?.addressLine2;
userData["addressLine3"] = userData.addressTemp?.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(userData.brExpiryDate): "";
userData["brExpiryDateTemp"] = userData.brExpiryDateTemp?userData.brExpiryDate: "";
}else{
setCreateMode(id==0);
setEditMode(id==0);

userData["brExpiryDate"] = "";
userData["brExpiryDateTemp"] = "";
}
setCurrentUserData(userData); setCurrentUserData(userData);
}, [userData]); }, [userData]);


useEffect(() => {
}, [currentUserData]);

return ( return (
<MainCard elevation={0} <MainCard elevation={0}
border={false} border={false}
@@ -103,7 +90,7 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>


<Grid container spacing={1}> <Grid container spacing={1}>
{/*bottom top*/}
{/*top*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center"> <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">


@@ -122,140 +109,71 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
</Grid> </Grid>
</Grid> </Grid>
{/*bottom top*/}
{/*top*/}

{FieldUtils.getTextField({
label:"BR No.:",
valueName:"brNo",
form: formik})}


{getTextField("BR No.:","brNo",formik)}
<Grid item lg={8}></Grid> <Grid item lg={8}></Grid>
{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)}

{FieldUtils.getTextField({
label:"Name (Eng):",
valueName:"enCompanyName",
form: formik})}

{FieldUtils.getTextField({
label:"Name (Ch):",
valueName:"chCompanyName",
form: formik})}

{FieldUtils.getDateField({
label:"Expiry Date:",
valueName:"brExpiryDate",
form: formik})}

{FieldUtils.getTextField({
label:"Contact Person:",
valueName:"contactPerson",
form: formik})}

{FieldUtils.getPhoneField({
label:"Contact Tel:",
valueName:{
code:"tel_countryCode",
num:"phoneNumber"
},
form: formik})}

{FieldUtils.getPhoneField({
label:"Fax No:",
valueName:{
code:"fax_countryCode",
num:"faxNumber"
},
form: formik})}

{FieldUtils.getComboField({
label:"Country:",
valueName:"country",
dataList: ComboData.country,
form: formik})}

{FieldUtils.getComboField({
label:"District:",
valueName:"district",
dataList: ComboData.district,
form: formik})}

{FieldUtils.getAddressField({
label:"Address:",
valueName:["addressLine1","addressLine2","addressLine3"],
form: formik})}
</Grid> </Grid>
</form> </form>
</MainCard> </MainCard>
); );
}; };


const getDateField=(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="date"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
</Grid>
</Grid>;
}


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 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>;
}

const getAddressField=(label, key, key2, key3, form)=>{
return <Grid item lg={4} >
<Grid container alignItems={"top"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
<Grid item lg={12} sx={{alignItems: 'center'}}>{label}</Grid>
</Grid>
<Grid item lg={6}>
<Grid item lg={12}>
<TextField
fullWidth
id={key}
name={key}
type="text"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
id={key2}
name={key2}
type="text"
onChange={form.handleChange}
value={form.values[key2]}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
id={key3}
name={key3}
type="text"
onChange={form.handleChange}
value={form.values[key3]}
/>
</Grid>
</Grid>
</Grid>
</Grid>;
}

export default OrganizationCard_loadFromUser; export default OrganizationCard_loadFromUser;

+ 14
- 3
src/pages/OrganizationDetailPage_FromUser/index.js View File

@@ -6,13 +6,12 @@ import * as HttpUtils from "../../utils/HttpUtils";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import {useNavigate} from "react-router-dom"; import {useNavigate} from "react-router-dom";
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";
import * as DateUtils from "../../utils/DateUtils";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser'))); const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser')));
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
// import InfoCard from "./OrganizationCard_loadFromUser";
// import LoadingComponent from "../extra-pages/LoadingComponent";


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


@@ -35,6 +34,19 @@ const OrganizationDetailPage_FromUser = () => {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_ORG_FROM_USER_PATH+"/"+params.id, url: UrlUtils.GET_ORG_FROM_USER_PATH+"/"+params.id,
onSuccess: function(response){ onSuccess: function(response){
response.data["country"] = response.data.addressTemp?.country;
response.data["district"] = response.data.addressTemp?.district;
response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
response.data["tel_countryCode"] = response.data.contactTel?.countryCode;

response.data["faxNumber"] = response.data.faxNo?.faxNumber;
response.data["fax_countryCode"] = response.data.faxNo?.countryCode;

response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): "";
setFormData(response.data) setFormData(response.data)
} }
}); });
@@ -62,7 +74,6 @@ const OrganizationDetailPage_FromUser = () => {
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<InfoCard <InfoCard
userData={formData} userData={formData}
id={params.id}
/> />
</Grid> </Grid>




+ 225
- 580
src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js View File

@@ -1,17 +1,14 @@
// material-ui // material-ui
import { import {
Grid, TextField, Typography, Button, Autocomplete, Stack, FormHelperText, OutlinedInput
Grid, Typography, Button
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import * as React from "react"; import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import * as yup from 'yup'; import * as yup from 'yup';
//import Checkbox from "@mui/material/Checkbox";
//import LoadingComponent from "../extra-pages/LoadingComponent";


import { useFormik,FormikProvider } from 'formik';
import * as DateUtils from '../../utils/DateUtils';
import { useFormik } from 'formik';
import * as FieldUtils from "../../utils/FieldUtils";
import * as HttpUtils from '../../utils/HttpUtils'; import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";
import * as ComboData from "../../utils/ComboData"; import * as ComboData from "../../utils/ComboData";
@@ -22,25 +19,15 @@ import * as ComboData from "../../utils/ComboData";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
const UserInformationCard_Individual = ({formData,userFile, loadDataFun}) => {


const [currentUserData, setCurrentUserData] = useState(userData);
const [currentUserData, setCurrentUserData] = useState(formData);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const [locked, setLocked] = useState(false); const [locked, setLocked] = useState(false);


const [idDocType, setIdDocType] = useState(null);
const [district, setDistrict] = useState(null);
const [country, setCountry] = useState(ComboData.country[0]);


const from = useForm({defaultValues: userData});
const {register,reset, handleSubmit} = from;




const formik = useFormik({ const formik = useFormik({
initialValues:(currentUserData),
enableReinitialize:true,
initialValues:currentUserData,
validationSchema:yup.object().shape({ validationSchema:yup.object().shape({
enName: yup.string().max(255).required('請輸入英文姓名'), enName: yup.string().max(255).required('請輸入英文姓名'),
chName: yup.string().max(255).required('請輸入中文姓名'), chName: yup.string().max(255).required('請輸入中文姓名'),
@@ -54,87 +41,60 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'), tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
fax_countryCode: yup.string().min(3,'請輸入3位數字'), fax_countryCode: yup.string().min(3,'請輸入3位數字'),
phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'), phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
faxNumber: yup.string().min(8,'請輸入8位數字'),
faxNumber: yup.string().min(8,'請輸入8位數字').required('請輸入8位數字'),
}), }),
onSubmit:values=>{
console.log(values);
HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+formData.id,
params: {
prefix: values.prefix,
enName: values.enName,
chName: values.chName,
idDocType: values.idDocType,
contactTel: {
countryCode: values.tel_countryCode,
phoneNumber: values.phoneNumber
},
identification: values.identification,
checkDigit: values.checkDigit,
faxNo:{
countryCode: values.fax_countryCode,
faxNumber: values.faxNumber
},
emailAddress:values.emailAddress,
address:{
country:values.country,
district:values.district,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2,
addressLine3: values.addressLine3,
},
},
onSuccess: function(){
loadDataFun();
}
});
}
}); });






useEffect(() => { 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["country"] = userData.address?.country;
userData["district"] = userData.address?.district;
userData["addressLine1"] = userData.address?.addressLine1;
userData["addressLine2"] = userData.address?.addressLine2;
userData["addressLine3"] = userData.address?.addressLine3;

userData["phoneNumber"] = userData.contactTel?.phoneNumber;
userData["tel_countryCode"] = userData.contactTel?.countryCode;

userData["faxNumber"] = userData.faxNo?.faxNumber;
userData["fax_countryCode"] = userData.faxNo?.countryCode;

userData["lastLoginDate"] = userData.lastLogin?DateUtils.datetimeStr(userData.lastLogin):"";

setIdDocType(userData.idDocType);
setDistrict(userData.district);
setCountry(userData.country);
setCurrentUserData(userData);
}, [userData]);
setCurrentUserData(formData);
}, [formData]);


useEffect(() => { useEffect(() => {
reset(currentUserData);
setLocked(currentUserData.locked); setLocked(currentUserData.locked);
}, [currentUserData]); }, [currentUserData]);



function onSubmitForm(_data) {

HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+userData.id,
params: {
prefix: _data.prefix,
enName: formik.values.enName,
chName: _data.chName,
idDocType: idDocType,
contactTel: {
countryCode: _data.tel_countryCode,
phoneNumber: _data.phoneNumber
},
identification: formik.values.identification,
checkDigit: formik.values.checkDigit,
faxNo:{
countryCode: _data.fax_countryCode,
faxNumber: _data.faxNumber
},
emailAddress:_data.emailAddress,
address:{
country:country,
district:district,
addressLine1: _data.addressLine1,
addressLine2: _data.addressLine2,
addressLine3: _data.addressLine3,
},
},
onSuccess: function(){
loadDataFun();
}
});
}

const onEditClick = () => { const onEditClick = () => {
setEditMode(true); setEditMode(true);
}; };


const onVerifiedClick = () => { const onVerifiedClick = () => {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id,
url: UrlUtils.GET_IND_USER_VERIFY+"/"+formData.id,
onSuccess: function(){ onSuccess: function(){
loadDataFun(); loadDataFun();
} }
@@ -143,7 +103,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
const doLock = () => { const doLock = () => {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
url: UrlUtils.GET_USER_LOCK+"/"+formData.id,
onSuccess: function(){ onSuccess: function(){
loadDataFun(); loadDataFun();
} }
@@ -152,7 +112,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {


const doUnlock = () => { const doUnlock = () => {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id,
url: UrlUtils.GET_USER_UNLOCK+"/"+formData.id,
onSuccess: function(){ onSuccess: function(){
loadDataFun(); loadDataFun();
} }
@@ -176,9 +136,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
Information Information
</Typography> </Typography>


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

<form onSubmit={formik.handleSubmit}>


{/*top button*/} {/*top button*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center"> <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">
@@ -236,219 +194,90 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
</Grid> </Grid>
</Grid> </Grid>
{/*end top button*/} {/*end top button*/}
<Grid container spacing={1}> <Grid container spacing={1}>
<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'}}>
Username:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
id='username'
disabled
{...register("username")}
/>
</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'}}>
English Name:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<Stack>
<OutlinedInput
id="enName"
type="enName"
{...register("enName")}
value={formik.values.enName}
disabled={!editMode}
name="enName"
onChange={formik.handleChange}
placeholder="與身份證明文件相同"
fullWidth
error={Boolean(formik.touched.enName && formik.errors.enName)}
onBlur={formik.handleBlur}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.enName && formik.errors.enName && (
<FormHelperText error id="helper-text-enName-signup">
{formik.errors.enName}
</FormHelperText>
)}
</Stack>
</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'}}>
Created Date:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("createDate")}
id='createDate'
disabled
/>
</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'}}>
Prefix:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("prefix")}
id='prefix'
disabled={!editMode}
/>
</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'}}>
Chinese Name:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<OutlinedInput
fullWidth
disabled={!editMode}
{...register("chName")}
error={Boolean(formik.touched.chName && formik.errors.chName)}
id="chName"
type="text"
value={formik.values.chName}
name="chName"
onChange={formik.handleChange}
placeholder="與身份證明文件相同"
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.chName && formik.errors.chName && (
<FormHelperText error id="helper-text-chName-signup">
{formik.errors.chName}
</FormHelperText>
)}
</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'}}>
Last Updated:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("modifieDate")}
id='modifieDate'
disabled
/>
</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'}}>
ID Type:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>

<Stack spacing={1} sx={{mr:{md:1},mb:{xs:0.5}}}>
<Autocomplete
fullWidth
disablePortal
id="idDocType"
{...register("idDocType")}
disabled={!editMode}
value={formik.values.idDocType}
options={ComboData.idDocType}
onBlur={formik.handleBlur}
onChange={(event, newValue) => {
setIdDocType(newValue);
}}
sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="證件類別"/>}
/>
{formik.touched.idDocType && (
idDocType===null?
<FormHelperText error id="helper-text-idDocType-signup">
請輸入證件類別
</FormHelperText>:''
)}
</Stack>


</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
{...register("tel_countryCode")}
id='tel_countryCode'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
{...register("phoneNumber")}
id='phoneNumber'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>
{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:"Prefix:",
valueName:"prefix",
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Chinese Name:",
valueName:"chName",
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Last Updated:",
valueName:"modifieDate",
disabled:true,
form: formik
})}

{FieldUtils.getComboField({
label:"ID Type:",
valueName:"idDocType",
disabled:(!editMode),
dataList: ComboData.idDocType,
filterOptions:(options) => options,
getOptionLabel:(item) => item?typeof item==='string'?item:(item["type"]?item["type"]+"-"+item["label"]:""):"",
// getOptionSelected: (option, value) => option.label === value.label,
// isOptionEqualToValue:(option, newValue) => {
// return option.type === newValue;
// },
onInputChange:(event, newValue, setInputValue)=>{
if(newValue == null){
setInputValue("");
}
let _val = newValue.split("-");
if(_val[0]){
setInputValue(_val[0]);
}
},
onChange:(event, newValue)=>{
if(newValue == null){
formik.setFieldValue("idDocType","");
return;
}
formik.setFieldValue("idDocType",newValue.type);
},
form: formik
})}

{FieldUtils.getPhoneField({
label:"Contact Tel:",
valueName:{
code: "tel_countryCode",
num:"phoneNumber"
},
disabled:(!editMode),
form: formik
})}


<Grid item lg={4}> <Grid item lg={4}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
@@ -461,22 +290,20 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
{ {
currentUserData.verifiedBy || editMode? currentUserData.verifiedBy || editMode?
<Grid item xs={6}> <Grid item xs={6}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
{FieldUtils.initField({
valueName:"verifiedStatus",
disabled:true,
form: formik,
})}
</Grid> </Grid>
: :
<> <>
<Grid item xs={4}> <Grid item xs={4}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
{FieldUtils.initField({
valueName:"verifiedStatus",
disabled:true,
form: formik,
})}
</Grid> </Grid>
<Grid item xs={1}> <Grid item xs={1}>
<Button <Button
@@ -497,7 +324,6 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
</Grid> </Grid>
</Grid> </Grid>



<Grid item lg={4}> <Grid item lg={4}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4} <Grid item xs={4} s={4} md={4} lg={4}
@@ -507,202 +333,79 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {


<Grid item lg={4}> <Grid item lg={4}>
<Grid container> <Grid container>
{idDocType =="HKID"?
<>
<Grid item lg={8}>
<Stack fullWidth>
<OutlinedInput
disabled={!editMode}
{...register("identification")}
id="identification"
type="text"
value={formik.values.identification}
name="identification"
onChange={formik.handleChange}
placeholder="證件號碼"
//sx={{mr:1}}
error={Boolean(formik.touched.idNo && formik.errors.idNo)}
onBlur={formik.handleBlur}
inputProps={{
maxLength: idDocType =='HKID'?7:18,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.identification && formik.errors.identification && (
<FormHelperText error id="helper-text-idNo-signup">
{formik.errors.identification}
</FormHelperText>
)}
{formik.touched.checkDigit && formik.errors.checkDigit && (
<FormHelperText error id="helper-text-checkDigit-signup">
{formik.errors.checkDigit}
</FormHelperText>
)}
</Stack>
</Grid>
<Grid item lg={4}>
<Stack fullWidth >
<OutlinedInput
disabled={!editMode}
{...register("checkDigit")}
id="checkDigit"
type="text"
value={formik.values.checkDigit}
name="checkDigit"
onChange={formik.handleChange}
placeholder="( )"
// sx={{height:"53px"}}
inputProps={{
maxLength: 1,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
fullWidth
error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)}
onBlur={formik.handleBlur}
/>
</Stack>
</Grid>
</>:
<Grid item lg={4}>
<Stack fullWidth>
<OutlinedInput
{...register("identification")}
disabled={!editMode}
id="identification"
type="text"
value={formik.values.identification}
name="identification"
onChange={formik.handleChange}
placeholder="證件號碼"
fullWidth
sx={{mr:1}}
error={Boolean(formik.touched.identification && formik.errors.identification)}
onBlur={formik.handleBlur}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{formik.touched.identification && formik.errors.identification && (
<FormHelperText error id="helper-text-idNo-signup">
{formik.errors.identification}
</FormHelperText>
)}
</Stack>
</Grid>
{formik.values.idDocType =="HKID"?
<>
<Grid item lg={8}>
{FieldUtils.initField({
valueName:"identification",
disabled:(!editMode),
form: formik,
placeholder:"證件號碼",
inputProps:{
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.initField({
valueName:"checkDigit",
disabled:(!editMode),
form: formik
})}
</Grid>
</>:
<Grid item lg={12}>
{FieldUtils.initField({
valueName:"identification",
disabled:(!editMode),
form: formik
})}
</Grid>
} }
</Grid> </Grid>
</Grid> </Grid>
<Button lg={2} variant="contained" onClick={downloadFile} >View File</Button> <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button>


</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
{...register("fax_countryCode")}
id='fax_countryCode'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4} >
<TextField
fullWidth
{...register("faxNumber")}
id='faxNumber'
disabled={!editMode}
/>
</Grid>
</Grid> </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'}}>
Last Login:
</Grid>
{FieldUtils.getPhoneField({
label:"Fax No.:",
valueName:{
code: "fax_countryCode",
num:"faxNumber"
},
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Last Login:",
valueName:"lastLoginDate",
disabled:true,
form: formik
})}

{FieldUtils.getComboField({
label:"Country:",
valueName:"country",
dataList: ComboData.country,
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Email:",
valueName:"emailAddress",
disabled:(!editMode),
form: formik
})}


<Grid item xs={7} s={7} md={7} lg={6}>

<TextField
fullWidth
{...register("lastLoginDate")}
id='lastLoginDate'
disabled
>
</TextField>
</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}>
<Autocomplete
fullWidth
disablePortal
disabled={!editMode}
id="country"
value={country}
options={ComboData.country}
{...register("country")}
onChange={(event, newValue) => {
setCountry(newValue);
}}
sx={{"& .MuiInputBase-root": { height: "41px" },"#country":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="國家/地區"/>}
/>
</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'}}>
Email:
</Grid>

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


<Grid item lg={4}> <Grid item lg={4}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
@@ -714,22 +417,20 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
{ {
editMode? editMode?
<Grid item lg={7}> <Grid item lg={7}>
<TextField
fullWidth
{...register("status")}
id='status'
disabled
/>
{FieldUtils.initField({
valueName:"status",
disabled:true,
form: formik,
})}
</Grid> </Grid>
: :
<> <>
<Grid item lg={4}> <Grid item lg={4}>
<TextField
fullWidth
{...register("status")}
id='status'
disabled
/>
{FieldUtils.initField({
valueName:"status",
disabled:true,
form: formik,
})}
</Grid> </Grid>
{locked? {locked?
<Grid item lg={1}> <Grid item lg={1}>
@@ -764,84 +465,28 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => {
} }
</> </>
} }

</Grid> </Grid>
</Grid> </Grid>


{FieldUtils.getAddressField({
label:"Address:",
valueName:["addressLine1","addressLine2","addressLine3"],
disabled:(!editMode),
form: formik})}


<Grid item lg={4}>
<Grid container alignItems={"top"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center top'}}>
Address:
</Grid>
{FieldUtils.getComboField({
label:"District:",
valueName:"district",
dataList: ComboData.district,
disabled:(!editMode),
form: formik})}


<Grid item xs={7} s={7} md={12} lg={6}>
<TextField
fullWidth
{...register("addressLine1",
{
value: currentUserData?.address?.addressLine1,
})}
id='addressLine1'
disabled={!editMode}
/>
<TextField
fullWidth
{...register("addressLine2",
{
value: currentUserData?.address?.addressLine2,
})}
id='addressLine2'
disabled={!editMode}
/>
<TextField
fullWidth
{...register("addressLine3",
{
value: currentUserData?.address?.addressLine3,
})}
id='addressLine3'
disabled={!editMode}
/>
</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}>
<Autocomplete
fullWidth
disablePortal
id="district"
{...register("district")}
value={district}
options={ComboData.district}
onChange={(event, newValue) => {
setDistrict(newValue);
}}
disabled={!editMode}
sx={{"& .MuiInputBase-root": { height: "41px" },"#district":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
/>
</Grid>
</Grid>
</Grid>


</Grid> </Grid>






</form> </form>
</FormikProvider>
</MainCard> </MainCard>
); );
}; };


+ 26
- 4
src/pages/pnspsUserDetailPage_Individual/index.js View File

@@ -6,6 +6,7 @@ import * as React from "react";
import * as HttpUtils from "../../utils/HttpUtils"; import * as HttpUtils from "../../utils/HttpUtils";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";
import * as DateUtils from '../../utils/DateUtils';


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
@@ -21,7 +22,7 @@ const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_In


const UserMaintainPage_Individual = () => { const UserMaintainPage_Individual = () => {
const params = useParams(); const params = useParams();
const [userData, setUserData] = useState({})
const [formData, setFormData] = useState({})
const [userFile, setUserFile] = useState({}) const [userFile, setUserFile] = useState({})
const [isLoading, setLoding] = useState(true); const [isLoading, setLoding] = useState(true);


@@ -38,7 +39,28 @@ const UserMaintainPage_Individual = () => {
response.data["address"] = JSON.parse(response.data["address"]); response.data["address"] = JSON.parse(response.data["address"]);
response.data["contactTel"] = JSON.parse(response.data["contactTel"]); response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
response.data["faxNo"] = JSON.parse(response.data["faxNo"]); response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
setUserData(response.data);

let createDate = DateUtils.datetimeStr(response.data.created);
let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
response.data["createDate"] = createDate;
response.data["modifieDate"] = modifiedBy;
response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verify yet";
response.data["country"] = response.data.address?.country;
response.data["district"] = response.data.address?.district;
response.data["addressLine1"] = response.data.address?.addressLine1;
response.data["addressLine2"] = response.data.address?.addressLine2;
response.data["addressLine3"] = response.data.address?.addressLine3;
response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
response.data["tel_countryCode"] = response.data.contactTel?.countryCode;
response.data["faxNumber"] = response.data.faxNo?.faxNumber;
response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLogin):"";

setFormData(response.data);
setUserFile(response.userFile) setUserFile(response.userFile)
} }
}); });
@@ -47,7 +69,7 @@ const UserMaintainPage_Individual = () => {


useEffect(() => { useEffect(() => {
setLoding(false); setLoding(false);
}, [userData]);
}, [formData]);


return ( return (
isLoading ? isLoading ?
@@ -62,7 +84,7 @@ const UserMaintainPage_Individual = () => {
<Grid container> <Grid container>
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<UserInformationCard <UserInformationCard
userData={userData}
formData={formData}
userFile={userFile} userFile={userFile}
loadDataFun={loadData} loadDataFun={loadData}
/> />


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

@@ -353,6 +353,7 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid> </Grid>
</Grid> </Grid>



<Grid item lg={4}> <Grid item lg={4}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4} <Grid item xs={4} s={4} md={4} lg={4}


+ 44
- 0
src/utils/Combo.js View File

@@ -0,0 +1,44 @@
import {
Autocomplete, TextField
} from '@mui/material';
import { useState } from 'react';

export default function Combo ({valueName, disabled, form, dataList, filterOptions, getOptionLabel, isOptionEqualToValue, onInputChange, onChange, ...props}){
const [value, setValue] = useState(form.values[valueName]);
const [inputValue, setInputValue] = useState("");

return (
<Autocomplete
{...props}
disablePortal
fullWidth
id={valueName}
name={valueName}
disabled={disabled}
value={value}
inputValue={inputValue}
filterOptions={filterOptions}
options={dataList}
getOptionLabel={getOptionLabel}
isOptionEqualToValue={isOptionEqualToValue}
onInputChange={(event, newValue) => {
setInputValue(newValue);
if(onInputChange){
onInputChange(event,newValue, setInputValue)
}
}}
onChange={(event, newValue) => {
setValue(newValue);
setInputValue(newValue);
if (!onChange){
form.setFieldValue(valueName, newValue);
}else{
onChange(event, newValue);
}
}}
sx={{"& .MuiInputBase-root": { height: "41px", padding: "0px 0px 0px 8px" },
"& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder=""/>}
/>
);
}

+ 1
- 1
src/utils/ComboData.js View File

@@ -7,6 +7,6 @@ export const idDocType = [
export const district = ['北區', '長洲區', '大埔區', '大嶼山區', '東區', '觀塘區', '黃大仙區', '九龍城區', '葵青區', '南區', '南丫島區', export const district = ['北區', '長洲區', '大埔區', '大嶼山區', '東區', '觀塘區', '黃大仙區', '九龍城區', '葵青區', '南區', '南丫島區',
'坪洲區', '荃灣區', '沙田區', '深水埗區', '屯門區', '灣仔區', '西貢區', '油尖旺區', '元朗區', '中西區']; '坪洲區', '荃灣區', '沙田區', '深水埗區', '屯門區', '灣仔區', '西貢區', '油尖旺區', '元朗區', '中西區'];
export const country = ['中國香港', '中國', '中國澳門'];
export const country = ["香港","內地","澳門"];


export const accountFilter = [{ id: 1, key: 1, label: 'Active', type: 'active' }, { id: 2, key: 2, label: 'Locked', type: 'locked' }, { id: 3, key: 3, label: 'Not verified', type: 'notVerified' }]; export const accountFilter = [{ id: 1, key: 1, label: 'Active', type: 'active' }, { id: 2, key: 2, label: 'Locked', type: 'locked' }, { id: 3, key: 3, label: 'Not verified', type: 'notVerified' }];

+ 0
- 1
src/utils/DateUtils.js View File

@@ -11,7 +11,6 @@ export const dateStr = (date) =>{
}; };


export const convertToDate = (date)=>{ export const convertToDate = (date)=>{
console.log(date);
if(Array.isArray(date)){ if(Array.isArray(date)){
if(date.length==3){ 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],0,0,0);


+ 200
- 0
src/utils/FieldUtils.js View File

@@ -0,0 +1,200 @@

import {
Grid, TextField
} from '@mui/material';

import Combo from "./Combo";

export const getDateField=({label, valueName, form, disabled})=>{
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}>
{initField({
label:"date",
valueName:valueName,
form:form,
disabled:disabled
})}
</Grid>
</Grid>
</Grid>;
}

export const getTextField=({label, valueName, form, disabled})=>{
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}>
{initField({
label:"text",
valueName:valueName,
form:form,
disabled:disabled
})}
</Grid>
</Grid>
</Grid>;
}

export const getPhoneField=({label, valueName, form, disabled})=>{
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}>
{initField({
label:"tel",
valueName:valueName.code,
form:form,
disabled:disabled
})}
</Grid>
<Grid item xs={4}>
{initField({
label:"tel",
valueName:valueName.num,
form:form,
disabled:disabled
})}
</Grid>
</Grid>
</Grid>;
}

export const getIdField=({label, valueName, form, disabled})=>{
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={4}>
{initField({
label:"text",
valueName:valueName.code,
form:form,
disabled:disabled
})}
</Grid>
<Grid item xs={2}>
{initField({
label:"text",
valueName:valueName.num,
form:form,
disabled:disabled
})}
</Grid>
</Grid>
</Grid>;
}

export const getAddressField=({label, valueName, form, disabled})=>{
return <Grid item lg={4} >
<Grid container alignItems={"top"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
<Grid item lg={12} sx={{alignItems: 'center'}}>{label}</Grid>
</Grid>
<Grid item lg={6}>
<Grid item lg={12}>
{initField({
label:"text",
valueName:valueName[0],
form:form,
disabled:disabled
})}
</Grid>
<Grid item lg={12}>
{initField({
label:"text",
valueName:valueName[1],
form:form,
disabled:disabled
})}
</Grid>
<Grid item lg={12}>
{initField({
label:"text",
valueName:valueName[2],
form:form,
disabled:disabled
})}
</Grid>
</Grid>
</Grid>
</Grid>;
}

export const getComboField=({label,dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props})=>{
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}>
<Combo
valueName={valueName}
disabled={disabled}
dataList={dataList}
form={form}
filterOptions={filterOptions}
getOptionLabel={getOptionLabel}
onInputChange={onInputChange}
onChange={onChange}
{...props}
/>
{/* <Autocomplete
id={key}
name={key}
disabled={disabled}
options={dataList}
value={form.values[key]|| null}
getOptionLabel={option => option?(displayField?option[displayField]:option):""}
onChange={(e, val) => {
console.log(val);
let v = val;
if(valueKey){
v = val[valueKey];
}
form.setFieldValue(key, v);
}}
renderInput={params => (
<TextField
fullWidth
name={key}
{...params}
/>
)}
/> */}
</Grid>
</Grid>
</Grid>;
}

export const initField=({type, valueName, form, disabled, placeholder, inputProps})=>{
let err = Boolean(form.errors[valueName]);

return <TextField
fullWidth
id={valueName}
name={valueName}
type={type}
placeholder={placeholder}
inputProps={inputProps}
error={err}
helperText={form.errors[valueName]?form.errors[valueName]:''}
onChange={form.handleChange}
value={form.values[valueName]}
disabled={disabled}
/>
}

Write Preview
Loading…
Cancel
Save