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

Merge branch 'Timebox-9' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI into Timebox-9 

# Conflicts:
#	src/layout/MainLayout/Header/index.js
master
Alex Cheung 1 year ago
parent
0abe8703cb 6391f4cc98
commit
51ced0ca1b
19 changed files with 1166 additions and 23 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      src/layout/MainLayout/Header/index.js
  2. +336
    -0
      src/pages/Announcement/Details/AnnouncementForm.js
  3. +64
    -0
      src/pages/Announcement/Details/index.js
  4. +83
    -0
      src/pages/Announcement/Search/DataGrid.js
  5. +155
    -0
      src/pages/Announcement/Search/SearchForm.js
  6. +104
    -0
      src/pages/Announcement/Search/index.js
  7. +62
    -0
      src/pages/Announcement/Search_Public/DataGrid.js
  8. +158
    -0
      src/pages/Announcement/Search_Public/SearchForm.js
  9. +104
    -0
      src/pages/Announcement/Search_Public/index.js
  10. +1
    -1
      src/pages/dashboard/Public/Message.js
  11. +46
    -8
      src/pages/dashboard/Public/Notice.js
  12. +15
    -13
      src/pages/dashboard/Public/index.js
  13. +10
    -0
      src/routes/GLDUserRoutes.js
  14. +6
    -0
      src/routes/PublicUserRoutes.js
  15. +4
    -0
      src/themes/buttonConst.js
  16. +3
    -0
      src/translations/en.json
  17. +3
    -0
      src/translations/zh-CN.json
  18. +3
    -0
      src/translations/zh-HK.json
  19. +6
    -1
      src/utils/ApiPathConst.js

+ 3
- 0
src/layout/MainLayout/Header/index.js View File

@@ -149,6 +149,9 @@ function Header(props) {
<li> <li>
<Link className="holidaySetting" to='/holiday'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Holiday Setting</Typography></Link> <Link className="holidaySetting" to='/holiday'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Holiday Setting</Typography></Link>
</li> </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> </ul>
</li> </li>
<Box sx={{display: {xs: 'none', sm: 'none', md: 'block'}}}> <Box sx={{display: {xs: 'none', sm: 'none', md: 'block'}}}>


+ 336
- 0
src/pages/Announcement/Details/AnnouncementForm.js View File

@@ -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;

+ 64
- 0
src/pages/Announcement/Details/index.js View File

@@ -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;

+ 83
- 0
src/pages/Announcement/Search/DataGrid.js View File

@@ -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>
);
}

+ 155
- 0
src/pages/Announcement/Search/SearchForm.js View File

@@ -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;

+ 104
- 0
src/pages/Announcement/Search/index.js View File

@@ -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;

+ 62
- 0
src/pages/Announcement/Search_Public/DataGrid.js View File

@@ -0,0 +1,62 @@
// material-ui
import * as React from 'react';
import * as DateUtils from "utils/DateUtils";
import { FiDataGrid } from "components/FiDataGrid";
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| EVENT TABLE ||============================== //

export default function SearchPublicNoticeTable({ recordList }) {
const [rows, setRows] = React.useState(recordList);
const intl = useIntl();
const { locale } = intl;

React.useEffect(() => {
setRows(recordList);
}, [recordList]);

const columns = [
{
field: 'announceDate',
headerName: <FormattedMessage id="date"></FormattedMessage>,
width: 250,
cellClassName: 'announceDate',
renderCell: (params) => {
return DateUtils.datetimeStr(params?.value);
},
},
{
id: 'subject',
field: 'subject',
headerName: <FormattedMessage id="subject"></FormattedMessage>,
minWidth: 400,
renderCell: (params) => {
return <>
{locale === 'en' ?params.row.subjectEng:locale === 'zh-HK' ?params.row.subjectCht:params.row.subjectChs}
</>
},
},
{
id: 'content',
field: 'content',
headerName: <FormattedMessage id="content"></FormattedMessage>,
flex:1,
minWidth: 400,
renderCell: (params) => {
return <>
{locale === 'en' ?params.row.contentEng:locale === 'zh-HK' ?params.row.contentCht:params.row.contentChs}
</>
}
},
];

return (
<div style={{ width: '100%' }}>
<FiDataGrid
rows={rows}
columns={columns}
customPageSize={10}
getRowHeight={() => 'auto'}
/>
</div>
);
}

+ 158
- 0
src/pages/Announcement/Search_Public/SearchForm.js View File

@@ -0,0 +1,158 @@
// 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";
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
const navigate = useNavigate()

const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);

const intl = useIntl();

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" >
<FormattedMessage id="search"></FormattedMessage>
</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={intl.formatMessage({ id: 'keyword' }) + ":"}
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={intl.formatMessage({ id: 'dateFrom' }) + ":"}
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' }}>
<FormattedMessage id="to"></FormattedMessage>
</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);
}}
>
<FormattedMessage id="create"></FormattedMessage>
</Button>
</Grid>
<Grid item sx={{ ml: 3 }}>
<Button
variant="contained"
onClick={resetForm}
>
<FormattedMessage id="reset"></FormattedMessage>
</Button>
</Grid>

<Grid item sx={{ ml: 3 }}>
<Button
variant="contained"
type="submit"
>
<FormattedMessage id="submit"></FormattedMessage>
</Button>
</Grid>
</ThemeProvider>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default SearchPublicNoticeForm;

+ 104
- 0
src/pages/Announcement/Search_Public/index.js View File

@@ -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'
import { FormattedMessage } from "react-intl";

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"><FormattedMessage id="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;

+ 1
- 1
src/pages/dashboard/Public/Message.js View File

@@ -26,7 +26,7 @@ const SearchDemandNoteForm = () => {
const loadData = () => { const loadData = () => {


HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_MSG_DESHBOARD,
url: UrlUtils.GET_MSG_DASHBOARD,
onSuccess: function (response) { onSuccess: function (response) {
let list = [] let list = []
response.map((item) => { response.map((item) => {


+ 46
- 8
src/pages/dashboard/Public/Notice.js View File

@@ -1,29 +1,67 @@
// material-ui // material-ui
import { import {
Stack,
Typography, Typography,
Stack
Divider
} 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 * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";
import { useIntl} from "react-intl";


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const SearchDemandNoteForm = () => { 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"sx={{ pt: 1 }}>{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
<Divider fullWidth sx={{ pt: 1 }}></Divider>
</Stack>
)
});
setItemList(list);
}, [listData,intl]);

const loadData = () => {

HttpUtils.get({
url: UrlUtils.GET_ANNOUNCE_DASHBOARD,
onSuccess: function (response) {
setListData(response);
}
});
};


return ( return (
<MainCard xs={12} md={12} lg={12} <MainCard xs={12} md={12} lg={12}
border={false} border={false}
content={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={4}>
{itemList}
</Stack> </Stack>
</Stack>

</MainCard> </MainCard>
); );
}; };


+ 15
- 13
src/pages/dashboard/Public/index.js View File

@@ -10,7 +10,7 @@ import {
} from '@mui/material'; } from '@mui/material';
import { isORGLoggedIn, } from "utils/Utils"; import { isORGLoggedIn, } from "utils/Utils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import {FormattedMessage, useIntl} from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";
import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded'; import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
import * as React from "react"; import * as React from "react";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
@@ -51,10 +51,10 @@ const DashboardDefault = () => {
<Grid container justifyContent="center" spacing={2} sx={{ pt: 2 }} alignitems="stretch" > <Grid container justifyContent="center" spacing={2} sx={{ pt: 2 }} alignitems="stretch" >
<Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}> <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
<Button <Button
xs={12} onClick={()=>{ navigate("/publicNotice/apply");}}
style={{ justifyContent: "flex-start" }}
aria-label={intl.formatMessage({id: 'submitApplication'})}
sx={{ width: "100%", p: 4, border: '3px solid #e1edfc', borderRadius: '10px', backgroundColor: "#e1edfc" }}
xs={12} onClick={() => { navigate("/publicNotice/apply"); }}
style={{ justifyContent: "flex-start" }}
aria-label={intl.formatMessage({ id: 'submitApplication' })}
sx={{ width: "100%", p: 4, border: '3px solid #e1edfc', borderRadius: '10px', backgroundColor: "#e1edfc" }}
> >
<Stack direction="row" spacing={2}> <Stack direction="row" spacing={2}>
<AdsClickRoundedIcon /> <AdsClickRoundedIcon />
@@ -73,11 +73,12 @@ const DashboardDefault = () => {
<FormattedMessage id="announcement" /> <FormattedMessage id="announcement" />
</Typography> </Typography>
<Button <Button
color="gray"
aria-label={intl.formatMessage({id: 'viewAllAnnouncement'})}
color="gray"
aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
onClick={()=>{navigate("/announcement/search")}}
><u> ><u>
<FormattedMessage id="viewAllAnnouncement" />
</u></Button>
<FormattedMessage id="viewAllAnnouncement" />
</u></Button>
</Stack> </Stack>
<Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} > <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
<Notice <Notice
@@ -90,11 +91,12 @@ const DashboardDefault = () => {
<FormattedMessage id="systemMessage" /> <FormattedMessage id="systemMessage" />
</Typography> </Typography>
<Button <Button
aria-label={intl.formatMessage({id: 'viewAllSystemMessage'})}
onClick={()=>{navigate("/msg/search");}} color="gray"
aria-label={intl.formatMessage({ id: 'viewAllSystemMessage' })}
onClick={() => { navigate("/msg/search"); }}
color="gray"
><u> ><u>
<FormattedMessage id="viewAllSystemMessage" />
</u></Button>
<FormattedMessage id="viewAllSystemMessage" />
</u></Button>
</Stack> </Stack>
<Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} > <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
<Message <Message


+ 10
- 0
src/routes/GLDUserRoutes.js View File

@@ -20,6 +20,8 @@ const DemandNote_Details = Loadable(lazy(() => import('pages/DemandNote/Details'
const GFMIS_Search = Loadable(lazy(() => import('pages/GFMIS'))); const GFMIS_Search = Loadable(lazy(() => import('pages/GFMIS')));
const UserMaintainPage = Loadable(lazy(() => import('pages/User/GLDUserProfile'))); const UserMaintainPage = Loadable(lazy(() => import('pages/User/GLDUserProfile')));
const SystemSetting = Loadable(lazy(() => import('pages/Setting/SystemSetting'))); 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 ||============================== // // ==============================|| MAIN ROUTING ||============================== //


@@ -90,6 +92,14 @@ const GLDUserRoutes = {
path: '/setting/sys', path: '/setting/sys',
element: <SystemSetting /> element: <SystemSetting />
}, },
{
path: '/setting/announcement',
element: <AnnouncementSearch />
},
{
path: '/setting/announcement/details/:id',
element: <AnnouncementDetails />
},
] ]
}, },
] ]


+ 6
- 0
src/routes/PublicUserRoutes.js View File

@@ -28,6 +28,8 @@ const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/Det
const OrganizationDetailPage = Loadable(lazy(() => import('pages/Organization/DetailPage'))); const OrganizationDetailPage = Loadable(lazy(() => import('pages/Organization/DetailPage')));
const Msg_Details = Loadable(lazy(() => import('pages/Message/Details'))); const Msg_Details = Loadable(lazy(() => import('pages/Message/Details')));
const Msg_Search = Loadable(lazy(() => import('pages/Message/Search'))); const Msg_Search = Loadable(lazy(() => import('pages/Message/Search')));
const AnnouncementSearch = Loadable(lazy(() => import('pages/Announcement/Search_Public')));



// ==============================|| MAIN ROUTING ||============================== // // ==============================|| MAIN ROUTING ||============================== //


@@ -130,6 +132,10 @@ const PublicDashboard = {
path: '/msg/search', path: '/msg/search',
element: <Msg_Search /> element: <Msg_Search />
}, },
{
path: '/announcement/search',
element: <AnnouncementSearch />
},
] ]
}, },
] ]


+ 4
- 0
src/themes/buttonConst.js View File

@@ -47,6 +47,10 @@ export const PNSPS_BUTTON_THEME = createTheme({
main: '#448DF2', main: '#448DF2',
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}, },
green:{
main: '#4ac234',
contrastText: '#FFFFFF',
},
orange: { orange: {
main: '#ed9740', main: '#ed9740',
light: '#ff5e5e', light: '#ff5e5e',


+ 3
- 0
src/translations/en.json View File

@@ -401,6 +401,9 @@
"create": "Create", "create": "Create",
"confirmTo": "Confirm to ", "confirmTo": "Confirm to ",


"content": "Content",
"subject": "Subject",

"Dashboard": "Dashboard", "Dashboard": "Dashboard",
"event": "Event" "event": "Event"
} }

+ 3
- 0
src/translations/zh-CN.json View File

@@ -397,6 +397,9 @@
"create": "创建", "create": "创建",
"confirmTo": "确定", "confirmTo": "确定",


"content": "内容",
"subject": "主题",

"Dashboard": "仪表板", "Dashboard": "仪表板",
"event": "活动" "event": "活动"
} }

+ 3
- 0
src/translations/zh-HK.json View File

@@ -402,6 +402,9 @@
"create": "創建", "create": "創建",
"confirmTo": "確定", "confirmTo": "確定",


"content": "内容",
"subject": "主題",

"Dashboard": "儀表板", "Dashboard": "儀表板",
"event": "活動" "event": "活動"
} }

+ 6
- 1
src/utils/ApiPathConst.js View File

@@ -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_DETAILS = apiPath+'/msg/details';
export const GET_MSG_LIST = apiPath+'/msg/list'; 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'; export const CHECK_OVERDUE = apiPath+'/application/check-overdue';




Write Preview
Loading…
Cancel
Save