@@ -146,6 +146,9 @@ function Header(props) { | |||
<li> | |||
<Link className="systemSetting" to='/setting/sys'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>System Setting</Typography></Link> | |||
</li> | |||
<li> | |||
<Link className="announcement" to='/setting/announcement'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Announcement</Typography></Link> | |||
</li> | |||
</ul> | |||
</li> | |||
<Box sx={{display: {xs: 'none', sm: 'none', md: 'block'}}}> | |||
@@ -0,0 +1,336 @@ | |||
// material-ui | |||
import { | |||
Grid, | |||
Typography, | |||
Button, | |||
TextField, | |||
Stack, Box | |||
} from '@mui/material'; | |||
import { useFormik } from 'formik'; | |||
import * as yup from 'yup'; | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as UrlUtils from "utils/ApiPathConst"; | |||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
import ForwardIcon from '@mui/icons-material/Forward'; | |||
import Divider from '@mui/material/Divider'; | |||
import {useParams} from "react-router-dom"; | |||
import { useNavigate } from "react-router-dom"; | |||
import { notifyActionSuccess } from 'utils/CommonFunction'; | |||
import { useIntl } from "react-intl"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const AnnouncementForm = ({ loadedData }) => { | |||
const intl = useIntl(); | |||
const params = useParams(); | |||
const navigate = useNavigate(); | |||
const BackgroundHead = { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
width: 'auto', | |||
height: 'auto', | |||
backgroundSize: 'contain', | |||
backgroundRepeat: 'no-repeat', | |||
backgroundColor: '#0C489E', | |||
backgroundPosition: 'right' | |||
} | |||
const formik = useFormik({ | |||
enableReinitialize: true, | |||
initialValues: loadedData, | |||
validationSchema: yup.object().shape({ | |||
subjectEng: yup.string().max(255).required(), | |||
subjectCht: yup.string().max(255).required(), | |||
subjectChs: yup.string().max(255).required(), | |||
contentEng: yup.string().required(), | |||
contentCht: yup.string().required(), | |||
contentChs: yup.string().required(), | |||
}), | |||
onSubmit: values => { | |||
doSave(values); | |||
} | |||
}); | |||
const doSave = (values) => { | |||
HttpUtils.post({ | |||
url: UrlUtils.POST_ANNOUNCE_SAVE, | |||
params: { | |||
id: params?.id??0, | |||
announceDate: values.announceDate, | |||
subjectEng: values.subjectEng, | |||
subjectCht: values.subjectCht, | |||
subjectChs: values.subjectChs, | |||
contentEng: values.contentEng, | |||
contentCht: values.contentCht, | |||
contentChs: values.contentChs, | |||
}, | |||
onSuccess: function () { | |||
notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!') | |||
navigate("/setting/announcement"); | |||
} | |||
}); | |||
} | |||
return ( | |||
<Grid container sx={{ minHeight: '95vh', backgroundColor: '#ffffff', mb: 3 }} direction="column" alignItems="center"> | |||
<Grid item xs={12} md={12} width="100%" > | |||
<div style={BackgroundHead}> | |||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
<Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}> | |||
Announcement | |||
</Typography> | |||
</Stack> | |||
</div> | |||
</Grid> | |||
<Grid item xs={12} width={{ xs: "90%", sm: "90%", md: "60%", lg: "60%" }}> | |||
<Button | |||
aria-label={intl.formatMessage({ id: 'back' })} | |||
title={intl.formatMessage({ id: 'back' })} | |||
sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }} | |||
> | |||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||
</Button> | |||
</Grid> | |||
<Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}> | |||
<Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}> | |||
<form onSubmit={formik.handleSubmit}> | |||
<Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center"> | |||
<Grid item xs={12} md={12}> | |||
<Button | |||
size="large" | |||
variant="contained" | |||
color="success" | |||
type="submit" | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}}> | |||
<Typography variant="h5">Save</Typography> | |||
</Button> | |||
</Grid> | |||
<Grid item xs={12} md={12}> | |||
<Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}> | |||
<Grid item xs={12} sm={12} md={2} lg={2} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Typography variant="h5">Announce Date:</Typography> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={9}> | |||
<TextField | |||
fullWidth | |||
size="small" | |||
type="datetime-local" | |||
onChange={formik.handleChange} | |||
name="announceDate" | |||
value={formik.values["announceDate"]} | |||
variant="outlined" | |||
sx={ | |||
{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
width: '40%' | |||
} | |||
} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid> | |||
<Grid item xs={12} md={12}><Typography variant="h5">English</Typography></Grid> | |||
<Grid item xs={12} md={12} > | |||
<Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}> | |||
<Grid item xs={12} sm={12} md={2} lg={2} | |||
sx={{ display: 'flex', alignItems: 'center', pl: 4 }}> | |||
<Typography variant="h5">Subject:</Typography> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={9}> | |||
<TextField | |||
fullWidth | |||
size="small" | |||
type="text" | |||
onChange={formik.handleChange} | |||
name="subjectEng" | |||
value={formik.values["subjectEng"]} | |||
variant="outlined" | |||
error={Boolean(formik.errors["subjectEng"])} | |||
helperText={formik.errors["subjectEng"] ? formik.errors["subjectEng"] : ''} | |||
sx={ | |||
{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
} | |||
} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12}> | |||
<Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}> | |||
<Grid item xs={12} sm={12} md={2} lg={2} | |||
sx={{ display: 'flex', alignItems: 'center', pl: 4 }}> | |||
<Typography variant="h5">Content:</Typography> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={9}> | |||
<TextField | |||
multiline | |||
fullWidth | |||
rows={6} | |||
onChange={formik.handleChange} | |||
name="contentEng" | |||
value={formik.values["contentEng"]} | |||
error={Boolean(formik.errors["contentEng"])} | |||
helperText={formik.errors["contentEng"] ? formik.errors["contentEng"] : ''} | |||
variant="outlined" | |||
InputProps={ | |||
{ | |||
style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' }, | |||
} | |||
} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid> | |||
<Grid item xs={12} md={12}><Typography variant="h5">Traditional Chinese</Typography></Grid> | |||
<Grid item xs={12} md={12}> | |||
<Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}> | |||
<Grid item xs={12} sm={12} md={2} lg={2} | |||
sx={{ display: 'flex', alignItems: 'center', pl: 4 }}> | |||
<Typography variant="h5">Subject:</Typography> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={9}> | |||
<TextField | |||
fullWidth | |||
size="small" | |||
type="text" | |||
onChange={formik.handleChange} | |||
name="subjectCht" | |||
value={formik.values["subjectCht"]} | |||
error={Boolean(formik.errors["subjectCht"])} | |||
helperText={formik.errors["subjectCht"] ? formik.errors["subjectCht"] : ''} | |||
variant="outlined" | |||
sx={ | |||
{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
} | |||
} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12}> | |||
<Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}> | |||
<Grid item xs={12} sm={12} md={2} lg={2} | |||
sx={{ display: 'flex', alignItems: 'center', pl: 4 }}> | |||
<Typography variant="h5">Content:</Typography> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={9}> | |||
<TextField | |||
multiline | |||
fullWidth | |||
rows={6} | |||
onChange={formik.handleChange} | |||
name="contentCht" | |||
value={formik.values["contentCht"]} | |||
error={Boolean(formik.errors["contentCht"])} | |||
helperText={formik.errors["contentCht"] ? formik.errors["contentCht"] : ''} | |||
variant="outlined" | |||
InputProps={ | |||
{ | |||
style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' }, | |||
} | |||
} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid> | |||
<Grid item xs={12} md={12}><Typography variant="h5">Simplified Chinese</Typography></Grid> | |||
<Grid item xs={12} md={12}> | |||
<Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}> | |||
<Grid item xs={12} sm={12} md={2} lg={2} | |||
sx={{ display: 'flex', alignItems: 'center', pl: 4 }}> | |||
<Typography variant="h5">Subject:</Typography> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={9}> | |||
<TextField | |||
fullWidth | |||
size="small" | |||
type="text" | |||
onChange={formik.handleChange} | |||
name="subjectChs" | |||
value={formik.values["subjectChs"]} | |||
error={Boolean(formik.errors["subjectChs"])} | |||
helperText={formik.errors["subjectChs"] ? formik.errors["subjectChs"] : ''} | |||
variant="outlined" | |||
sx={ | |||
{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
} | |||
} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12}> | |||
<Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}> | |||
<Grid item xs={12} sm={12} md={2} lg={2} | |||
sx={{ display: 'flex', alignItems: 'center', pl: 4 }}> | |||
<Typography variant="h5">Content:</Typography> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={9}> | |||
<TextField | |||
multiline | |||
fullWidth | |||
rows={6} | |||
onChange={formik.handleChange} | |||
name="contentChs" | |||
value={formik.values["contentChs"]} | |||
error={Boolean(formik.errors["contentChs"])} | |||
helperText={formik.errors["contentChs"] ? formik.errors["contentChs"] : ''} | |||
variant="outlined" | |||
InputProps={ | |||
{ | |||
style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' }, | |||
} | |||
} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</form> | |||
</Box> | |||
</Grid> | |||
</Grid> | |||
); | |||
}; | |||
export default AnnouncementForm; |
@@ -0,0 +1,64 @@ | |||
// material-ui | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as UrlUtils from "utils/ApiPathConst"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import { | |||
Grid, | |||
} from '@mui/material'; | |||
import { useParams } from 'react-router-dom'; | |||
import Loadable from 'components/Loadable'; | |||
import { lazy } from 'react'; | |||
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | |||
const AnnouncementForm = Loadable(lazy(() => import('./AnnouncementForm'))); | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const CreateForm = () => { | |||
const params = useParams(); | |||
const [formData, setFormData] = React.useState({}); | |||
const [isLoading, setLoding] = React.useState(true); | |||
React.useEffect(() => { | |||
loadData(); | |||
}, []); | |||
const loadData = () => { | |||
setLoding(true); | |||
if (params.id > 0) { | |||
HttpUtils.get({ | |||
url: `${UrlUtils.GET_ANNOUNCE}`+"/"+params.id, | |||
onSuccess: function (responseData) { | |||
responseData["announceDate"] = DateUtils.datetimeFieldFormat(responseData.announceDate); | |||
setFormData(responseData); | |||
} | |||
}); | |||
}else{ | |||
setFormData({"announceDate": DateUtils.datetimeFieldFormat(new Date())}); | |||
} | |||
}; | |||
React.useEffect(() => { | |||
if (formData !== null && formData != {}) setLoding(false); | |||
}, [formData]); | |||
return ( | |||
isLoading ? | |||
<Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center"> | |||
<Grid item> | |||
<LoadingComponent /> | |||
</Grid> | |||
</Grid> | |||
: | |||
<AnnouncementForm | |||
loadedData={formData} | |||
/> | |||
); | |||
}; | |||
export default CreateForm; |
@@ -0,0 +1,83 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
Button, | |||
Box | |||
} from '@mui/material'; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import { useNavigate } from "react-router-dom"; | |||
import { FiDataGrid } from "components/FiDataGrid"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SearchPublicNoticeTable({ recordList }) { | |||
const [rows, setRows] = React.useState(recordList); | |||
const navigate = useNavigate() | |||
React.useEffect(() => { | |||
setRows(recordList); | |||
}, [recordList]); | |||
const handleEditClick = (params) => () => { | |||
navigate('/setting/announcement/details/' + params.id); | |||
}; | |||
const columns = [ | |||
{ | |||
field: 'announceDate', | |||
headerName: 'Announce Date', | |||
width: 250, | |||
cellClassName: 'announceDate', | |||
renderCell: (params) => { | |||
return <Button onClick={handleEditClick(params)}><u>{DateUtils.datetimeStr(params?.value)}</u></Button>; | |||
}, | |||
}, | |||
{ | |||
id: 'subjec', | |||
field: 'subjec', | |||
headerName: 'Subjec', | |||
minWidth: 400, | |||
renderCell: (params) => { | |||
return <> | |||
<Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}> | |||
<Box component="div" sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.subjectEng}</Box> | |||
<Box component="div" sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.subjectCht}</Box> | |||
<Box component="div" sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.subjectChs}</Box> | |||
</Box> | |||
</> | |||
}, | |||
}, | |||
{ | |||
id: 'content', | |||
field: 'content', | |||
headerName: 'Content', | |||
flex:1, | |||
minWidth: 400, | |||
renderCell: (params) => { | |||
return <> | |||
<Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}> | |||
<Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.contentEng}</Box> | |||
<Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.contentCht}</Box> | |||
<Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.contentChs}</Box> | |||
</Box > | |||
</> | |||
} | |||
}, | |||
]; | |||
function handleRowDoubleClick(params) { | |||
navigate('/setting/announcement/details/' + params.id); | |||
} | |||
return ( | |||
<div style={{ width: '100%' }}> | |||
<FiDataGrid | |||
rows={rows} | |||
columns={columns} | |||
customPageSize={10} | |||
getRowHeight={() => 'auto'} | |||
onRowDoubleClick={handleRowDoubleClick} | |||
/> | |||
</div> | |||
); | |||
} |
@@ -0,0 +1,155 @@ | |||
// material-ui | |||
import { | |||
Button, | |||
Grid, TextField, | |||
Typography | |||
} from '@mui/material'; | |||
import MainCard from "components/MainCard"; | |||
import { useForm } from "react-hook-form"; | |||
import * as React from "react"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import {ThemeProvider} from "@emotion/react"; | |||
import { useNavigate } from "react-router-dom"; | |||
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => { | |||
const navigate = useNavigate() | |||
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | |||
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | |||
const marginBottom = 2.5; | |||
const { reset, register, handleSubmit } = useForm() | |||
const onSubmit = (data) => { | |||
const temp = { | |||
key: data.key, | |||
dateFrom: data.dateFrom, | |||
dateTo: data.dateTo, | |||
}; | |||
applySearch(temp); | |||
}; | |||
function resetForm() { | |||
reset(); | |||
} | |||
return ( | |||
<MainCard xs={12} md={12} lg={12} | |||
border={false} | |||
content={false} | |||
sx={{ backgroundColor: '#fff' }} | |||
> | |||
<form onSubmit={handleSubmit(onSubmit)}> | |||
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom}} width="98%"> | |||
{/*row 1*/} | |||
<Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}> | |||
<Typography variant="pnspsFormHeader" > | |||
Search | |||
</Typography> | |||
</Grid> | |||
{/*row 2*/} | |||
<Grid container display="flex" alignItems={"center"}> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||
<TextField | |||
fullWidth | |||
{...register("key")} | |||
id='key' | |||
label={"Key"} | |||
defaultValue={searchCriteria.key} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}> | |||
<Grid container> | |||
<Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}> | |||
<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={1.5} s={1.5} md={1.5} lg={1} sx={{mt:0.8, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}> | |||
To | |||
</Grid> | |||
<Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}> | |||
<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> | |||
</Grid> | |||
</Grid> | |||
{/*last row*/} | |||
<Grid container maxWidth justifyContent="flex-end"> | |||
<ThemeProvider theme={PNSPS_BUTTON_THEME}> | |||
<Grid item sx={{ ml: 3 }}> | |||
<Button | |||
variant="contained" | |||
color="green" | |||
onClick={()=>{ | |||
navigate('/setting/announcement/details/' + 0); | |||
}} | |||
> | |||
Create | |||
</Button> | |||
</Grid> | |||
<Grid item sx={{ ml: 3 }}> | |||
<Button | |||
variant="contained" | |||
onClick={resetForm} | |||
> | |||
Clear | |||
</Button> | |||
</Grid> | |||
<Grid item sx={{ ml: 3 }}> | |||
<Button | |||
variant="contained" | |||
type="submit" | |||
> | |||
Submit | |||
</Button> | |||
</Grid> | |||
</ThemeProvider> | |||
</Grid> | |||
</Grid> | |||
</form> | |||
</MainCard> | |||
); | |||
}; | |||
export default SearchPublicNoticeForm; |
@@ -0,0 +1,104 @@ | |||
// material-ui | |||
import { | |||
Grid, | |||
Typography, | |||
Stack | |||
} from '@mui/material'; | |||
import MainCard from "components/MainCard"; | |||
import * as UrlUtils from "utils/ApiPathConst"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import Loadable from 'components/Loadable'; | |||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | |||
const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); | |||
const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | |||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
const BackgroundHead = { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
width: '100%', | |||
height: '100%', | |||
backgroundSize: 'contain', | |||
backgroundRepeat: 'no-repeat', | |||
backgroundColor: '#0C489E', | |||
backgroundPosition: 'right' | |||
} | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const UserSearchPage_Individual = () => { | |||
const [record, setRecord] = React.useState([]); | |||
const [searchCriteria, setSearchCriteria] = React.useState({ | |||
dateTo: DateUtils.dateStr(new Date()), | |||
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 90)), | |||
}); | |||
const [onReady, setOnReady] = React.useState(false); | |||
React.useEffect(() => { | |||
getDataList(); | |||
}, []); | |||
React.useEffect(() => { | |||
setOnReady(true); | |||
}, [record]); | |||
React.useEffect(() => { | |||
getDataList(); | |||
}, [searchCriteria]); | |||
function getDataList() { | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_ANNOUNCE_LIST, | |||
params: searchCriteria, | |||
onSuccess: function (responseData) { | |||
setRecord(responseData); | |||
} | |||
}); | |||
} | |||
function applySearch(input) { | |||
setSearchCriteria(input); | |||
} | |||
return ( | |||
!onReady ? | |||
<Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center"> | |||
<Grid item> | |||
<LoadingComponent /> | |||
</Grid> | |||
</Grid> | |||
: | |||
<Grid container sx={{ minHeight: '95vh',backgroundColor: 'backgroundColor.default' }} direction="column"> | |||
<Grid item xs={12}> | |||
<div style={BackgroundHead}> | |||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
<Typography ml={15} color='#FFF' variant="h4">Announcement</Typography> | |||
</Stack> | |||
</div> | |||
</Grid> | |||
{/*row 1*/} | |||
<Grid item xs={12} md={12} lg={12} sx={{mb: -1}}> | |||
<SearchForm | |||
applySearch={applySearch} | |||
searchCriteria={searchCriteria} | |||
/> | |||
</Grid> | |||
{/*row 2*/} | |||
<Grid item xs={12} md={12} lg={12}> | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
sx={{ backgroundColor: '#fff' }} | |||
> | |||
<EventTable | |||
recordList={record} | |||
/> | |||
</MainCard> | |||
</Grid> | |||
</Grid> | |||
); | |||
} | |||
export default UserSearchPage_Individual; |
@@ -26,7 +26,7 @@ const SearchDemandNoteForm = () => { | |||
const loadData = () => { | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_MSG_DESHBOARD, | |||
url: UrlUtils.GET_MSG_DASHBOARD, | |||
onSuccess: function (response) { | |||
let list = [] | |||
response.map((item) => { | |||
@@ -1,29 +1,66 @@ | |||
// material-ui | |||
import { | |||
Stack, | |||
Typography, | |||
Stack | |||
} from '@mui/material'; | |||
import MainCard from "components/MainCard"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as UrlUtils from "utils/ApiPathConst"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import { useIntl} from "react-intl"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const SearchDemandNoteForm = () => { | |||
const [itemList, setItemList] = React.useState([]); | |||
const [listData, setListData] = React.useState([]); | |||
const intl = useIntl(); | |||
const { locale } = intl; | |||
React.useEffect(() => { | |||
loadData(); | |||
}, []); | |||
React.useEffect(() => { | |||
let list = [] | |||
if(listData == []) return; | |||
listData.map((item) => { | |||
list.push( | |||
<Stack direction="column" > | |||
<Typography variant='h4' align="justify"><b>{locale === 'en' ?item.subjectEng:locale === 'zh-HK' ?item.subjectCht:item.subjectChs}</b></Typography> | |||
<Typography align="justify">{DateUtils.datetimeStr(item.announceDate)}</Typography> | |||
<Typography align="justify">{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography> | |||
</Stack> | |||
) | |||
}); | |||
setItemList(list); | |||
}, [listData,intl]); | |||
const loadData = () => { | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_ANNOUNCE_DASHBOARD, | |||
onSuccess: function (response) { | |||
setListData(response); | |||
} | |||
}); | |||
}; | |||
return ( | |||
<MainCard xs={12} md={12} lg={12} | |||
border={false} | |||
content={false} | |||
spacing={2} | |||
sx={{ backgroundColor: '#fff' }} | |||
> | |||
<Stack direction="column" spacing={3}> | |||
<Stack direction="row" spacing={3}> | |||
<Typography></Typography> | |||
<Typography align="justify"></Typography> | |||
<Stack direction="column" spacing={1}> | |||
{itemList} | |||
</Stack> | |||
</Stack> | |||
</MainCard> | |||
); | |||
}; | |||
@@ -20,6 +20,8 @@ const DemandNote_Details = Loadable(lazy(() => import('pages/DemandNote/Details' | |||
const GFMIS_Search = Loadable(lazy(() => import('pages/GFMIS'))); | |||
const UserMaintainPage = Loadable(lazy(() => import('pages/User/GLDUserProfile'))); | |||
const SystemSetting = Loadable(lazy(() => import('pages/Setting/SystemSetting'))); | |||
const AnnouncementDetails = Loadable(lazy(() => import('pages/Announcement/Details'))); | |||
const AnnouncementSearch = Loadable(lazy(() => import('pages/Announcement/Search'))); | |||
// ==============================|| MAIN ROUTING ||============================== // | |||
@@ -90,6 +92,14 @@ const GLDUserRoutes = { | |||
path: '/setting/sys', | |||
element: <SystemSetting /> | |||
}, | |||
{ | |||
path: '/setting/announcement', | |||
element: <AnnouncementSearch /> | |||
}, | |||
{ | |||
path: '/setting/announcement/details/:id', | |||
element: <AnnouncementDetails /> | |||
}, | |||
] | |||
}, | |||
] | |||
@@ -47,6 +47,10 @@ export const PNSPS_BUTTON_THEME = createTheme({ | |||
main: '#448DF2', | |||
contrastText: '#FFFFFF', | |||
}, | |||
green:{ | |||
main: '#4ac234', | |||
contrastText: '#FFFFFF', | |||
}, | |||
orange: { | |||
main: '#ed9740', | |||
light: '#ff5e5e', | |||
@@ -49,7 +49,12 @@ export const GET_PUB_ORG_MARK_AS_NON_CREDITOR = apiPath+'/org/pub/mark-as-non-cr | |||
export const GET_MSG_DETAILS = apiPath+'/msg/details'; | |||
export const GET_MSG_LIST = apiPath+'/msg/list'; | |||
export const GET_MSG_DESHBOARD = apiPath+'/msg/list/deshboard'; | |||
export const GET_MSG_DASHBOARD = apiPath+'/msg/list/deshboard'; | |||
export const POST_ANNOUNCE_SAVE = apiPath+'/announcement/save'; | |||
export const GET_ANNOUNCE = apiPath+'/announcement'; | |||
export const GET_ANNOUNCE_LIST = apiPath+'/announcement/list'; | |||
export const GET_ANNOUNCE_DASHBOARD = apiPath+'/announcement/dashboard'; | |||
export const CHECK_OVERDUE = apiPath+'/application/check-overdue'; | |||