Adding search tool in user administration table

AletheiaFact · Nov 20, 2024 · 17d5e6a · 17d5e6a
1 parent 01ee225
commit 17d5e6a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 54 deletions.
diff --git a/src/api/userApi.ts b/src/api/userApi.ts
@@ -46,7 +46,6 @@ const updatePassword = () => {
 const getUsers = (
     params: {
         searchName: string;
-        searchEmail: string;
         filterOutRoles?: Roles[];
         nameSpaceSlug: string;
         canAssignUsers: boolean;

diff --git a/src/components/PaginetedDataGrid.tsx b/src/components/PaginetedDataGrid.tsx
@@ -1,4 +1,4 @@
-import { DataGrid } from "@mui/x-data-grid";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
 import React from "react";
 
 const PaginatedDataGrid = ({ rows, columns, sx }) => {
@@ -11,6 +11,18 @@ const PaginatedDataGrid = ({ rows, columns, sx }) => {
         <DataGrid
             rows={rows}
             columns={columns}
+            slots={{ toolbar: GridToolbar }}
+            slotProps={{
+                toolbar: {
+                    showQuickFilter: true,
+                    quickFilterProps: { debounceMs: 500 },
+                    printOptions: { disableToolbarButton: true },
+                    csvOptions: { disableToolbarButton: true },
+                },
+            }}
+            disableColumnFilter
+            disableColumnSelector
+            disableDensitySelector
             paginationModel={paginationModel}
             pageSizeOptions={[5, 10, 50]}
             onPaginationModelChange={setPaginationModel}

diff --git a/src/components/adminArea/AdminTabNavigator.tsx b/src/components/adminArea/AdminTabNavigator.tsx
@@ -1,26 +1,13 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React from "react";
 import Tab from "@mui/material/Tab";
 import { Grid } from "@mui/material";
 import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
 import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
 import { useTranslation } from "next-i18next";
 import TabsNavigatorStyle from "./TabsNavigator.style";
-import SearchOverlay from "../Search/SearchOverlay";
-import userApi from "../../api/userApi";
 
 const AdminTabNavigator = ({ value, handleChange }) => {
     const { t } = useTranslation();
-    const [loading, setLoading] = useState(false);
-    const [totalUsers, setTotalUsers] = useState(0);
-    const [filteredUsers, setFilteredUsers] = useState([]);
-    const [paginationModel, setPaginationModel] = useState({
-        page: 0,
-        pageSize: 10,
-    });
-    const [searchName, setSearchName] = useState("");
-    const [searchEmail, setSearchEmail] = useState("");
-    const [applyFilters, setApplyFilters] = useState(false);
-    const [isInitialLoad, setIsInitialLoad] = useState(true);
 
     function tabProps(index: number) {
         return {
@@ -29,42 +16,6 @@ const AdminTabNavigator = ({ value, handleChange }) => {
         };
     }
 
-    const fetchData = useCallback(async () => {
-        setLoading(true);
-        try {
-            const response = await userApi.getUsers(
-                {
-                    searchName,
-                    searchEmail,
-                    nameSpaceSlug: "",
-                    canAssignUsers: false,
-                },
-                t
-            );
-            if (response) {
-                setTotalUsers(response.total);
-                setFilteredUsers(response.data);
-            }
-        } catch (error) {
-            console.error("Error fetching users:", error);
-        } finally {
-            setLoading(false);
-        }
-    }, [
-        paginationModel.page,
-        paginationModel.pageSize,
-        searchName,
-        searchEmail,
-    ]);
-
-    useEffect(() => {
-        if (isInitialLoad || applyFilters) {
-            fetchData();
-            if (isInitialLoad) setIsInitialLoad(false);
-            setApplyFilters(false);
-        }
-    }, [applyFilters, fetchData, isInitialLoad]);
-
     return (
         <Grid item xs={10} sx={{ borderBottom: 1, borderColor: "divider" }}>
             <TabsNavigatorStyle
@@ -91,9 +42,8 @@ const AdminTabNavigator = ({ value, handleChange }) => {
                     {...tabProps(1)}
                 />
             </TabsNavigatorStyle>
-            <SearchOverlay />
         </Grid>
     );
 };
 
-export default AdminTabNavigator;
+export default AdminTabNavigator;