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

ind user auth

master
Anna Ho 1 year ago
parent
6bb3df9960
commit
b103bfaefb
2 changed files with 152 additions and 139 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +126
    -117
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
  2. +26
    -22
      src/pages/User/SearchPage_Individual/UserTable_Individual.js

+ 126
- 117
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js View File

@@ -19,10 +19,11 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction'; import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
import {useIntl} from "react-intl";
import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import { useIntl } from "react-intl";
import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
import { isGrantedAny } from "auth/utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




@@ -43,7 +44,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
const handleMouseDownId = (event) => { const handleMouseDownId = (event) => {
event.preventDefault(); event.preventDefault();
}; };
useEffect(() => { useEffect(() => {
//if state data are ready and assign to different field //if state data are ready and assign to different field
// console.log(currentApplicationDetailData) // console.log(currentApplicationDetailData)
@@ -52,35 +53,35 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
} }
}, [currentUserData]); }, [currentUserData]);


function getMaxErrStr(num, fieldname){
return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
function getMaxErrStr(num, fieldname) {
return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });
} }


const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
initialValues: currentUserData, initialValues: currentUserData,
validationSchema: yup.object().shape({ validationSchema: yup.object().shape({
enName: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({id: 'userRequireEnglishName'})),
chName: yup.string().max(6, getMaxErrStr(6)).required(intl.formatMessage({id: 'userRequireChineseName'})),
addressLine1: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({id: 'validateAddressLine1'})),
enName: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({ id: 'userRequireEnglishName' })),
chName: yup.string().max(6, getMaxErrStr(6)).required(intl.formatMessage({ id: 'userRequireChineseName' })),
addressLine1: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({ id: 'validateAddressLine1' })),
addressLine2: yup.string().max(40, getMaxErrStr(40)).nullable(), addressLine2: yup.string().max(40, getMaxErrStr(40)).nullable(),
addressLine3: yup.string().max(40, getMaxErrStr(40)).nullable(), addressLine3: yup.string().max(40, getMaxErrStr(40)).nullable(),
emailAddress: yup.string().email(intl.formatMessage({id: 'validEmailFormat'})).max(255).required(intl.formatMessage({id: 'requireEmail'})),
identification: yup.string().min(7, intl.formatMessage({id: 'requireIdDocNumber'})).required(intl.formatMessage({id: 'requireIdDocNumber'})),
checkDigit: yup.string().max(1, getMaxErrStr(1)).required(intl.formatMessage({id: 'requiredNumberInQuote'})).nullable(),
idDocType: yup.string().max(255, getMaxErrStr(255)).required(intl.formatMessage({id: 'requireIdDocType'})),
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(),
emailAddress: yup.string().email(intl.formatMessage({ id: 'validEmailFormat' })).max(255).required(intl.formatMessage({ id: 'requireEmail' })),
identification: yup.string().min(7, intl.formatMessage({ id: 'requireIdDocNumber' })).required(intl.formatMessage({ id: 'requireIdDocNumber' })),
checkDigit: yup.string().max(1, getMaxErrStr(1)).required(intl.formatMessage({ id: 'requiredNumberInQuote' })).nullable(),
idDocType: yup.string().max(255, getMaxErrStr(255)).required(intl.formatMessage({ id: 'requireIdDocType' })),
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 => { onSubmit: values => {
if (values.country==null){
setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
if (values.country == null) {
setErrorMsg(intl.formatMessage({ id: 'pleaseFillInCountry' }))
} else { } else {
if (values.country.type == "hongKong" && values.district == null){
setErrorMsg(intl.formatMessage({id: 'pleaseFillInDistrict'}))
if (values.country.type == "hongKong" && values.district == null) {
setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
} else { } else {
HttpUtils.post({ HttpUtils.post({
url: UrlUtils.POST_IND_USER + "/" + formData.id, url: UrlUtils.POST_IND_USER + "/" + formData.id,
@@ -175,48 +176,53 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
: :
<form onSubmit={formik.handleSubmit} style={{ padding: 12 }}> <form onSubmit={formik.handleSubmit} style={{ padding: 12 }}>
{/*top button*/} {/*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 ?
<>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ mr: 3 }}>
<Button
variant="contained"
onClick={loadDataFun}
color="cancel"
>
Reset & Back
</Button>
</Grid>
{
isGrantedAny("MAINTAIN_USER") ?
<Grid item xs={12} sm={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">
{editMode ?
<>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ mr: 3 }}>
<Button
variant="contained"
onClick={loadDataFun}
color="cancel"
>
Reset & Back
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
Save
</Button>
</Grid>
</ThemeProvider>
</>
:
<>
<Grid item sx={{ mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
onClick={onEditClick}
>
Edit
</Button>
</ThemeProvider>
</Grid>
</>
}
</Grid>
</Grid>
: <></>
}


<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
Save
</Button>
</Grid>
</ThemeProvider>
</>
:
<>
<Grid item sx={{ mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
onClick={onEditClick}
>
Edit
</Button>
</ThemeProvider>
</Grid>
</>
}
</Grid>
</Grid>
{/*end top button*/} {/*end top button*/}
<Typography variant="h4" sx={{ mt: 3, mb: 2, borderBottom: "1px solid black" }}> <Typography variant="h4" sx={{ mt: 3, mb: 2, borderBottom: "1px solid black" }}>
Individual User Details Individual User Details
@@ -248,7 +254,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item xs={12} sm={12} md={12} lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Created Date:", label: "Created Date:",
valueName: "createDate", valueName: "createDate",
@@ -256,7 +262,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
form: formik form: formik
})} })}
</Grid> </Grid>
<Grid item xs={12} sm={12} md={12} lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Prefix:", label: "Prefix:",
valueName: "prefix", valueName: "prefix",
@@ -330,7 +336,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
{ {
currentUserData.verifiedBy || editMode ? currentUserData.verifiedBy || editMode ?
<Grid item xs={12} sm={12} md={6} lg={6} sx={{mb:2}}>
<Grid item xs={12} sm={12} md={6} lg={6} sx={{ mb: 2 }}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "verifiedStatus", valueName: "verifiedStatus",
disabled: true, disabled: true,
@@ -339,21 +345,21 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
: :
<> <>
<Grid item xs={8} sm={8} md={6} lg={4} sx={{mb:2}}>
<Grid item xs={8} sm={8} md={6} lg={4} sx={{ mb: 2 }}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "verifiedStatus", valueName: "verifiedStatus",
disabled: true, disabled: true,
form: formik, form: formik,
})} })}
</Grid> </Grid>
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2 ,mb:2}}>
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ ml: 2, mb: 2 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
onClick={onVerifiedClick}
>
Verify
</Button>
<Button
variant="contained"
onClick={onVerifiedClick}
>
Verify
</Button>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>
</> </>
@@ -363,7 +369,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>


<Grid xs={12} sm={12} md={12} lg={4}> <Grid xs={12} sm={12} md={12} lg={4}>
<Grid container alignItems={"center"} sx={{mb:2}}>
<Grid container alignItems={"center"} sx={{ mb: 2 }}>
<Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">ID No.:</Typography> <Typography variant="h5">ID No.:</Typography>
</Grid> </Grid>
@@ -371,14 +377,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
<Grid item xs={12} sm={12} md={9} lg={6}> <Grid item xs={12} sm={12} md={9} lg={6}>
<Grid container> <Grid container>
{formik.values.idDocType === "HKID" ? {formik.values.idDocType === "HKID" ?
editMode?
editMode ?
<> <>
<Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
<Grid item xs={6} sm={6} md={6} lg={7.5} sx={{ mr: 1 }}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "identification", valueName: "identification",
disabled: (!editMode), disabled: (!editMode),
form: formik, form: formik,
placeholder: intl.formatMessage({id: 'idDocNumber'}),
placeholder: intl.formatMessage({ id: 'idDocNumber' }),
inputProps: { inputProps: {
maxLength: 7, maxLength: 7,
onKeyDown: (e) => { onKeyDown: (e) => {
@@ -390,21 +396,21 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}


</Grid> </Grid>
<Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:40}}>
<Grid item xs={2} sm={2} md={2} lg={2} style={{ minWidth: 40 }}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "checkDigit", valueName: "checkDigit",
disabled: (!editMode), disabled: (!editMode),
form: formik, form: formik,
})} })}
</Grid> </Grid>
</>
:
</>
:
<Stack direction="row"> <Stack direction="row">
<Typography variant="h5" mt={1}> <Typography variant="h5" mt={1}>
{formik.values.identification.slice(0, 4)} {formik.values.identification.slice(0, 4)}
</Typography> </Typography>
<Typography variant="h5"mt={1}>
{showId ?formik.values.identification.slice(4):"****"}{showId ? '(' + formik.values.checkDigit + ')' :null}
<Typography variant="h5" mt={1}>
{showId ? formik.values.identification.slice(4) : "****"}{showId ? '(' + formik.values.checkDigit + ')' : null}
</Typography> </Typography>
<IconButton <IconButton
aria-label="toggle id visibility" aria-label="toggle id visibility"
@@ -414,10 +420,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
size="large" size="large"
> >
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />} {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</IconButton>
</Stack> </Stack>
: :
editMode?
editMode ?
<Grid item xs={10} sm={4} md={4} lg={10}> <Grid item xs={10} sm={4} md={4} lg={10}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "identification", valueName: "identification",
@@ -430,8 +436,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
<Typography variant="h5" mt={1}> <Typography variant="h5" mt={1}>
{formik.values.identification.slice(0, 4)} {formik.values.identification.slice(0, 4)}
</Typography> </Typography>
<Typography variant="h5"mt={1}>
{showId ?formik.values.identification.slice(4):"****"}
<Typography variant="h5" mt={1}>
{showId ? formik.values.identification.slice(4) : "****"}
</Typography> </Typography>
<IconButton <IconButton
aria-label="toggle id visibility" aria-label="toggle id visibility"
@@ -441,7 +447,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
size="large" size="large"
> >
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />} {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</IconButton>
</Stack> </Stack>
} }
</Grid> </Grid>
@@ -474,7 +480,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "Country:", label: "Country:",
valueName: "country", valueName: "country",
getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
dataList: ComboData.country, dataList: ComboData.country,
disabled: (!editMode), disabled: (!editMode),
form: formik form: formik
@@ -492,7 +498,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {




<Grid item xs={12} sm={12} md={12} lg={4}> <Grid item xs={12} sm={12} md={12} lg={4}>
<Grid container alignItems={"center"} sx={{mb:2}}>
<Grid container alignItems={"center"} sx={{ mb: 2 }}>
<Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">Status:</Typography> <Typography variant="h5">Status:</Typography>
</Grid> </Grid>
@@ -515,30 +521,33 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
form: formik, form: formik,
})} })}
</Grid> </Grid>
{locked ?
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="success"
onClick={doUnlock}
>
Active
</Button>
</ThemeProvider>
</Grid>
:
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="error"
onClick={doLock}
>
Lock
</Button>
</ThemeProvider>
</Grid>
{
isGrantedAny("MAINTAIN_USER") ? (
locked ?
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ ml: 2 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="success"
onClick={doUnlock}
>
Active
</Button>
</ThemeProvider>
</Grid>
:
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ ml: 2 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="error"
onClick={doLock}
>
Lock
</Button>
</ThemeProvider>
</Grid>
) : <></>
} }
</> </>
} }
@@ -550,7 +559,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
label: "District:", label: "District:",
valueName: "district", valueName: "district",
dataList: ComboData.district, dataList: ComboData.district,
getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
disabled: (!editMode), disabled: (!editMode),
form: formik form: formik
})} })}
@@ -558,10 +567,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {


<Grid item xs={12} sm={12} md={12} lg={4}> <Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: intl.formatMessage({id: 'language'}) + ":",
label: intl.formatMessage({ id: 'language' }) + ":",
valueName: "preferLocale", valueName: "preferLocale",
dataList: ComboData.Locale, dataList: ComboData.Locale,
getOptionLabel: (option) => option.label? option.label: "",
getOptionLabel: (option) => option.label ? option.label : "",
disabled: (!editMode), disabled: (!editMode),
form: formik form: formik
})} })}


+ 26
- 22
src/pages/User/SearchPage_Individual/UserTable_Individual.js View File

@@ -2,13 +2,14 @@
import * as React from 'react'; import * as React from 'react';
import { GridActionsCellItem } from "@mui/x-data-grid"; import { GridActionsCellItem } from "@mui/x-data-grid";
import { FiDataGrid } from "components/FiDataGrid"; import { FiDataGrid } from "components/FiDataGrid";
import VisibilityIcon from '@mui/icons-material/Visibility';
//import VisibilityIcon from '@mui/icons-material/Visibility';
import HighlightOff from '@mui/icons-material/HighlightOff'; import HighlightOff from '@mui/icons-material/HighlightOff';
import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline'; import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
import { useEffect } from "react"; import { useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import { GET_IND_USER_PATH } from "utils/ApiPathConst"; import { GET_IND_USER_PATH } from "utils/ApiPathConst";
import { clickableLink} from 'utils/CommonFunction';
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function UserTable_Individual({ searchCriteria }) { export default function UserTable_Individual({ searchCriteria }) {
@@ -20,35 +21,38 @@ export default function UserTable_Individual({ searchCriteria }) {
set_searchCriteria(searchCriteria); set_searchCriteria(searchCriteria);
}, [searchCriteria]); }, [searchCriteria]);


const handleActionClick = (id) => () => {
navigate('/indUser/' + id);
};
// const handleActionClick = (id) => () => {
// navigate('/indUser/' + id);
// };


const columns = [ const columns = [
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({ id }) => {
return [
<GridActionsCellItem
key="OutSave"
icon={<VisibilityIcon />}
label="View"
className="textPrimary"
onClick={handleActionClick(id)}
color="primary"
/>]
},
},
// {
// field: 'actions',
// type: 'actions',
// headerName: 'Actions',
// width: 100,
// cellClassName: 'actions',
// getActions: ({ id }) => {
// return [
// <GridActionsCellItem
// key="OutSave"
// icon={<VisibilityIcon />}
// label="View"
// className="textPrimary"
// onClick={handleActionClick(id)}
// color="primary"
// />]
// },
// },
{ {
id: 'username', id: 'username',
field: 'username', field: 'username',
headerName: 'Username', headerName: 'Username',
flex: 1, flex: 1,
minWidth: 150, minWidth: 150,
renderCell: (params) => {
return clickableLink('/indUser/'+ params.row.id, params.row.username);
},
}, },
{ {
id: 'enName', id: 'enName',


Write Preview
Loading…
Cancel
Save