diff --git a/worklenz-frontend/src/features/reporting/membersReports/membersReportsSlice.ts b/worklenz-frontend/src/features/reporting/membersReports/membersReportsSlice.ts index 157f8d7e..2dcd9fe1 100644 --- a/worklenz-frontend/src/features/reporting/membersReports/membersReportsSlice.ts +++ b/worklenz-frontend/src/features/reporting/membersReports/membersReportsSlice.ts @@ -107,6 +107,10 @@ const membersReportsSlice = createSlice({ setDateRange: (state, action) => { state.dateRange = action.payload; }, + setPagination: (state, action) => { + state.index = action.payload.index; + state.pageSize = action.payload.pageSize; + }, }, extraReducers: builder => { builder @@ -139,5 +143,6 @@ export const { setOrder, setDuration, setDateRange, + setPagination, } = membersReportsSlice.actions; export default membersReportsSlice.reducer; diff --git a/worklenz-frontend/src/pages/reporting/members-reports/members-reports-table/members-reports-table.tsx b/worklenz-frontend/src/pages/reporting/members-reports/members-reports-table/members-reports-table.tsx index e94e9818..26b26112 100644 --- a/worklenz-frontend/src/pages/reporting/members-reports/members-reports-table/members-reports-table.tsx +++ b/worklenz-frontend/src/pages/reporting/members-reports/members-reports-table/members-reports-table.tsx @@ -6,9 +6,14 @@ import { useAppDispatch } from '@/hooks/useAppDispatch'; import CustomTableTitle from '@/components/CustomTableTitle'; import TasksProgressCell from './tablesCells/tasksProgressCell/TasksProgressCell'; import MemberCell from './tablesCells/memberCell/MemberCell'; -import { fetchMembersData, toggleMembersReportsDrawer } from '@/features/reporting/membersReports/membersReportsSlice'; +import { + fetchMembersData, + setPagination, + toggleMembersReportsDrawer, +} from '@/features/reporting/membersReports/membersReportsSlice'; import { useAppSelector } from '@/hooks/useAppSelector'; import MembersReportsDrawer from '@/features/reporting/membersReports/membersReportsDrawer/members-reports-drawer'; +import { PaginationConfig } from 'antd/es/pagination'; const MembersReportsTable = () => { const { t } = useTranslation('reporting-members'); @@ -16,7 +21,9 @@ const MembersReportsTable = () => { const [selectedId, setSelectedId] = useState(null); const { duration, dateRange } = useAppSelector(state => state.reportingReducer); - const { membersList, isLoading, total, archived, searchQuery } = useAppSelector(state => state.membersReportsReducer); + const { membersList, isLoading, total, archived, searchQuery, index, pageSize } = useAppSelector( + state => state.membersReportsReducer + ); // function to handle drawer toggle const handleDrawerOpen = (id: string) => { @@ -24,6 +31,10 @@ const MembersReportsTable = () => { dispatch(toggleMembersReportsDrawer()); }; + const handleOnChange = (pagination: any, filters: any, sorter: any, extra: any) => { + dispatch(setPagination({ index: pagination.current, pageSize: pagination.pageSize })); + }; + const columns: TableColumnsType = [ { key: 'member', @@ -40,7 +51,7 @@ const MembersReportsTable = () => { title: , render: record => { const { todo, doing, done } = record.tasks_stat; - return (todo || doing || done) ? : '-'; + return todo || doing || done ? : '-'; }, }, { @@ -95,7 +106,7 @@ const MembersReportsTable = () => { useEffect(() => { if (!isLoading) dispatch(fetchMembersData({ duration, dateRange })); - }, [dispatch, archived, searchQuery, dateRange]); + }, [dispatch, archived, searchQuery, dateRange, index, pageSize]); return ( { dataSource={membersList} rowKey={record => record.id} pagination={{ showSizeChanger: true, defaultPageSize: 10, total: total }} + onChange={(pagination, filters, sorter, extra) => handleOnChange(pagination, filters, sorter, extra)} scroll={{ x: 'max-content' }} loading={isLoading} onRow={record => { diff --git a/worklenz-frontend/src/pages/reporting/members-reports/members-reports.tsx b/worklenz-frontend/src/pages/reporting/members-reports/members-reports.tsx index 3465b08d..9986fd59 100644 --- a/worklenz-frontend/src/pages/reporting/members-reports/members-reports.tsx +++ b/worklenz-frontend/src/pages/reporting/members-reports/members-reports.tsx @@ -25,9 +25,7 @@ const MembersReports = () => { useDocumentTitle('Reporting - Members'); const currentSession = useAuthService().getCurrentSession(); - const { archived, searchQuery } = useAppSelector( - state => state.membersReportsReducer, - ); + const { archived, searchQuery, total } = useAppSelector(state => state.membersReportsReducer); const { duration, dateRange } = useAppSelector(state => state.reportingReducer); @@ -44,7 +42,7 @@ const MembersReports = () => { return (