alex
/
PNSPS-frontend-MaterialUI
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

ind user auth

master
Anna Ho 1 rok temu
rodzic
6bb3df9960
commit
b103bfaefb
2 zmienionych plików z 152 dodań i 139 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  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 Wyświetl plik

@@ -19,10 +19,11 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
import Loadable from 'components/Loadable';
import { lazy } from 'react';
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 { isGrantedAny } from "auth/utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


@@ -43,7 +44,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
const handleMouseDownId = (event) => {
event.preventDefault();
};
useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
@@ -52,35 +53,35 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
}
}, [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({
enableReinitialize: true,
initialValues: currentUserData,
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(),
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 => {
if (values.country==null){
setErrorMsg(intl.formatMessage({id: 'pleaseFillInCountry'}))
if (values.country == null) {
setErrorMsg(intl.formatMessage({ id: 'pleaseFillInCountry' }))
} 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 {
HttpUtils.post({
url: UrlUtils.POST_IND_USER + "/" + formData.id,
@@ -175,48 +176,53 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
:
<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 ?
<>
<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*/}
<Typography variant="h4" sx={{ mt: 3, mb: 2, borderBottom: "1px solid black" }}>
Individual User Details
@@ -248,7 +254,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})}
</Grid>

<Grid item xs={12} sm={12} md={12} lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
@@ -256,7 +262,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
form: formik
})}
</Grid>
<Grid item xs={12} sm={12} md={12} lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({
label: "Prefix:",
valueName: "prefix",
@@ -330,7 +336,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid>
{
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({
valueName: "verifiedStatus",
disabled: true,
@@ -339,21 +345,21 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</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({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</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}>
<Button
variant="contained"
onClick={onVerifiedClick}
>
Verify
</Button>
<Button
variant="contained"
onClick={onVerifiedClick}
>
Verify
</Button>
</ThemeProvider>
</Grid>
</>
@@ -363,7 +369,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid>

<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' }}>
<Typography variant="h5">ID No.:</Typography>
</Grid>
@@ -371,14 +377,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
<Grid item xs={12} sm={12} md={9} lg={6}>
<Grid container>
{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({
valueName: "identification",
disabled: (!editMode),
form: formik,
placeholder: intl.formatMessage({id: 'idDocNumber'}),
placeholder: intl.formatMessage({ id: 'idDocNumber' }),
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
@@ -390,21 +396,21 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})}

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


<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' }}>
<Typography variant="h5">Status:</Typography>
</Grid>
@@ -515,30 +521,33 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
form: formik,
})}
</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:",
valueName: "district",
dataList: ComboData.district,
getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
disabled: (!editMode),
form: formik
})}
@@ -558,10 +567,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {

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


+ 26
- 22
src/pages/User/SearchPage_Individual/UserTable_Individual.js Wyświetl plik

@@ -2,13 +2,14 @@
import * as React from 'react';
import { GridActionsCellItem } from "@mui/x-data-grid";
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 CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils";
import { GET_IND_USER_PATH } from "utils/ApiPathConst";
import { clickableLink} from 'utils/CommonFunction';
// ==============================|| EVENT TABLE ||============================== //

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

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

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',
field: 'username',
headerName: 'Username',
flex: 1,
minWidth: 150,
renderCell: (params) => {
return clickableLink('/indUser/'+ params.row.id, params.row.username);
},
},
{
id: 'enName',


Napisz Podgląd
Ładowanie…
Anuluj
Zapisz