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

update individual user page

master
jason.lam 1 year ago
parent
e5387e49ce
commit
38b8304e6b
3 changed files with 45 additions and 49 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +36
    -40
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
  2. +2
    -2
      src/pages/User/DetailsPage_Individual/index.js
  3. +7
    -7
      src/utils/FieldUtils.js

+ 36
- 40
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js View File

@@ -148,7 +148,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
<Grid container maxWidth justifyContent="flex-start"> <Grid container maxWidth justifyContent="flex-start">
{editMode ? {editMode ?
<> <>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Grid item sx={{ mr: 3 }}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
@@ -179,7 +179,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</> </>
: :
<> <>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Grid item sx={{ mr: 3 }}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
@@ -197,12 +197,12 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
</Grid> </Grid>
{/*end top button*/} {/*end top button*/}
<Typography variant="h4" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
<Typography variant="h4" sx={{ mt: 3, mb: 2, borderBottom: "1px solid black" }}>
Individual User Details Individual User Details
</Typography> </Typography>
<Grid item xs={12} sm={12} md={12} lg={12}> <Grid item xs={12} sm={12} md={12} lg={12}>
<Grid container spacing={1} sx={{ mt: 3, ml: 3, mb: 2, mr: 3}}>
<Grid item xs={12} sm={12} md={12} lg={4}>
<Grid container>
<Grid item xs={12} sm={12} md={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Username:", label: "Username:",
valueName: "username", valueName: "username",
@@ -220,7 +220,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item 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",
@@ -228,7 +228,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
form: formik form: formik
})} })}
</Grid> </Grid>
<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Prefix:", label: "Prefix:",
valueName: "prefix", valueName: "prefix",
@@ -237,7 +237,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Chinese Name:", label: "Chinese Name:",
valueName: "chName", valueName: "chName",
@@ -246,7 +246,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Last Updated:", label: "Last Updated:",
valueName: "modifieDate", valueName: "modifieDate",
@@ -255,7 +255,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "ID Type:", label: "ID Type:",
valueName: "idDocType", valueName: "idDocType",
@@ -283,7 +283,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: "Contact Tel:", label: "Contact Tel:",
valueName: { valueName: {
@@ -295,15 +295,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">Verified:</Typography> <Typography variant="h5">Verified:</Typography>
</Grid> </Grid>

{ {
currentUserData.verifiedBy || editMode ? currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
<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,
@@ -312,16 +311,15 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
: :
<> <>
<Grid item xs={10} md={4} lg={4}>
<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={1}>
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2 ,mb:2}}>
<Button <Button
size="large"
variant="contained" variant="contained"
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
@@ -338,17 +336,17 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
</Grid> </Grid>


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<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> <Typography variant="h5">ID No.:</Typography>
</Grid> </Grid>


<Grid item xs={12} md={6} lg={6}>
<Grid item xs={12} sm={12} md={9} lg={6}>
<Grid container> <Grid container>
{formik.values.idDocType == "HKID" ?
{formik.values.idDocType === "HKID" ?
<> <>
<Grid item lg={8}>
<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),
@@ -365,7 +363,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}


</Grid> </Grid>
<Grid item lg={4}>
<Grid item xs={2} sm={2} md={2} lg={2}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "checkDigit", valueName: "checkDigit",
disabled: (!editMode), disabled: (!editMode),
@@ -373,7 +371,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>
</> : </> :
<Grid item lg={12}>
<Grid item xs={12} sm={6} md={6} lg={12}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "identification", valueName: "identification",
disabled: (!editMode), disabled: (!editMode),
@@ -386,7 +384,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: "Fax No.:", label: "Fax No.:",
valueName: { valueName: {
@@ -398,7 +396,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Last Login:", label: "Last Login:",
valueName: "lastLoginDate", valueName: "lastLoginDate",
@@ -407,7 +405,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "Country:", label: "Country:",
valueName: "country", valueName: "country",
@@ -417,7 +415,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Email:", label: "Email:",
valueName: "emailAddress", valueName: "emailAddress",
@@ -427,15 +425,15 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>




<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Grid item 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">Status:</Typography> <Typography variant="h5">Status:</Typography>
</Grid> </Grid>


{ {
editMode ? editMode ?
<Grid item xs={12} md={6} lg={6}>
<Grid item xs={8} sm={8} md={6} lg={6}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "status", valueName: "status",
disabled: true, disabled: true,
@@ -444,7 +442,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
: :
<> <>
<Grid item lg={4}>
<Grid item xs={8} sm={8} md={6} lg={4}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "status", valueName: "status",
disabled: true, disabled: true,
@@ -452,9 +450,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>
{locked ? {locked ?
<Grid item lg={1} sx={{ml:1}}>
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
<Button <Button
size="large"
variant="contained" variant="contained"
color="success" color="success"
sx={{ sx={{
@@ -467,9 +464,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Button> </Button>
</Grid> </Grid>
: :
<Grid item lg={1} sx={{ml:1}}>
<Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
<Button <Button
size="large"
variant="contained" variant="contained"
color="error" color="error"
sx={{ sx={{
@@ -487,7 +483,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getAddressField({ {FieldUtils.getAddressField({
label: "Address:", label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"], valueName: ["addressLine1", "addressLine2", "addressLine3"],
@@ -496,7 +492,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "District:", label: "District:",
valueName: "district", valueName: "district",


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

@@ -105,11 +105,11 @@ const UserMaintainPage_Individual = () => {
/> />
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2}}>
<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" }}> <Typography variant="h4" sx={{ mt: 4, ml: 2, mb: 2, mr: 2, borderBottom: "1px solid black" }}>
Files Files
</Typography> </Typography>
<Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '95%'}}>
<Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '100%'}}>
<FileList <FileList
refId={params.id} refId={params.id}
refType={"identification"} refType={"identification"}


+ 7
- 7
src/utils/FieldUtils.js View File

@@ -27,12 +27,12 @@ export const getDateField = ({ label, valueName, form, disabled }) => {
} }


export const getTextField = ({ label, valueName, form, disabled }) => { export const getTextField = ({ label, valueName, form, disabled }) => {
return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} >
return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{mb:2}}>
<Grid item xs={12} sm={12} md={3} lg={3} <Grid item xs={12} sm={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">{label}</Typography> <Typography variant="h5">{label}</Typography>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={6}>
<Grid item xs={12} sm={12} md={6} lg={6}>
{initField({ {initField({
type: "text", type: "text",
valueName: valueName, valueName: valueName,
@@ -71,7 +71,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p


export const getPhoneField = ({ label, valueName, form, disabled }) => { export const getPhoneField = ({ label, valueName, form, disabled }) => {


return <Grid container alignItems={"center"}>
return <Grid container alignItems={"center"} sx={{mb:2}}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">{label}</Typography> <Typography variant="h5">{label}</Typography>
@@ -123,7 +123,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={6}> <Grid item xs={12} md={6} lg={6}>
<Grid item lg={12}>
<Grid item lg={12} sx={{mb:2}}>
{initField({ {initField({
type: "text", type: "text",
valueName: valueName[0], valueName: valueName[0],
@@ -131,7 +131,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
disabled: disabled disabled: disabled
})} })}
</Grid> </Grid>
<Grid item lg={12}>
<Grid item lg={12} sx={{mb:2}}>
{initField({ {initField({
type: "text", type: "text",
valueName: valueName[1], valueName: valueName[1],
@@ -139,7 +139,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
disabled: disabled disabled: disabled
})} })}
</Grid> </Grid>
<Grid item lg={12}>
<Grid item lg={12} sx={{mb:2}}>
{initField({ {initField({
type: "text", type: "text",
valueName: valueName[2], valueName: valueName[2],
@@ -152,7 +152,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
} }


export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => { export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
return <Grid container alignItems={"center"}>
return <Grid container alignItems={"center"} sx={{mb:2}}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">{label}</Typography> <Typography variant="h5">{label}</Typography>
</Grid> </Grid>


Write Preview
Loading…
Cancel
Save