From 58c818809effc0f4d5e2577731044606f4c22feb Mon Sep 17 00:00:00 2001 From: anna Date: Tue, 2 Apr 2024 16:21:33 +0800 Subject: [PATCH] Application --- src/components/FiDataGrid.js | 59 ++++++++++++++----- src/pages/PublicNotice/Search_GLD/DataGrid.js | 24 +++++--- src/pages/PublicNotice/Search_GLD/index.js | 22 +------ 3 files changed, 62 insertions(+), 43 deletions(-) diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js index e2eb70b..32545d0 100644 --- a/src/components/FiDataGrid.js +++ b/src/components/FiDataGrid.js @@ -3,6 +3,7 @@ import * as React from 'react'; import { DataGrid, GridOverlay, } from "@mui/x-data-grid"; +import * as HttpUtils from "utils/HttpUtils"; import {FormattedMessage, useIntl} from "react-intl"; import {TablePagination, Typography} from '@mui/material'; @@ -10,19 +11,16 @@ import {TablePagination, Typography} from '@mui/material'; export function FiDataGrid({ rows, columns, sx, autoHeight, hideFooterSelectedRowCount, rowModesModel, editMode, - pageSizeOptions, filterItems, customPageSize, ...props }) { + pageSizeOptions, filterItems, customPageSize, doLoad, ...props }) { const intl = useIntl(); const [_rows, set_rows] = React.useState([]); + const [_doLoad, set_doLoad] = React.useState({}); const [_columns, set_columns] = React.useState([]); const [_rowModesModel, set_rowModesModel] = React.useState({}); const [_editMode, set_editMode] = React.useState("row"); - const [_pageSizeOptions, set_pageSizeOptions] = React.useState([10, 25, 50]); + const [_pageSizeOptions, set_pageSizeOptions] = React.useState([10]); const [_filterItems, set_filterItems] = React.useState([]); - - const [page, setPage] = React.useState(0); - const [pageSize, setPageSize] = React.useState(10); const [_autoHeight, set_autoHeight] = React.useState(true); - const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true); const [_sx, set_sx] = React.useState({ padding: "4 2 4 2", '& .MuiDataGrid-cell': { @@ -36,6 +34,18 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, }, }); + + const [page, setPage] = React.useState(0); + const [pageSize, setPageSize] = React.useState(10); + const [rowCount, setRowCount] = React.useState(0); + const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true); + + React.useEffect(() => { set_doLoad(doLoad); }, [doLoad]); + + React.useEffect(()=>{ + getDataList(); + },[_doLoad, page]); + React.useEffect(() => { if (sx) { set_sx(sx); @@ -64,7 +74,6 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, if(filterItems){ set_filterItems(filterItems); } - if(customPageSize){ setPageSize(customPageSize); } @@ -79,10 +88,6 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, setPage(0); }; - const startIndex = page * pageSize; - const endIndex = (page + 1) * pageSize; - const slicedRows = _rows.slice(startIndex, endIndex); - function CustomNoRowsOverlay() { return ( @@ -93,11 +98,33 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, ); } + + function getDataList() { + if(_doLoad.url == null) return; + _doLoad.params.start = page*pageSize; + _doLoad.params.limit = pageSize; + HttpUtils.get({ + url: _doLoad.url, + params: _doLoad.params, + onSuccess: function (responseData) { + set_rows(responseData.records); + setRowCount(responseData.count); + if(_doLoad.callback != null){ + _doLoad.callback(responseData.records); + } + } + }); + } + + return ( ( - `${from}-${to} ${intl.formatMessage({ id: "of" })} ${count}` + rowsPerPageOptions={_pageSizeOptions} + labelDisplayedRows={({count }) => + `${page*pageSize+1}-${page*pageSize+_rows.length} ${intl.formatMessage({ id: "of" })} ${count}` } labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"} onPageChange={handleChangePage} diff --git a/src/pages/PublicNotice/Search_GLD/DataGrid.js b/src/pages/PublicNotice/Search_GLD/DataGrid.js index a6af799..f638c3f 100644 --- a/src/pages/PublicNotice/Search_GLD/DataGrid.js +++ b/src/pages/PublicNotice/Search_GLD/DataGrid.js @@ -19,21 +19,25 @@ import { notifyActionSuccess, clickableLink } from 'utils/CommonFunction'; import { FormattedMessage, useIntl } from "react-intl"; // ==============================|| EVENT TABLE ||============================== // -export default function SearchPublicNoticeTable({ recordList, reloadFunction }) { - const [rows, setRows] = React.useState(recordList); +export default function SearchPublicNoticeTable({ searchCriteria }) { + + const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria); + + const [rows, setRows] = React.useState(); const navigate = useNavigate() const [selectedRowItems, setSelectedRowItems] = React.useState([]); - const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false); const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); - const intl = useIntl(); + const intl = useIntl(); + React.useEffect(() => { - setRows(recordList); - }, [recordList]); + set_searchCriteria(searchCriteria); + }, [searchCriteria]); + function genIssueNo(params) { const issueNo = params.row.issueYear+ " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)+ ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2)+ ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)") @@ -197,11 +201,17 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction }) return ((params.row.creditor === true && params.row.status == "confirmed") || (params.row.creditor === false && params.row.status == "paid")) }} - rows={rows} columns={columns} customPageSize={10} getRowHeight={() => 'auto'} onRowDoubleClick={handleRowDoubleClick} + doLoad={{ + url:UrlUtils.GET_PUBLIC_NOTICE_LIST, + params:_searchCriteria, + callback: function(dataList){ + setRows(dataList); + } + }} />
diff --git a/src/pages/PublicNotice/Search_GLD/index.js b/src/pages/PublicNotice/Search_GLD/index.js index 321487b..876c250 100644 --- a/src/pages/PublicNotice/Search_GLD/index.js +++ b/src/pages/PublicNotice/Search_GLD/index.js @@ -30,39 +30,23 @@ const BackgroundHead = { const UserSearchPage_Individual = () => { - const [record, setRecord] = React.useState([]); const [orgCombo, setOrgCombo] = React.useState([]); const [issueCombo, setIssueCombo] = React.useState([]); const [searchCriteria, setSearchCriteria] = React.useState({ dateTo: DateUtils.dateValue(new Date()), - dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)), + dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)) }); const [onReady, setOnReady] = React.useState(false); React.useEffect(() => { - getDataList(); getOrgCombo(); getIssueCombo(); }, []); React.useEffect(() => { setOnReady(true); - }, [record]); - - React.useEffect(() => { - getDataList(); }, [searchCriteria]); - function getDataList() { - HttpUtils.get({ - url: UrlUtils.GET_PUBLIC_NOTICE_LIST, - params: searchCriteria, - onSuccess: function (responseData) { - setRecord(responseData); - } - }); - } - function getOrgCombo() { HttpUtils.get({ url: UrlUtils.GET_ORG_COMBO, @@ -83,7 +67,6 @@ const UserSearchPage_Individual = () => { }); } - function applySearch(input) { setSearchCriteria(input); } @@ -121,8 +104,7 @@ const UserSearchPage_Individual = () => { sx={{ backgroundColor: '#fff' }} >