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

search msg

master
Anna Ho 1 year ago
parent
d2303f4ce4
commit
8967f5fbf9
5 changed files with 347 additions and 1 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +78
    -0
      src/pages/Message/Search/DataGrid.js
  2. +162
    -0
      src/pages/Message/Search/SearchForm.js
  3. +101
    -0
      src/pages/Message/Search/index.js
  4. +1
    -1
      src/pages/dashboard/Public/index.js
  5. +5
    -0
      src/routes/PublicUserRoutes.js

+ 78
- 0
src/pages/Message/Search/DataGrid.js View File

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

+ 162
- 0
src/pages/Message/Search/SearchForm.js View File

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

+ 101
- 0
src/pages/Message/Search/index.js View File

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

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

@@ -80,7 +80,7 @@ const DashboardDefault = () => {
<Typography variant="h4"> <Typography variant="h4">
<FormattedMessage id="systemMessage" /> <FormattedMessage id="systemMessage" />
</Typography> </Typography>
<Button color="gray"><u>
<Button onClick={()=>{navigate("/msg/search");}} color="gray"><u>
<FormattedMessage id="viewAllSystemMessage" /> <FormattedMessage id="viewAllSystemMessage" />
</u></Button> </u></Button>
</Stack> </Stack>


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

@@ -27,6 +27,7 @@ const UserMaintainPage_Individual = Loadable(lazy(() => import('pages/User/Detai
const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/DetailsPage_Organization'))); const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/DetailsPage_Organization')));
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')));


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


@@ -125,6 +126,10 @@ const PublicDashboard = {
path: '/msg/details/:id', path: '/msg/details/:id',
element: <Msg_Details /> element: <Msg_Details />
}, },
{
path: '/msg/search',
element: <Msg_Search />
},
] ]
}, },
] ]


Write Preview
Loading…
Cancel
Save