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

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

# Conflicts:
#	src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
master
Anna Ho 1 year ago
parent
5be3d301aa ce1e34e0ff
commit
c13e16045c
5 changed files with 843 additions and 782 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +130
    -112
      src/pages/OrganizationDetailPage/OrganizationCard.js
  2. +19
    -3
      src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
  3. +4
    -2
      src/pages/authentication/auth-forms/CustomFormWizard.js
  4. +337
    -327
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  5. +353
    -338
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js

+ 130
- 112
src/pages/OrganizationDetailPage/OrganizationCard.js View File

@@ -12,15 +12,28 @@ 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 FieldUtils from "../../utils/FieldUtils";
import * as ComboData from "../../utils/ComboData"; import * as ComboData from "../../utils/ComboData";
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';


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




const OrganizationCard = ({ userData, loadDataFun, id }) => { const OrganizationCard = ({ userData, loadDataFun, id }) => {


const [currentUserData, setCurrentUserData] = useState(userData);
const [currentUserData, setCurrentUserData] = useState({});
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const [createMode, setCreateMode] = useState(false); const [createMode, setCreateMode] = useState(false);
const [onReady, setOnReady] = useState(false);

useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
if (Object.keys(currentUserData).length > 0) {
setOnReady(true);
}
}, [currentUserData]);



const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
@@ -78,18 +91,21 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
}); });


useEffect(() => { useEffect(() => {
setCreateMode(id <= 0);
setEditMode(id <= 0);
setCurrentUserData(userData);
}, [userData]);

useEffect(() => {
if(userData.creditor === undefined||userData.creditor === null){
userData.creditor = false
if (Object.keys(userData).length > 0) {
setCreateMode(id <= 0);
setEditMode(id <= 0);
setCurrentUserData(userData);
} }
setCurrentUserData(userData);
}, []);
}, [userData]);


// useEffect(() => {
// if (Object.keys(userData).length > 0) {
// if(userData.creditor === undefined||userData.creditor === null){
// userData.creditor = false
// }
// setCurrentUserData(userData);
// }
// }, []);


const onEditClick = () => { const onEditClick = () => {
setEditMode(true); setEditMode(true);
@@ -177,124 +193,126 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
</Grid> </Grid>
{/*top*/} {/*top*/}



<Grid container spacing={1}>

<Grid item lg={4} >
{!onReady?
<LoadingComponent />
:
<Grid container spacing={1}>

<Grid item lg={4} >
{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("BR No.:"),
valueName: "brNo",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
<FormControlLabel
control={<Checkbox checked={formik.values.creditor} />}
label="is Creditor"
name="creditor"
onChange={formik.handleChange}
disabled={!editMode && !createMode}
/>
</Grid>

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

<Grid item lg={4} >
{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Name (Eng):"),
valueName: "enCompanyName",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("BR No.:"),
valueName: "brNo",
label: "Name (Ch):",
valueName: "chCompanyName",
disabled: (!editMode && !createMode), disabled: (!editMode && !createMode),
form: formik form: formik
})} })}
</Grid>

<Grid item lg={4} >
<FormControlLabel
control={<Checkbox checked={formik.values.creditor} />}
label="is Creditor"
name="creditor"
onChange={formik.handleChange}
disabled={!editMode && !createMode}
/>
</Grid>
</Grid>


<Grid item lg={4} ></Grid>
<Grid item lg={4} >
{FieldUtils.getDateField({
label: FieldUtils.notNullFieldLabel("Expiry Date:"),
valueName: "brExpiryDate",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>


<Grid item lg={4} >
<Grid item lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Name (Eng):"),
valueName: "enCompanyName",
label: FieldUtils.notNullFieldLabel("Contact Person:"),
valueName: "contactPerson",
disabled: (!editMode && !createMode), disabled: (!editMode && !createMode),
form: formik form: formik
})} })}
</Grid>

<Grid item lg={4} >
{FieldUtils.getTextField({
label: "Name (Ch):",
valueName: "chCompanyName",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getDateField({
label: FieldUtils.notNullFieldLabel("Expiry Date:"),
valueName: "brExpiryDate",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Contact Person:"),
valueName: "contactPerson",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>
</Grid>

<Grid item lg={4} >
{FieldUtils.getPhoneField({
label: FieldUtils.notNullFieldLabel("Contact Tel:"),
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getPhoneField({
label: "Fax No:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>


<Grid item lg={4} >
{FieldUtils.getPhoneField({
label: FieldUtils.notNullFieldLabel("Contact Tel:"),
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>
<Grid item lg={4} >
{FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("Country:"),
valueName: "country",
disabled: (!editMode && !createMode),
dataList: ComboData.country,
form: formik
})}
</Grid>


<Grid item lg={4} >
{FieldUtils.getPhoneField({
label: "Fax No:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>
<Grid item lg={4} >
{FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("District:"),
valueName: "district",
disabled: (!editMode && !createMode),
dataList: ComboData.district,
form: formik
})}
</Grid>


<Grid item lg={4} >
{FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("Country:"),
valueName: "country",
disabled: (!editMode && !createMode),
dataList: ComboData.country,
form: formik
})}
</Grid>


<Grid item lg={4} >
{FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("District:"),
valueName: "district",
disabled: (!editMode && !createMode),
dataList: ComboData.district,
form: formik
})}
</Grid>
<Grid item lg={4} >
{FieldUtils.getAddressField({
label: FieldUtils.notNullFieldLabel("Address:"),
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>


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


<Grid item lg={4} >
{FieldUtils.getAddressField({
label: FieldUtils.notNullFieldLabel("Address:"),
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode && !createMode),
form: formik
})}
</Grid> </Grid>

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

</Grid>

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


+ 19
- 3
src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js View File

@@ -12,6 +12,9 @@ import * as FieldUtils from "../../utils/FieldUtils";
import * as ComboData from "../../utils/ComboData"; 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';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';


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


@@ -19,8 +22,16 @@ import { useFormik } from 'formik';
const OrganizationCard_loadFromUser = ({ userData, userId }) => { const OrganizationCard_loadFromUser = ({ userData, userId }) => {


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

const navigate = useNavigate(); const navigate = useNavigate();
const [onReady, setOnReady] = useState(false);

useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
if (Object.keys(currentUserData).length > 0) {
setOnReady(true);
}
}, [currentUserData]);


const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
@@ -76,7 +87,9 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
}); });


useEffect(() => { useEffect(() => {
setCurrentUserData(userData);
if (Object.keys(userData).length > 0) {
setCurrentUserData(userData);
}
}, [userData]); }, [userData]);


return ( return (
@@ -96,7 +109,9 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {


<div style={{ padding: 24 }}> <div style={{ padding: 24 }}>
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>

{!onReady?
<LoadingComponent />
:
<Grid container spacing={1}> <Grid container spacing={1}>
{/*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">
@@ -209,6 +224,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>
</Grid> </Grid>
}
</form> </form>
</div> </div>
</MainCard> </MainCard>


+ 4
- 2
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -364,8 +364,10 @@ const CustomFormWizard = (props) => {
function handleIdNo(idNo,selectedIdDocType,checkDigit) { function handleIdNo(idNo,selectedIdDocType,checkDigit) {
var pattern = /^[A-Z][0-9]*$/; var pattern = /^[A-Z][0-9]*$/;
var space = /\s/; var space = /\s/;
if (!idNo.match(pattern)&&selectedIdDocType=="HKID"
&&!checkDigit=="") {
if (!idNo.match(pattern)) {
return false;
}else if
(selectedIdDocType=="HKID"&&checkDigit==""){
return false; return false;
} }
else if (idNo.match(space)) { else if (idNo.match(space)) {


+ 337
- 327
src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js View File

@@ -12,7 +12,9 @@ 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";

const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




@@ -21,6 +23,15 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
const [currentUserData, setCurrentUserData] = useState(formData); 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 [onReady, setOnReady] = useState(false);

useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
if (Object.keys(currentUserData).length > 0) {
setOnReady(true);
}
}, [currentUserData]);


const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
@@ -78,7 +89,9 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {




useEffect(() => { useEffect(() => {
setCurrentUserData(formData);
if (Object.keys(formData).length > 0) {
setCurrentUserData(formData);
}
}, [formData]); }, [formData]);


useEffect(() => { useEffect(() => {
@@ -121,381 +134,378 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
border={false} border={false}
content={false} content={false}
> >
{!onReady ?
<LoadingComponent />
:
<form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>

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

{editMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Reset & Back
</Button>
</Grid>


<form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>

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

{editMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Reset & Back
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>
</>
:
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
Edit
</Button>
</Grid>
</>
}
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>
</>
:
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
Edit
</Button>
</Grid>
</>
}


</Grid>
</Grid> </Grid>
</Grid>
{/*end top button*/}

<Grid container spacing={1}>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>
{/*end top button*/}


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "English Name:",
valueName: "enName",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid container spacing={1}>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Prefix:",
valueName: "prefix",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Chinese Name:",
valueName: "chName",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "English Name:",
valueName: "enName",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Prefix:",
valueName: "prefix",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{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"] : "") : "",
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
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Chinese Name:",
valueName: "chName",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid>


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Verified:
</Grid>
<Grid item lg={4}>
{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"] : "") : "",
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
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>


{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item xs={10} md={4} lg={4}>
<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Verified:
</Grid>


{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "verifiedStatus", valueName: "verifiedStatus",
disabled: true, disabled: true,
form: formik, form: formik,
})} })}
</Grid> </Grid>
<Grid item xs={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}
onClick={onVerifiedClick}
>
Verify
</Button>
</Grid>
</>
}

</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
ID No.:
</Grid>

<Grid item xs={12} md={6} lg={6}>
<Grid container>
{formik.values.idDocType == "HKID" ?
:
<> <>
<Grid item lg={8}>
<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
valueName: "verifiedStatus",
disabled: true,
form: formik, form: formik,
placeholder: "證件號碼",
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})} })}

</Grid> </Grid>
<Grid item lg={4}>
<Grid item xs={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}
onClick={onVerifiedClick}
>
Verify
</Button>
</Grid>
</>
}

</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
ID No.:
</Grid>

<Grid item xs={12} md={6} lg={6}>
<Grid container>
{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({ {FieldUtils.initField({
valueName: "checkDigit",
valueName: "identification",
disabled: (!editMode), disabled: (!editMode),
form: formik form: formik
})} })}
</Grid> </Grid>
</> :
<Grid item lg={12}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
form: formik
})}
</Grid>
}
}
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid>


<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailAddress",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailAddress",
disabled: (!editMode),
form: formik
})}
</Grid>




<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Status:
</Grid>
<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Status:
</Grid>


{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item lg={4}>
{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "status", valueName: "status",
disabled: true, disabled: true,
form: formik, form: formik,
})} })}
</Grid> </Grid>
{locked ?
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
</Grid>
:
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
:
<>
<Grid item lg={4}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid> </Grid>
}
</>
}
{locked ?
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
</Grid>
:
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
</Grid>
}
</>
}
</Grid>
</Grid> </Grid>
</Grid>

<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>


{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid> </Grid>



</Grid>



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


+ 353
- 338
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js View File

@@ -13,7 +13,9 @@ import * as ComboData from "../../utils/ComboData";


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

const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




@@ -26,6 +28,15 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
const [confirmText, setConfirmText] = React.useState(""); const [confirmText, setConfirmText] = React.useState("");
const [confirmAction, setConfirmAction] = React.useState(); const [confirmAction, setConfirmAction] = React.useState();
const [editMode, setEditMode] = React.useState(false); const [editMode, setEditMode] = React.useState(false);
const [onReady, setOnReady] = React.useState(false);

React.useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
if (Object.keys(currentUserData).length > 0) {
setOnReady(true);
}
}, [currentUserData]);


const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
@@ -84,7 +95,9 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>




React.useEffect(() => { React.useEffect(() => {
setCurrentUserData(userData);
if (Object.keys(userData).length > 0) {
setCurrentUserData(userData);
}
}, [userData]); }, [userData]);


const onEditClick = () => { const onEditClick = () => {
@@ -154,390 +167,392 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
content={false} content={false}
> >


{!onReady?
<LoadingComponent />
:
<form onSubmit={formik.handleSubmit}>

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

{editMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Reset & Back
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>

</>
:
<>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
Edit
</Button>
</Grid>
</>
}


<form onSubmit={formik.handleSubmit}>

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

{editMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Reset & Back
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>

</>
:
<>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
Edit
</Button>
</Grid>
</>
}


</Grid>
</Grid>
{/*end top button*/}
<div style={{ paddingLeft: 24, paddingRight: 24 }}>
<Grid container spacing={1}>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Name:",
valueName: "contactPerson",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid> </Grid>
</Grid>
{/*end top button*/}
<div style={{ paddingLeft: 24, paddingRight: 24 }}>
<Grid container spacing={1}>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailBus",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Name:",
valueName: "contactPerson",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailBus",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{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);
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
}, },
);
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
})}
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Verified:
</Grid>

{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
<Grid item xs={1} md={1} lg={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={() => { onVerifiedClick() }}
>
Verify
</Button>
</Grid>
</>
}
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid> </Grid>
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{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
})}
</Grid>


<Grid item lg={8}></Grid>
<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Verified:
</Grid>


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Status:
</Grid>
{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>

<Grid item xs={10} md={4} lg={4}>
{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "status",
valueName: "verifiedStatus",
disabled: true, disabled: true,
form: formik, form: formik,
})} })}
</Grid> </Grid>

{formik.values.locked ?
<Grid item xs={1} md={1} lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
:
<>
<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid> </Grid>
:
<Grid item xs={1} md={1} lg={1}> <Grid item xs={1} md={1} lg={1}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
color="error"
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}} }}
onClick={doLock}
onClick={() => { onVerifiedClick() }}
> >
Lock
Verify
</Button> </Button>
</Grid> </Grid>
}
</>
}


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


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>


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

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Status:
</Grid>
{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>

<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>

{formik.values.locked ?
<Grid item xs={1} md={1} lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
</Grid>
:
<Grid item xs={1} md={1} lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
</Grid>
}

</>
}


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


</div>
<div style={{ paddingLeft: 24, paddingRight: 24 }}>
<Grid container spacing={1} >


<Grid item lg={12} >
<Grid container alignItems={"center"}>
<Grid item lg={1} >
<Typography variant="h5" sx={{ display: 'flex', alignItems: 'center' }}>
Organization
</Typography>
</Grid>
<Grid item lg={2} >
<Button variant="contained"
onClick={createOrgClick}
>
Create Organization
</Button>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Org.Name (English):",
valueName: "enCompanyName",
disabled: (!editMode),
form: formik
})}
</Grid>
</div>
<div style={{ paddingLeft: 24, paddingRight: 24 }}>
<Grid container spacing={1} >

<Grid item lg={12} >
<Grid container alignItems={"center"}>
<Grid item lg={1} >
<Typography variant="h5" sx={{ display: 'flex', alignItems: 'center' }}>
Organization
</Typography>
</Grid>
<Grid item lg={2} >
<Button variant="contained"
onClick={createOrgClick}
>
Create Organization
</Button>
</Grid>
</Grid>
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Org.Name (Chinese):",
valueName: "chCompanyName",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Org.Name (English):",
valueName: "enCompanyName",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getTextField({
label: "BR No.:",
valueName: "brNo",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Org.Name (Chinese):",
valueName: "chCompanyName",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "BR No.:",
valueName: "brNo",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getDateField({
label: "BR Expiry Date.:",
valueName: "brExpiryDate",
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getDateField({
label: "BR Expiry Date.:",
valueName: "brExpiryDate",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid>
</div>
</form>
<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid>
</div>
</form>
}
<div> <div>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} > <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle>Warning</DialogTitle> <DialogTitle>Warning</DialogTitle>


Write Preview
Loading…
Cancel
Save