feat(admin-ui): implement server side pagination on users screen

Author: mjatin-dev

admin-ui/plugins/user-management/components/UserManagement/UserList.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
-import { Paper } from '@material-ui/core'
+import { Paper, TablePagination } from '@material-ui/core'
 import UserDetailViewPage from './UserDetailViewPage'
 import {
   getUsers,
@@ -40,7 +40,10 @@ function UserList(props) {
     dispatch(getAttributes(opt))
     dispatch(getRoles())
   }, [])
-
+  const { totalItems, entriesCount } = useSelector(
+    (state) => state.userReducer,
+  )
+  const [pageNumber, setPageNumber] = useState(0)
   const usersList = useSelector((state) => state.userReducer.items)
   const redirectToUserListPage = useSelector(
     (state) => state.userReducer.redirectToUserListPage,
@@ -62,9 +65,8 @@ function UserList(props) {
   SetTitle(t('titles.user_management'))
 
   const myActions = []
-  const options = []
+  const options = {}
   const userAction = {}
-  const pageSize = localStorage.getItem('paggingSize') || 10
   const navigate =useNavigate()
 
   function handleGoToUserAddPage() {
@@ -75,7 +77,7 @@ function UserList(props) {
     dispatch(setSelectedUserData(row))
     return navigate(`/user/usermanagement/edit:` + row.tableData.uuid)
   }
-  const [limit, setLimit] = useState(200)
+  const [limit, setLimit] = useState(10)
   const [pattern, setPattern] = useState(null)
 
   let memoLimit = limit
@@ -102,6 +104,7 @@ function UserList(props) {
           limit={limit}
           pattern={pattern}
           handler={handleOptionsChange}
+          showLimit={false}
         />
       ),
       tooltip: `${t('messages.advanced_search')}`,
@@ -119,8 +122,6 @@ function UserList(props) {
       onClick: () => {
         setLimit(memoLimit)
         setPattern(memoPattern)
-        console.log('LIMIT', memoLimit)
-        console.log('PATTERN', memoPattern)
         dispatch(getUsers({ limit: memoLimit, pattern: memoPattern }))
       },
     })
@@ -159,15 +160,47 @@ function UserList(props) {
     }))
   }
 
+  const onPageChangeClick = (page) => {
+    let startCount = page * limit
+    options['startIndex'] = parseInt(startCount) + 1
+    options['limit'] = limit
+    options['pattern'] = pattern
+    setPageNumber(page)
+    dispatch(getUsers(options))
+  }
+  const onRowCountChangeClick = (count) => {
+    
+    options['limit'] = count
+    options['pattern'] = pattern
+    setPageNumber(0)
+    setLimit(count)
+    dispatch(getUsers(options))
+  }
+
   return (
     <GluuLoader blocking={loading}>
       <Card style={applicationStyle.mainCard}>
         <CardBody>
           <GluuViewWrapper canShow={hasPermission(permissions, ROLE_READ)}>
             {usersList.length > 0 && (
               <MaterialTable
+                key={limit}
                 components={{
                   Container: (props) => <Paper {...props} elevation={0} />,
+                  Pagination: (props) => (
+                    <TablePagination
+                      component="div"
+                      count={totalItems}
+                      page={pageNumber}
+                      onPageChange={(prop, page) => {
+                        onPageChangeClick(page)
+                      }}
+                      rowsPerPage={limit}
+                      onRowsPerPageChange={(prop, count) =>
+                        onRowCountChangeClick(count.props.value)
+                      }
+                    />
+                  ),
                 }}
                 columns={[
                   {
@@ -185,7 +218,7 @@ function UserList(props) {
                   search: true,
                   searchFieldAlignment: 'left',
                   selection: false,
-                  pageSize: pageSize,
+                  pageSize: limit,
                   rowStyle: (rowData) => ({
                     backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
                   }),

admin-ui/plugins/user-management/redux/reducers/UserReducer.js

@@ -18,6 +18,8 @@ const INIT_STATE = {
   selectedUserData: null,
   loading: true,
   redirectToUserListPage: false,
+  totalItems: 0,
+  entriesCount: 0,
 }
 const reducerName = 'userReducer'
 
@@ -81,6 +83,8 @@ export default function userReducer(state = INIT_STATE, action) {
         ...state,
         loading: false,
         items: action.payload ? action.payload.entries : [],
+        totalItems: action.payload.totalEntriesCount,
+        entriesCount: action.payload.entriesCount,
       }
     default:
       return handleDefault()