search button update

src/components/FiDataGrid.js

@@ -95,6 +95,9 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         }
         if (_doLoad !== undefined && Object.keys(_doLoad).length==0 ){
             setLoading(false)
+            if (applyGridOnReady !== undefined){
+                applyGridOnReady(false)
+            }
         }
     }, [sx, hideFooterSelectedRowCount, rowModesModel, rows, columns, pageSizeOptions, autoHeight, editMode, filterItems, customPageSize]);
 

src/pages/Announcement/Search/DataGrid.js

@@ -10,7 +10,7 @@ import { clickableLink } from 'utils/CommonFunction';
 import {GET_ANNOUNCE_LIST} from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchPublicNoticeTable({ searchCriteria }) {
+export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnReady }) {
 
     const navigate = useNavigate()
 
@@ -73,6 +73,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
                 customPageSize={10}
                 getRowHeight={() => 'auto'}
                 onRowDoubleClick={handleRowDoubleClick}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_ANNOUNCE_LIST,
                 //     params: _searchCriteria,

src/pages/Announcement/Search/SearchForm.js

@@ -18,7 +18,7 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady}) => {
     const navigate = useNavigate()
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
@@ -180,6 +180,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                             <Button
                                 variant="contained"
                                 type="submit"
+                                disabled={onGridReady}
                             >
                                 Submit
                             </Button>

src/pages/Announcement/Search/index.js

@@ -33,15 +33,22 @@ const UserSearchPage_Individual = () => {
         dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 90)),
     });
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
         setOnReady(true);
     }, [searchCriteria]);
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -63,6 +70,7 @@ const UserSearchPage_Individual = () => {
                     <SearchForm
                         applySearch={applySearch}
                         searchCriteria={searchCriteria}
+                        onGridReady={onGridReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -73,7 +81,8 @@ const UserSearchPage_Individual = () => {
                         sx={{ backgroundColor: '#fff' }}
                     >
                         <EventTable
-                        searchCriteria={searchCriteria}
+                            searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/Announcement/Search_Public/DataGrid.js

@@ -6,7 +6,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import {GET_ANNOUNCE_LIST} from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchPublicNoticeTable({ searchCriteria }) {
+export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnReady }) {
 
     const intl = useIntl();
     const { locale } = intl;
@@ -57,6 +57,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
                 columns={columns}
                 customPageSize={10}
                 getRowHeight={() => 'auto'}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_ANNOUNCE_LIST,
                 //     params: _searchCriteria

src/pages/Announcement/Search_Public/SearchForm.js

@@ -19,7 +19,7 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) => {
     // const navigate = useNavigate()
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
@@ -186,6 +186,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 <Button
                                     variant="contained"
                                     type="submit"
+                                    disabled={onGridReady}
                                 >
                                     <FormattedMessage id="submit"></FormattedMessage>
                                 </Button>

src/pages/Announcement/Search_Public/index.js

@@ -34,6 +34,7 @@ const UserSearchPage_Individual = () => {
         dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 90)),
     });
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
         setOnReady(true);
@@ -41,9 +42,14 @@ const UserSearchPage_Individual = () => {
 
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -65,6 +71,7 @@ const UserSearchPage_Individual = () => {
                     <SearchForm
                         applySearch={applySearch}
                         searchCriteria={searchCriteria}
+                        onGridReady={onGridReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -76,6 +83,7 @@ const UserSearchPage_Individual = () => {
                     >
                         <EventTable
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/AuditLog/AuditLogSearchForm.js

@@ -30,7 +30,7 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
+const AuditLogSearchForm = ({ applySearch, searchCriteria, onGridReady}) => {
     // const navigate = useNavigate();
 
     const [minDate, setMinDate] = React.useState(searchCriteria.modifiedFrom);
@@ -210,6 +210,7 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                         <Button
                                             variant="contained"
                                             type="submit"
+                                            disabled={onGridReady}
                                         >
                                             Search
                                         </Button>

src/pages/AuditLog/AuditLogTable.js

@@ -12,7 +12,7 @@ import {
 } from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function AuditLogTable({searchCriteria}) {
+export default function AuditLogTable({searchCriteria, applyGridOnReady}) {
     const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
 
     useEffect(() => {
@@ -87,6 +87,7 @@ export default function AuditLogTable({searchCriteria}) {
                 columns={columns}
                 customPageSize={10}
                 getRowHeight={() => 'auto'}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_AUDIT_LOG_LIST,
                 //     params: _searchCriteria

src/pages/AuditLog/index.js

@@ -8,6 +8,7 @@ import {
 import MainCard from "components/MainCard";
 import { useEffect, useState } from "react";
 import * as DateUtils from "utils/DateUtils";
+import * as React from "react";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -33,15 +34,21 @@ const AuditLogPage = () => {
         modifiedFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     useEffect(() => {
             setOnReady(true);
     }, [searchCriteria]);
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+    
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -64,7 +71,7 @@ const AuditLogPage = () => {
                     <SearchForm 
                         applySearch={applySearch} 
                         searchCriteria={searchCriteria}
-                    
+                        onGridReady={onGridReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -75,6 +82,7 @@ const AuditLogPage = () => {
                     >
                         <EventTable
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/DemandNote/Search/DataGrid.js

@@ -28,7 +28,7 @@ import { ThemeProvider } from "@emotion/react";
 import { isGrantedAny } from "auth/utils";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchDemandNote({ applySearch, searchCriteria }) {
+export default function SearchDemandNote({ applySearch, searchCriteria, applyGridOnReady }) {
 
     const [isConfirmPopUp, setConfirmPopUp] = useState(false);
     const [isRevokePopUp, setRevokePopUp] = useState(false);
@@ -388,6 +388,7 @@ export default function SearchDemandNote({ applySearch, searchCriteria }) {
                     customPageSize={100}
                     getRowHeight={() => 'auto'}
                     onRowDoubleClick={handleRowDoubleClick}
+                    applyGridOnReady={applyGridOnReady}
                     doLoad={useMemo(() => ({
                         url: DEMAND_NOTE_LIST_ALL,
                         params: _searchCriteria,

src/pages/DemandNote/Search/SearchForm.js

@@ -21,7 +21,7 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
+const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issueComboData, onGridReady
 }) => {
 
     const [type, setType] = React.useState([]);
@@ -411,6 +411,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                             <Button
                                 variant="contained"
                                 type="submit"
+                                disabled={onGridReady}
                             >
                                 Submit
                             </Button>

src/pages/DemandNote/Search/index.js

@@ -41,6 +41,7 @@ const UserSearchPage_Individual = () => {
         // dueDateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
         getOrgCombo();
@@ -73,9 +74,14 @@ const UserSearchPage_Individual = () => {
     }
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -101,7 +107,7 @@ const UserSearchPage_Individual = () => {
                         orgComboData={orgCombo}
                         issueComboData={issueCombo}
                         searchCriteria={searchCriteria}
-                        
+                        onGridReady={onGridReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -114,6 +120,7 @@ const UserSearchPage_Individual = () => {
                         <EventTable
                             applySearch={applySearch}
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/DemandNote/Search_Public/DataGrid.js

@@ -15,7 +15,7 @@ import {useIntl} from "react-intl";
 import {DEMAND_NOTE_LIST} from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchDemandNote({ searchCriteria }) {
+export default function SearchDemandNote({ searchCriteria, applyGridOnReady }) {
    
     const intl = useIntl();
     const theme = useTheme();
@@ -97,10 +97,15 @@ export default function SearchDemandNote({ searchCriteria }) {
                     columns={columns}
                     customPageSize={10}
                     getRowHeight={() => 'auto'}
-                    doLoad={{
+                    applyGridOnReady={applyGridOnReady}
+                    // doLoad={{
+                    //     url: DEMAND_NOTE_LIST,
+                    //     params: _searchCriteria,
+                    // }}
+                    doLoad={React.useMemo(() => ({
                         url: DEMAND_NOTE_LIST,
                         params: _searchCriteria,
-                    }}
+                    }), [_searchCriteria])}
                 />
             </Box>
         </div>

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -22,7 +22,7 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
+const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData, onGridReady
 }) => {
 
     const intl = useIntl();
@@ -289,6 +289,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 <Button
                                     variant="contained"
                                     type="submit"
+                                    disabled={onGridReady}
                                 >
                                     <FormattedMessage id="submit" />
                                 </Button>

src/pages/DemandNote/Search_Public/index.js

@@ -39,6 +39,7 @@ const SearchPage_DemandNote_Pub = () => {
         dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
         getOrgCombo();
@@ -72,9 +73,14 @@ const SearchPage_DemandNote_Pub = () => {
 
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -100,6 +106,7 @@ const SearchPage_DemandNote_Pub = () => {
                         orgComboData={orgCombo}
                         issueComboData={issueCombo}
                         searchCriteria={searchCriteria}
+                        onGridReady={onGridReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -110,7 +117,8 @@ const SearchPage_DemandNote_Pub = () => {
                         sx={{ backgroundColor: '#fff' }}
                     >
                         <EventTable
-                        searchCriteria={searchCriteria}
+                            searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/GFMIS/DataGrid.js

@@ -6,7 +6,7 @@ import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchTable({ searchCriteria }) {
+export default function SearchTable({ searchCriteria, applyGridOnReady }) {
     const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     const navigate = useNavigate()
     // const [rows, setRows] = React.useState([]);
@@ -67,6 +67,7 @@ export default function SearchTable({ searchCriteria }) {
                 columns={columns}
                 customPageSize={10}
                 onRowDoubleClick={handleEditClick}
+                applyGridOnReady={applyGridOnReady}
                 doLoad={React.useMemo(() => ({
                     url: GFIMIS_LIST,
                     params: _searchCriteria,

src/pages/GFMIS/SearchForm.js

@@ -21,7 +21,7 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) => {
+const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGridReady }) => {
 
     // const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
@@ -146,6 +146,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                             <Button
                                 variant="contained"
                                 type="submit"
+                                disabled={onGridReady}
                             >
                                 Preview
                             </Button>

src/pages/GFMIS/index.js

@@ -35,6 +35,7 @@ const Index = () => {
         // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
         setOnReady(true);
@@ -97,9 +98,14 @@ const Index = () => {
 
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     function generateXML(input) {
         downloadXML(input);
     }
@@ -121,9 +127,10 @@ const Index = () => {
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
-                    applySearch={applySearch}
-                    generateXML={generateXML}
-                    searchCriteria={searchCriteria}
+                        applySearch={applySearch}
+                        generateXML={generateXML}
+                        searchCriteria={searchCriteria}
+                        onGridReady={onGridReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -135,6 +142,7 @@ const Index = () => {
                     >
                         <EventTable
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/GazetteIssue/DataGrid.js

@@ -7,7 +7,7 @@ import {GET_ISSUE} from "utils/ApiPathConst";
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function GazetteIssueTable({ searchCriteria }) {
+export default function GazetteIssueTable({ searchCriteria, applyGridOnReady }) {
     const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
 
     React.useEffect(() => {
@@ -100,6 +100,7 @@ export default function GazetteIssueTable({ searchCriteria }) {
                 customPageSize={10}
                 // onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_ISSUE,
                 //     params: _searchCriteria,

src/pages/GazetteIssue/SearchForm.js

@@ -16,7 +16,7 @@ import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchGazetteIssueForm = ({ applySearch, comboData}) => {
+const SearchGazetteIssueForm = ({ applySearch, comboData, onGridReady}) => {
     const [selectedYear, setSelectedYear] = React.useState([]);
     // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
     const [comboList, setComboList] = React.useState([]);
@@ -114,6 +114,7 @@ const SearchGazetteIssueForm = ({ applySearch, comboData}) => {
                             <Button
                                 variant="contained"
                                 type="submit"
+                                disabled={onGridReady}
                             >
                                 Search
                             </Button>

src/pages/GazetteIssue/index.js

@@ -38,6 +38,8 @@ const Index = () => {
     const [comboData, setComboData] = React.useState([]);
     const [holidayComboData, setHolidayComboData] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
+
     const [onSearchReady, setOnSearchReady] = React.useState(false);
     const [onExportReady, setOnExportReady] = React.useState(false);
     const [searchCriteria, setSearchCriteria] = React.useState({
@@ -89,6 +91,7 @@ const Index = () => {
     }
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
     
@@ -96,6 +99,10 @@ const Index = () => {
         setExportCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     React.useEffect(() => {
         if (Object.keys(exportCriteria).length  > 0) {
             // console.log(exportCriteria)
@@ -219,6 +226,7 @@ const Index = () => {
                         <SearchForm 
                             applySearch={applySearch}
                             comboData={comboData}
+                            onGridReady={onGridReady}
                         />
                     </Grid>
                     {/*row 2*/}
@@ -230,7 +238,8 @@ const Index = () => {
                                 content={false}
                             >
                                 <GazetteIssueTable
-                                searchCriteria={searchCriteria}
+                                    searchCriteria={searchCriteria}
+                                    applyGridOnReady={applyGridOnReady}
                                 />
                             </MainCard>
                         </Grid>

src/pages/Holiday/DataGrid.js

@@ -9,7 +9,7 @@ import { dateStr } from "utils/DateUtils";
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function HolidayTable({ recordList }) {
+export default function HolidayTable({ recordList, applyGridOnReady }) {
     const [rows, setRows] = React.useState(recordList);
 
     // const navigate = useNavigate()
@@ -48,8 +48,13 @@ export default function HolidayTable({ recordList }) {
                 rows={rows}
                 columns={columns}
                 customPageSize={20}
+                applyGridOnReady={applyGridOnReady}
                 // onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
+                // doLoad={React.useMemo(() => ({
+                //     url: LIST_PROOF,
+                //     params: _searchCriteria,
+                // }), [_searchCriteria])}
             />
         </div>
     );

src/pages/Holiday/SearchForm.js

@@ -16,7 +16,7 @@ import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchHolidayForm = ({ applySearch, comboData}) => {
+const SearchHolidayForm = ({ applySearch, comboData, onGridReady}) => {
     const [selectedYear, setSelectedYear] = React.useState([]);
     // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
     const [comboList, setComboList] = React.useState([]);
@@ -114,6 +114,7 @@ const SearchHolidayForm = ({ applySearch, comboData}) => {
                             <Button
                                 variant="contained"
                                 type="submit"
+                                disabled={onGridReady}
                             >
                                 Search
                             </Button>

src/pages/Holiday/index.js

@@ -41,6 +41,8 @@ const Index = () => {
     const [comboData, setComboData] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
     const [onSearchReady, setOnSearchReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
+
     // const navigate = useNavigate()
     const [searchCriteria, setSearchCriteria] = React.useState({
         year: dateStr_Year(new Date()),
@@ -97,9 +99,14 @@ const Index = () => {
     }
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     React.useEffect(() => {
         if (attachments.length > 0) {
             importHoliday();
@@ -222,6 +229,7 @@ const Index = () => {
                             // generateXML={generateXML}
                             searchCriteria={searchCriteria}
                             comboData={comboData}
+                            onGridReady={onGridReady}
                         />
                     </Grid>
                     {/*row 2*/}
@@ -234,6 +242,7 @@ const Index = () => {
                             >
                                 <HolidayTable
                                     recordList={record}
+                                    applyGridOnReady={applyGridOnReady}
                                 />
                             </MainCard>
                         </Grid>

src/pages/Organization/SearchPage/OrganizationSearchForm.js

@@ -19,7 +19,7 @@ import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const OrganizationSearchForm = ({ applySearch }) => {
+const OrganizationSearchForm = ({ applySearch, onGridReady }) => {
 
     const [type, setType] = useState([]);
     const [creditorSelected, setCreditorSelected] = React.useState(ComboData.CreditorStatus[0]);
@@ -167,6 +167,7 @@ const OrganizationSearchForm = ({ applySearch }) => {
                             <Button
                                 variant="contained"
                                 type="submit"
+                                disabled={onGridReady}
                             >
                                 Submit
                             </Button>

src/pages/Organization/SearchPage/OrganizationTable.js

@@ -11,7 +11,7 @@ import { clickableLink} from 'utils/CommonFunction';
 import {GET_ORG_PATH} from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function OrganizationTable({ searchCriteria }) {
+export default function OrganizationTable({ searchCriteria, applyGridOnReady }) {
     const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     const navigate = useNavigate()
 
@@ -113,6 +113,7 @@ export default function OrganizationTable({ searchCriteria }) {
                 columns={columns}
                 customPageSize={10}
                 onRowDoubleClick={handleRowDoubleClick}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_ORG_PATH,
                 //     params: _searchCriteria,

src/pages/Organization/SearchPage/index.js

@@ -32,15 +32,21 @@ const OrganizationSearchPage = () => {
 
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     useEffect(() => {
         setOnReady(true);
     }, [searchCriteria]);
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -59,7 +65,10 @@ const OrganizationSearchPage = () => {
                 </Grid>
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12} sx={{ mb: -1 }}>
-                    <SearchForm applySearch={applySearch} />
+                    <SearchForm 
+                        applySearch={applySearch} 
+                        onGridReady={onGridReady}
+                    />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
@@ -69,6 +78,7 @@ const OrganizationSearchPage = () => {
                     >
                         <EventTable
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/Proof/Search_GLD/SearchForm.js

@@ -396,7 +396,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 variant="contained"
                                 type="submit"
                                 disabled={onGridReady}
-                               >
+                            >
                                 Submit
                             </Button>
                         </Grid>

src/pages/User/SearchPage/UserSearchForm.js

@@ -21,7 +21,7 @@ import { isGrantedAny } from "auth/utils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserSearchForm = ({ applySearch }) => {
+const UserSearchForm = ({ applySearch, onGridReady }) => {
     const navigate = useNavigate();
 
     const [type, setType] = useState([]);
@@ -182,6 +182,7 @@ const UserSearchForm = ({ applySearch }) => {
                                         <Button
                                             variant="contained"
                                             type="submit"
+                                            disabled={onGridReady}
                                         >
                                             Search
                                         </Button>

src/pages/User/SearchPage/UserTable.js

@@ -11,7 +11,7 @@ import { isGrantedAny } from "auth/utils";
 import * as React from 'react';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable({searchCriteria}) {
+export default function UserTable({searchCriteria, applyGridOnReady}) {
     const [_searchCriteria, set_searchCriteria] = useState(searchCriteria);
     const [reloadTime, setReloadTime] = useState(new Date());
     const theme = useTheme();
@@ -137,6 +137,7 @@ export default function UserTable({searchCriteria}) {
                 customPageSize={10}
                 onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GLD_USER_PATH,
                 //     params: _searchCriteria,

src/pages/User/SearchPage/index.js

@@ -29,6 +29,8 @@ const UserSettingPage = () => {
     // const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
+    const [onGridReady, setGridOnReady] = useState(false);
+
     //const [changelocked, setChangeLocked] = useState(false);
 
     // useLayoutEffect(() => {
@@ -59,9 +61,14 @@ const UserSettingPage = () => {
     // }
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -81,7 +88,10 @@ const UserSettingPage = () => {
 
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
-                    <SearchForm applySearch={applySearch} />
+                    <SearchForm 
+                        applySearch={applySearch}
+                        onGridReady={onGridReady}
+                    />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
@@ -91,6 +101,7 @@ const UserSettingPage = () => {
                     >
                         <EventTable
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                             // setChangeLocked={setChangeLocked}
                         />
                     </MainCard>

src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js

@@ -13,7 +13,7 @@ import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserSearchForm_Individual = ({ applySearch }) => {
+const UserSearchForm_Individual = ({ applySearch, onGridReady }) => {
 
     const [type, setType] = useState([]);
     const [accountFilter, setAccountFilter] = useState("All");
@@ -163,7 +163,8 @@ const UserSearchForm_Individual = ({ applySearch }) => {
                         <Button
                             variant="contained"
                             type="submit"
-                            >
+                            disabled={onGridReady}
+                        >
                             Submit
                         </Button>
                     </Grid>

src/pages/User/SearchPage_Individual/UserTable_Individual.js

@@ -12,7 +12,7 @@ import { clickableLink} from 'utils/CommonFunction';
 import * as React from 'react';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable_Individual({ searchCriteria }) {
+export default function UserTable_Individual({ searchCriteria, applyGridOnReady }) {
     const [_searchCriteria, set_searchCriteria] = useState(searchCriteria);
 
     const navigate = useNavigate()
@@ -153,6 +153,7 @@ export default function UserTable_Individual({ searchCriteria }) {
                 columns={columns}
                 customPageSize={10}
                 onRowDoubleClick={handleRowDoubleClick}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_IND_USER_PATH,
                 //     params: _searchCriteria,

src/pages/User/SearchPage_Individual/index.js

@@ -25,15 +25,21 @@ const UserSearchPage_Individual = () => {
 
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
+    const [onGridReady, setGridOnReady] = useState(false);
 
     useEffect(() => {
         setOnReady(true);
     }, [searchCriteria]);
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -55,7 +61,10 @@ const UserSearchPage_Individual = () => {
 
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
-                    <SearchForm applySearch={applySearch} />
+                    <SearchForm 
+                        applySearch={applySearch} 
+                        onGridReady={onGridReady}
+                    />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
@@ -65,6 +74,7 @@ const UserSearchPage_Individual = () => {
                     >
                         <EventTable
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js

@@ -14,7 +14,7 @@ import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserSearchForm_Organization = ({applySearch}) => {
+const UserSearchForm_Organization = ({applySearch, onGridReady}) => {
 
     const [type, setType] = useState([]);
     const [accountFilter, setAccountFilter] = useState("All");
@@ -190,7 +190,8 @@ const UserSearchForm_Organization = ({applySearch}) => {
                             <Button
                                 variant="contained"
                                 type="submit"
-                                >
+                                disabled={onGridReady}
+                            >
                                 Submit
                             </Button>
                         </Grid>

src/pages/User/SearchPage_Organization/UserTable_Organization.js

@@ -15,7 +15,7 @@ import { clickableLink} from 'utils/CommonFunction';
 import * as React from 'react';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable_Organization({searchCriteria}) {
+export default function UserTable_Organization({searchCriteria, applyGridOnReady}) {
     const [_searchCriteria, set_searchCriteria] = useState(searchCriteria);
 
     const navigate = useNavigate()
@@ -147,6 +147,7 @@ export default function UserTable_Organization({searchCriteria}) {
                 columns={columns}
                 customPageSize={10}
                 onRowDoubleClick={handleRowDoubleClick}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_ORG_USER_PATH,
                 //     params: _searchCriteria,

src/pages/User/SearchPage_Organization/index.js

@@ -26,6 +26,7 @@ const UserSearchPage_Organization = () => {
 
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
+    const [onGridReady, setGridOnReady] = useState(false);
 
 
     useEffect(() => {
@@ -33,9 +34,14 @@ const UserSearchPage_Organization = () => {
     }, [searchCriteria]);
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -54,7 +60,10 @@ const UserSearchPage_Organization = () => {
                 </Grid>
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
-                    <SearchForm applySearch={applySearch} />
+                    <SearchForm 
+                        applySearch={applySearch}
+                        onGridReady={onGridReady}
+                    />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
@@ -63,7 +72,8 @@ const UserSearchPage_Organization = () => {
                         content={false}
                     >
                         <EventTable
-                        searchCriteria={searchCriteria}
+                            searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

@@ -14,7 +14,7 @@ import { ThemeProvider } from "@emotion/react";
 import { isGrantedAny } from "auth/utils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const UserGroupSearchForm = ({ applySearch }) => {
+const UserGroupSearchForm = ({ applySearch, onGridReady }) => {
     const navigate = useNavigate();
 
     const { reset, register, handleSubmit } = useForm()
@@ -112,10 +112,11 @@ const UserGroupSearchForm = ({ applySearch }) => {
                                         <Button
                                             variant="contained"
                                             type="submit"
+                                            disabled={onGridReady}
                                             sx={{
                                                 textTransform: 'capitalize',
                                                 alignItems: 'end'
-                                            }}>
+                                        }}>
                                             Search
                                         </Button>
                                     </Grid>

src/pages/pnspsUserGroupSearchPage/UserGroupTable.js

@@ -11,7 +11,7 @@ import { clickableLink} from 'utils/CommonFunction';
 import * as React from 'react';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserGroupTable({searchCriteria}) {
+export default function UserGroupTable({searchCriteria, applyGridOnReady}) {
     const [_searchCriteria, set_searchCriteria] = useState(searchCriteria);
     const navigate = useNavigate()
 
@@ -70,6 +70,7 @@ export default function UserGroupTable({searchCriteria}) {
                 customPageSize={10}
                 pageSizeOptions={[10, 15, 20]}
                 onRowDoubleClick={handleRowDoubleClick}
+                applyGridOnReady={applyGridOnReady}
                 // doLoad={{
                 //     url: GET_GROUP_LIST_PATH,
                 //     params: _searchCriteria,

src/pages/pnspsUserGroupSearchPage/index.js

@@ -34,15 +34,21 @@ const BackgroundHead = {
 const UserGroupSearchPanel = () => {
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
+    const [onGridReady, setGridOnReady] = useState(false);
 
     useEffect(() => {
         setOnReady(true);
     }, [searchCriteria]);
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
     }
 
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
+    }
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -64,7 +70,10 @@ const UserGroupSearchPanel = () => {
 
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
-                    <UserGroupSearchForm applySearch={applySearch} />
+                    <UserGroupSearchForm 
+                        applySearch={applySearch}
+                        onGridReady={onGridReady}
+                    />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
@@ -74,6 +83,7 @@ const UserGroupSearchPanel = () => {
                     >
                         <UserGroupTable
                             searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>