update ui

src/pages/Organization/SearchPage/OrganizationTable.js

@@ -8,15 +8,16 @@ import EditIcon from '@mui/icons-material/Visibility';
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
+import {GET_ORG_PATH} from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function OrganizationTable({ recordList }) {
-    const [rows, setRows] = React.useState(recordList);
+export default function OrganizationTable({ searchCriteria }) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     const navigate = useNavigate()
 
     useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const handleActionClick = (id) => () => {
         navigate('/org/' + id);
@@ -106,10 +107,13 @@ export default function OrganizationTable({ recordList }) {
     return (
         <div style={{ height: "fit-content", width: '100%' }}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
                 customPageSize={5}
                 onRowDoubleClick={handleRowDoubleClick}
+                doLoad={{
+                    url: GET_ORG_PATH,
+                    params: _searchCriteria,
+                }}
             />
         </div>
     );

src/pages/Organization/SearchPage/index.js

@@ -2,11 +2,8 @@
 import {
     Grid, Typography, Stack
 } from '@mui/material';
-import MainCard from "../../../components/MainCard";
-
+import MainCard from "components/MainCard";
 import { useEffect, useState } from "react";
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as HttpUtils from "../../../utils/HttpUtils";
 import * as React from "react";
 
 
@@ -24,7 +21,7 @@ const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -33,32 +30,13 @@ const BackgroundHead = {
 
 const OrganizationSearchPage = () => {
 
-    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
-    useEffect(() => {
-        getUserList();
-    }, []);
-
     useEffect(() => {
         setOnReady(true);
-    }, [record]);
-
-    useEffect(() => {
-        getUserList();
     }, [searchCriteria]);
 
-    function getUserList() {
-        HttpUtils.get({
-            url: UrlUtils.GET_ORG_PATH,
-            params: searchCriteria,
-            onSuccess: function (responseData) {
-                setRecord(responseData);
-            }
-        });
-    }
-
     function applySearch(input) {
         setSearchCriteria(input);
     }
@@ -71,7 +49,7 @@ const OrganizationSearchPage = () => {
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{minHeight: '87vh', backgroundColor:"backgroundColor.default"}} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: "backgroundColor.default" }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -80,7 +58,7 @@ const OrganizationSearchPage = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
+                <Grid item xs={12} md={12} lg={12} sx={{ mb: -1 }}>
                     <SearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}
@@ -90,7 +68,7 @@ const OrganizationSearchPage = () => {
                         content={false}
                     >
                         <EventTable
-                            recordList={record}
+                            searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>

src/pages/User/SearchPage/UserTable.js

@@ -5,7 +5,7 @@ import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
 import { useTheme } from '@mui/material/styles';
 import Checkbox from '@mui/material/Checkbox';
-import * as HttpUtils from '../../../utils/HttpUtils';
+import * as HttpUtils from 'utils/HttpUtils';
 import { GLD_USER_PATH, GET_USER_LOCK, GET_USER_UNLOCK } from "utils/ApiPathConst";
 import { notifyLockSuccess, notifyUnlockSuccess , clickableLink} from 'utils/CommonFunction';
 

src/pages/User/SearchPage_Individual/UserTable_Individual.js

@@ -7,17 +7,18 @@ import HighlightOff from '@mui/icons-material/HighlightOff';
 import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import * as DateUtils from "../../../utils/DateUtils";
+import * as DateUtils from "utils/DateUtils";
+import { GET_IND_USER_PATH } from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable_Individual({ recordList }) {
-    const [rows, setRows] = React.useState(recordList);
+export default function UserTable_Individual({ searchCriteria }) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
 
     const navigate = useNavigate()
 
     useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const handleActionClick = (id) => () => {
         navigate('/indUser/' + id);
@@ -145,10 +146,13 @@ export default function UserTable_Individual({ recordList }) {
     return (
         <div style={{ height: "fit-content", width: '100%' }}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
-                customPageSize={5}
+                customPageSize={10}
                 onRowDoubleClick={handleRowDoubleClick}
+                doLoad={{
+                    url: GET_IND_USER_PATH,
+                    params: _searchCriteria,
+                }}
             />
         </div>
     );

src/pages/User/SearchPage_Individual/index.js

@@ -2,20 +2,12 @@
 import {
     Grid, Typography, Stack
 } from '@mui/material';
-import MainCard from "../../../components/MainCard";
+import MainCard from "components/MainCard";
 import { useEffect, useState } from "react";
-//import axios from "axios";
-//import {apiPath} from "../../auth/utils";
-import { GET_IND_USER_PATH } from "../../../utils/ApiPathConst";
 import * as React from "react";
-import * as HttpUtils from "../../../utils/HttpUtils";
-
-//import LoadingComponent from "../extra-pages/LoadingComponent";
-//import SearchForm from "./UserSearchForm_Individual";
-//import EventTable from "./UserTable_Individual";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
-const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Individual')));
 const EventTable = Loadable(lazy(() => import('./UserTable_Individual')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
@@ -33,32 +25,13 @@ const BackgroundHead = {
 
 const UserSearchPage_Individual = () => {
 
-    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
-    useEffect(() => {
-        getUserList();
-    }, []);
-
     useEffect(() => {
         setOnReady(true);
-    }, [record]);
-
-    useEffect(() => {
-        getUserList();
     }, [searchCriteria]);
 
-    function getUserList() {
-        HttpUtils.get({
-            url: GET_IND_USER_PATH,
-            params: searchCriteria,
-            onSuccess: function (responseData) {
-                setRecord(responseData);
-            }
-        });
-    }
-
     function applySearch(input) {
         setSearchCriteria(input);
     }
@@ -93,7 +66,7 @@ const UserSearchPage_Individual = () => {
                         content={false}
                     >
                         <EventTable
-                            recordList={record}
+                            searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>

src/pages/User/SearchPage_Organization/UserTable_Organization.js

@@ -10,18 +10,19 @@ import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
 import HighlightOff from '@mui/icons-material/HighlightOff';
 import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
-import * as DateUtils from '../../../utils/DateUtils';
+import * as DateUtils from 'utils/DateUtils';
+import { GET_ORG_USER_PATH } from "utils/ApiPathConst";
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable_Organization({recordList}) {
-    const [rows, setRows] = React.useState(recordList);
+export default function UserTable_Organization({searchCriteria}) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
 
     const navigate = useNavigate()
 
     useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const handleActionClick = (id) => () => {
         navigate('/orgUser/'+ id);
@@ -140,10 +141,13 @@ export default function UserTable_Organization({recordList}) {
     return (
         <div style={{height: "fit-content", width: '100%'}}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
                 customPageSize={5}
                 onRowDoubleClick={handleRowDoubleClick}
+                doLoad={{
+                    url: GET_ORG_USER_PATH,
+                    params: _searchCriteria,
+                }}
             />
         </div>
     );

src/pages/User/SearchPage_Organization/index.js

@@ -4,15 +4,7 @@ import {
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import { useEffect, useState } from "react";
-//import axios from "axios";
-//import {apiPath} from "../../auth/utils";
-import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
-import * as HttpUtils from "utils/HttpUtils";
-
-//import LoadingComponent from "../extra-pages/LoadingComponent";
-//import SearchForm from "./UserSearchForm_Organization";
-//import EventTable from "./UserTable_Organization";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -34,32 +26,14 @@ const BackgroundHead = {
 
 const UserSearchPage_Organization = () => {
 
-    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
-    useEffect(() => {
-        getUserList();
-    }, []);
 
     useEffect(() => {
         setOnReady(true);
-    }, [record]);
-
-    useEffect(() => {
-        getUserList();
     }, [searchCriteria]);
 
-    function getUserList() {
-        HttpUtils.get({
-            url: UrlUtils.GET_ORG_USER_PATH,
-            params: searchCriteria,
-            onSuccess: function (responseData) {
-                setRecord(responseData);
-            }
-        });
-    }
-
     function applySearch(input) {
         setSearchCriteria(input);
     }
@@ -91,7 +65,7 @@ const UserSearchPage_Organization = () => {
                         content={false}
                     >
                         <EventTable
-                            recordList={record}
+                        searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>

src/pages/pnspsUserGroupSearchPage/UserGroupTable.js

@@ -7,15 +7,16 @@ import {FiDataGrid} from "components/FiDataGrid";
 import EditIcon from '@mui/icons-material/Edit';
 import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
+import { GET_GROUP_LIST_PATH } from "utils/ApiPathConst";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserGroupTable({recordList}) {
-    const [rows, setRows] = React.useState(recordList);
+export default function UserGroupTable({searchCriteria}) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     const navigate = useNavigate()
 
     useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
 
     const handleEditClick = (id) => () => {
         navigate('/userGroup/'+ id);
@@ -61,11 +62,14 @@ export default function UserGroupTable({recordList}) {
     return (
         <div style={{height: "fit-content", width: '100%'}}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
                 customPageSize={10}
                 pageSizeOptions={[10, 15, 20]}
                 onRowDoubleClick={handleRowDoubleClick}
+                doLoad={{
+                    url: GET_GROUP_LIST_PATH,
+                    params: _searchCriteria,
+                }}
             />
         </div>
     );

src/pages/pnspsUserGroupSearchPage/index.js

@@ -5,11 +5,8 @@ import {
     // Button,
     Grid, Typography
 } from '@mui/material';
-import MainCard from "../../components/MainCard";
+import MainCard from "components/MainCard";
 import { useEffect, useState } from "react";
-import axios from "axios";
-import { apiPath } from "../../auth/utils";
-import { GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
 import * as React from "react";
 
 //import LoadingComponent from "../extra-pages/LoadingComponent";
@@ -35,38 +32,13 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserGroupSearchPanel = () => {
-    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
-    // const navigate = useNavigate();
-
-    useEffect(() => {
-        getGroupList();
-    }, []);
 
     useEffect(() => {
         setOnReady(true);
-    }, [record]);
-
-    useEffect(() => {
-        getGroupList();
     }, [searchCriteria]);
 
-    function getGroupList() {
-        axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`,
-            { params: searchCriteria }
-        )
-            .then((response) => {
-                if (response.status === 200) {
-                    setRecord(response.data.records);
-                }
-            })
-            .catch(error => {
-                console.log(error);
-                return false;
-            });
-    }
-
     function applySearch(input) {
         setSearchCriteria(input);
     }
@@ -101,7 +73,7 @@ const UserGroupSearchPanel = () => {
                         content={false}
                     >
                         <UserGroupTable
-                            recordList={record}
+                            searchCriteria={searchCriteria}
                         />
                     </MainCard>
                 </Grid>

src/utils/ApiPathConst.js

@@ -7,7 +7,7 @@ export const CHANGE_PASSWORD_PATH = "/user/change-password"
 export const GET_SYS_PARAMS = apiPath+'/settings';
 
 //Group Config
-export const GET_GROUP_LIST_PATH = '/group';
+export const GET_GROUP_LIST_PATH = apiPath+'/group';
 export const GET_GROUP_COMBO_PATH = '/group/combo';
 export const GET_GROUP_MEMBER_LIST_PATH = '/group/member';
 export const GET_GROUP_AUTH_LIST = '/group/auth/combo';