From 8967f5fbf93e53a36a4f805dfb87f40d5709ac45 Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Fri, 19 Jan 2024 18:11:56 +0800
Subject: [PATCH] search msg

---
 src/pages/Message/Search/DataGrid.js   |  78 ++++++++++++
 src/pages/Message/Search/SearchForm.js | 162 +++++++++++++++++++++++++
 src/pages/Message/Search/index.js      | 101 +++++++++++++++
 src/pages/dashboard/Public/index.js    |   2 +-
 src/routes/PublicUserRoutes.js         |   5 +
 5 files changed, 347 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Message/Search/DataGrid.js
 create mode 100644 src/pages/Message/Search/SearchForm.js
 create mode 100644 src/pages/Message/Search/index.js

diff --git a/src/pages/Message/Search/DataGrid.js b/src/pages/Message/Search/DataGrid.js
new file mode 100644
index 0000000..7c366f5
--- /dev/null
+++ b/src/pages/Message/Search/DataGrid.js
@@ -0,0 +1,78 @@
+// 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 {useIntl} from "react-intl";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function MsgTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const navigate = useNavigate()
+    const intl = useIntl();
+
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
+    React.useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const handleEditClick = (params) => () => {
+        navigate('/msg/details/' + params.row.id);
+    };
+
+    const columns = [
+        {
+            id: 'sentDate',
+            field: 'sentDate',
+            headerName: intl.formatMessage({id: 'date'}),
+            width: 160,
+            renderCell: (params) => {
+                return DateUtils.datetimeStr(params.row.sentDate);
+            },
+        },
+        {
+            field: 'actions',
+            headerName: intl.formatMessage({id: 'payId'}),
+            flex: 1 ,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.subject}</u></Button>;
+            },
+        },
+    ];
+
+    return (
+        <div style={{ minHeight: 400, width: '100%' }}>
+
+            <FiDataGrid
+                sx={_sx}
+                rowHeight={80}
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 20 },
+                    },
+                }}
+                onRowDoubleClick={handleEditClick}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/Message/Search/SearchForm.js b/src/pages/Message/Search/SearchForm.js
new file mode 100644
index 0000000..1900f9a
--- /dev/null
+++ b/src/pages/Message/Search/SearchForm.js
@@ -0,0 +1,162 @@
+// material-ui
+import {
+    Button,
+    CardContent,
+    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 {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+import {FormattedMessage, useIntl} from "react-intl";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchForm = ({ applySearch, searchCriteria }) => {
+    const intl = useIntl();
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
+    const { reset, register, handleSubmit } = useForm()
+
+    const onSubmit = (data) => {
+        const temp = {
+            keywork: data.keywork,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+        };
+        applySearch(temp);
+    };
+
+    function resetForm() {
+        reset();
+    }
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            sx={_sx}
+            >
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                {/*row 1*/}
+                <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid item justifyContent="space-between" alignItems="center" >
+                        <Typography variant="h4">
+                            <FormattedMessage id="search"/>
+                        </Typography>
+                    </Grid>
+                </CardContent>
+
+                {/*row 2*/}
+                <Grid container alignItems={"center"}>
+
+                    <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("keyword")}
+                            id='keyword'
+                            label={intl.formatMessage({id: 'keyword'}) + ":"}
+                            defaultValue={searchCriteria.code}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <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:1.3, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
+                                <FormattedMessage id="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="付款日期(到)"
+                                    defaultValue={searchCriteria.dateTo}
+                                />
+                            </Grid>
+                        </Grid>
+                    </Grid>
+
+                </Grid>
+
+
+                {/*last row*/}
+                <Grid container maxWidth justifyContent="flex-end">
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{mr: 3, mb: 3 }}>
+                        <Button
+                            variant="contained"
+                            onClick={resetForm}
+                        >
+                            <FormattedMessage id="reset"/>
+                        </Button>
+                    </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Button
+                            variant="contained"
+                            type="submit"
+                        >
+                            <FormattedMessage id="submit"/>
+                        </Button>
+                    </Grid>
+                    </ThemeProvider>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchForm;
diff --git a/src/pages/Message/Search/index.js b/src/pages/Message/Search/index.js
new file mode 100644
index 0000000..9706d5d
--- /dev/null
+++ b/src/pages/Message/Search/index.js
@@ -0,0 +1,101 @@
+// 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 Index = () => {
+
+    const [record,setRecord] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        dateTo: DateUtils.dateStr(new Date()),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        loadGrid();
+    }, [searchCriteria]);
+
+    function loadGrid(){
+        HttpUtils.get({
+            url: UrlUtils.GET_MSG_LIST,
+            params: searchCriteria,
+            onSuccess: function(responseData){
+                setRecord(responseData);
+            }
+        });
+    }
+
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent/>
+            :
+            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} 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="paymentHistory"/>
+                            </Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm 
+                    applySearch={applySearch}
+                    searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                            sx={{width: "-webkit-fill-available"}}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+};
+
+export default Index;
diff --git a/src/pages/dashboard/Public/index.js b/src/pages/dashboard/Public/index.js
index 730d993..b895e9f 100644
--- a/src/pages/dashboard/Public/index.js
+++ b/src/pages/dashboard/Public/index.js
@@ -80,7 +80,7 @@ const DashboardDefault = () => {
               <Typography variant="h4">
                 <FormattedMessage id="systemMessage" />
               </Typography>
-              <Button color="gray"><u>
+              <Button onClick={()=>{navigate("/msg/search");}} color="gray"><u>
                 <FormattedMessage id="viewAllSystemMessage" />
               </u></Button>
             </Stack>
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index 65d5937..8ec62fc 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -27,6 +27,7 @@ const UserMaintainPage_Individual = Loadable(lazy(() => import('pages/User/Detai
 const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/DetailsPage_Organization')));
 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')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -125,6 +126,10 @@ const PublicDashboard = {
           path: '/msg/details/:id',
           element: <Msg_Details />
         },
+        {
+          path: '/msg/search',
+          element: <Msg_Search />
+        },
       ]
     },
   ]