alex
/
PNSPS-frontend-MaterialUI
1
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Ver a proveniência

update form to formik

master
Anna Ho há 2 anos
ascendente
bb49fa03ca
cometimento
c1d9e99bf5
8 ficheiros alterados com 351 adições e 620 eliminações
Visualização em 2 colunas
Opções das diferenças
Mostrar estatísticas Descarregar ficheiro patch Descarregar ficheiro diff
  1. +13
    -13
      src/pages/OrganizationDetailPage/OrganizationCard.js
  2. +19
    -8
      src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
  3. +2
    -5
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  4. +243
    -549
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  5. +34
    -3
      src/pages/pnspsUserDetailPage_Organization/index.js
  6. +23
    -5
      src/utils/Combo.js
  7. +4
    -4
      src/utils/DateUtils.js
  8. +13
    -33
      src/utils/FieldUtils.js

+ 13
- 13
src/pages/OrganizationDetailPage/OrganizationCard.js Ver ficheiro

@@ -24,19 +24,19 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
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('請輸入商業登記證號碼'),
}),
validationSchema:yup.object().shape({
enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
chCompanyName: yup.string().max(255).required('請輸入中文姓名'),
addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255, "length must <= 255"),
addressLine3: yup.string().max(255, "length must <= 255"),
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({


+ 19
- 8
src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js Ver ficheiro

@@ -26,15 +26,15 @@ const OrganizationCard_loadFromUser = ({userData}) => {
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('請輸入國際區號'),
enCompanyName: yup.string().max(255,"請輸入英文名稱"),
chCompanyName: yup.string().max(255,'請輸入中文名稱'),
addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255),
addressLine3: yup.string().max(255),
fax_countryCode: yup.string().min(3,"請輸入國際區號"),
tel_countryCode: yup.string().min(3,"請輸入國際區號"),
phoneNumber: yup.string().min(8).required('請輸入聯絡電話'),
faxNumber: yup.string().min(8).required('請輸入8位數字'),
faxNumber: yup.string().min(8),
brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
brNo: yup.string().min(8).required('請輸入商業登記證號碼'),
}),
@@ -87,6 +87,17 @@ const OrganizationCard_loadFromUser = ({userData}) => {
Information
</Typography>

{/* <div style={{ border: "solid 1px;", color: "red" }}>
TODO: Error Summary
{Object.values(formik.errors).map(error => (
<div>{error}</div>
))}
</div> */}



<form onSubmit={formik.handleSubmit}>

<Grid container spacing={1}>


+ 2
- 5
src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js Ver ficheiro

@@ -12,9 +12,6 @@ import * as FieldUtils from "../../utils/FieldUtils";
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as ComboData from "../../utils/ComboData";
//import axios from 'axios';

//import {useParams} from "react-router-dom";

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

@@ -32,8 +29,8 @@ const UserInformationCard_Individual = ({formData,userFile, loadDataFun}) => {
enName: yup.string().max(255).required('請輸入英文姓名'),
chName: yup.string().max(255).required('請輸入中文姓名'),
addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255).required('請輸入第二行地址'),
addressLine3: yup.string().max(255).required('請輸入第三行地址'),
addressLine2: yup.string().max(255),
addressLine3: yup.string().max(255),
emailAddress: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
identification: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'),
checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'),


+ 243
- 549
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js Ver ficheiro

@@ -1,142 +1,103 @@
// material-ui
import {
Grid, TextField, Typography, Button,
Autocomplete,
// OutlinedInput, FormHelperText
Grid, Typography, Button,
} from '@mui/material';
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 FieldUtils from "../../utils/FieldUtils";
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as ComboData from "../../utils/ComboData";

import { useFormik,FormikProvider } from 'formik';
import { useFormik } from 'formik';
import * as yup from 'yup';

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


const UserInformationCard_Organization = ({userData, loadDataFun}) => {
const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => {

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

const [district, setDistrict] = useState(null);
const [country, setCountry] = useState(ComboData.country[0]);
const [orgId, setOrgId] = useState("");

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

const formik = useFormik({
initialValues:(currentUserData),
enableReinitialize:true,
initialValues:currentUserData,
validationSchema:yup.object().shape({
enName: yup.string().max(255).required('請輸入英文姓名'),
enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
chName: yup.string().max(255).required('請輸入中文姓名'),
address1: yup.string().max(255).required('請輸入第一行地址'),
address2: yup.string().max(255).required('請輸入第二行地址'),
address3: yup.string().max(255).required('請輸入第三行地址'),
email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'),
phoneCountryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
faxCountryCode: yup.string().min(3,'請輸入3位數字'),
phone: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
fax: yup.string().min(8,'請輸入8位數字'),
chName: yup.string().max(255),
enCompanyName: yup.string().max(255),
chCompanyName: yup.string().max(255),
addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255),
addressLine3: yup.string().max(255),
emailBus: yup.string().max(255).required('請輸入電郵'),
tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
fax_countryCode: yup.string().min(3,'請輸入3位數字'),
phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
faxNumber: yup.string().min(8,'請輸入8位數字'),
brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'),
brNo: yup.string().min(8,'請輸入商業登記證號碼'),
})
}),
onSubmit:(values)=>{
HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+userData.id,
params: {
chName: values.chName,
enName: values.enName,
contactTel: {
countryCode: values.tel_countryCode,
phoneNumber: values.phoneNumber
},
faxNo: {
countryCode: values.fax_countryCode,
faxNumber: values.faxNumber
},
addressBus: {
country: values.country,
district: values.district,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2,
addressLine3: values.addressLine3,
},
identification: values.identification,
emailBus:values.emailBus,
contactPerson: values.contactPerson,
enCompanyName: values.enCompanyName,
chCompanyName: values.chCompanyName,
orgId: values.orgId,
brNo: values.brNo,
brExpiryDate: values.brExpiryDate,
},
onSuccess: function(){
loadDataFun();
}
});
}
});


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["lastLoginDate"] = userData.lastLogin?DateUtils.datetimeStr(lastLoginDate):"";

userData["country"] = userData.addressBus?.country;
userData["district"] = userData.addressBus?.district;
userData["addressLine1"] = userData.addressBus?.addressLine1;
userData["addressLine2"] = userData.addressBus?.addressLine2;
userData["addressLine3"] = userData.addressBus?.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(brExpiryDate):"";


setDistrict(userData.district);
setCountry(userData.country);
setOrgId(userData.emailVerifyHash);
setCurrentUserData(userData);
}, [userData]);

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



function onSubmitForm(_data) {
HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+userData.id,
params: {
chName: _data.chName,
enName: _data.enName,
contactTel: {
countryCode: _data.tel_countryCode,
phoneNumber: _data.phoneNumber
},
faxNo: {
countryCode: _data.fax_countryCode,
faxNumber: _data.faxNumber
},
addressBus: {
country: country,
district: district,
addressLine1: _data.addressLine1,
addressLine2: _data.addressLine2,
addressLine3: _data.addressLine3,
},
identification: _data.identification,
emailBus:_data.emailBus,
contactPerson: _data.contactPerson,
enCompanyName: _data.enCompanyName,
chCompanyName: _data.chCompanyName,
emailVerifyHash: orgId,
brNo: _data.brNo,
//brExpiryDate: _data.brExpiryDate,

},
onSuccess: function(){
loadDataFun();
}
});
}

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

const createOrgClick = () => {
window.open("/org/fromUser/"+userData.id, "_blank", "noreferrer");
window.addEventListener("focus", onFocus)
};
const onFocus=()=>{
loadDataFun();
window.removeEventListener("focus", onFocus)
}

const onVerifiedClick = () => {
HttpUtils.get({
@@ -175,8 +136,8 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
Information
</Typography>

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

{/*top button*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">
@@ -236,174 +197,91 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid>
</Grid>
{/*end top button*/}
<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}>
<TextField
fullWidth
{...register("enName")}
id='enName'
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'}}>
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'}}>
Chinese Name:
</Grid>

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

<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'}}>
Organization:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6} >
{/* <TextField
{...register("orgId")}
id='orgId'
disabled={!editMode}
/> */}
<Autocomplete
fullWidth
disablePortal
disabled={!editMode}
id="emailVerifyHash"
value={orgId}
options={["A Company", "B Company", "C Company"]}
{...register("emailVerifyHash")}
onChange={(event, newValue) => {
setOrgId(newValue);
}}
sx={{"& .MuiInputBase-root": { height: "41px" },"#emailVerifyHash":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="Organization"/>}
/>
</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("emailBus")}
id='emailBus'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>
<Grid container spacing={1}>
{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:"Chinese Name:",
valueName:"chName",
disabled:(!editMode),
form: formik
})}

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

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

{FieldUtils.getComboField({
label:"Organization:",
valueName:"orgId",
disabled:(!editMode),
dataList: orgData,
filterOptions:(options) => options,
getOptionLabel:(item) => item?typeof item==='number'?item+"":(item["brNo"]?item["brNo"]+"-"+item["enCompanyName"]:""):"",
// getOptionSelected: (option, value) => option.label === value.label,
isOptionEqualToValue:(option, newValue, setValue, setInputValue) => {
if(option.id == newValue){
setValue(option);
setInputValue(option["brNo"]+"-"+option["enCompanyName"]);
return true;
}
return option == newValue;
},
onInputChange:(event, newValue, setInputValue)=>{
if(newValue != null){
setInputValue(newValue);
}
},
onChange:(event, newValue)=>{
if(newValue == null){
formik.setFieldValue("orgId","");
return;
}
formik.setFieldValue("orgId",newValue.id);
},
form: formik
})}


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


<Grid item lg={4}>
@@ -417,22 +295,20 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
{
currentUserData.verifiedBy || editMode?
<Grid item xs={6}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
{FieldUtils.initField({
valueName:"verifiedStatus",
disabled:true,
form: formik,
})}
</Grid>
:
<>
<Grid item xs={4}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
{FieldUtils.initField({
valueName:"verifiedStatus",
disabled:true,
form: formik,
})}
</Grid>
<Grid item xs={1}>
<Button
@@ -453,29 +329,12 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</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>

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

<TextField
fullWidth
{...register("lastLoginDate")}
id='lastLoginDate'
disabled
>
</TextField>
</Grid>
</Grid>
</Grid>

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

<Grid item lg={4}>
@@ -487,25 +346,23 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
{
editMode?
<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("status")}
id='status'
disabled
/>
{FieldUtils.initField({
valueName:"status",
disabled:true,
form: formik,
})}
</Grid>
:
<>

<Grid item lg={4}>
<TextField
fullWidth
{...register("status")}
id='status'
disabled
/>
{FieldUtils.initField({
valueName:"status",
disabled:true,
form: formik,
})}
</Grid>
{locked?
{formik.values.locked?
<Grid lg={1}>
<Button
size="large"
@@ -545,7 +402,6 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid>
</Grid>

</Grid>


<Grid container spacing={1}>
@@ -565,237 +421,75 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid>
<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'}}>
Org.Name (English):
</Grid>

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

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

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

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

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("brExpiryDate")}
id='brExpiryDate'
disabled={!editMode}
/>
{/* {
<OutlinedInput
fullWidth
disabled={!editMode}
{...register("brExpiryDate")}
error={Boolean(formik.touched.brExpiryDate && formik.errors.brExpiryDate)}
id="brExpiryDate"
type="date"
value={formik.values.brExpiryDate}
format="yyyy-MM-"
name="brExpiryDate"
onChange={formik.handleChange}
placeholder="與與商業登記證相同如有"
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
// {formik.touched.brExpiryDate && formik.errors.brExpiryDate && (
// <FormHelperText error id="brExpiryDate">
// {formik.errors.brExpiryDate}
// </FormHelperText>
// )}
} */}
</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'}}>Address :</Grid>
</Grid>

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

{FieldUtils.getTextField({
label:"Org.Name (English):",
valueName:"enCompanyName",
disabled:(!editMode),
form: formik
})}

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

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

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

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

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

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

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

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

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

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


+ 34
- 3
src/pages/pnspsUserDetailPage_Organization/index.js Ver ficheiro

@@ -8,13 +8,12 @@ import {useParams} from "react-router-dom";
import FileList from "../../components/FileList"
import MainCard from "../../components/MainCard";
import * as UrlUtils from "../../utils/ApiPathConst";
import * as DateUtils from '../../utils/DateUtils';

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


// ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -23,6 +22,7 @@ const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Or
const UserMaintainPage_Organization = () => {
const params = useParams();
const [userData, setUserData] = useState({})
const [orgData, setOrgData] = useState({})
const [isLoading, setLoding] = useState(true);


@@ -31,6 +31,10 @@ const UserMaintainPage_Organization = () => {
loadData();
},[]);

const reloadPage=()=>{
window.location.reload(false);
}

const loadData = ()=>{
setLoding(true);
HttpUtils.get({
@@ -39,7 +43,33 @@ const UserMaintainPage_Organization = () => {
response.data["addressBus"] = JSON.parse(response.data["addressBus"]);
response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
response.data["faxNo"] = JSON.parse(response.data["faxNo"]);

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["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLoginDate):"";
response.data["country"] = response.data.addressBus?.country;
response.data["district"] = response.data.addressBus?.district;
response.data["addressLine1"] = response.data.addressBus?.addressLine1;
response.data["addressLine2"] = response.data.addressBus?.addressLine2;
response.data["addressLine3"] = response.data.addressBus?.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):"";
//response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
setUserData(response.data);
setOrgData(response.orgList);
}
});
};
@@ -63,7 +93,8 @@ const UserMaintainPage_Organization = () => {
<Grid item xs={12} md={12} lg={12}>
<UserInformationCard
userData={userData}
loadDataFun={loadData}
loadDataFun={reloadPage}
orgData={orgData}
/>
</Grid>
<Grid item xs={12} md={12} lg={12}>


+ 23
- 5
src/utils/Combo.js Ver ficheiro

@@ -20,7 +20,10 @@ export default function Combo ({valueName, disabled, form, dataList, filterOptio
filterOptions={filterOptions}
options={dataList}
getOptionLabel={getOptionLabel}
isOptionEqualToValue={isOptionEqualToValue}
isOptionEqualToValue={(option, newValue)=>{
if(isOptionEqualToValue)
isOptionEqualToValue(option,newValue, setValue,setInputValue )
}}
onInputChange={(event, newValue) => {
setInputValue(newValue);
if(onInputChange){
@@ -29,16 +32,31 @@ export default function Combo ({valueName, disabled, form, dataList, filterOptio
}}
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=""/>}
sx={{
"& .MuiInputBase-root": {
height: "41px",
padding: "0px 0px 0px 8px"
},
"& .MuiAutocomplete-endAdornment": {
top: "auto"
},
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
renderInput={(params) => <TextField {...params} sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}/>}
/>
);
}

+ 4
- 4
src/utils/DateUtils.js Ver ficheiro

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

export const convertToDate = (date)=>{
if(Array.isArray(date)){
if(typeof date == 'number'){
return dayjs(date);
}else if(Array.isArray(date)){
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);
}
return date;
}

+ 13
- 33
src/utils/FieldUtils.js Ver ficheiro

@@ -14,7 +14,7 @@ export const getDateField=({label, valueName, form, disabled})=>{
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
{initField({
label:"date",
type:"date",
valueName:valueName,
form:form,
disabled:disabled
@@ -33,7 +33,7 @@ export const getTextField=({label, valueName, form, disabled})=>{
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
{initField({
label:"text",
type:"text",
valueName:valueName,
form:form,
disabled:disabled
@@ -52,7 +52,7 @@ export const getPhoneField=({label, valueName, form, disabled})=>{
</Grid>
<Grid item xs={2}>
{initField({
label:"tel",
type:"tel",
valueName:valueName.code,
form:form,
disabled:disabled
@@ -60,7 +60,7 @@ export const getPhoneField=({label, valueName, form, disabled})=>{
</Grid>
<Grid item xs={4}>
{initField({
label:"tel",
type:"tel",
valueName:valueName.num,
form:form,
disabled:disabled
@@ -70,32 +70,6 @@ export const getPhoneField=({label, valueName, form, disabled})=>{
</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} >
@@ -107,7 +81,7 @@ export const getAddressField=({label, valueName, form, disabled})=>{
<Grid item lg={6}>
<Grid item lg={12}>
{initField({
label:"text",
type:"text",
valueName:valueName[0],
form:form,
disabled:disabled
@@ -115,7 +89,7 @@ export const getAddressField=({label, valueName, form, disabled})=>{
</Grid>
<Grid item lg={12}>
{initField({
label:"text",
type:"text",
valueName:valueName[1],
form:form,
disabled:disabled
@@ -123,7 +97,7 @@ export const getAddressField=({label, valueName, form, disabled})=>{
</Grid>
<Grid item lg={12}>
{initField({
label:"text",
type:"text",
valueName:valueName[2],
form:form,
disabled:disabled
@@ -196,5 +170,11 @@ export const initField=({type, valueName, form, disabled, placeholder, inputProp
onChange={form.handleChange}
value={form.values[valueName]}
disabled={disabled}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
}

Escrever Pré-visualizar
Carregando…
Cancelar
Guardar