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

update user cannot load combo from first time

master
Alex Cheung 2 years ago
parent
592df2a517
commit
ce1e34e0ff
5 changed files with 844 additions and 777 deletions
Split 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. +338
    -322
      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 FieldUtils from "../../utils/FieldUtils";
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 ||============================== //


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

const [currentUserData, setCurrentUserData] = useState(userData);
const [currentUserData, setCurrentUserData] = useState({});
const [editMode, setEditMode] = 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({
enableReinitialize: true,
@@ -78,18 +91,21 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
});

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 = () => {
setEditMode(true);
@@ -177,124 +193,126 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
</Grid>
{/*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({
label: FieldUtils.notNullFieldLabel("BR No.:"),
valueName: "brNo",
label: "Name (Ch):",
valueName: "chCompanyName",
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>

<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({
label: FieldUtils.notNullFieldLabel("Name (Eng):"),
valueName: "enCompanyName",
label: FieldUtils.notNullFieldLabel("Contact Person:"),
valueName: "contactPerson",
disabled: (!editMode && !createMode),
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 item lg={12} ></Grid>

</Grid>

}
</form>
</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 { useNavigate } from "react-router-dom";
import { useFormik } from 'formik';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';

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

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

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

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({
enableReinitialize: true,
@@ -76,7 +87,9 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
});

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

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

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

{!onReady?
<LoadingComponent />
:
<Grid container spacing={1}>
{/*top*/}
<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>
}
</form>
</div>
</MainCard>


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

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


+ 338
- 322
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 UrlUtils from "../../utils/ApiPathConst";
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 ||============================== //


@@ -21,7 +23,16 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
const [currentUserData, setCurrentUserData] = useState(formData);
const [editMode, setEditMode] = 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({
enableReinitialize: true,
initialValues: currentUserData,
@@ -78,7 +89,9 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {


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

useEffect(() => {
@@ -121,379 +134,382 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
border={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>
{/*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({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</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({
valueName: "identification",
disabled: (!editMode),
valueName: "verifiedStatus",
disabled: true,
form: formik,
placeholder: "證件號碼",
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}

</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({
valueName: "checkDigit",
valueName: "identification",
disabled: (!editMode),
form: formik
})}
</Grid>
</> :
<Grid item lg={12}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
form: formik
})}
</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({
valueName: "status",
disabled: true,
form: formik,
})}
</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>
}
</>
}
{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 item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
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.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>


</Grid>
</Grid>



</form>
</form>
}
</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 * as yup from 'yup';

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


@@ -26,6 +28,15 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
const [confirmText, setConfirmText] = React.useState("");
const [confirmAction, setConfirmAction] = React.useState();
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({
enableReinitialize: true,
@@ -84,7 +95,9 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>


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

const onEditClick = () => {
@@ -154,390 +167,392 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
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>
{/*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 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({
valueName: "status",
valueName: "verifiedStatus",
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 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"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
onClick={() => { onVerifiedClick() }}
>
Lock
Verify
</Button>
</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 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>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle>Warning</DialogTitle>


Write Preview
Loading…
Cancel
Save