From c364806255c5f7e8f1a33c59302dbe75647ce711 Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Tue, 26 Sep 2023 20:36:24 +0800
Subject: [PATCH] fix bug

---
 src/components/FiDataGrid.js                  | 49 +++++++++++++++++++
 .../ListPanel/PendingPaymentTab.js            | 23 +--------
 .../ListPanel/SearchPublicNoticeTable.js      | 30 ++----------
 3 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
index 2812e84..1d82b7b 100644
--- a/src/components/FiDataGrid.js
+++ b/src/components/FiDataGrid.js
@@ -62,6 +62,55 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         }
     }, []);
 
+    React.useEffect(() => {
+        if (sx) {
+            set_sx(sx);
+        }
+    }, [sx]);
+
+    React.useEffect(() => {
+        if (hideFooterSelectedRowCount) {
+            setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount);
+        }
+    }, [hideFooterSelectedRowCount]);
+
+    React.useEffect(() => {
+        if (rowModesModel) {
+            set_rowModesModel(rowModesModel)
+        }
+    }, [rowModesModel]);
+
+    React.useEffect(() => {
+        if (rows) {
+            set_rows(rows)
+        }
+    }, [rows]);
+
+    React.useEffect(() => {
+        if (columns) {
+            set_columns(columns)
+        }
+    }, [columns]);
+
+    React.useEffect(() => {
+        if (pageSizeOptions) {
+            set_pageSizeOptions(pageSizeOptions)
+        }
+    }, [pageSizeOptions]);
+
+    React.useEffect(() => {
+        if(autoHeight != undefined){
+            set_autoHeight(autoHeight)
+        }
+    }, [autoHeight]);
+
+    React.useEffect(() => {
+        if(editMode){
+            set_editMode(editMode);
+        }
+    }, [editMode]);
+    
+
     return (
         <DataGrid
             {...props}
diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
index a953758..3c3c9fc 100644
--- a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
+++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
@@ -1,14 +1,12 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
 import {
     Stack,
     Typography,
     Button,
     Dialog, DialogTitle, DialogContent, DialogActions
 } from '@mui/material';
+import {FiDataGrid} from "components/FiDataGrid";
 import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "./PublicNoteStatusUtils";
 import {useNavigate} from "react-router-dom";
@@ -111,36 +109,19 @@ export default function SubmittedTab({ rows }) {
     return (
         <>
             <div style={{ height: 400, width: '100%', padding: 4 }}>
-                <DataGrid
+                <FiDataGrid
                     checkboxSelection
                     disableRowSelectionOnClick
                     rows={rows}
                     columns={columns}
-                    editMode="row"
-                    rowSelectionModel={selectedRowItems}
                     initialState={{
                         pagination: {
                             paginationModel: { page: 0, pageSize: 5 },
                         },
                     }}
-                    pageSizeOptions={[5, 10]}
-                    autoHeight={true}
                     onRowSelectionModelChange={(newSelection) => {
                         setSelectedRowItems(newSelection);
                     }}
-                    sx={{
-                        boxShadow: 1,
-                        border: 1,
-                        borderColor: '#DDD',
-                        '& .MuiDataGrid-cell': {
-                            border: 1,
-                            borderColor: "#EEE"
-                        },
-                        '& .MuiDataGrid-footerContainer':{
-                            border: 1,
-                            borderColor: "#EEE"
-                        }
-                    }}
                 />
                 <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
             </div>
diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
index 103fbb9..acce097 100644
--- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
+++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
@@ -1,27 +1,23 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
 import {
     Button
 } from '@mui/material';
-import { useEffect } from "react";
 import * as DateUtils from "utils/DateUtils";
 import * as StatusUtils from "./PublicNoteStatusUtils";
 import {useNavigate} from "react-router-dom";
+import {FiDataGrid} from "components/FiDataGrid";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
-    const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
+    const [rows, setRows] = React.useState([]);
     const navigate = useNavigate()
 
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/'+ params.id);
     };
 
-    useEffect(() => {
+    React.useEffect(() => {
         setRows(recordList);
     }, [recordList]);
 
@@ -98,32 +94,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     return (
         <div style={{ height: 400, width: '100%' }}>
 
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: { page: 0, pageSize: 5 },
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight
-                sx={{
-                    boxShadow: 1,
-                    border: 1,
-                    borderColor: '#DDD',
-                    '& .MuiDataGrid-cell': {
-                        border: 1,
-                        borderColor: "#EEE"
-                    },
-                    '& .MuiDataGrid-footerContainer':{
-                        border: 1,
-                        borderColor: "#EEE"
-                    }
-                }}
             />
         </div>
     );