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

add announcement UI

master
Anna Ho 1 year ago
parent
b66ccd53d6
commit
9b4124872e
11 changed files with 811 additions and 10 deletions
Split 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. +1
    -1
      src/pages/dashboard/Public/Message.js
  8. +45
    -8
      src/pages/dashboard/Public/Notice.js
  9. +10
    -0
      src/routes/GLDUserRoutes.js
  10. +4
    -0
      src/themes/buttonConst.js
  11. +6
    -1
      src/utils/ApiPathConst.js

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

@@ -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'}}}>


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

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

@@ -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) => {


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

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


+ 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 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 />
},
]
},
]


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

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


+ 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_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';



Write Preview
Loading…
Cancel
Save