alex
/
PNSPS-frontend-MaterialUI
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI 

# Conflicts:
#	src/utils/Utils.js
master
Alex Cheung il y a 2 ans
Parent
c4a7f92639 d756c0f61c
révision
bdf4abcd34
10 fichiers modifiés avec 369 ajouts et 621 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +13
    -13
      src/pages/OrganizationDetailPage/OrganizationCard.js
  2. +21
    -9
      src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
  3. +1
    -0
      src/pages/OrganizationDetailPage_FromUser/index.js
  4. +2
    -5
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  5. +253
    -549
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  6. +34
    -3
      src/pages/pnspsUserDetailPage_Organization/index.js
  7. +23
    -5
      src/utils/Combo.js
  8. +4
    -4
      src/utils/DateUtils.js
  9. +13
    -33
      src/utils/FieldUtils.js
  10. +5
    -0
      src/utils/Utils.js

+ 13
- 13
src/pages/OrganizationDetailPage/OrganizationCard.js Voir le fichier

@@ -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({


+ 21
- 9
src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js Voir le fichier

@@ -16,7 +16,7 @@ import { useFormik } from 'formik';
// ==============================|| DASHBOARD - DEFAULT ||============================== //


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

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

@@ -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('請輸入商業登記證號碼'),
}),
@@ -43,6 +43,7 @@ const OrganizationCard_loadFromUser = ({userData}) => {
url: UrlUtils.POST_ORG_SAVE_PATH,
params: {
id:null,
primaryUserId:userId,
enCompanyName: values.enCompanyName,
chCompanyName: values.chCompanyName,
brNo: values.brNo,
@@ -87,6 +88,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}>


+ 1
- 0
src/pages/OrganizationDetailPage_FromUser/index.js Voir le fichier

@@ -74,6 +74,7 @@ const OrganizationDetailPage_FromUser = () => {
<Grid item xs={12} md={12} lg={12}>
<InfoCard
userData={formData}
userId={params.id}
/>
</Grid>



+ 2
- 5
src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js Voir le fichier

@@ -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('請輸入括號內的數字或字母'),


+ 253
- 549
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js Voir le fichier

@@ -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,101 @@ 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, state)=>{
if(!state || !state.inputValue) return options;
let searchStr = state.inputValue.toLowerCase().toLowerCase().trim();
const displayOptions = options.filter((option) =>{
let brNo=option.brNo.toLowerCase().trim();
let enCompanyName=option.enCompanyName?option.enCompanyName.toLowerCase().trim():"";
let chCompanyName=option.chCompanyName?option.chCompanyName.toLowerCase().trim():"";
return brNo.includes(searchStr) || enCompanyName.includes(searchStr)|| chCompanyName.includes(searchStr);
},
);
return displayOptions;
},
getOptionLabel:(item) => item?typeof item==='number'?item+"":(item["brNo"]?item["brNo"]+"-"+item["enCompanyName"]:""):"",
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 +305,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 +339,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 +356,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 +412,6 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid>
</Grid>

</Grid>


<Grid container spacing={1}>
@@ -565,237 +431,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 Voir le fichier

@@ -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 Voir le fichier

@@ -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 Voir le fichier

@@ -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 Voir le fichier

@@ -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",
},
}}
/>
}

+ 5
- 0
src/utils/Utils.js Voir le fichier

@@ -78,6 +78,11 @@ export const isORGLoggedIn = () =>{
return JSON.parse(localStorage.getItem('userData')).type === 'ORG'
}
}
export const isPrimaryLoggedIn = () =>{
if (localStorage.getItem('userData') != null){
return JSON.parse(localStorage.getItem('userData')).role === 'primary'
}
}
/**
** This function is used for demo purpose route navigation
** In real app you won't need this function because your app will navigate to same route for each users regardless of ability


Écrire Aperçu
Chargement…
Annuler
Enregistrer