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

Update UI

master
cyril.tsui 1 year ago
parent
fb15fbd874
commit
2f73ab1a9d
30 changed files with 1197 additions and 1072 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -6
      src/components/FiDataGrid.js
  2. +51
    -39
      src/components/MainCard.js
  3. +20
    -19
      src/pages/Proof/Create_FromApp/ApplicationDetails.js
  4. +23
    -26
      src/pages/Proof/Create_FromApp/GazetteDetails.js
  5. +18
    -19
      src/pages/Proof/Create_FromApp/ProofForm.js
  6. +25
    -20
      src/pages/Proof/Create_FromApp/index.js
  7. +21
    -18
      src/pages/Proof/Reply_GLD/ApplicationDetails.js
  8. +5
    -5
      src/pages/Proof/Reply_GLD/ProofForm.js
  9. +13
    -13
      src/pages/Proof/Reply_GLD/index.js
  10. +33
    -30
      src/pages/Proof/Search_GLD/DataGrid.js
  11. +225
    -219
      src/pages/Proof/Search_GLD/SearchForm.js
  12. +24
    -22
      src/pages/Proof/Search_GLD/index.js
  13. +25
    -24
      src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
  14. +258
    -258
      src/pages/PublicNotice/Details_GLD/ClientDetailCard.js
  15. +9
    -9
      src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js
  16. +23
    -18
      src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js
  17. +10
    -10
      src/pages/PublicNotice/Details_GLD/index.js
  18. +60
    -51
      src/pages/PublicNotice/Details_Public/index.js
  19. +27
    -24
      src/pages/PublicNotice/Search_GLD/DataGrid.js
  20. +217
    -212
      src/pages/PublicNotice/Search_GLD/SearchForm.js
  21. +23
    -23
      src/pages/PublicNotice/Search_GLD/index.js
  22. +1
    -1
      src/pages/authentication/auth-forms/CustomFormWizard.js
  23. +1
    -0
      src/themes/overrides/Chip.js
  24. +37
    -0
      src/themes/overrides/DataGrid.js
  25. +3
    -0
      src/themes/overrides/OutlinedInput.js
  26. +3
    -1
      src/themes/overrides/Tab.js
  27. +27
    -0
      src/themes/overrides/Textfield.js
  28. +4
    -0
      src/themes/overrides/index.js
  29. +4
    -4
      src/themes/typography.js
  30. +2
    -1
      src/utils/statusUtils/Base.js

+ 5
- 6
src/components/FiDataGrid.js View File

@@ -20,18 +20,18 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true); const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true);
const [_sx, set_sx] = React.useState({ const [_sx, set_sx] = React.useState({
padding: "4 2 4 2", padding: "4 2 4 2",
boxShadow: 1,
border: 1,
borderColor: '#DDD',
// boxShadow: 1,
// border: 1,
// borderColor: '#DDD',
'& .MuiDataGrid-cell': { '& .MuiDataGrid-cell': {
borderTop: 1, borderTop: 1,
borderBottom: 1, borderBottom: 1,
borderColor: "#EEE"
borderColor: "#EEE",
}, },
'& .MuiDataGrid-footerContainer': { '& .MuiDataGrid-footerContainer': {
border: 1, border: 1,
borderColor: "#EEE" borderColor: "#EEE"
}
},
}); });




@@ -122,7 +122,6 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
autoHeight={_autoHeight} autoHeight={_autoHeight}
hideFooterSelectedRowCount={myHideFooterSelectedRowCount} hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
sx={_sx} sx={_sx}

/> />
); );
} }

+ 51
- 39
src/components/MainCard.js View File

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';


// material-ui // material-ui
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
import { Card, CardContent, CardHeader, Divider, Typography, Grid } from '@mui/material';


// project import // project import
import Highlighter from './third-party/Highlighter'; import Highlighter from './third-party/Highlighter';
@@ -39,47 +39,59 @@ const MainCard = forwardRef(
boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow; boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;


return ( return (
<Card
elevation={elevation || 0}
ref={ref}
{...others}
sx={{
border: border ? '1px solid' : 'none',
borderRadius: 2,
borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
':hover': {
boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
},
'& pre': {
m: 0,
p: '16px !important',
fontFamily: theme.typography.fontFamily,
fontSize: '0.75rem'
},
...sx
}}
<Grid container direction="column"
// alignItems="center"
// justify="center"
> >
{/* card header and action */}
{!darkTitle && title && (
<CardHeader sx={headerSX} titleTypographyProps={{ variant: 'subtitle1' }} title={title} action={secondary} />
)}
{darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary} />}
<Card
elevation={elevation || 0}
ref={ref}
{...others}
sx={{
alignItems: "center",
border: border ? '1px solid' : 'none',
borderRadius: 2,
borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
':hover': {
boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
},
'& pre': {
m: 0,
p: '16px !important',
fontFamily: theme.typography.fontFamily,
fontSize: '0.75rem'
},
maxWidth: { xs: 700, sm: 900, md: 1000, lg: 1300, xl: 1900 },
// minWidth: { xs: 600, sm: 800, md: 900, lg: 1000, xl: 1000 },
margin: { xs: 2.5, md: 3 },
// '& > *': {
// flexGrow: 1,
// flexBasis: '50%'
// },
...sx
}}
>
{/* card header and action */}
{!darkTitle && title && (
<CardHeader sx={headerSX} titleTypographyProps={{ variant: 'subtitle1' }} title={title} action={secondary} />
)}
{darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary} />}


{/* card content */}
{content && <CardContent sx={contentSX}>{children}</CardContent>}
{!content && children}
{/* card content */}
{content && <CardContent sx={contentSX}>{children}</CardContent>}
{!content && children}


{/* card footer - clipboard & highlighter */}
{codeHighlight && (
<>
<Divider sx={{ borderStyle: 'dashed' }} />
<Highlighter codeHighlight={codeHighlight} main>
{children}
</Highlighter>
</>
)}
</Card>
{/* card footer - clipboard & highlighter */}
{codeHighlight && (
<>
<Divider sx={{ borderStyle: 'dashed' }} />
<Highlighter codeHighlight={codeHighlight} main>
{children}
</Highlighter>
</>
)}
</Card></Grid>
); );
} }
); );


+ 20
- 19
src/pages/Proof/Create_FromApp/ApplicationDetails.js View File

@@ -59,7 +59,7 @@ const SearchPublicNoticeForm = ({ formData }) => {
{/*row 1*/} {/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}> <CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center"> <Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
<Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
Application Details Application Details
</Typography> </Typography>
</Grid> </Grid>
@@ -72,12 +72,13 @@ const SearchPublicNoticeForm = ({ formData }) => {
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Application No:</FormLabel>
<Grid item xs={12} md={4} lg={4}
// sx={{ display: 'flex', alignItems: 'center' }}
>
<FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}>
<Grid item xs={12} md={8} lg={8}>
<DisplayField <DisplayField
name='appNo' name='appNo'
/> />
@@ -90,34 +91,34 @@ const SearchPublicNoticeForm = ({ formData }) => {
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Applicant:</FormLabel>
<FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}>
<Grid item xs={12} md={8} lg={8}>
<DisplayField <DisplayField
name={formik.values?.orgId ? 'enCompanyName' : 'contactPerson'} name={formik.values?.orgId ? 'enCompanyName' : 'contactPerson'}
/> />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={4} lg={4} <Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Contact Phone:</FormLabel>
<FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
<Stack direction="row"> <Stack direction="row">
<DisplayField <DisplayField
name='tel_countryCode' name='tel_countryCode'
width='25%'
width='35%'
/> />
<DisplayField <DisplayField
name='phoneNumber' name='phoneNumber'
width='75%'
width='65%'
/> />
</Stack> </Stack>
</Grid> </Grid>
@@ -128,34 +129,34 @@ const SearchPublicNoticeForm = ({ formData }) => {
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Contect Person:</FormLabel>
<FormLabel><Typography variant="h5">Contact Person:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}>
<Grid item xs={12} md={8} lg={8}>
<DisplayField <DisplayField
name='contactPerson' name='contactPerson'
/> />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={4} lg={4} <Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Contact Fax:</FormLabel>
<FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
<Stack direction="row"> <Stack direction="row">
<DisplayField <DisplayField
name='fax_countryCode' name='fax_countryCode'
width='25%'
width='35%'
/> />
<DisplayField <DisplayField
name='faxNumber' name='faxNumber'
width='75%'
width='65%'
/> />
</Stack> </Stack>
</Grid> </Grid>


+ 23
- 26
src/pages/Proof/Create_FromApp/GazetteDetails.js View File

@@ -26,7 +26,6 @@ const GazetteDetails = ({ formData }) => {
initialValues: data, initialValues: data,
}); });



const DisplayField = ({ name, width }) => { const DisplayField = ({ name, width }) => {
return <TextField return <TextField
fullWidth fullWidth
@@ -54,49 +53,48 @@ const GazetteDetails = ({ formData }) => {
<MainCard xs={12} md={12} lg={12} <MainCard xs={12} md={12} lg={12}
border={false} border={false}
content={false} content={false}
style={{ height: '100%'}}
>
style={{ height: '100%' }}
>


<form style={{ height: '100%'}}>
<form style={{ height: '100%' }}>
{/*row 1*/} {/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}> <CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center"> <Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
<Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
Gazette Details Gazette Details
</Typography> </Typography>
</Grid> </Grid>
</CardContent> </CardContent>


{/*row 2*/} {/*row 2*/}
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} style={{ height: '100%'}}>
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} style={{ height: '100%' }}>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Issue Number:</FormLabel>
<FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}>
<Grid item xs={12} md={8} lg={8}>
<DisplayField <DisplayField
name="issueNoStr" name="issueNoStr"

/> />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Gazette Code:</FormLabel>
<FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}>
<Grid item xs={12} md={8} lg={8}>
<DisplayField <DisplayField
name="groupNo"
name="issueDate"


/> />
</Grid> </Grid>
@@ -105,29 +103,28 @@ const GazetteDetails = ({ formData }) => {
</Grid> </Grid>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Issue Date:</FormLabel>
<FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}>
<Grid item xs={12} md={8} lg={8}>
<DisplayField <DisplayField
name="issueDate"

name="groupNo"
/> />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Group Title:</FormLabel>
<FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}>
<Grid item xs={12} md={8} lg={8}>
<DisplayField <DisplayField
name="groupTitle" name="groupTitle"
/> />


+ 18
- 19
src/pages/Proof/Create_FromApp/ProofForm.js View File

@@ -150,9 +150,6 @@ const FormPanel = ({ formData }) => {
} }
} }





return ( return (
<MainCard xs={12} md={12} lg={12} <MainCard xs={12} md={12} lg={12}
border={false} border={false}
@@ -162,7 +159,7 @@ const FormPanel = ({ formData }) => {
{/*row 1*/} {/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}> <CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center"> <Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
<Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
Proof Proof
</Typography> </Typography>
</Grid> </Grid>
@@ -188,7 +185,9 @@ const FormPanel = ({ formData }) => {
variant="contained" variant="contained"
size="large" size="large"
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)}
> Upload Files</Button>
>
<Typography variant="h5">Upload Files</Typography>
</Button>
</label> </label>
</Grid> </Grid>


@@ -199,8 +198,8 @@ const FormPanel = ({ formData }) => {


{ {
wait ? wait ?
<Grid item xs={12} md={12}>
<Typography variant="h3" style={{color: "blue" }}>Calculating, please wait ...</Typography>
<Grid item xs={12} md={12} sx={{ mt: 1.5, mb: 1.5 }}>
<Typography variant="h3" style={{ color: "blue" }}>Calculating, please wait ...</Typography>
</Grid> </Grid>
: :
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@@ -212,7 +211,7 @@ const FormPanel = ({ formData }) => {
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}}> }}>
Calculate
<Typography variant="h5">Calculate</Typography>
</Button> </Button>
</Grid> </Grid>
} }
@@ -246,13 +245,13 @@ const FormPanel = ({ formData }) => {
} }
/> />
<FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}> <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
pages
<Typography variant="h5">pages</Typography>
</FormLabel> </FormLabel>
<FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}> <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
x
<Typography variant="h5">x</Typography>
</FormLabel> </FormLabel>
<FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}> <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
${formik.values.price ? formik.values.price : "6,552"}
<Typography variant="h5">${formik.values.price ? formik.values.price : "6,552"}</Typography>
</FormLabel> </FormLabel>
</Stack> </Stack>
</Grid> </Grid>
@@ -282,11 +281,11 @@ const FormPanel = ({ formData }) => {
} }
/> />
<FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}> <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
cm
<Typography variant="h5">cm</Typography>
</FormLabel> </FormLabel>


<FormLabel sx={{ paddingLeft: 2, paddingRight: 4, textAlign: "center" }}> <FormLabel sx={{ paddingLeft: 2, paddingRight: 4, textAlign: "center" }}>
x
<Typography variant="h5">x</Typography>
</FormLabel> </FormLabel>


<Autocomplete <Autocomplete
@@ -325,10 +324,10 @@ const FormPanel = ({ formData }) => {
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}> <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel sx={{ paddingRight: 2, textAlign: "center" }}> <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>
Necessary fee:
<Typography variant="h5">Necessary fee:</Typography>
</FormLabel> </FormLabel>
<FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}> <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>
$
<Typography variant="h5">$</Typography>
</FormLabel> </FormLabel>
<TextField <TextField
fullWidth fullWidth
@@ -363,7 +362,7 @@ const FormPanel = ({ formData }) => {
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}}> }}>
Save
<Typography variant="h5">Save</Typography>
</Button> </Button>
</Grid> </Grid>


@@ -373,12 +372,12 @@ const FormPanel = ({ formData }) => {
</form> </form>
<div> <div>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} > <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle>Warning</DialogTitle>
<DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}> <DialogContent style={{ display: 'flex', }}>
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
<Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
<Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</div> </div>


+ 25
- 20
src/pages/Proof/Create_FromApp/index.js View File

@@ -20,7 +20,7 @@ const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundSize:'contain',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E', backgroundColor: '#0C489E',
backgroundPosition: 'right' backgroundPosition: 'right'
@@ -69,23 +69,28 @@ const Index = () => {
<LoadingComponent /> <LoadingComponent />
: :


<Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column" spacing={1} >
<Grid container sx={{ minHeight: '85vh', backgroundColor: "backgroundColor.default" }} direction="column" spacing={1} >
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">Create Proof</Typography>
</Stack>
</div>
</Grid>
<MainCard <MainCard
elevation={0} elevation={0}
border={false} border={false}
content={false}>
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">Create Proof</Typography>
</Stack>
</div>
</Grid>
content={false}
sx={{
backgroundColor: "backgroundColor.default"
}}
>

{/*row 1*/} {/*row 1*/}
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}> <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
<Grid item xs={12} md={12} lg={8}> <Grid item xs={12} md={12} lg={8}>
<Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
<Box xs={12} ml={4} mt={3} sx={{ pb: 8.5, pt: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
<ApplicationDetails <ApplicationDetails
formData={record} formData={record}
style={{ style={{
@@ -96,8 +101,8 @@ const Index = () => {
/> />
</Box> </Box>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={4} >
<Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
<Grid item xs={12} md={12} lg={3.85}>
<Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
<GazetteDetails <GazetteDetails
formData={record} formData={record}
style={{ style={{
@@ -111,18 +116,18 @@ const Index = () => {
</Grid> </Grid>
</Grid> </Grid>
{/*row 2*/} {/*row 2*/}
<Grid item xs={12} md={12} lg={12}>
<Grid item xs={12} md={12} lg={12} sx={{ ml: 1 }}>
<MainCard elevation={0} <MainCard elevation={0}
border={false} border={false}
content={false} content={false}
backgroundColor={"backgroundColor.default"}
> >
<Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>

<ProofForm
formData={record}
/>
<Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
<ProofForm
formData={record}
/>
</Box> </Box>
<br/>
<br />
</MainCard> </MainCard>
</Grid> </Grid>
</MainCard> </MainCard>


+ 21
- 18
src/pages/Proof/Reply_GLD/ApplicationDetails.js View File

@@ -16,7 +16,10 @@ const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import FileList from "components/FileList" import FileList from "components/FileList"
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
const ApplicationDetailCard = ({
formData,
// setBackButtonPos
}) => {


const params = useParams(); const params = useParams();


@@ -64,9 +67,9 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
}); });
} }
React.useEffect(()=>{
if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 2}px`)
},[document.getElementById("applicationDetailsMainCard")])
// React.useEffect(()=>{
// if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 3}px`)
// },[document.getElementById("applicationDetailsMainCard")])


return ( return (
<MainCard <MainCard
@@ -74,7 +77,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
border={false} border={false}
content={false} content={false}
> >
<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
<Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
Public Notice: Proofreading Reply Public Notice: Proofreading Reply
</Typography> </Typography>
<form> <form>
@@ -86,7 +89,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>App No.:</FormLabel>
<FormLabel><Typography variant="h5">App No.:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -98,7 +101,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid container alignItems={"left"}> <Grid container alignItems={"left"}>
<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' }}>
<FormLabel>Status:</FormLabel>
<FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
@@ -115,7 +118,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Applicant:</FormLabel>
<FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -133,7 +136,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Issue No:</FormLabel>
<FormLabel><Typography variant="h5">Issue No:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -148,7 +151,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Contact Person:</FormLabel>
<FormLabel><Typography variant="h5">Contact Person:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -161,7 +164,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Issue Date:</FormLabel>
<FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -194,7 +197,7 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}> <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography>Print file：</Typography>
<Typography variant="h5">Print file：</Typography>
</Grid> </Grid>
</Grid> </Grid>
<FileList <FileList
@@ -213,25 +216,25 @@ const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={12} lg={12} <Grid item xs={12} md={12} lg={12}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<Typography>Deadline for payment and reply：</Typography>
<Typography variant="h5">Deadline for payment and reply：</Typography>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
<Typography>{DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM</Typography>
<Typography variant="h5">{DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM</Typography>
</Grid> </Grid>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
<Typography>Fee:</Typography>
<Typography variant="h5">Fee:</Typography>
</Grid> </Grid>
<Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
<Typography style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
<Typography variant="h5" style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
{ {
formik.values.groupType == "A" formik.values.groupType == "A"
? ?
<Typography>( {data.noOfPages} page x $6,552 )</Typography>
<Typography variant="h5">( {data.noOfPages} page x $6,552 )</Typography>
: :
<Typography>( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} )</Typography>
<Typography variant="h5">( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} )</Typography>
} }
</Grid> </Grid>
</Grid> </Grid>


+ 5
- 5
src/pages/Proof/Reply_GLD/ProofForm.js View File

@@ -48,7 +48,7 @@ const FormPanel = ({ formData }) => {
border={false} border={false}
content={false}> content={false}>


<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
<Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
Public Notice: Proofreading Reply Public Notice: Proofreading Reply
</Typography> </Typography>


@@ -58,10 +58,10 @@ const FormPanel = ({ formData }) => {
formik.values.replyDate ? formik.values.replyDate ?
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
<Grid item xs={12} md={12} textAlign="left"> <Grid item xs={12} md={12} textAlign="left">
Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}
<Typography variant="h5">Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}</Typography>
</Grid> </Grid>
<Grid item xs={12} md={12} textAlign="left"> <Grid item xs={12} md={12} textAlign="left">
Reply: {formik.values.action ? (<span style={{color:'green'}}>Ready for printing (correct manuscript).</span>) : (<span style={{color:'red'}}>Not ready for printing (requires modification).</span>)}
<Typography variant="h5">Reply: {formik.values.action ? (<span style={{ color: 'green' }}>Ready for printing (correct manuscript).</span>) : (<span style={{ color: 'red' }}>Not ready for printing (requires modification).</span>)}</Typography>
</Grid> </Grid>
{ {
formik.values.action ? formik.values.action ?
@@ -87,13 +87,13 @@ const FormPanel = ({ formData }) => {
isOverTime() ? isOverTime() ?
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
<Grid item xs={12} md={12} textAlign="left"> <Grid item xs={12} md={12} textAlign="left">
The response timed out, please apply again.
<Typography variant="h5">The response timed out, please apply again.</Typography>
</Grid> </Grid>
</Grid> </Grid>
: :
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
<Grid item xs={12} md={12} textAlign="left"> <Grid item xs={12} md={12} textAlign="left">
Wait for reply.
<Typography variant="h5">Wait for reply.</Typography>
</Grid> </Grid>
</Grid> </Grid>
) )


+ 13
- 13
src/pages/Proof/Reply_GLD/index.js View File

@@ -92,12 +92,12 @@ const Index = () => {
// } // }
// }) // })


const [backButtonPos, setBackButtonPos] = React.useState()
const backButtonRef = React.useRef()
React.useLayoutEffect(()=>{
// const [backButtonPos, setBackButtonPos] = React.useState()
// const backButtonRef = React.useRef()
// React.useLayoutEffect(()=>{
// console.log(applicationDetailsRef.current?.getBoundingClientRect()) // console.log(applicationDetailsRef.current?.getBoundingClientRect())
if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}`
},[backButtonPos])
// if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}`
// },[backButtonPos])


// React.useEffect(()=>{ // React.useEffect(()=>{
// if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}` // if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}`
@@ -108,7 +108,7 @@ const Index = () => {
<LoadingComponent /> <LoadingComponent />
: :
( (
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid item xs={12} width="100%"> <Grid item xs={12} width="100%">
<div style={BackgroundHead} width="100%"> <div style={BackgroundHead} width="100%">
<Stack direction="row" height='70px'> <Stack direction="row" height='70px'>
@@ -117,19 +117,19 @@ const Index = () => {
</div> </div>
</Grid> </Grid>
<Grid item xs={12} width="100%"> <Grid item xs={12} width="100%">
<Button ref={backButtonRef} sx={{ml: backButtonPos, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/proof/search")}}>
<Button sx={{ml: 6, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/proof/search")}}>
<KeyboardBackspaceOutlinedIcon/> <KeyboardBackspaceOutlinedIcon/>
<Typography variant="h4">Back</Typography> <Typography variant="h4">Back</Typography>
</Button> </Button>
</Grid> </Grid>
{/*row 1*/} {/*row 1*/}
<Grid item xs={12} md={12} > <Grid item xs={12} md={12} >
<Grid container justifyContent="flex-start" alignItems="center" >
<Grid container justifyContent="flex-start" alignItems="center" direction="column">
<center> <center>
<Grid item xs={12} md={12} sx={{ pt: 2 }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
<Grid item xs={12} md={12} sx={{ pt: 2, ml: 6, mr: 6, }}>
<Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}>
<ApplicationDetails <ApplicationDetails
setBackButtonPos={setBackButtonPos}
// setBackButtonPos={setBackButtonPos}
formData={record} formData={record}
style={{ style={{
display: "flex", display: "flex",
@@ -139,8 +139,8 @@ const Index = () => {
/> />
</Box> </Box>
</Grid> </Grid>
<Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
<Grid item xs={12} md={12} sx={{ pt: 3, pb: 2, ml: 6, mr: 6, }}>
<Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}>
<ProofForm <ProofForm
formData={record} formData={record}
/> />


+ 33
- 30
src/pages/Proof/Search_GLD/DataGrid.js View File

@@ -1,11 +1,12 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { import {
Button
Button,
Box
} from '@mui/material'; } from '@mui/material';
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import {useNavigate} from "react-router-dom";
import {FiDataGrid} from "components/FiDataGrid";
import { useNavigate } from "react-router-dom";
import { FiDataGrid } from "components/FiDataGrid";
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function SearchPublicNoticeTable({ recordList }) { export default function SearchPublicNoticeTable({ recordList }) {
@@ -17,7 +18,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
}, [recordList]); }, [recordList]);


const handleEditClick = (params) => () => { const handleEditClick = (params) => () => {
navigate('/proof/reply/'+ params.row.id);
navigate('/proof/reply/' + params.row.id);
}; };




@@ -35,16 +36,16 @@ export default function SearchPublicNoticeTable({ recordList }) {
id: 'appId', id: 'appId',
field: 'appId', field: 'appId',
headerName: 'Application No./ Gazette Code/ Gazette Issue', headerName: 'Application No./ Gazette Code/ Gazette Issue',
flex: 1,
flex: 1.5,
renderCell: (params) => { renderCell: (params) => {
let appNo = params.row.appNo; let appNo = params.row.appNo;
let code = params.row.groupNo; let code = params.row.groupNo;
let isssue = params.row.issueYear let isssue = params.row.issueYear
+" Vol. "+zeroPad(params.row.issueVolume,3)
+", No. "+zeroPad(params.row.issueNo,2)
+", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
+ " Vol. " + zeroPad(params.row.issueVolume, 3)
+ ", No. " + zeroPad(params.row.issueNo, 2)
+ ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");


return <div style={{margin: 4}}>App No: {appNo}<br/>Gazette Code: {code}<br/>Issue: {isssue}</div>
return <div style={{ margin: 4 }}>App No: {appNo}<br />Gazette Code: {code}<br />Issue: {isssue}</div>
}, },
}, },
{ {
@@ -62,7 +63,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
headerName: 'Confirmed/Return Date', headerName: 'Confirmed/Return Date',
flex: 1, flex: 1,
valueGetter: (params) => { valueGetter: (params) => {
return params?.value?DateUtils.datetimeStr(params?.value):"";
return params?.value ? DateUtils.datetimeStr(params?.value) : "";
} }
}, },
{ {
@@ -71,7 +72,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
headerName: 'Contact Person', headerName: 'Contact Person',
flex: 1, flex: 1,
renderCell: (params) => { renderCell: (params) => {
let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":"";
let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : "";


let phone = JSON.parse(params.row.contactTelNo); let phone = JSON.parse(params.row.contactTelNo);
let faxNo = JSON.parse(params.row.contactFaxNo); let faxNo = JSON.parse(params.row.contactFaxNo);
@@ -99,7 +100,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
headerName: 'Gazette Group', headerName: 'Gazette Group',
flex: 1, flex: 1,
valueGetter: (params) => { valueGetter: (params) => {
return (params?.value)?(params?.value):"";
return (params?.value) ? (params?.value) : "";
} }
}, },
{ {
@@ -108,42 +109,44 @@ export default function SearchPublicNoticeTable({ recordList }) {
headerName: 'Fee', headerName: 'Fee',
flex: 1, flex: 1,
valueGetter: (params) => { valueGetter: (params) => {
return (params?.value)?"$ "+currencyFormat(params?.value):"";
return (params?.value) ? "$ " + currencyFormat(params?.value) : "";
} }
}, },
]; ];


function currencyFormat(num) { function currencyFormat(num) {
return num.toLocaleString('en-US', { return num.toLocaleString('en-US', {
minimumFractionDigits: 2
});
minimumFractionDigits: 2
});
} }




function zeroPad(num, places) { function zeroPad(num, places) {
num=num?num:0;
num = num ? num : 0;
var zero = places - num.toString().length + 1; var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num; return Array(+(zero > 0 && zero)).join("0") + num;
} }
function handleRowDoubleClick(params) { function handleRowDoubleClick(params) {
navigate('/proof/reply/' + params.row.id); navigate('/proof/reply/' + params.row.id);
} }


return ( return (
<div style={{ height: 400, width: '100%' }}>

<FiDataGrid
rowHeight={80}
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
onRowDoubleClick={handleRowDoubleClick}
/>
<div style={{ height: '100%', width: '100%' }}>
<Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
<FiDataGrid
rowHeight={80}
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
onRowDoubleClick={handleRowDoubleClick}
getRowHeight={() => 'auto'}
/>
</Box>
</div> </div>
); );
} }

+ 225
- 219
src/pages/Proof/Search_GLD/SearchForm.js View File

@@ -10,11 +10,12 @@ import { useForm } from "react-hook-form";
import * as React from "react"; import * as React from "react";
import * as ComboData from "utils/ComboData"; import * as ComboData from "utils/ComboData";
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import { Typography } from '../../../../node_modules/@mui/material/index';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issueComboData
}) => {
const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
}) => {


const [type, setType] = React.useState([]); const [type, setType] = React.useState([]);
const [status, setStatus] = React.useState(ComboData.proofStatus[0]); const [status, setStatus] = React.useState(ComboData.proofStatus[0]);
@@ -47,7 +48,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
contact: data.contact, contact: data.contact,
replyed: (status?.type && status?.type != 'all') ? status?.type : "", replyed: (status?.type && status?.type != 'all') ? status?.type : "",
orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "", orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
}; };
applySearch(temp); applySearch(temp);
}; };
@@ -73,16 +74,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
reset(); reset();
} }


function getIssueLabel(data){
if(data=={}) return "";
return data.year
+" Vol. "+zeroPad(data.volume,3)
+", No. "+zeroPad(data.issueNo,2)
+", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
function getIssueLabel(data) {
if (data == {}) return "";
return data.year
+ " Vol. " + zeroPad(data.volume, 3)
+ ", No. " + zeroPad(data.issueNo, 2)
+ ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
} }


function zeroPad(num, places) { function zeroPad(num, places) {
num=num?num:0;
num = num ? num : 0;
var zero = places - num.toString().length + 1; var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num; return Array(+(zero > 0 && zero)).join("0") + num;
} }
@@ -90,222 +91,227 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
return ( return (
<MainCard xs={12} md={12} lg={12} <MainCard xs={12} md={12} lg={12}
border={false} border={false}
content={false}>
content={false}
sx={{ backgroundColor: 'backgroundColor.default' }}
>


<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
Search Form
</Grid>
</CardContent>

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("refNo")}
id='refNo'
label="Proof No."
defaultValue={searchCriteria.refNo}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3 }} width="98%">

{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form</Typography>
</Grid>
</CardContent>

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("refNo")}
id='refNo'
label="Proof No."
defaultValue={searchCriteria.refNo}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("code")}
id='code'
label="Application / Gazette Code"
defaultValue={searchCriteria.code}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("issueId")}
disablePortal
id="issueId"
options={issueCombo}
value={issueSelected}
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
getOptionLabel={(option) => getIssueLabel(option)}
onChange={(event, newValue) => {
setIssueSelected(newValue);
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Issue"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("gazettGroup")}
disablePortal
id="gazettGroup"
options={ComboData.groupTitle}
value={groupSelected}
inputValue={(groupSelected?.label) ? groupSelected?.label : ""}
getOptionLabel={(option) => option.label}
onChange={(event, newValue) => {
setGroupSelected(newValue);
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Group"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("dateFrom")}
id="dateFrom"
type="date"
label="Proof Date (From)"
defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: maxDate } }}
onChange={(newValue) => {
setMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("dateTo")}
InputProps={{ inputProps: { min: minDate } }}
onChange={(newValue) => {
setMaxDate(DateUtils.dateStr(newValue));
}}
id="dateTo"
type="date"
label="Proof Date(To)"
defaultValue={searchCriteria.dateTo}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("contact")}
id="contact"
label="Contact Person"
defaultValue={searchCriteria.contact}
InputLabelProps={{
shrink: true
}}
/>

</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("status")}
disablePortal
id="status"
filterOptions={(options) => options}
options={ComboData.proofStatus}
value={status}
inputValue={status?.label ? status?.label : ""}
onChange={(event, newValue) => {
if (newValue !== null) {
setStatus(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Status"
/>
)}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

{
orgCombo ?
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("orgId")}
disablePortal={false}
id="orgId"
options={orgCombo}
value={orgSelected}
inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
onChange={(event, newValue) => {
setOrgSelected(newValue);
}}
renderInput={(params) => (
<TextField {...params}
label="Organization"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>
: <></>
}


<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("code")}
id='code'
label="Application / Gazette Code"
defaultValue={searchCriteria.code}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("issueId")}
disablePortal
id="issueId"
options={issueCombo}
value={issueSelected}
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
getOptionLabel={(option)=>getIssueLabel(option)}
onChange={(event, newValue) => {
setIssueSelected(newValue);
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Issue"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("gazettGroup")}
disablePortal
id="gazettGroup"
options={ComboData.groupTitle}
value={groupSelected}
inputValue={(groupSelected?.label)?groupSelected?.label:""}
getOptionLabel={(option)=>option.label}
onChange={(event, newValue) => {
setGroupSelected(newValue);
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Group"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid> </Grid>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("dateFrom")}
id="dateFrom"
type="date"
label="Proof Date (From)"
defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: maxDate } }}
onChange={(newValue) => {
setMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("dateTo")}
InputProps={{ inputProps: { min: minDate } }}
onChange={(newValue) => {
setMaxDate(DateUtils.dateStr(newValue));
}}
id="dateTo"
type="date"
label="Proof Date(To)"
defaultValue={searchCriteria.dateTo}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("contact")}
id="contact"
label="Contact Person"
defaultValue={searchCriteria.contact}
InputLabelProps={{
shrink: true
}}
/>

</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("status")}
disablePortal
id="status"
filterOptions={(options) => options}
options={ComboData.proofStatus}
value={status}
inputValue={status?.label?status?.label:""}
onChange={(event, newValue) => {
if (newValue !== null) {
setStatus(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Status"
/>
)}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

{
orgCombo ?
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("orgId")}
disablePortal
id="orgId"
options={orgCombo}
value={orgSelected}
inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
onChange={(event, newValue) => {
setOrgSelected(newValue);
}}
renderInput={(params) => (
<TextField {...params}
label="Organization"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>
: <></>
}


</Grid>


{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Clear
</Button>
</Grid>


<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Submit
</Button>
{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Clear</Typography>
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Submit</Typography>
</Button>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</form> </form>


+ 24
- 22
src/pages/Proof/Search_GLD/index.js View File

@@ -20,7 +20,7 @@ const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundSize:'contain',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E', backgroundColor: '#0C489E',
backgroundPosition: 'right' backgroundPosition: 'right'
@@ -30,12 +30,12 @@ const BackgroundHead = {


const UserSearchPage_Individual = () => { const UserSearchPage_Individual = () => {


const [record,setRecord] = React.useState([]);
const [orgCombo,setOrgCombo] = React.useState([]);
const [issueCombo,setIssueCombo] = React.useState([]);
const [record, setRecord] = React.useState([]);
const [orgCombo, setOrgCombo] = React.useState([]);
const [issueCombo, setIssueCombo] = React.useState([]);
const [searchCriteria, setSearchCriteria] = React.useState({ const [searchCriteria, setSearchCriteria] = React.useState({
dateTo: DateUtils.dateStr(new Date()), dateTo: DateUtils.dateStr(new Date()),
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
}); });
const [onReady, setOnReady] = React.useState(false); const [onReady, setOnReady] = React.useState(false);


@@ -53,36 +53,36 @@ const UserSearchPage_Individual = () => {
getUserList(); getUserList();
}, [searchCriteria]); }, [searchCriteria]);


function getUserList(){
function getUserList() {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.LIST_PROOF, url: UrlUtils.LIST_PROOF,
params: searchCriteria, params: searchCriteria,
onSuccess: function(responseData){
onSuccess: function (responseData) {
setRecord(responseData); setRecord(responseData);
} }
}); });
} }


function getOrgCombo(){
function getOrgCombo() {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_ORG_COMBO, url: UrlUtils.GET_ORG_COMBO,
onSuccess: function(responseData){
onSuccess: function (responseData) {
let combo = responseData; let combo = responseData;
setOrgCombo(combo); setOrgCombo(combo);
} }
}); });
} }


function getIssueCombo(){
function getIssueCombo() {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_ISSUE_COMBO, url: UrlUtils.GET_ISSUE_COMBO,
onSuccess: function(responseData){
onSuccess: function (responseData) {
let combo = responseData; let combo = responseData;
setIssueCombo(combo); setIssueCombo(combo);
} }
}); });
} }


function applySearch(input) { function applySearch(input) {
setSearchCriteria(input); setSearchCriteria(input);
@@ -90,9 +90,10 @@ const UserSearchPage_Individual = () => {


return ( return (
!onReady ? !onReady ?
<LoadingComponent/>
<LoadingComponent />
: :
<Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
<Grid container sx={{ minHeight: '85vh', backgroundColor: 'backgroundColor.default' }} direction="column"
>
<Grid item xs={12}> <Grid item xs={12}>
<div style={BackgroundHead}> <div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -102,18 +103,19 @@ const UserSearchPage_Individual = () => {
</Grid> </Grid>
{/*row 1*/} {/*row 1*/}
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<SearchForm
applySearch={applySearch}
orgComboData={orgCombo}
issueComboData={issueCombo}
searchCriteria={searchCriteria}
<SearchForm
applySearch={applySearch}
orgComboData={orgCombo}
issueComboData={issueCombo}
searchCriteria={searchCriteria}
/> />
</Grid> </Grid>
{/*row 2*/} {/*row 2*/}
<Grid item xs={12} md={12} lg={12}>

<Grid item xs={12} md={12} lg={12} sx={{ ml: 2, mr: 2 }}>
<MainCard elevation={0} <MainCard elevation={0}
border={false}
content={false}
border={false}
content={false}
> >
<EventTable <EventTable
recordList={record} recordList={record}


+ 25
- 24
src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js View File

@@ -103,7 +103,7 @@ const ApplicationDetailCard = (
if (applicationDetailData.data.groupNo) { if (applicationDetailData.data.groupNo) {
window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer"); window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer");
window.addEventListener("focus", onFocus) window.addEventListener("focus", onFocus)
}else{
} else {
setWarningText("Please generate Gazette Code before Create Proof."); setWarningText("Please generate Gazette Code before Create Proof.");
setIsWarningPopUp(true); setIsWarningPopUp(true);
} }
@@ -143,7 +143,7 @@ const ApplicationDetailCard = (
alignItems: 'end' alignItems: 'end'
}}> }}>
<EditNoteIcon /> <EditNoteIcon />
<Typography ml={1}> Create Proof</Typography>
<Typography ml={1} variant="h5"> Create Proof</Typography>
</Button> : </Button> :
null null
} }
@@ -166,7 +166,7 @@ const ApplicationDetailCard = (
color="orange" color="orange"
> >
<ReplayIcon /> <ReplayIcon />
<Typography ml={1}> Re-submit</Typography>
<Typography ml={1} variant="h5"> Re-submit</Typography>
</Button> </Button>
<Button <Button
// size="large" // size="large"
@@ -178,7 +178,7 @@ const ApplicationDetailCard = (
alignItems: 'end', alignItems: 'end',
}}> }}>
<CloseIcon /> <CloseIcon />
<Typography ml={1}>Not accepted</Typography>
<Typography ml={1} variant="h5">Not accepted</Typography>
</Button> </Button>
</> : </> :
currentApplicationDetailData.status == "paid" ? currentApplicationDetailData.status == "paid" ?
@@ -193,7 +193,7 @@ const ApplicationDetailCard = (
backgroundColor: '#52b202' backgroundColor: '#52b202'
}}> }}>
<DoneIcon /> <DoneIcon />
<Typography ml={1}> Complete</Typography>
<Typography ml={1} variant="h5">Complete</Typography>
</Button> </Button>
<Button <Button
// size="large" // size="large"
@@ -205,7 +205,7 @@ const ApplicationDetailCard = (
backgroundColor: '#ffa733' backgroundColor: '#ffa733'
}}> }}>
<CloseIcon /> <CloseIcon />
<Typography ml={1}> Withdraw</Typography>
<Typography ml={1} variant="h5">Withdraw</Typography>
</Button> </Button>
</> : null </> : null
} }
@@ -213,7 +213,7 @@ const ApplicationDetailCard = (
</Grid> </Grid>
</Grid> : null </Grid> : null
} }
<Typography variant="h5" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
<Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
Application Details Application Details
</Typography> </Typography>
<form> <form>
@@ -225,7 +225,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Application No:</FormLabel>
<FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -253,7 +253,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Status:</FormLabel>
<FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -270,7 +270,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Applicant:</FormLabel>
<FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -315,7 +315,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={4} lg={4} <Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Contact Phone:</FormLabel>
<FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
@@ -370,7 +370,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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' }}>
<FormLabel>Contect Person:</FormLabel>
<FormLabel><Typography variant="h5">Contect Person:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -398,7 +398,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={4} lg={4} <Grid item xs={12} md={4} lg={4}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Contact Fax:</FormLabel>
<FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
@@ -457,7 +457,7 @@ const ApplicationDetailCard = (
<Grid container direction="row"> <Grid container direction="row">
<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' }}>
<FormLabel>Manuscript File:</FormLabel>
<FormLabel><Typography variant="h5">Manuscript File:</Typography></FormLabel>
</Grid> </Grid>
<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
<Grid container direction="row" justifyContent="flex-start"> <Grid container direction="row" justifyContent="flex-start">
@@ -466,6 +466,7 @@ const ApplicationDetailCard = (
<Typography <Typography
// fullWidth // fullWidth
id='fileName' id='fileName'
variant="h5"
> >
{fileDetail.filename} {fileDetail.filename}
</Typography> </Typography>
@@ -494,16 +495,16 @@ const ApplicationDetailCard = (
</Grid> </Grid>
</form> </form>
<div> <div>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle>Warning</DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
</DialogActions>
</Dialog>
</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">OK</Typography></Button>
</DialogActions>
</Dialog>
</div>
</MainCard> </MainCard>
); );
}; };


+ 258
- 258
src/pages/PublicNotice/Details_GLD/ClientDetailCard.js View File

@@ -1,8 +1,8 @@
// material-ui // material-ui
import { import {
FormControl,
FormControl,
Button, Button,
Grid,
Grid,
// InputAdornment, // InputAdornment,
Typography, FormLabel, Typography, FormLabel,
OutlinedInput, OutlinedInput,
@@ -10,11 +10,11 @@ import {
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../../components/MainCard"; import MainCard from "../../../components/MainCard";
import * as React from "react"; import * as React from "react";
import {useForm} from "react-hook-form";
import { useForm } from "react-hook-form";
import { import {
useEffect, useEffect,
useState useState
} from "react";
} from "react";
// import Checkbox from "@mui/material/Checkbox"; // import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
@@ -27,17 +27,17 @@ import HighlightOff from '@mui/icons-material/HighlightOff';


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
const ClientDetailCard = ( const ClientDetailCard = (
{ applicationDetailData,
{ applicationDetailData,
// isCollectData, // isCollectData,
// updateUserObject, // updateUserObject,
// isNewRecord // isNewRecord
} }
) => {
) => {
// const params = useParams(); // const params = useParams();
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
const [onReady,setOnReady] = useState(false);
const [companyName, setCompanyName] = useState({enCompanyName:"",chCompanyName:""});
const {register,
const [onReady, setOnReady] = useState(false);
const [companyName, setCompanyName] = useState({ enCompanyName: "", chCompanyName: "" });
const { register,
// getValues // getValues
} = useForm() } = useForm()
// const navigate = useNavigate() // const navigate = useNavigate()
@@ -46,12 +46,12 @@ const ClientDetailCard = (
//if user data from parent are not null //if user data from parent are not null
if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) { if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
setCurrentApplicationDetailData(applicationDetailData.userData); setCurrentApplicationDetailData(applicationDetailData.userData);
if (!applicationDetailData.companyName1==null){
if (!applicationDetailData.companyName1 == null) {
setCompanyName(applicationDetailData.companyName); setCompanyName(applicationDetailData.companyName);
}else{
const companyNameData ={
enCompanyName:applicationDetailData.userData.enCompanyName,
chCompanyName:applicationDetailData.userData.chCompanyName
} else {
const companyNameData = {
enCompanyName: applicationDetailData.userData.enCompanyName,
chCompanyName: applicationDetailData.userData.chCompanyName
} }
setCompanyName(companyNameData) setCompanyName(companyNameData)
} }
@@ -68,12 +68,12 @@ const ClientDetailCard = (


const handleViewClick = () => () => { const handleViewClick = () => () => {
console.log(currentApplicationDetailData) console.log(currentApplicationDetailData)
currentApplicationDetailData.type == "ORG"?
window.open('/orgUser/'+ currentApplicationDetailData.id, "_blank", "noreferrer"):
window.open('/indUser/'+ currentApplicationDetailData.id, "_blank", "noreferrer");
currentApplicationDetailData.type == "ORG" ?
window.open('/orgUser/' + currentApplicationDetailData.id, "_blank", "noreferrer") :
window.open('/indUser/' + currentApplicationDetailData.id, "_blank", "noreferrer");
window.addEventListener("focus", onFocus) window.addEventListener("focus", onFocus)
}; };
const onFocus = () => { const onFocus = () => {
window.removeEventListener("focus", onFocus) window.removeEventListener("focus", onFocus)
location.reload(); location.reload();
@@ -91,15 +91,15 @@ const ClientDetailCard = (


return ( return (
!onReady ? !onReady ?
<LoadingComponent/>
<LoadingComponent />
: :
<MainCard elevation={0} <MainCard elevation={0}
border={false}
content={false}
sx={{xs:"12", md:"7"}}>
border={false}
content={false}
sx={{ xs: "12", md: "7" }}>
<Grid container spacing={1} direction="row"> <Grid container spacing={1} direction="row">
<Grid item xs={12} md={7} > <Grid item xs={12} md={7} >
<Stack
<Stack
direction="row" direction="row"
justifyContent="flex-start" justifyContent="flex-start"
alignItems="center" alignItems="center"
@@ -114,42 +114,42 @@ const ClientDetailCard = (
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end', alignItems: 'end',
}}> }}>
<ContentPasteSearchIcon/>
<Typography ml={1} mr={1}> View</Typography>
<ContentPasteSearchIcon />
<Typography variant="h5" ml={1} mr={1}> View</Typography>
</Button> </Button>
</Stack> </Stack>
</Grid> </Grid>
</Grid> </Grid>
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
Client Details
<Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
Client Details
</Typography> </Typography>
<form> <form>
<Grid container direction="column" justifyContent="flex-start" <Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1} > <Grid item xs={12} md={12} lg={12} mb={1} >
{currentApplicationDetailData.verifiedBy!==null?
<Stack direction="row">
<Typography>
Verified
</Typography>
<CheckCircleOutline color="success"/>
</Stack>:
<Stack direction="row">
<Typography>
Not Verified
</Typography>
<HighlightOff color="error"/>
</Stack>
}
{currentApplicationDetailData.verifiedBy !== null ?
<Stack direction="row">
<Typography variant="h5">
Verified
</Typography>
<CheckCircleOutline sx={{ mt: 0.5, ml: 0.2 }} color="success" />
</Stack> :
<Stack direction="row">
<Typography variant="h5">
Not Verified
</Typography>
<HighlightOff sx={{ mt: 0.5, ml: 0.2 }} color="error" />
</Stack>
}
</Grid> </Grid>
</Grid> </Grid>
<Grid container direction="column" justifyContent="flex-start" <Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1} > <Grid item xs={12} md={12} lg={12} mb={1} >
<FormLabel>Client Type:</FormLabel>
<FormLabel><Typography variant="h5">Client Type:</Typography></FormLabel>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled>
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("type", {...register("type",
@@ -167,99 +167,23 @@ const ClientDetailCard = (
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
{currentApplicationDetailData.type==="ORG"?
<>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (English):</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled >
<OutlinedInput
size="small"
{...register("enCompanyName",
{
value: companyName.enCompanyName ,
})}
id='enCompanyName'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (Chinese):</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled >
<OutlinedInput
size="small"
{...register("chCompanyName",
{
value: companyName.chCompanyName,
})}
id='chCompanyName'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>English Name:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled >
<OutlinedInput
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<Stack direction="row">
<FormControl variant="outlined" sx={{width:'40%'}} disabled>
{currentApplicationDetailData.type === "ORG" ?
<>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">Company Name (English):</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled >
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("countryCode",
{...register("enCompanyName",
{ {
value: currentApplicationDetailData.contactTel.countryCode,
value: companyName.enCompanyName,
})} })}
id='countryCode'
id='enCompanyName'
sx={{ sx={{
"& .MuiInputBase-input.Mui-disabled": { "& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000", WebkitTextFillColor: "#000000",
@@ -268,14 +192,23 @@ const ClientDetailCard = (
}} }}
/> />
</FormControl> </FormControl>
<FormControl variant="outlined" sx={{width:'100%'}} disabled>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">Company Name (Chinese):</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled >
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("phoneNumber",
{...register("chCompanyName",
{ {
value: currentApplicationDetailData.contactTel.phoneNumber,
value: companyName.chCompanyName,
})} })}
id='phoneNumber'
id='chCompanyName'
sx={{ sx={{
"& .MuiInputBase-input.Mui-disabled": { "& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000", WebkitTextFillColor: "#000000",
@@ -284,102 +217,118 @@ const ClientDetailCard = (
}} }}
/> />
</FormControl> </FormControl>
</Stack>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Email:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled >
<OutlinedInput
size="small"
{...register("emailBus",
{
value: currentApplicationDetailData.emailBus,
})}
id='emailBus'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid> </Grid>
</Grid>
</>:
<>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>English Name:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled >
<OutlinedInput
size="small"
{...register("enName",
{
value: currentApplicationDetailData.enName,
})}
id='enName'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Chinese Name:</FormLabel>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">English Name:</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled >
<OutlinedInput
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled >
<OutlinedInput
size="small"
{...register("chName",
{
value: currentApplicationDetailData.chName,
})}
id='chName'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<Stack direction="row">
<FormControl variant="outlined" sx={{ width: '40%' }} disabled>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.contactTel.countryCode,
})}
id='countryCode'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
<FormControl variant="outlined" sx={{ width: '100%' }} disabled>
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.contactTel.phoneNumber,
})}
id='phoneNumber'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Stack>
</Grid>
</Grid> </Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">Email:</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled >
<OutlinedInput
size="small"
{...register("emailBus",
{
value: currentApplicationDetailData.emailBus,
})}
id='emailBus'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<Stack direction="row">
<FormControl variant="outlined" sx={{width:'40%'}} disabled>
</> :
<>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">English Name:</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled >
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("countryCode",
{...register("enName",
{ {
value: currentApplicationDetailData.mobileNumber.countryCode,
value: currentApplicationDetailData.enName,
})} })}
id='countryCode'
id='enName'
sx={{ sx={{
"& .MuiInputBase-input.Mui-disabled": { "& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000", WebkitTextFillColor: "#000000",
@@ -388,14 +337,23 @@ const ClientDetailCard = (
}} }}
/> />
</FormControl> </FormControl>
<FormControl variant="outlined" sx={{width:'100%'}} disabled>
</Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">Chinese Name:</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled >
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("phoneNumber",
{...register("chName",
{ {
value: currentApplicationDetailData.mobileNumber.phoneNumber,
value: currentApplicationDetailData.chName,
})} })}
id='phoneNumber'
id='chName'
sx={{ sx={{
"& .MuiInputBase-input.Mui-disabled": { "& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000", WebkitTextFillColor: "#000000",
@@ -404,37 +362,79 @@ const ClientDetailCard = (
}} }}
/> />
</FormControl> </FormControl>
</Stack>
</Grid>
</Grid> </Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Email:</FormLabel>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<Stack direction="row">
<FormControl variant="outlined" sx={{ width: '40%' }} disabled>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.mobileNumber.countryCode,
})}
id='countryCode'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
<FormControl variant="outlined" sx={{ width: '100%' }} disabled>
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.mobileNumber.phoneNumber,
})}
id='phoneNumber'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Stack>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} disabled >
<OutlinedInput
size="small"
{...register("emailAddress",
{
value: currentApplicationDetailData.emailAddress,
})}
id='emailAddress'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel><Typography variant="h5">Email:</Typography></FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
<FormControl variant="outlined" sx={{ width: '100%' }} disabled >
<OutlinedInput
size="small"
{...register("emailAddress",
{
value: currentApplicationDetailData.emailAddress,
})}
id='emailAddress'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Grid>
</Grid> </Grid>
</Grid>
</>
</>
} }
</form> </form>
</MainCard> </MainCard>
); );


+ 9
- 9
src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js View File

@@ -124,7 +124,7 @@ const GazetteDetailCard = (
alignItems: 'end' alignItems: 'end'
}}> }}>
<EditNoteIcon /> <EditNoteIcon />
<Typography ml={1}> Gen Gazette Code</Typography>
<Typography variant="h5" ml={1}> Gen Gazette Code</Typography>
</Button> </Button>
</Stack> </Stack>
</Grid> </Grid>
@@ -142,7 +142,7 @@ const GazetteDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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'}}>
<FormLabel>Issue Number:</FormLabel>
<FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -171,7 +171,7 @@ const GazetteDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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'}}>
<FormLabel>Gazette Code:</FormLabel>
<FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -203,7 +203,7 @@ const GazetteDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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'}}>
<FormLabel>Issue Date:</FormLabel>
<FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -232,7 +232,7 @@ const GazetteDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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'}}>
<FormLabel>Group Title:</FormLabel>
<FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -263,13 +263,13 @@ const GazetteDetailCard = (
</form> </form>
<div> <div>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} > <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle>Warning</DialogTitle>
<DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}> <DialogContent style={{ display: 'flex', }}>
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
<Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setIsWarningPopUp(false)}>No</Button>
<Button color="success" onClick={()=>callback()}>Yes</Button>
<Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">No</Typography></Button>
<Button color="success" onClick={()=>callback()}><Typography variant="h5">Yes</Typography></Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</div> </div>


+ 23
- 18
src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js View File

@@ -45,25 +45,25 @@ const StatusChangeDialog = (props) => {
} else { } else {
setDialogTitle("Action Confirm"); setDialogTitle("Action Confirm");
setPrositiveBtnText("Confirm"); setPrositiveBtnText("Confirm");
let str = "Are you sure you want to "+props.getStatus+" this application?"
let str = "Are you sure you want to " + props.getStatus + " this application?"
return getConfirmContent(str); return getConfirmContent(str);
} }
}, [props.getStatus]); }, [props.getStatus]);


const acceptedHandle = () => () => { const acceptedHandle = () => () => {
const getStatus = props.getStatus.status; const getStatus = props.getStatus.status;
if(getStatus == "notAccepted"){
if(!remarks || remarks=="" )
if (getStatus == "notAccepted") {
if (!remarks || remarks == "")
setHelperText("Please enter reason"); setHelperText("Please enter reason");
} }
if(!helperText){
props.setReason({"reason": remarks});
if (remarks!=null&&remarks!=""){
if (!helperText) {
props.setReason({ "reason": remarks });
if (remarks != null && remarks != "") {
console.log(remarks) console.log(remarks)
// props.setStatusWindowAccepted(true); // props.setStatusWindowAccepted(true);
} }
} }
if(getStatus != "notAccepted"){
if (getStatus != "notAccepted") {
props.setStatusWindowAccepted(true); props.setStatusWindowAccepted(true);
} }
}; };
@@ -80,9 +80,9 @@ const StatusChangeDialog = (props) => {


const getConfirmContent = (text) => { const getConfirmContent = (text) => {
setContent(<Grid container direction="row" justifyContent="center" alignItems="center"> setContent(<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
{text}
</FormLabel>
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
<Typography variant="h5">{text}</Typography>
</FormLabel>
</Grid>); </Grid>);
} }


@@ -98,12 +98,12 @@ const StatusChangeDialog = (props) => {
inputProps={{ maxLength: 255 }} inputProps={{ maxLength: 255 }}
placeholder="Please enter reason" placeholder="Please enter reason"
helperText={helperText} helperText={helperText}
onChange={(newValues)=>{
onChange={(newValues) => {
setRemarks(newValues.target.value); setRemarks(newValues.target.value);
setHelperText(""); setHelperText("");
}} }}
> >
</TextField>
</TextField>
</Grid> </Grid>
</Grid> </Grid>
); );
@@ -115,11 +115,11 @@ const StatusChangeDialog = (props) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={2} lg={3} <Grid item xs={12} md={2} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<Typography>Target Issue:</Typography>
<Typography variant="h5">Target Issue:</Typography>
</Grid> </Grid>
<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<FormLabel> <FormLabel>
{props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate}
<Typography variant="h5">{props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate}</Typography>
</FormLabel> </FormLabel>
</Grid> </Grid>
</Grid> </Grid>
@@ -128,7 +128,7 @@ const StatusChangeDialog = (props) => {
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<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>Gazette Group:</Typography>
<Typography variant="h5">Gazette Group:</Typography>
</Grid> </Grid>
<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<Autocomplete <Autocomplete
@@ -144,7 +144,8 @@ const StatusChangeDialog = (props) => {
setComboInputValue(newValue); setComboInputValue(newValue);
props.setSelectedGazetteGroup(newValue); props.setSelectedGazetteGroup(newValue);
formik.setFieldValue("", "") formik.setFieldValue("", "")
} else {gazetteGroup
} else {
gazetteGroup
props.setSelectedGazetteGroupInputType(""); props.setSelectedGazetteGroupInputType("");
} }
}} }}
@@ -188,12 +189,16 @@ const StatusChangeDialog = (props) => {
<Stack direction="row" justifyContent="space-around"> <Stack direction="row" justifyContent="space-around">
<DialogActions> <DialogActions>
<Button variant="contained" onClick={props.handleClose} autoFocus > <Button variant="contained" onClick={props.handleClose} autoFocus >
Cancel
<Typography variant="h5">
Cancel
</Typography>
</Button> </Button>
</DialogActions> </DialogActions>
<DialogActions> <DialogActions>
<Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus disabled={Object.keys(props.selectedGazetteGroup).length === 0 && props.getStatus === "genGazetteCode"}> <Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus disabled={Object.keys(props.selectedGazetteGroup).length === 0 && props.getStatus === "genGazetteCode"}>
{prositiveBtnText}
<Typography variant="h5">
{prositiveBtnText}
</Typography>
</Button> </Button>
</DialogActions> </DialogActions>
</Stack> </Stack>


+ 10
- 10
src/pages/PublicNotice/Details_GLD/index.js View File

@@ -299,7 +299,7 @@ const PublicNoticeDetail_GLD = () => {
}, [getUploadStatus]); }, [getUploadStatus]);


return ( return (
<Grid container sx={{ maxnHeight: '500vh', backgroundColor: '#ffffff' }} direction="column">
<Grid container sx={{ maxHeight: '500vh', backgroundColor: 'backgroundColor.default' }} direction="column">
<StatusChangeDialog open={open} <StatusChangeDialog open={open}
handleClose={handleClose} handleClose={handleClose}
setReason={setReason} setReason={setReason}
@@ -334,10 +334,10 @@ const PublicNoticeDetail_GLD = () => {
</Grid> </Grid>
<Grid item xs={12} > <Grid item xs={12} >
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={12} md={10}>
<Grid item xs={12} md={10} lg={10} xl={10}>
<Grid container direction="column"> <Grid container direction="column">
<Grid item xs={12} md={10}>
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
<Grid item xs={12} md={10} lg={10} xl={10}>
<Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
{isLoading && editMode ? {isLoading && editMode ?
<LoadingComponent /> : <LoadingComponent /> :
<ApplicationDetailCard <ApplicationDetailCard
@@ -353,8 +353,8 @@ const PublicNoticeDetail_GLD = () => {
} }
</Box> </Box>
</Grid> </Grid>
<Grid item xs={12} md={10}>
<Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
<Grid item xs={12} md={10} lg={10} xl={10}>
<Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
<GazetteDetailCard <GazetteDetailCard
// updateUserObject={updateUserObject} // updateUserObject={updateUserObject}
applicationDetailData={applicationDetailData} applicationDetailData={applicationDetailData}
@@ -364,8 +364,8 @@ const PublicNoticeDetail_GLD = () => {
/> />
</Box> </Box>
</Grid> </Grid>
<Grid item xs={12} md={10}>
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
<Grid item xs={12} md={10} lg={10} xl={10}>
<Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
<TabTableDetail <TabTableDetail
applicationDetailData={applicationDetailData} applicationDetailData={applicationDetailData}
proofList={proofList} proofList={proofList}
@@ -375,10 +375,10 @@ const PublicNoticeDetail_GLD = () => {
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={2} lg={2}>
<Grid item xs={12} md={2} lg={2} xl={2}>
<Grid container> <Grid container>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Box xs={12} md={12} ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
<Box xs={12} md={12} ml={3} mt={3} mr={1} height='800px' sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
<ClientDetailCard <ClientDetailCard
// updateUserObject={updateUserObject} // updateUserObject={updateUserObject}
applicationDetailData={applicationDetailData} applicationDetailData={applicationDetailData}


+ 60
- 51
src/pages/PublicNotice/Details_Public/index.js View File

@@ -1,14 +1,15 @@
import { import {
useEffect, useEffect,
useState useState
} from "react";
} from "react";


// material-ui // material-ui
import { import {
Grid, Grid,
Typography, Typography,
Stack, Stack,
Box
Box,
Button
} from '@mui/material'; } from '@mui/material';
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
@@ -25,8 +26,9 @@ import {
GET_PUBLIC_NOTICE_APPLY_DETAIL, GET_PUBLIC_NOTICE_APPLY_DETAIL,
SET_PUBLIC_NOTICE_STATUS_CANCELLED SET_PUBLIC_NOTICE_STATUS_CANCELLED
} from "utils/ApiPathConst"; } from "utils/ApiPathConst";
import {useNavigate} from "react-router-dom";
import { useNavigate } from "react-router-dom";
const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';


// ==============================|| Body - DEFAULT ||============================== // // ==============================|| Body - DEFAULT ||============================== //


@@ -46,7 +48,7 @@ const DashboardDefault = () => {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundSize:'contain',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E', backgroundColor: '#0C489E',
backgroundPosition: 'right' backgroundPosition: 'right'
@@ -58,23 +60,23 @@ const DashboardDefault = () => {
}, []); }, []);


const loadApplicationDetail = () => { const loadApplicationDetail = () => {
if(params.id > 0 ){
if (params.id > 0) {
axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`)
.then((response) => {
if (response.status === 200) {
setApplicationDetailData(response.data);
setAapNo(response.data.data.appNo);
}
})
.catch(error => {
console.log(error);
return false;
});
.then((response) => {
if (response.status === 200) {
setApplicationDetailData(response.data);
setAapNo(response.data.data.appNo);
}
})
.catch(error => {
console.log(error);
return false;
});
} }
} }


useEffect(() => { useEffect(() => {
if(applicationDetailData.data === null){
if (applicationDetailData.data === null) {
navigate('/publicNotice'); navigate('/publicNotice');
} }
}, [applicationDetailData]); }, [applicationDetailData]);
@@ -86,8 +88,8 @@ const DashboardDefault = () => {
}; };


useEffect(() => { useEffect(() => {
if(statusWindowAccepted){
if(getStatus == "cancel"){
if (statusWindowAccepted) {
if (getStatus == "cancel") {
onCancelledClick() onCancelledClick()
} }
} }
@@ -95,31 +97,31 @@ const DashboardDefault = () => {


useEffect(() => { useEffect(() => {
// console.log(getStatus) // console.log(getStatus)
if(getStatus!==""){
if (getStatus !== "") {
setOpen(true) setOpen(true)
} }
}, [getStatus]); }, [getStatus]);


const onCancelledClick = () => { const onCancelledClick = () => {
if(params.id > 0 ){
axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`)
.then((response) => {
if (response.status === 204) {
setOpen(false);
handleClose();
loadApplicationDetail()
}
})
.catch(error => {
console.log(error);
return false;
});
if (params.id > 0) {
axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`)
.then((response) => {
if (response.status === 204) {
setOpen(false);
handleClose();
loadApplicationDetail()
}
})
.catch(error => {
console.log(error);
return false;
});
} }
}; };


return ( return (
<Grid container sx={{minHeight: '110vh',backgroundColor:'#ffffff'}} direction="column">
<StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} getStatus={getStatus}/>
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#ffffff' }} direction="column">
<StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} getStatus={getStatus} />
<Grid item xs={12}> <Grid item xs={12}>
<div style={BackgroundHead}> <div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -128,33 +130,40 @@ const DashboardDefault = () => {
</div> </div>
</Grid> </Grid>
<Grid item xs={12} > <Grid item xs={12} >
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
<Typography ml={3} mt={3} variant="h4">我的公共啟事 / {appNo}</Typography>
</Stack>
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
<Typography ml={3} mt={3} variant="h4">我的公共啟事 / {appNo}</Typography>
</Stack>
</Grid> </Grid>

<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container direction="column" justifyContent="flex-start" alignItems="center"> <Grid container direction="column" justifyContent="flex-start" alignItems="center">
<Grid item xs={12} width="75%">
<Button sx={{ mt: 4 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}>
<KeyboardBackspaceOutlinedIcon />
<Typography variant="h4">Back</Typography>
</Button>
</Grid>
{/* <Grid item xs={12} md={12} > */} {/* <Grid item xs={12} md={12} > */}
{/* <Grid container direction="column" alignItems="center"> */}
<Grid item width="75%">
<Box xs={12} mt={6} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<ApplicationDetailCard
setStatus = {setStatus}
applicationDetailData={applicationDetailData}
// isCollectData={isCollectData}
// isNewRecord={isNewRecord}
/>
</Box>
</Grid>
{/* <Grid item xs={12} md={12} width="85%">
{/* <Grid container direction="column" alignItems="center"> */}
<Grid item width="75%">
<Box xs={12} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
<ApplicationDetailCard
setStatus={setStatus}
applicationDetailData={applicationDetailData}
// isCollectData={isCollectData}
// isNewRecord={isNewRecord}
/>
</Box>
</Grid>
{/* <Grid item xs={12} md={12} width="85%">
<Box xs={12} mt={3}> <Box xs={12} mt={3}>
<TabTableDetail applicationDetailData={applicationDetailData}/> <TabTableDetail applicationDetailData={applicationDetailData}/>
</Box> </Box>
</Grid> */} </Grid> */}
{/* </Grid> */}
{/* </Grid> */}
{/* </Grid> */} {/* </Grid> */}
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
); );


+ 27
- 24
src/pages/PublicNotice/Search_GLD/DataGrid.js View File

@@ -1,12 +1,13 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { import {
Button
Button,
Box
} from '@mui/material'; } from '@mui/material';
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import {useNavigate} from "react-router-dom";
import {FiDataGrid} from "components/FiDataGrid";
import { useNavigate } from "react-router-dom";
import { FiDataGrid } from "components/FiDataGrid";
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function SearchPublicNoticeTable({ recordList }) { export default function SearchPublicNoticeTable({ recordList }) {
@@ -18,7 +19,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
}, [recordList]); }, [recordList]);


const handleEditClick = (params) => () => { const handleEditClick = (params) => () => {
navigate('/application/'+ params.id);
navigate('/application/' + params.id);
}; };




@@ -36,7 +37,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
id: 'status', id: 'status',
field: 'status', field: 'status',
headerName: 'Status', headerName: 'Status',
width: 150,
width: 175,
renderCell: (params) => { renderCell: (params) => {
return [StatusUtils.getStatusEng(params)] return [StatusUtils.getStatusEng(params)]
}, },
@@ -56,7 +57,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
headerName: 'Contact Person', headerName: 'Contact Person',
flex: 2, flex: 2,
renderCell: (params) => { renderCell: (params) => {
let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":"";
let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : "";


let phone = JSON.parse(params.row.contactTelNo); let phone = JSON.parse(params.row.contactTelNo);
let faxNo = JSON.parse(params.row.contactFaxNo); let faxNo = JSON.parse(params.row.contactFaxNo);
@@ -84,7 +85,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
headerName: 'Gazette Group', headerName: 'Gazette Group',
flex: 1, flex: 1,
valueGetter: (params) => { valueGetter: (params) => {
return (params?.value)?(params?.value):"";
return (params?.value) ? (params?.value) : "";
} }
}, },
{ {
@@ -94,37 +95,39 @@ export default function SearchPublicNoticeTable({ recordList }) {
flex: 1, flex: 1,
valueGetter: (params) => { valueGetter: (params) => {
return params.row.issueYear return params.row.issueYear
+" Vol. "+zeroPad(params.row.issueVolume,3)
+", No. "+zeroPad(params.row.issueNo,2)
+", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
+ " Vol. " + zeroPad(params.row.issueVolume, 3)
+ ", No. " + zeroPad(params.row.issueNo, 2)
+ ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
} }
}, },
]; ];


function zeroPad(num, places) { function zeroPad(num, places) {
num=num?num:0;
num = num ? num : 0;
var zero = places - num.toString().length + 1; var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num; return Array(+(zero > 0 && zero)).join("0") + num;
} }


function handleRowDoubleClick(params) { function handleRowDoubleClick(params) {
// handleEditClick(params) // handleEditClick(params)
navigate('/application/'+ params.id);
navigate('/application/' + params.id);
} }


return ( return (
<div style={{ height: 400, width: '100%' }}>

<FiDataGrid
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
onRowDoubleClick={handleRowDoubleClick}
/>
<div style={{ height: '100%', width: '100%' }}>
<Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
<FiDataGrid
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
getRowHeight={() => 'auto'}
onRowDoubleClick={handleRowDoubleClick}
/>
</Box>
</div> </div>
); );
} }

+ 217
- 212
src/pages/PublicNotice/Search_GLD/SearchForm.js View File

@@ -3,18 +3,19 @@ import {
Button, Button,
CardContent, CardContent,
Grid, TextField, Grid, TextField,
Autocomplete
Autocomplete,
Typography
} from '@mui/material'; } from '@mui/material';
import MainCard from "components/MainCard"; import MainCard from "components/MainCard";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import * as React from "react";
import * as React from "react";
import * as ComboData from "utils/ComboData"; import * as ComboData from "utils/ComboData";
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issueComboData
}) => {
const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
}) => {


const [type, setType] = React.useState([]); const [type, setType] = React.useState([]);
// const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' }); // const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' });
@@ -28,7 +29,6 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);



const { reset, register, handleSubmit } = useForm() const { reset, register, handleSubmit } = useForm()
const onSubmit = (data) => { const onSubmit = (data) => {
data.status = selectedLabelsString data.status = selectedLabelsString
@@ -71,16 +71,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
reset(); reset();
} }


function getIssueLabel(data){
if(data=={}) return "";
return data.year
+" Vol. "+zeroPad(data.volume,3)
+", No. "+zeroPad(data.issueNo,2)
+", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
function getIssueLabel(data) {
if (data == {}) return "";
return data.year
+ " Vol. " + zeroPad(data.volume, 3)
+ ", No. " + zeroPad(data.issueNo, 2)
+ ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
} }


function zeroPad(num, places) { function zeroPad(num, places) {
num=num?num:0;
num = num ? num : 0;
var zero = places - num.toString().length + 1; var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num; return Array(+(zero > 0 && zero)).join("0") + num;
} }
@@ -88,83 +88,87 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
return ( return (
<MainCard xs={12} md={12} lg={12} <MainCard xs={12} md={12} lg={12}
border={false} border={false}
content={false}>
content={false}
sx={{ backgroundColor: 'backgroundColor.default' }}
>


<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
Search Form
</Grid>
</CardContent>

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("appNo")}
id='appNo'
label="App No."
defaultValue={searchCriteria.appNo}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("dateFrom")}
id="dateFrom"
type="date"
label="Submit Date(From)"
defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: maxDate } }}
onChange={(newValue) => {
setMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("dateTo")}
InputProps={{ inputProps: { min: minDate } }}
onChange={(newValue) => {
setMaxDate(DateUtils.dateStr(newValue));
}}
id="dateTo"
type="date"
label="Submit Date(To)"
defaultValue={searchCriteria.dateTo}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("contact")}
id="contact"
label="Contact Person"
defaultValue={searchCriteria.contact}
InputLabelProps={{
shrink: true
}}
/>

<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3}} width="98%">
{/*row 1*/}
<Grid item xs={12}>
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form</Typography>
</Grid>
</CardContent>
</Grid> </Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
{/* <Autocomplete
{/*row 2*/}
<Grid container display="flex" alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("appNo")}
id='appNo'
label={"App No."}
defaultValue={searchCriteria.appNo}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("dateFrom")}
id="dateFrom"
type="date"
label={"Submit Date(From)"}
defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: maxDate } }}
onChange={(newValue) => {
setMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("dateTo")}
InputProps={{ inputProps: { min: minDate } }}
onChange={(newValue) => {
setMaxDate(DateUtils.dateStr(newValue));
}}
id="dateTo"
type="date"
label={"Submit Date(To)"}
defaultValue={searchCriteria.dateTo}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("contact")}
id="contact"
label={"Contact Person"}
defaultValue={searchCriteria.contact}
InputLabelProps={{
shrink: true
}}
/>

</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
{/* <Autocomplete
{...register("status")} {...register("status")}
disablePortal disablePortal
id="status" id="status"
@@ -186,134 +190,135 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu
shrink: true shrink: true
}} }}
/> */} /> */}
<Autocomplete
multiple
{...register("status")}
id="status"
options={ComboData.publicNoticeStatic_GLD}
value={selectedStatus}
onChange={(event, newValue) => {
const findAllIndex = newValue.findIndex((ele) => {
return ele.type === "all"
})

if (findAllIndex > -1) {
setSelectedStatus([newValue[findAllIndex]]);
setSelectedLabelsString('all')
} else {
const selectedLabels = newValue.map(option => option.type);
const selectedLabelsString = `${selectedLabels.join(',')}`;
setSelectedStatus(newValue);
setSelectedLabelsString(selectedLabelsString);
}
}}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label="Status"
/>
)}
/>
</Grid>

{
orgCombo ?
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("orgId")}
disablePortal
id="orgId"
options={orgCombo}
value={orgSelected}
inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
onChange={(event, newValue) => {
if (newValue !== null) {
setOrgSelected(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Organization"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>
: <></>
}

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("issueId")}
disablePortal
id="issueId"
options={issueCombo}
value={issueSelected}
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
getOptionLabel={(option)=>getIssueLabel(option)}
onChange={(event, newValue) => {
if (newValue !== null) {
setIssueSelected(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Issue"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("groupNo")}
id='groupNo'
label="Gazette Code."
defaultValue={searchCriteria.groupNo}
InputLabelProps={{
shrink: true
}}
/>
</Grid>


</Grid>


{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Clear
</Button>
<Autocomplete
multiple
{...register("status")}
id="status"
options={ComboData.publicNoticeStatic_GLD}
value={selectedStatus}
onChange={(event, newValue) => {
const findAllIndex = newValue.findIndex((ele) => {
return ele.type === "all"
})

if (findAllIndex > -1) {
setSelectedStatus([newValue[findAllIndex]]);
setSelectedLabelsString('all')
} else {
const selectedLabels = newValue.map(option => option.type);
const selectedLabelsString = `${selectedLabels.join(',')}`;
setSelectedStatus(newValue);
setSelectedLabelsString(selectedLabelsString);
}
}}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label="Status"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

{
orgCombo ?
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("orgId")}
disablePortal
id="orgId"
options={orgCombo}
value={orgSelected}
inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
onChange={(event, newValue) => {
if (newValue !== null) {
setOrgSelected(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Organization"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>
: <></>
}

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("issueId")}
disablePortal
id="issueId"
options={issueCombo}
value={issueSelected}
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
getOptionLabel={(option) => getIssueLabel(option)}
onChange={(event, newValue) => {
if (newValue !== null) {
setIssueSelected(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Gazette Issue"
InputLabelProps={{
shrink: true
}}
/>
)}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("groupNo")}
id='groupNo'
label="Gazette Code."
defaultValue={searchCriteria.groupNo}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
</Grid> </Grid>


<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Submit
</Button>
{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Clear</Typography>
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Submit</Typography>
</Button>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</form> </form>


+ 23
- 23
src/pages/PublicNotice/Search_GLD/index.js View File

@@ -20,7 +20,7 @@ const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundSize:'contain',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E', backgroundColor: '#0C489E',
backgroundPosition: 'right' backgroundPosition: 'right'
@@ -30,12 +30,12 @@ const BackgroundHead = {


const UserSearchPage_Individual = () => { const UserSearchPage_Individual = () => {


const [record,setRecord] = React.useState([]);
const [orgCombo,setOrgCombo] = React.useState([]);
const [issueCombo,setIssueCombo] = React.useState([]);
const [record, setRecord] = React.useState([]);
const [orgCombo, setOrgCombo] = React.useState([]);
const [issueCombo, setIssueCombo] = React.useState([]);
const [searchCriteria, setSearchCriteria] = React.useState({ const [searchCriteria, setSearchCriteria] = React.useState({
dateTo: DateUtils.dateStr(new Date()), dateTo: DateUtils.dateStr(new Date()),
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
}); });
const [onReady, setOnReady] = React.useState(false); const [onReady, setOnReady] = React.useState(false);


@@ -53,36 +53,36 @@ const UserSearchPage_Individual = () => {
getUserList(); getUserList();
}, [searchCriteria]); }, [searchCriteria]);


function getUserList(){
function getUserList() {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_PUBLIC_NOTICE_LIST, url: UrlUtils.GET_PUBLIC_NOTICE_LIST,
params: searchCriteria, params: searchCriteria,
onSuccess: function(responseData){
onSuccess: function (responseData) {
setRecord(responseData); setRecord(responseData);
} }
}); });
} }


function getOrgCombo(){
function getOrgCombo() {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_ORG_COMBO, url: UrlUtils.GET_ORG_COMBO,
onSuccess: function(responseData){
onSuccess: function (responseData) {
let combo = responseData; let combo = responseData;
setOrgCombo(combo); setOrgCombo(combo);
} }
}); });
} }


function getIssueCombo(){
function getIssueCombo() {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_ISSUE_COMBO, url: UrlUtils.GET_ISSUE_COMBO,
onSuccess: function(responseData){
onSuccess: function (responseData) {
let combo = responseData; let combo = responseData;
setIssueCombo(combo); setIssueCombo(combo);
} }
}); });
} }


function applySearch(input) { function applySearch(input) {
setSearchCriteria(input); setSearchCriteria(input);
@@ -90,9 +90,9 @@ const UserSearchPage_Individual = () => {


return ( return (
!onReady ? !onReady ?
<LoadingComponent/>
<LoadingComponent />
: :
<Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
<Grid container sx={{ minHeight: '85vh', backgroundColor: 'backgroundColor.default' }} direction="column">
<Grid item xs={12}> <Grid item xs={12}>
<div style={BackgroundHead}> <div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -102,18 +102,19 @@ const UserSearchPage_Individual = () => {
</Grid> </Grid>
{/*row 1*/} {/*row 1*/}
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<SearchForm
applySearch={applySearch}
orgComboData={orgCombo}
issueComboData={issueCombo}
searchCriteria={searchCriteria}
<SearchForm
applySearch={applySearch}
orgComboData={orgCombo}
issueComboData={issueCombo}
searchCriteria={searchCriteria}
/> />
</Grid> </Grid>
{/*row 2*/} {/*row 2*/}
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0} <MainCard elevation={0}
border={false}
content={false}
border={false}
content={false}
sx={{ backgroundColor: 'backgroundColor.default' }}
> >
<EventTable <EventTable
recordList={record} recordList={record}
@@ -122,6 +123,5 @@ const UserSearchPage_Individual = () => {
</Grid> </Grid>
</Grid> </Grid>
); );
};

}
export default UserSearchPage_Individual; export default UserSearchPage_Individual;

+ 1
- 1
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -816,7 +816,7 @@ const CustomFormWizard = (props) => {


<Grid container> <Grid container>
<Grid item xs={12} md={6} > <Grid item xs={12} md={6} >
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: { xs: 0.5 } }}>
<Stack spacing={1} sx={{ mr: { md: 1 } }}>
<Autocomplete <Autocomplete
disablePortal disablePortal
id="idDocType" id="idDocType"


+ 1
- 0
src/themes/overrides/Chip.js View File

@@ -5,6 +5,7 @@ export default function Chip(theme) {
MuiChip: { MuiChip: {
styleOverrides: { styleOverrides: {
root: { root: {
fontSize: "1.2rem",
borderRadius: 4, borderRadius: 4,
'&:active': { '&:active': {
boxShadow: 'none' boxShadow: 'none'


+ 37
- 0
src/themes/overrides/DataGrid.js View File

@@ -0,0 +1,37 @@
// ==============================|| OVERRIDES - DATAGRID ||============================== //

export default function DataGrid() {
const cellFontSize = "1.1rem"
const cellFooterFontSize = "1.1rem"
const cellHeaderFontSize = "1.1rem"

const cellFontWeight = 600
const cellFooterFontWeight = 600
const cellHeaderFontWeight = 600

return {
MuiDataGrid: {
styleOverrides: {
root: {
// fontSize: "3rem"
'& .MuiDataGrid-cell': {
fontSize: cellFontSize,
fontWeight: cellFontWeight
},
'& .MuiDataGrid-footerContainer': {
fontSize: cellFooterFontSize,
fontWeight: cellFooterFontWeight
},
'& .MuiDataGrid-columnHeader': {
fontSize: cellHeaderFontSize,
fontWeight: cellHeaderFontWeight,
},
button: {
fontSize: cellFontSize,
fontWeight: cellFontWeight
}
},
}
}
};
}

+ 3
- 0
src/themes/overrides/OutlinedInput.js View File

@@ -14,6 +14,9 @@ export default function OutlinedInput(theme) {
borderColor: theme.palette.grey[300] borderColor: theme.palette.grey[300]
}, },
root: { root: {
fontSize: '1.2rem',
fontWeight: 600,
lineHeight: 1.57,
'&:hover .MuiOutlinedInput-notchedOutline': { '&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: theme.palette.primary.light borderColor: theme.palette.primary.light
}, },


+ 3
- 1
src/themes/overrides/Tab.js View File

@@ -6,7 +6,9 @@ export default function Tab(theme) {
styleOverrides: { styleOverrides: {
root: { root: {
minHeight: 46, minHeight: 46,
color: theme.palette.text.primary
color: theme.palette.text.primary,
fontSize: "1.2rem",
fontWeight: 600
} }
} }
} }


+ 27
- 0
src/themes/overrides/Textfield.js View File

@@ -0,0 +1,27 @@
// ==============================|| OVERRIDES - TEXTFIELD ||============================== //

export default function Textfield() {

const labelFontSize = "1.1rem"
const labelFontWeight = 600
const inputFontSize = "1.2rem"
const inputFontWeight = 600
return {
MuiTextField: {
styleOverrides: {
root: {
"& label": {
fontSize: labelFontSize,
fontWeight: labelFontWeight,
},
"& input": {
fontSize: inputFontSize,
fontWeight: inputFontWeight,
padding: "16px",
alignItems: "center"
}
},
}
}
};
}

+ 4
- 0
src/themes/overrides/index.js View File

@@ -17,6 +17,8 @@ import Tab from './Tab';
import TableCell from './TableCell'; import TableCell from './TableCell';
import Tabs from './Tabs'; import Tabs from './Tabs';
import Typography from './Typography'; import Typography from './Typography';
import Textfield from './Textfield';
import DataGrid from './DataGrid';


// ==============================|| OVERRIDES - MAIN ||============================== // // ==============================|| OVERRIDES - MAIN ||============================== //


@@ -27,6 +29,7 @@ export default function ComponentsOverrides(theme) {
CardContent(), CardContent(),
Checkbox(theme), Checkbox(theme),
Chip(theme), Chip(theme),
DataGrid(),
IconButton(theme), IconButton(theme),
InputLabel(theme), InputLabel(theme),
LinearProgress(), LinearProgress(),
@@ -36,6 +39,7 @@ export default function ComponentsOverrides(theme) {
Tab(theme), Tab(theme),
TableCell(theme), TableCell(theme),
Tabs(), Tabs(),
Textfield(),
Typography() Typography()
); );
} }

+ 4
- 4
src/themes/typography.js View File

@@ -62,7 +62,7 @@ const Typography = (fontFamily) => ({
lineHeight: 1.57 lineHeight: 1.57
}, },
subtitle2: { subtitle2: {
fontSize: '0.8rem',
fontSize: '0.9rem',
fontWeight: 500, fontWeight: 500,
lineHeight: 1.66 lineHeight: 1.66
}, },
@@ -84,9 +84,9 @@ const Typography = (fontFamily) => ({
overline: { overline: {
lineHeight: 1.66 lineHeight: 1.66
}, },
button: {
textTransform: 'capitalize'
}
button: {
textTransform: 'capitalize',
},
}); });


export default Typography; export default Typography;

+ 2
- 1
src/utils/statusUtils/Base.js View File

@@ -1,6 +1,7 @@
import { Typography } from "@mui/material"


export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
return ( return (
<div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>
<div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px", margin: "6px 4px 6px 4px" }}><Typography variant="h6">{text}</Typography></div>
) )
} }

Write Preview
Loading…
Cancel
Save