alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

add ind org user profile

master
Alex Cheung 1 年之前
父節點
3378a60a89
當前提交
9a51df4cfe
共有 10 個檔案被更改，包括 26321 行新增 和 19210 行删除
分割檢視
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
文件差異過大導致無法顯示
查看文件


+ 3
- 3
src/layout/MainLayout/Header/index.js 查看文件

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

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


+ 344
- 0
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js 查看文件

@@ -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 查看文件

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

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 * 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 titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

@@ -22,12 +22,16 @@ const BackgroundHead = {
}
import Loadable from 'components/Loadable';
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 UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));
const UserInformationPubCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual_Pub')));


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


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

const loadData = () => {
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*/}
<Grid item xs={12} sm={12} md={12} lg={12} >
<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>
{/*col 2*/}


+ 5
- 5
src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js 查看文件

@@ -3,13 +3,13 @@ import {
Grid, Typography, Button,
Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
import MainCard from "../../../components/MainCard";
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 * 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 * as yup from 'yup';


+ 247
- 0
src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js 查看文件

@@ -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 查看文件

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

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

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


@@ -37,6 +44,11 @@ const UserMaintainPage_Organization = () => {
const [userData, setUserData] = useState({})
const [orgData, setOrgData] = useState({})
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 = {
ml: 3,
@@ -62,6 +74,11 @@ const UserMaintainPage_Organization = () => {
// console.log(userData);
loadData();
}, []);
useEffect(() => {
// console.log(userData);
loadData();
}, [locale]);

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

const loadData = () => {
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["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*/}
<Grid item xs={12} >
<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>
{/*col 2*/}


+ 2
- 2
src/routes/PublicUserRoutes.js 查看文件

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


+ 6
- 0
src/utils/ApiPathConst.js 查看文件

@@ -22,6 +22,12 @@ export const POST_IND_USER = apiPath+'/user/ind';
export const GET_ORG_USER_PATH = 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_FROM_USER_PATH = apiPath+'/org/from-user';
export const POST_ORG_SAVE_PATH = apiPath+'/org/save';


+ 8807
- 8802
yarn.lock
文件差異過大導致無法顯示
查看文件


Write Preview
Loading…
取消
儲存