public search announcement

src/pages/Announcement/Search_Public/DataGrid.js

@@ -0,0 +1,77 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button,
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import { useNavigate } from "react-router-dom";
+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 navigate = useNavigate()
+    const intl = useIntl();
+    const { locale } = intl;
+
+    React.useEffect(() => {
+        setRows(recordList);   
+    }, [recordList]);
+
+    const handleEditClick = (params) => () => {
+        navigate('/setting/announcement/details/' + params.id);
+    };
+
+
+    const columns = [
+        {
+            field: 'announceDate',
+            headerName: <FormattedMessage id="date"></FormattedMessage>,
+            width: 250,
+            cellClassName: 'announceDate',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{DateUtils.datetimeStr(params?.value)}</u></Button>;
+            },
+        },
+        {
+            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}
+                </>
+            }
+        },
+    ];
+
+    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>
+    );
+}

src/pages/Announcement/Search_Public/SearchForm.js

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

src/pages/Announcement/Search_Public/index.js

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

src/pages/dashboard/Public/index.js

@@ -10,7 +10,7 @@ import {
 } from '@mui/material';
 import { isORGLoggedIn, } from "utils/Utils";
 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 * as React from "react";
 import Loadable from 'components/Loadable';
@@ -51,10 +51,10 @@ const DashboardDefault = () => {
         <Grid container justifyContent="center" spacing={2} sx={{ pt: 2 }} alignitems="stretch" >
           <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
             <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}>
                 <AdsClickRoundedIcon />
@@ -73,11 +73,12 @@ const DashboardDefault = () => {
                 <FormattedMessage id="announcement" />
               </Typography>
               <Button
-                  color="gray"
-                  aria-label={intl.formatMessage({id: 'viewAllAnnouncement'})}
+                color="gray"
+                aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
+                onClick={()=>{navigate("/announcement/search")}}
               ><u>
-                <FormattedMessage id="viewAllAnnouncement" />
-              </u></Button>
+                  <FormattedMessage id="viewAllAnnouncement" />
+                </u></Button>
             </Stack>
             <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
               <Notice
@@ -90,11 +91,12 @@ const DashboardDefault = () => {
                 <FormattedMessage id="systemMessage" />
               </Typography>
               <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>
-                <FormattedMessage id="viewAllSystemMessage" />
-              </u></Button>
+                  <FormattedMessage id="viewAllSystemMessage" />
+                </u></Button>
             </Stack>
             <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
               <Message

src/routes/PublicUserRoutes.js

@@ -28,6 +28,8 @@ const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/Det
 const OrganizationDetailPage = Loadable(lazy(() => import('pages/Organization/DetailPage')));
 const Msg_Details = Loadable(lazy(() => import('pages/Message/Details')));
 const Msg_Search = Loadable(lazy(() => import('pages/Message/Search')));
+const AnnouncementSearch = Loadable(lazy(() => import('pages/Announcement/Search_Public')));
+
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -130,6 +132,10 @@ const PublicDashboard = {
           path: '/msg/search',
           element: <Msg_Search />
         },
+        {
+          path: '/announcement/search',
+          element: <AnnouncementSearch />
+        },
       ]
     },
   ]

src/translations/en.json

@@ -401,6 +401,9 @@
   "create": "Create",
   "confirmTo": "Confirm to ",
 
+  "content": "Content",
+  "subject": "Subject",
+
   "Dashboard": "Dashboard",
   "event": "Event"
 }

src/translations/zh-CN.json

@@ -397,6 +397,9 @@
   "create": "创建",
   "confirmTo": "确定",
 
+  "content": "内容",
+  "subject": "主题",
+
   "Dashboard": "仪表板",
   "event": "活动"
 }

src/translations/zh-HK.json

@@ -402,6 +402,9 @@
   "create": "創建",
   "confirmTo": "確定",
 
+  "content": "内容",
+  "subject": "主題",
+
   "Dashboard": "儀表板",
   "event": "活動"
 }