show pagination for role page

Signed-off-by: ryjiang <[email protected]>

client/src/pages/user/Roles.tsx

@@ -3,7 +3,7 @@ import { Theme, Chip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { UserService } from '@/http';
 import { rootContext, dataContext } from '@/context';
-import { useNavigationHook } from '@/hooks';
+import { useNavigationHook, usePaginationHook } from '@/hooks';
 import AttuGrid from '@/components/grid/Grid';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import UpdateRoleDialog from './dialogs/UpdateRoleDialog';
@@ -14,6 +14,7 @@ import type {
   ToolBarConfig,
 } from '@/components/grid/Types';
 import type { DeleteRoleParams, RoleData } from './Types';
+import { getLabelDisplayedRows } from '@/pages/search/Utils';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -28,6 +29,7 @@ const Roles = () => {
   useNavigationHook(ALL_ROUTER_TYPES.USER);
   const classes = useStyles();
   const { database } = useContext(dataContext);
+  const [loading, setLoading] = useState(false);
 
   const [roles, setRoles] = useState<RoleData[]>([]);
   const [selectedRole, setSelectedRole] = useState<RoleData[]>([]);
@@ -201,25 +203,42 @@ const Roles = () => {
     fetchRoles();
   }, [database]);
 
+  const {
+    pageSize,
+    handlePageSize,
+    currentPage,
+    handleCurrentPage,
+    total,
+    data: result,
+    order,
+    orderBy,
+    handleGridSort,
+  } = usePaginationHook(roles || []);
+
+  const handlePageChange = (e: any, page: number) => {
+    handleCurrentPage(page);
+  };
+
   return (
     <div className={classes.wrapper}>
       <AttuGrid
         toolbarConfigs={toolbarConfigs}
         colDefinitions={colDefinitions}
-        rows={roles}
-        rowCount={roles.length}
+        rows={result}
+        rowCount={total}
         primaryKey="name"
-        showPagination={false}
+        showPagination={true}
         selected={selectedRole}
         setSelected={handleSelectChange}
-        // page={currentPage}
-        // onPageChange={handlePageChange}
-        // rowsPerPage={pageSize}
-        // setRowsPerPage={handlePageSize}
-        // isLoading={loading}
-        // order={order}
-        // orderBy={orderBy}
-        // handleSort={handleGridSort}
+        page={currentPage}
+        onPageChange={handlePageChange}
+        rowsPerPage={pageSize}
+        setRowsPerPage={handlePageSize}
+        isLoading={loading}
+        order={order}
+        orderBy={orderBy}
+        handleSort={handleGridSort}
+        labelDisplayedRows={getLabelDisplayedRows(userTrans('roles'))}
       />
     </div>
   );