feat: datatables pagination.

client/src/store/Bills/bills.reducer.js

@@ -1,5 +1,8 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { createTableQueryReducers } from 'store/queryReducers';
+import {
+  createTableQueryReducers,
+  viewPaginationSetReducer,
+} from 'store/journalNumber.reducer';
 
 import t from 'store/types';
 
@@ -9,7 +12,7 @@ const initialState = {
   loading: false,
   currentViewId: -1,
   tableQuery: {
-    page_size: 5,
+    page_size: 12,
     page: 1,
   },
   nextBillNumberChanged: false,
@@ -24,7 +27,8 @@ const defaultBill = {
   entries: [],
 };
 
-const reducer = createReducer(initialState, {
+
+export default createReducer(initialState, {
   [t.BILL_SET]: (state, action) => {
     const { id, bill } = action.payload;
     const _bill = state.items[id] || {};
@@ -83,27 +87,6 @@ const reducer = createReducer(initialState, {
     };
   },
 
-  [t.BILLS_PAGINATION_SET]: (state, action) => {
-    const { pagination, customViewId } = action.payload;
-    const mapped = {
-      pageSize: parseInt(pagination.page_size, 10),
-      page: parseInt(pagination.page, 10),
-      total: parseInt(pagination.total, 10),
-    };
-    const paginationMeta = {
-      ...mapped,
-      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
-      pageIndex: Math.max(mapped.page - 1, 0),
-    };
-    state.views = {
-      ...state.views,
-      [customViewId]: {
-        ...(state.views?.[customViewId] || {}),
-        paginationMeta,
-      },
-    };
-  },
-
   [t.BILL_NUMBER_CHANGED]: (state, action) => {
     const { isChanged } = action.payload;
     state.nextBillNumberChanged = isChanged;
@@ -141,7 +124,8 @@ const reducer = createReducer(initialState, {
     const billsIds = bills.map((bill) => bill.id);
 
     state.byBillPayamentId[billPaymentId] = billsIds;
-  }
-});
+  },
 
-export default createTableQueryReducers('bills', reducer);
+  ...viewPaginationSetReducer(t.BILLS_PAGINATION_SET),
+  ...createTableQueryReducers('BILLS'),
+});

client/src/store/Bills/bills.selectors.js

@@ -1,12 +1,20 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
+import {
+  pickItemsFromIds,
+  paginationLocationQuery,
+  defaultPaginationMeta,
+  getCurrentPageResults,
+} from 'store/selectors';
 
 // Retreive bills table query.
 const billTableQuery = (state) => state.bills.tableQuery;
 
 const billPageSelector = (state, props, query) => {
   const viewId = state.bills.currentViewId;
-  return state.bills.views?.[viewId]?.pages?.[query.page];
+  const currentView = state.bills.views?.[viewId];
+  const currentPageId = currentView?.paginationMeta?.page;
+
+  return currentView?.pages?.[currentPageId];
 };
 // Retreive bills items.
 const billItemsSelector = (state) => state.bills.items;
@@ -15,7 +23,8 @@ const billItemsSelector = (state) => state.bills.items;
 const billByIdSelector = (state, props) => state.bills.items[props.billId];
 
 // Retrieve vendor due bills ids.
-const billsPayableVendorSelector = (state, props) => state.bills.payable.byVendorId[props.vendorId];
+const billsPayableVendorSelector = (state, props) =>
+  state.bills.payable.byVendorId[props.vendorId];
 
 const billPaginationSelector = (state, props) => {
   const viewId = state.bills.currentViewId;
@@ -58,13 +67,16 @@ export const getBillByIdFactory = () =>
  */
 export const getBillPaginationMetaFactory = () =>
   createSelector(billPaginationSelector, (billPage) => {
-    return billPage?.paginationMeta || {};
+    return {
+      ...defaultPaginationMeta(),
+      ...(billPage?.paginationMeta || {}),
+    };
   });
 
 /**
  * Retrieve vendor payable bills.
  */
-export const getVendorPayableBillsFactory = () => 
+export const getVendorPayableBillsFactory = () =>
   createSelector(
     billItemsSelector,
     billsPayableVendorSelector,
@@ -78,7 +90,7 @@ export const getVendorPayableBillsFactory = () =>
 /**
  * Retrieve vendor payable bills entries.
  */
-export const getVendorPayableBillsEntriesFactory = () => 
+export const getVendorPayableBillsEntriesFactory = () =>
   createSelector(
     billItemsSelector,
     billsPayableVendorSelector,
@@ -94,5 +106,5 @@ export const getVendorPayableBillsEntriesFactory = () =>
         id: null,
         payment_amount: null,
       }));
-    }
-  );
+    },
+  );

client/src/store/Bills/bills.type.js

@@ -4,7 +4,7 @@ export default {
   BILLS_LIST_SET: 'BILLS_LIST_SET',
   BILL_SET: 'BILL_SET',
   BILLS_SET_CURRENT_VIEW: 'BILLS_SET_CURRENT_VIEW',
-  BILLS_TABLE_QUERIES_ADD: 'BILLS_TABLE_QUERIES_ADD',
+  BILLS_TABLE_QUERIES_ADD: 'BILLS/TABLE_QUERIES_ADD',
   BILLS_TABLE_LOADING: 'BILLS_TABLE_LOADING',
   BILLS_PAGINATION_SET: 'BILLS_PAGINATION_SET',
   BILLS_PAGE_SET: 'BILLS_PAGE_SET',