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

add org setting page

master
Alex Cheung 1 year ago
parent
45c3bd1f22
commit
f75a3f03b4
6 changed files with 537 additions and 48 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -0
      src/layout/MainLayout/Header/index.js
  2. +425
    -0
      src/pages/Organization/DetailPage/OrganizationPubCard.js
  3. +91
    -41
      src/pages/Organization/DetailPage/index.js
  4. +7
    -7
      src/pages/User/DetailsPage_Organization/index.js
  5. +5
    -0
      src/routes/PublicUserRoutes.js
  6. +1
    -0
      src/utils/ApiPathConst.js

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

@@ -212,6 +212,14 @@ function Header(props) {
</Typography>
</Link>
</li>
<li>
<Link className="manageUser" to={'/org'}>
<Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
{/* <FormattedMessage id="companyOrUserRecord" /> */}
Organisation Profile
</Typography>
</Link>
</li>
</ul>
</>
:


+ 425
- 0
src/pages/Organization/DetailPage/OrganizationPubCard.js View File

@@ -0,0 +1,425 @@
// material-ui
import {
Grid, Button, Checkbox, FormControlLabel, Typography,
Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
// import { FormControlLabel } from '@material-ui/core';
import MainCard from "../../../components/MainCard";
import * as React from "react";
import { useFormik } from 'formik';
import * as yup from 'yup';
import { useEffect, useState } from "react";
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';
import { notifySaveSuccess } from 'utils/CommonFunction';
import {useIntl} from "react-intl";

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


const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
const intl = useIntl();
const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
const [nonCreditorConfirmPopUp, setNonCreditorConfirmPopUp] = React.useState(false);

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]);

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

const formik = useFormik({
enableReinitialize: true,
initialValues: currentUserData,
validationSchema: yup.object().shape({
enCompanyName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))).nullable(),
addressLine1: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
addressLine2: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
addressLine3: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))).nullable(),
tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requiredValidNumber'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).nullable(),
brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
brNo: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'}))), function (value) {
var brNo_pattern = /[0-9]{8}/
if (value !== undefined) {
if (value.match(brNo_pattern)) {
return true
} else {
return false
}
}
}),
}),
onSubmit: vaule => {
console.log(vaule)
HttpUtils.post({
url: UrlUtils.POST_ORG_SAVE_PATH,
params: {
id: id > 0 ? id : null,
enCompanyName: vaule.enCompanyName,
chCompanyName: vaule.chCompanyName,
brNo: vaule.brNo,
brExpiryDate: vaule.brExpiryDate,
enCompanyNameTemp: vaule.enCompanyNameTemp,
chCompanyNameTemp: vaule.chCompanyNameTemp,
brExpiryDateTemp: vaule.brExpiryDateTemp,
contactPerson: vaule.contactPerson,
contactTel: {
countryCode: vaule.tel_countryCode,
phoneNumber: vaule.phoneNumber
},
faxNo: {
countryCode: vaule.fax_countryCode,
faxNumber: vaule.faxNumber
},
addressTemp: {
country: vaule.country,
district: vaule.district,
addressLine1: vaule.addressLine1,
addressLine2: vaule.addressLine2,
addressLine3: vaule.addressLine3,
},
//creditor: vaule.creditor,
},
onSuccess: function () {
notifySaveSuccess()
loadDataFun();
setEditMode(false);
}
});
}
});

useEffect(()=>{
setEditModeFun(editMode);
},[editMode]);

useEffect(() => {
if (Object.keys(userData).length > 0) {
setCreateMode(id <= 0);
setEditMode(id <= 0);
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);
};

const markAsCreditor = () => {
setCreditorConfirmPopUp(false);
HttpUtils.get({
url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,
onSuccess: () => {
loadDataFun();
}
});
}

const markAsNonCreditor = () => {
setNonCreditorConfirmPopUp(false);
HttpUtils.get({
url: UrlUtils.GET_ORG_MARK_AS_NON_CREDITOR + "/" + id,
onSuccess: () => {
loadDataFun();
}
});
}

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

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

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

{editMode ?
<>
{createMode ?
<>
<Grid item sx={{ ml: 0, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Create</Typography>
</Button>
</Grid>
</> :
<>
<Grid item sx={{ ml: 0, 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: 0, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
<Typography variant="h5">Edit</Typography>
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
color="orange"
onClick={()=>setCreditorConfirmPopUp(true)}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Mark as Creditor</Typography>
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
color="error"
onClick={()=>setNonCreditorConfirmPopUp(true)}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Mark as Non-Creditor</Typography>
</Button>
</Grid>
</>
}
</Grid>
</Grid>
{/*top*/}

{!onReady ?
<LoadingComponent />
:
<Grid container spacing={1}>
<Grid item xs={12}>
<Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
Organisation Details
</Typography>
</Grid>
<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.setFieldValue("creditor", !formik.values.creditor);
}}
disabled={true}
//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: "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 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.getComboField({
label: FieldUtils.notNullFieldLabel("Country:"),
valueName: "country",
disabled: (!editMode && !createMode),
dataList: ComboData.country,
getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("District:"),
valueName: "district",
disabled: (!editMode && !createMode),
dataList: ComboData.district,
getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
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>
}
</form>
<div>
<Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)} >
<DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
<Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>
</DialogActions>
</Dialog>
</div>
<div>
<Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)} >
<DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
<Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>
</DialogActions>
</Dialog>
</div>
</MainCard>
);
};

export default OrganizationPubCard;

+ 91
- 41
src/pages/Organization/DetailPage/index.js View File

@@ -7,14 +7,21 @@ import * as DateUtils from "utils/DateUtils";

import Loadable from 'components/Loadable';
const InfoCard = Loadable(React.lazy(() => import('./OrganizationCard')));
const InfoPubCard = Loadable(React.lazy(() => import('./OrganizationPubCard')));
const Table = Loadable(React.lazy(() => import('./CreditorHistoryTable')));
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

import ForwardIcon from '@mui/icons-material/Forward';
import { useNavigate, useParams } from 'react-router-dom';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import {getObjectByValue} from "../../../utils/CommonFunction";
import * as ComboData from "../../../utils/ComboData";
import {getObjectByValue} from "utils/CommonFunction";
import * as ComboData from "utils/ComboData";
import {
isGLDLoggedIn,
isINDLoggedIn,
isORGLoggedIn,
isPrimaryLoggedIn
} from "utils/Utils";

const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
@@ -39,32 +46,63 @@ const OrganizationDetailPage = () => {

React.useEffect(() => {
console.log(formData);
if (isINDLoggedIn()||isORGLoggedIn()&&!isPrimaryLoggedIn()){
navigate('/dashboard');
}else{
loadData();
}
loadData();
}, []);

const loadData = () => {
setLoding(true);
if (params.id > 0) {
HttpUtils.get({
url: UrlUtils.GET_ORG_PATH + "/" + params.id,
onSuccess: function (response) {
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.addressTemp?.addressLine1;
response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
response.data["addressLine3"] = response.data.addressTemp?.addressLine3;

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

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

response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
setFormData(response.data)
setList(response.historyList)
}
});
if(isGLDLoggedIn()){
if (params.id > 0) {
HttpUtils.get({
url: UrlUtils.GET_ORG_PATH + "/" + params.id,
onSuccess: function (response) {
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.addressTemp?.addressLine1;
response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
response.data["tel_countryCode"] = response.data.contactTel?.countryCode;
response.data["faxNumber"] = response.data.faxNo?.faxNumber;
response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
setFormData(response.data)
setList(response.historyList)
}
});
}
}
if(isPrimaryLoggedIn()){
if (params.id > 0) {
HttpUtils.get({
url: UrlUtils.GET_PUB_ORG_PATH,
onSuccess: function (response) {
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.addressTemp?.addressLine1;
response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
response.data["tel_countryCode"] = response.data.contactTel?.countryCode;
response.data["faxNumber"] = response.data.faxNo?.faxNumber;
response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
setFormData(response.data)
setList(response.historyList)
}
});
}
}
};

@@ -95,28 +133,40 @@ const OrganizationDetailPage = () => {
<Grid container>
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
<InfoCard
userData={formData}
loadDataFun={loadData}
id={params.id}
setEditModeFun={setEditMode}
/>
{isGLDLoggedIn?
<InfoCard
userData={formData}
loadDataFun={loadData}
id={params.id}
setEditModeFun={setEditMode}
/>
:
<InfoPubCard
userData={formData}
loadDataFun={loadData}
id={params.id}
setEditModeFun={setEditMode}
/>
}
</Box>
<br />
</Grid>
<Grid item xs={12} md={12} lg={12} display={isEditMode?"none":""}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ pl:4, pr:4, pb:2 }}>
<Grid container sx={{ p: 3, backgroundColor: "#FFF", borderRadius: '10px' }}>
<Grid item xs={12} sx={{ p:1 }}>
<Table
sx={{ p: 1 }}
recordList={list}
>
</Table>
{isGLDLoggedIn()?
<Grid item xs={12} md={12} lg={12} display={isEditMode?"none":""}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ pl:4, pr:4, pb:2 }}>
<Grid container sx={{ p: 3, backgroundColor: "#FFF", borderRadius: '10px' }}>
<Grid item xs={12} sx={{ p:1 }}>
<Table
sx={{ p: 1 }}
recordList={list}
>
</Table>
</Grid>
</Grid>
</Grid>
</Box>
</Grid>
</Box>
</Grid>
: null
}
</Grid>
</Grid>
{/*col 2*/}


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

@@ -99,7 +99,7 @@ const UserMaintainPage_Organization = () => {
onSuccess: function (response) {
// console.log(response)
if (response.data.orgId != null) {
console.log("1a")
// console.log("1a")
response.data["addressBus"] = response.orgDetail.data["addressTemp"];
response.data["contactTel"] = response.orgDetail.data["contactTel"];
response.data["faxNo"] = response.orgDetail.data["faxNo"];
@@ -110,14 +110,14 @@ const UserMaintainPage_Organization = () => {
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
} else {
console.log("1b")
// console.log("1b")
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) : "";
}
console.log("2")
console.log(response.data)
// console.log("2")
// console.log(response.data)
let createDate = DateUtils.datetimeStr(response.data.created);
let modifiedBy = DateUtils.datetimeStr(response.data.modified) + ", " + response.data.modifiedBy;
@@ -142,8 +142,8 @@ const UserMaintainPage_Organization = () => {
//response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
console.log("3")
console.log(response.data)
// console.log("3")
// console.log(response.data)
setUserData(response.data);
setOrgData(response.orgList);
}
@@ -153,7 +153,7 @@ const UserMaintainPage_Organization = () => {
HttpUtils.get({
url: `${UrlUtils.GET_PUB_ORG_USER_PATH}`,
onSuccess: function (response) {
console.log(response)
// console.log(response)
response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
response.data["primaryUser"] = response.data.primaryUser?isPrimaryLocale:notPrimaryLocale;



+ 5
- 0
src/routes/PublicUserRoutes.js View File

@@ -25,6 +25,7 @@ const PaymentDetails_Public = Loadable(lazy(() => import('pages/Payment/Details_
const DemandNote_Public = Loadable(lazy(() => import('pages/DemandNote/Search_Public')));
const UserMaintainPage_Individual = Loadable(lazy(() => import('pages/User/DetailsPage_Individual')));
const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/DetailsPage_Organization')));
const OrganizationDetailPage = Loadable(lazy(() => import('pages/Organization/DetailPage')));

// ==============================|| MAIN ROUTING ||============================== //

@@ -115,6 +116,10 @@ const PublicDashboard = {
path: '/orgUser',
element: <UserMaintainPage_Organization />
},
{
path: '/org',
element: <OrganizationDetailPage />
},
]
},
]


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

@@ -29,6 +29,7 @@ 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_PUB_ORG_PATH = apiPath+'/org/pub';
export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user';
export const POST_ORG_SAVE_PATH = apiPath+'/org/save';
export const GET_ORG_COMBO = apiPath+'/org/combo';


Write Preview
Loading…
Cancel
Save