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

add ind org user profile

master
Alex Cheung 1 year ago
parent
3378a60a89
commit
9a51df4cfe
10 changed files with 26321 additions and 19210 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16674
    -10267
      package-lock.json
  2. +3
    -3
      src/layout/MainLayout/Header/index.js
  3. +344
    -0
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
  4. +101
    -58
      src/pages/User/DetailsPage_Individual/index.js
  5. +5
    -5
      src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
  6. +247
    -0
      src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
  7. +132
    -73
      src/pages/User/DetailsPage_Organization/index.js
  8. +2
    -2
      src/routes/PublicUserRoutes.js
  9. +6
    -0
      src/utils/ApiPathConst.js
  10. +8807
    -8802
      yarn.lock

+ 16674
- 10267
package-lock.json
File diff suppressed because it is too large
View File


+ 3
- 3
src/layout/MainLayout/Header/index.js View File

@@ -48,7 +48,7 @@ import {
isCreditorLoggedIn, isCreditorLoggedIn,
isINDLoggedIn, isINDLoggedIn,
// isORGLoggedIn, // isORGLoggedIn,
getUserId
// getUserId
} from "utils/Utils"; } from "utils/Utils";
import { handleLogoutFunction } from 'auth/index'; import { handleLogoutFunction } from 'auth/index';


@@ -214,7 +214,7 @@ function Header(props) {
</Link> </Link>
<ul className='dropdown' style={{ width: "max-content" }}> <ul className='dropdown' style={{ width: "max-content" }}>
<li> <li>
<Link className="manageUser" to={'/indUser/'+getUserId()}>
<Link className="manageUser" to={'/indUser'}>
<Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}> <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
<FormattedMessage id="companyOrUserRecord" /> <FormattedMessage id="companyOrUserRecord" />
</Typography> </Typography>
@@ -231,7 +231,7 @@ function Header(props) {
</Link> </Link>
<ul className='dropdown' style={{ width: "max-content" }}> <ul className='dropdown' style={{ width: "max-content" }}>
<li> <li>
<Link className="manageUser" to={'/orgUser/'+getUserId()}>
<Link className="manageUser" to={'/orgUser'}>
<Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}> <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
<FormattedMessage id="companyOrUserRecord" /> <FormattedMessage id="companyOrUserRecord" />
</Typography> </Typography>


+ 344
- 0
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js View File

@@ -0,0 +1,344 @@
// material-ui
import {
Grid, Button, Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import { useEffect, useState } from "react";
import * as yup from 'yup';

import { useFormik } from 'formik';
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';
import {notifySaveSuccess,} from 'utils/CommonFunction';
import {useIntl} from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {

const intl = useIntl();
const [currentUserData, setCurrentUserData] = useState(formData);
const [editMode, setEditMode] = 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,
validationSchema: yup.object().shape({
enName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireEnglishName'})),
chName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireChineseName'})),
addressLine1: yup.string().max(255).required(intl.formatMessage({id: 'validateAddressLine1'})),
addressLine2: yup.string().max(255).nullable(),
addressLine3: yup.string().max(255).nullable(),
emailAddress: yup.string().email(intl.formatMessage({id: 'validEmailFormat'})).max(255).required(intl.formatMessage({id: 'requireEmail'})),
tel_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})).required(intl.formatMessage({id: 'requireDialingCode'})),
fax_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})),
phoneNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).required(intl.formatMessage({id: 'requireContactNumber'})),
faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).nullable(),
}),
onSubmit: values => {
console.log(values);
HttpUtils.post({
url: UrlUtils.POST_PUB_IND_USER,
params: {
enName: values.enName,
chName: values.chName,
mobileNumber: {
countryCode: values.tel_countryCode,
phoneNumber: values.phoneNumber
},
faxNo: {
countryCode: values.fax_countryCode,
faxNumber: values.faxNumber
},
address: {
country: values.country.key,
district: values.district.key,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2,
addressLine3: values.addressLine3,
},
},
onSuccess: function () {
notifySaveSuccess();
loadDataFun();
}
});
}
});



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

useEffect(() => {

}, [currentUserData]);

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

return (
<MainCard elevation={0}
border={false}
content={false}
>
{!onReady ?
<LoadingComponent />
:
<form onSubmit={formik.handleSubmit} style={{ padding: 12 }}>
{/*top button*/}
<Grid item xs={12} sm={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">
{editMode ?
<>
<Grid item sx={{ mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Reset & Back</Typography>
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Save</Typography>
</Button>
</Grid>
</>
:
<>
<Grid item sx={{ mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
<Typography variant="h5">Edit</Typography>
</Button>
</Grid>
</>
}
</Grid>
</Grid>
{/*end top button*/}
<Typography variant="h4" sx={{ mt: 3, mb: 2, borderBottom: "1px solid black" }}>
Individual User Details
</Typography>
<Grid item xs={12} sm={12} md={12} lg={12}>
<Grid container>
<Grid item xs={12} sm={12} md={12} lg={4} >
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>

<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({
label: "English Name:",
valueName: "enName",
disabled: true,
form: formik
})}
</Grid>

<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({
label: "Chinese Name:",
valueName: "chName",
disabled: true,
form: formik
})}
</Grid>

<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({
label: "ID Type:",
valueName: "idDocType",
disabled: true,
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 xs={12} sm={12} md={12} lg={4}>
<Grid container alignItems={"center"} sx={{mb:2}}>
<Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">ID No.:</Typography>
</Grid>

<Grid item xs={12} sm={12} md={9} lg={6}>
<Grid container>
{formik.values.idDocType === "HKID" ?
<>
<Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
{FieldUtils.initField({
valueName: "identification",
disabled: true,
form: formik,
placeholder: intl.formatMessage({id: 'idDocNumber'}),
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}

</Grid>
<Grid item xs={2} sm={2} md={2} lg={2}>
{FieldUtils.initField({
valueName: "checkDigit",
disabled: true,
form: formik
})}
</Grid>
</> :
<Grid item xs={12} sm={6} md={6} lg={12}>
{FieldUtils.initField({
valueName: "identification",
disabled: true,
form: formik
})}
</Grid>
}
</Grid>
</Grid>
</Grid>
</Grid>

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

<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailAddress",
disabled: true,
form: formik
})}
</Grid>

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



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

<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid>
</Grid>
</form>
}
</MainCard>
);
};

export default UserInformationCard_Individual_Pub;

+ 101
- 58
src/pages/User/DetailsPage_Individual/index.js View File

@@ -2,12 +2,12 @@
import * as React from "react"; import * as React from "react";


import { Grid, Typography, Button, Stack } from '@mui/material'; import { Grid, Typography, Button, Stack } from '@mui/material';
import FileList from "../../../components/FileList"
import MainCard from "../../../components/MainCard";
import * as HttpUtils from "../../../utils/HttpUtils";
import FileList from "components/FileList"
import MainCard from "components/MainCard";
import * as HttpUtils from "utils/HttpUtils";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import * as UrlUtils from "../../../utils/ApiPathConst";
import * as DateUtils from '../../../utils/DateUtils';
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from 'utils/DateUtils';
import ForwardIcon from '@mui/icons-material/Forward'; import ForwardIcon from '@mui/icons-material/Forward';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'


@@ -22,12 +22,16 @@ const BackgroundHead = {
} }
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import {getObjectByValue} from "../../../utils/CommonFunction";
import * as ComboData from "../../../utils/ComboData";
import {getObjectByValue} from "utils/CommonFunction";
import * as ComboData from "utils/ComboData";
const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual'))); const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));
const UserInformationPubCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual_Pub')));



import {
isGLDLoggedIn,
isINDLoggedIn,
} from "utils/Utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




@@ -43,36 +47,62 @@ const UserMaintainPage_Individual = () => {


const loadData = () => { const loadData = () => {
setLoding(true); setLoding(true);
HttpUtils.get({
url: `${UrlUtils.GET_IND_USER_PATH}/${params.id}`,
onSuccess: function (response) {
response.data["address"] = JSON.parse(response.data["address"]);
response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
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 verified";

response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
response.data["addressLine1"] = response.data.address?.addressLine1;
response.data["addressLine2"] = response.data.address?.addressLine2;
response.data["addressLine3"] = response.data.address?.addressLine3;

response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;

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

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

setFormData(response.data);
}
});
if (isGLDLoggedIn()){
HttpUtils.get({
url: `${UrlUtils.GET_IND_USER_PATH}/${params.id}`,
onSuccess: function (response) {
response.data["address"] = JSON.parse(response.data["address"]);
response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
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 verified";
response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
response.data["addressLine1"] = response.data.address?.addressLine1;
response.data["addressLine2"] = response.data.address?.addressLine2;
response.data["addressLine3"] = response.data.address?.addressLine3;
response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;
response.data["faxNumber"] = response.data.faxNo?.faxNumber;
response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLogin) : "";
setFormData(response.data);
}
});
}
if (isINDLoggedIn()){
HttpUtils.get({
url: `${UrlUtils.GET_PUB_IND_USER_PATH}`,
onSuccess: function (response) {
response.data["address"] = JSON.parse(response.data["address"]);
response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
response.data["addressLine1"] = response.data.address?.addressLine1;
response.data["addressLine2"] = response.data.address?.addressLine2;
response.data["addressLine3"] = response.data.address?.addressLine3;
response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;
response.data["faxNumber"] = response.data.faxNo?.faxNumber;
response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
setFormData(response.data);
}
});
}
}; };




@@ -100,26 +130,39 @@ const UserMaintainPage_Individual = () => {
{/*col 1*/} {/*col 1*/}
<Grid item xs={12} sm={12} md={12} lg={12} > <Grid item xs={12} sm={12} md={12} lg={12} >
<Grid container> <Grid container>
<Grid item xs={12} sm={12} md={12} lg={12} >
<UserInformationCard
formData={formData}
loadDataFun={loadData}
/>
</Grid>
<Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
<Typography variant="h4" sx={{ mt: 4, ml: 2, mb: 2, mr: 2, borderBottom: "1px solid black" }}>
Files
</Typography>
<Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '100%'}}>
<FileList
refId={params.id}
refType={"identification"}
/>
</Grid>
</MainCard>
<br />
</Grid>
{isGLDLoggedIn()?
<Grid item xs={12} sm={12} md={12} lg={12} >
<UserInformationCard
formData={formData}
loadDataFun={loadData}
/>
</Grid>
:isINDLoggedIn()?
<Grid item xs={12} sm={12} md={12} lg={12} >
<UserInformationPubCard
formData={formData}
loadDataFun={loadData}
/>
</Grid>
:null
}
{isGLDLoggedIn()?
<Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
<Typography variant="h4" sx={{ mt: 4, ml: 2, mb: 2, mr: 2, borderBottom: "1px solid black" }}>
Files
</Typography>
<Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '100%'}}>
<FileList
refId={params.id}
refType={"identification"}
/>
</Grid>
</MainCard>
<br />
</Grid>
:null
}
</Grid> </Grid>
</Grid> </Grid>
{/*col 2*/} {/*col 2*/}


+ 5
- 5
src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js View File

@@ -3,13 +3,13 @@ import {
Grid, Typography, Button, Grid, Typography, Button,
Dialog, DialogTitle, DialogContent, DialogActions, Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../../components/MainCard";
import MainCard from "components/MainCard";
import * as React from "react"; import * as React from "react";


import * as FieldUtils from "../../../utils/FieldUtils";
import * as HttpUtils from '../../../utils/HttpUtils';
import * as UrlUtils from "../../../utils/ApiPathConst";
import * as ComboData from "../../../utils/ComboData";
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 } from 'formik'; import { useFormik } from 'formik';
import * as yup from 'yup'; import * as yup from 'yup';


+ 247
- 0
src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js View File

@@ -0,0 +1,247 @@
// material-ui
import {
Grid, Typography, Button,
// Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";

import * as FieldUtils from "utils/FieldUtils";
import * as HttpUtils from 'utils/HttpUtils';
import * as UrlUtils from "utils/ApiPathConst";

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';
import { notifySaveSuccess, } from 'utils/CommonFunction';
import {useIntl} from "react-intl";

// import {
// isPrimaryLoggedIn,
// } from "utils/Utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
const intl = useIntl();
const [currentUserData, setCurrentUserData] = React.useState(userData);
// const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
// const [warningText, setWarningText] = React.useState("");
// const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false);
// 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);
console.log(currentUserData)
}
}, [currentUserData]);

function displayErrorMsg(errorMsg) {
return <Typography variant="errorMessage1">{errorMsg}</Typography>
}

const formik = useFormik({
enableReinitialize: true,
initialValues: currentUserData,
validationSchema: yup.object().shape({
tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'require3Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
}),
onSubmit: (values) => {
console.log(values);
HttpUtils.post({
url: UrlUtils.POST_PUB_ORG_USER,
params: {
contactTel: {
countryCode: values.tel_countryCode,
phoneNumber: values.phoneNumber
},
},
onSuccess: function () {
notifySaveSuccess()
loadDataFun();
}
});
}

});


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

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

// const onFocus = () => {
// loadDataFun();
// window.removeEventListener("focus", onFocus)
// }

return (
<MainCard elevation={0}
border={false}
content={false}
>

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

{/*top button*/}
<Grid item s={12} md={12} lg={12} sx={{ mb: 3, mt: 2 }} 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'
}}
>
<Typography variant="h5">Reset & Back</Typography>
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Save</Typography>
</Button>
</Grid>

</>
:
<>

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


</Grid>
</Grid>
{/*end top button*/}
<div style={{ paddingLeft: 24, paddingRight: 24 }}>
<Typography variant="h4" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
Organisation User Details
</Typography>
<Grid container spacing={1}>
<Grid item lg={12}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>

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

<Grid item lg={12}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailBus",
disabled: true,
form: formik
})}
</Grid>

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

<Grid item lg={12}>
{FieldUtils.getTextField({
label: "Primary User:",
valueName: "primaryUser",
disabled: true,
form: formik
})}
</Grid>

</Grid>
</div>
<br />
</form>
}
{/* <div>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">Close</Typography></Button>
</DialogActions>
</Dialog>
</div>
<div>
<Dialog open={isConfirmPopUp} onClose={() => setIsConfirmPopUp(false)} >
<DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h4" style={{ padding: '16px' }}>{confirmText}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => { setIsConfirmPopUp(false) }}><Typography variant="h5">Close</Typography></Button>
<Button onClick={() => { confirmAction?.function(); }}><Typography variant="h5">Confirm</Typography></Button>
</DialogActions>
</Dialog>
</div> */}
</MainCard>
);
};

export default UserInformationCard_Organization_Pub;

+ 132
- 73
src/pages/User/DetailsPage_Organization/index.js View File

@@ -3,17 +3,18 @@ import { Grid, Typography, Stack, Box, Button } from '@mui/material';
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import * as React from "react"; import * as React from "react";
//import axios from "axios"; //import axios from "axios";
import * as HttpUtils from "../../../utils/HttpUtils";
import * as HttpUtils from "utils/HttpUtils";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import FileList from "../../../components/FileList"
import MainCard from "../../../components/MainCard";
import * as UrlUtils from "../../../utils/ApiPathConst";
import * as DateUtils from '../../../utils/DateUtils';
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 Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization'))); const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization')));
const UserInformationPubCard = Loadable(lazy(() => import('./UserInformationCard_Organization_Pub')));
import ForwardIcon from '@mui/icons-material/Forward'; import ForwardIcon from '@mui/icons-material/Forward';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@@ -28,6 +29,12 @@ const BackgroundHead = {
backgroundPosition: 'right' backgroundPosition: 'right'
} }


import {
isGLDLoggedIn,
isORGLoggedIn,
} from "utils/Utils";
import {useIntl} from "react-intl";

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




@@ -37,6 +44,11 @@ const UserMaintainPage_Organization = () => {
const [userData, setUserData] = useState({}) const [userData, setUserData] = useState({})
const [orgData, setOrgData] = useState({}) const [orgData, setOrgData] = useState({})
const [isLoading, setLoding] = useState(true); const [isLoading, setLoding] = useState(true);
const intl = useIntl();
const { locale } = intl;

const isPrimaryLocale = locale === 'en' ?"Yes":locale === 'zh-HK' ?"是":"是";
const notPrimaryLocale = locale === 'en' ?"No":locale === 'zh-HK' ?"否":"否";


const _sx = { const _sx = {
ml: 3, ml: 3,
@@ -62,6 +74,11 @@ const UserMaintainPage_Organization = () => {
// console.log(userData); // console.log(userData);
loadData(); loadData();
}, []); }, []);
useEffect(() => {
// console.log(userData);
loadData();
}, [locale]);


// const reloadPage=()=>{ // const reloadPage=()=>{
// window.location.reload(false); // window.location.reload(false);
@@ -69,55 +86,81 @@ const UserMaintainPage_Organization = () => {


const loadData = () => { const loadData = () => {
setLoding(true); setLoding(true);
HttpUtils.get({
url: `${UrlUtils.GET_ORG_USER_PATH}/${params.id}`,
onSuccess: function (response) {
console.log(response)
if (response.data.orgId != null) {
response.data["addressBus"] = response.orgDetail.data["addressTemp"];
response.data["contactTel"] = response.orgDetail.data["contactTel"];
response.data["faxNo"] = response.orgDetail.data["faxNo"];

response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate ? DateUtils.dateStr(response.orgDetail.data.brExpiryDate) : "";
response.data["brNo"] = response.orgDetail.data.brNo;
response.data["enCompanyName"] = response.orgDetail.data.enCompanyName;
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
} else {
response.data["addressBus"] = JSON.parse(response.data["addressBus"]);
response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
if (isGLDLoggedIn()){
HttpUtils.get({
url: `${UrlUtils.GET_ORG_USER_PATH}/${params.id}`,
onSuccess: function (response) {
// console.log(response)
if (response.data.orgId != null) {
response.data["addressBus"] = response.orgDetail.data["addressTemp"];
response.data["contactTel"] = response.orgDetail.data["contactTel"];
response.data["faxNo"] = response.orgDetail.data["faxNo"];
response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate ? DateUtils.dateStr(response.orgDetail.data.brExpiryDate) : "";
response.data["brNo"] = response.orgDetail.data.brNo;
response.data["enCompanyName"] = response.orgDetail.data.enCompanyName;
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
} else {
response.data["addressBus"] = JSON.parse(response.data["addressBus"]);
response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
}
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 verified";
response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLoginDate) : "";
response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
response.data["faxNo"] = JSON.parse(response.data["faxNo"]); response.data["faxNo"] = JSON.parse(response.data["faxNo"]);


response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
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["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
setUserData(response.data);
setOrgData(response.orgList);
} }

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 verified";

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["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";


setUserData(response.data);
setOrgData(response.orgList);
}
});
});
}
if (isORGLoggedIn()){
HttpUtils.get({
url: `${UrlUtils.GET_PUB_ORG_USER_PATH}`,
onSuccess: function (response) {
console.log(response)
response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
response.data["primaryUser"] = response.data.primaryUser?isPrimaryLocale:notPrimaryLocale;

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["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
setUserData(response.data);
setOrgData(response.orgList);
console.log(response.data)
}
});
}
}; };




@@ -145,29 +188,45 @@ const UserMaintainPage_Organization = () => {
{/*col 1*/} {/*col 1*/}
<Grid item xs={12} > <Grid item xs={12} >
<Grid container> <Grid container>
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
<UserInformationCard
userData={userData}
loadDataFun={loadData}
orgData={orgData}
/>
</Box>
</Grid>
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-3} mr={11.5} sx={{ p: 1, borderRadius: '10px' }}>
<MainCard elevation={0} border={false} content={false}>
<Typography variant="h4" sx={{ ml: 3, mt: 3, mb: 2, mr: 6, borderBottom: "1px solid black" }}>
Files
</Typography>
<FileList sx={_sx}
refId={params.id}
refType={"identification"}
{isGLDLoggedIn()?
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
<UserInformationCard
userData={userData}
loadDataFun={loadData}
orgData={orgData}
/>
</Box>
</Grid>
: isORGLoggedIn()?
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
<UserInformationPubCard
userData={userData}
loadDataFun={loadData}
orgData={orgData}
/> />
</MainCard>
</Box>
<br />
</Grid>
</Box>
</Grid>
:null
}
{isGLDLoggedIn()?
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-3} mr={11.5} sx={{ p: 1, borderRadius: '10px' }}>
<MainCard elevation={0} border={false} content={false}>
<Typography variant="h4" sx={{ ml: 3, mt: 3, mb: 2, mr: 6, borderBottom: "1px solid black" }}>
Files
</Typography>
<FileList sx={_sx}
refId={params.id}
refType={"identification"}
/>
</MainCard>
</Box>
<br />
</Grid>
:null
}
</Grid> </Grid>
</Grid> </Grid>
{/*col 2*/} {/*col 2*/}


+ 2
- 2
src/routes/PublicUserRoutes.js View File

@@ -108,11 +108,11 @@ const PublicDashboard = {
element: <DemandNote_Public/> element: <DemandNote_Public/>
}, },
{ {
path: '/indUser/:id',
path: '/indUser',
element: <UserMaintainPage_Individual /> element: <UserMaintainPage_Individual />
}, },
{ {
path: '/orgUser/:id',
path: '/orgUser',
element: <UserMaintainPage_Organization /> element: <UserMaintainPage_Organization />
}, },
] ]


+ 6
- 0
src/utils/ApiPathConst.js View File

@@ -22,6 +22,12 @@ export const POST_IND_USER = apiPath+'/user/ind';
export const GET_ORG_USER_PATH = apiPath+'/user/org'; export const GET_ORG_USER_PATH = apiPath+'/user/org';
export const POST_ORG_USER = apiPath+'/user/org'; export const POST_ORG_USER = apiPath+'/user/org';


export const GET_PUB_IND_USER_PATH = apiPath+'/user/pubInd';
export const POST_PUB_IND_USER = apiPath+'/user/pubInd';

export const GET_PUB_ORG_USER_PATH = apiPath+'/user/pubOrg';
export const POST_PUB_ORG_USER = apiPath+'/user/pubOrg';

export const GET_ORG_PATH = apiPath+'/org'; export const GET_ORG_PATH = apiPath+'/org';
export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user'; export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user';
export const POST_ORG_SAVE_PATH = apiPath+'/org/save'; export const POST_ORG_SAVE_PATH = apiPath+'/org/save';


+ 8807
- 8802
yarn.lock
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save