Application

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 (
             <GridOverlay>
@@ -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 (
         <DataGrid
             {...props}
-            rows={slicedRows}
+            rows={_rows}
             columns={_columns}
+
+            paginationMode="server"
+
             disableColumnMenu
             rowModesModel={_rowModesModel}
             pageSizeOptions={_pageSizeOptions}
@@ -110,12 +137,12 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
                 noRowsOverlay: CustomNoRowsOverlay,
                 Pagination: () => (
                     <TablePagination
-                        count={_rows.length}
+                        count={rowCount?rowCount:_rows.length}
                         page={page}
                         rowsPerPage={pageSize}
-                        rowsPerPageOptions={[5,10,20,100]}
-                        labelDisplayedRows={({ from, to, count }) =>
-                            `${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}

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);
+                    }
+                }}
             />
         </div>
         <div>

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' }}
                     >
                         <EventTable
-                            recordList={record}
-                            reloadFunction={getDataList}
+                            searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>