feat: datatables pagination.

client/src/store/Invoice/invoices.reducer.js

@@ -1,7 +1,9 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { createTableQueryReducers } from 'store/queryReducers';
-import { journalNumberChangedReducer } from 'store/journalNumber.reducer';
-
+import {
+  journalNumberChangedReducer,
+  viewPaginationSetReducer,
+  createTableQueryReducers,
+ } from 'store/journalNumber.reducer';
 import t from 'store/types';
 
 const initialState = {
@@ -10,7 +12,7 @@ const initialState = {
   loading: false,
   currentViewId: -1,
   tableQuery: {
-    page_size: 5,
+    page_size: 12,
     page: 1,
   },
   dueInvoices: {},
@@ -25,7 +27,7 @@ const defaultInvoice = {
   entries: [],
 };
 
-const reducer = createReducer(initialState, {
+export default createReducer(initialState, {
   [t.INVOICE_SET]: (state, action) => {
     const { id, sale_invoice } = action.payload;
     const _invoice = state.items[id] || {};
@@ -82,28 +84,6 @@ const reducer = createReducer(initialState, {
     };
   },
 
-  [t.INVOICES_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.INVOICES_RECEIVABLE_BY_PAYMENT_ID]: (state, action) => {
     const { paymentReceiveId, saleInvoices } = action.payload;
     const saleInvoicesIds = saleInvoices.map((saleInvoice) => saleInvoice.id);
@@ -126,10 +106,10 @@ const reducer = createReducer(initialState, {
   },
 
   ...journalNumberChangedReducer(t.INVOICE_NUMBER_CHANGED),
+  ...viewPaginationSetReducer(t.INVOICES_PAGINATION_SET),
+  ...createTableQueryReducers('INVOICES'),
 });
 
-export default createTableQueryReducers('sales_invoices', reducer);
-
 export const getInvoiceById = (state, id) => {
   return state.sales_invoices.items[id];
 };

client/src/store/Invoice/invoices.selector.js

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import {
   pickItemsFromIds,
   paginationLocationQuery,
-  getItemById,
+  defaultPaginationMeta,
 } from 'store/selectors';
 
 const invoiceTableQuery = (state) => state.salesInvoices.tableQuery;
@@ -17,10 +17,15 @@ const invoicesPaginationSelector = (state, props) => {
 
 const invoicesPageSelector = (state, props, query) => {
   const viewId = state.salesInvoices.currentViewId;
-  return state.salesInvoices.views?.[viewId]?.pages?.[query.page];
+  const currentView = state.salesInvoices.views?.[viewId];
+  const currentPageId = currentView?.paginationMeta?.page;
+
+  return currentView?.pages?.[currentPageId];
 };
+
 const invoicesItemsSelector = (state) => state.salesInvoices.items;
-const invoicesReceiableCustomerSelector = (state, props) => state.salesInvoices.receivable.byCustomerId[props.customerId];
+const invoicesReceiableCustomerSelector = (state, props) =>
+  state.salesInvoices.receivable.byCustomerId[props.customerId];
 
 export const getInvoiceTableQueryFactory = () =>
   createSelector(
@@ -34,6 +39,7 @@ export const getInvoiceTableQueryFactory = () =>
     },
   );
 
+// Retrieve invoices of the current view and view.
 export const getInvoiceCurrentPageFactory = () =>
   createSelector(
     invoicesPageSelector,
@@ -45,24 +51,27 @@ export const getInvoiceCurrentPageFactory = () =>
     },
   );
 
+// Retrieve specific invoice by the passed invoice id.
 export const getInvoiecsByIdFactory = () =>
   createSelector(invoicesByIdSelector, (invoice) => {
     return invoice;
   });
 
+// Retrieve invoices pagination meta.
 export const getInvoicePaginationMetaFactory = () =>
   createSelector(invoicesPaginationSelector, (invoicePage) => {
-    return invoicePage?.paginationMeta || {};
+    return {
+      ...defaultPaginationMeta(),
+      ...(invoicePage?.paginationMeta || {}),
+    };
   });
 
-export const getCustomerReceivableInvoicesEntriesFactory = () => 
+export const getCustomerReceivableInvoicesEntriesFactory = () =>
   createSelector(
     invoicesItemsSelector,
     invoicesReceiableCustomerSelector,
     (invoicesItems, customerInvoicesIds) => {
-      const invoicesIds = [
-        ...(customerInvoicesIds || []),
-      ];
+      const invoicesIds = [...(customerInvoicesIds || [])];
       const invoices = pickItemsFromIds(invoicesItems, invoicesIds);
 
       return invoices.map((invoice) => ({
@@ -73,4 +82,4 @@ export const getCustomerReceivableInvoicesEntriesFactory = () =>
         payment_amount: 0,
       }));
     },
-  )
+  );

client/src/store/Invoice/invoices.types.js

@@ -4,7 +4,7 @@ export default {
   INVOICES_LIST_SET: 'INVOICES_LIST_SET',
   INVOICE_SET: 'INVOICE_SET',
   INVOICES_SET_CURRENT_VIEW: 'INVOICES_SET_CURRENT_VIEW',
-  INVOICES_TABLE_QUERIES_ADD: 'INVOICES_TABLE_QUERIES_ADD',
+  INVOICES_TABLE_QUERIES_ADD: 'INVOICES/TABLE_QUERIES_ADD',
   INVOICES_TABLE_LOADING: 'INVOICES_TABLE_LOADING',
   INVOICES_PAGINATION_SET: 'INVOICES_PAGINATION_SET',
   INVOICES_PAGE_SET: 'INVOICES_PAGE_SET',