feat: datatables pagination.

client/src/store/manualJournals/manualJournals.actions.js

@@ -138,7 +138,7 @@ export const fetchManualJournalsTable = ({ query } = {}) => {
             manual_journals: response.data.manual_journals,
           });
           dispatch({
-            type: 'MANUAL_JOURNALS_PAGINATION_SET',
+            type: t.MANUAL_JOURNALS_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
               customViewId:

client/src/store/manualJournals/manualJournals.reducers.js

@@ -1,8 +1,11 @@
 import t from 'store/types';
 import { createReducer } from '@reduxjs/toolkit';
-import { createTableQueryReducers } from 'store/queryReducers';
 import { omit } from 'lodash';
-import { journalNumberChangedReducer } from 'store/journalNumber.reducer';
+import {
+  journalNumberChangedReducer,
+  viewPaginationSetReducer,
+  createTableQueryReducers,
+} from 'store/journalNumber.reducer';
 
 const initialState = {
   items: {},
@@ -10,7 +13,7 @@ const initialState = {
   loading: false,
   currentViewId: -1,
   tableQuery: {
-    page_size: 6,
+    page_size: 12,
     page: 1,
   },
   paginationMeta: {
@@ -23,8 +26,7 @@ const defaultJournal = {
   entries: [],
 };
 
-const reducer = createReducer(initialState, {
-  
+export default createReducer(initialState, {
   [t.MANUAL_JOURNAL_SET]: (state, action) => {
     const { id, manualJournal } = action.payload;
     state.items[id] = { ...defaultJournal, ...manualJournal };
@@ -32,7 +34,7 @@ const reducer = createReducer(initialState, {
 
   [t.MANUAL_JOURNAL_PUBLISH]: (state, action) => {
     const { id } = action.payload;
-    const item = state.items[id] || {}
+    const item = state.items[id] || {};
 
     state.items[id] = { ...item, status: 1 };
   },
@@ -57,15 +59,15 @@ const reducer = createReducer(initialState, {
 
     const viewId = customViewId || -1;
     const view = state.views[viewId] || {};
- 
+
     state.views[viewId] = {
       ...view,
       pages: {
         ...(state.views?.[viewId]?.pages || {}),
         [pagination.page]: {
-          ids: (manualJournals.map((i) => i.id)),
+          ids: manualJournals.map((i) => i.id),
         },
-      }
+      },
     };
   },
 
@@ -95,34 +97,11 @@ const reducer = createReducer(initialState, {
     state.items = items;
   },
 
-  [t.MANUAL_JOURNALS_PAGINATION_SET]: (state, action) => {
-    const { pagination, customViewId } = action.payload;
-    const mapped = {
-      pageSize: parseInt(pagination.pageSize, 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,
-      },
-    };    
-  },
-
+  ...viewPaginationSetReducer(t.MANUAL_JOURNALS_PAGINATION_SET),
   ...journalNumberChangedReducer(t.MANUAL_JOURNAL_NUMBER_CHANGED),
+  ...createTableQueryReducers('MANUAL_JOURNALS'),
 });
 
-export default createTableQueryReducers('manual_journals', reducer);
-
 export const getManualJournal = (state, id) => {
   return state.manualJournals.items[id];
-}
+};

client/src/store/manualJournals/manualJournals.selectors.js

@@ -1,9 +1,12 @@
 import { createSelector } from 'reselect';
-import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
+import { pickItemsFromIds, paginationLocationQuery, defaultPaginationMeta } from 'store/selectors';
 
-const manualJournalsPageSelector = (state, props, query) => {
+const manualJournalsPageSelector = (state) => {
   const viewId = state.manualJournals.currentViewId;
-  return state.manualJournals.views?.[viewId]?.pages?.[query.page];
+  const currentView = state.manualJournals.views?.[viewId];
+  const currentPageId = currentView?.paginationMeta?.page;
+
+  return currentView?.pages?.[currentPageId];
 };
 
 const manualJournalsPaginationSelector = (state, props) => {
@@ -15,6 +18,7 @@ const manualJournalsTableQuery = (state) => state.manualJournals.tableQuery;
 const manualJournalsDataSelector = (state) => state.manualJournals.items;
 
 
+// Retrieve manual jounral current page results.
 export const getManualJournalsItems = createSelector(
   manualJournalsPageSelector,
   manualJournalsDataSelector,
@@ -25,13 +29,18 @@ export const getManualJournalsItems = createSelector(
   },
 );
 
+// Retrieve manual journals pagination meta.
 export const getManualJournalsPagination = createSelector(
   manualJournalsPaginationSelector,
   (manualJournalsPage) => {
-    return manualJournalsPage?.paginationMeta || {};
+    return {
+      ...defaultPaginationMeta(),
+      ...(manualJournalsPage?.paginationMeta || {}),
+    };
   },
 );
 
+// Retrieve manual jouranls table query.
 export const getManualJournalsTableQuery = createSelector(
   paginationLocationQuery,
   manualJournalsTableQuery,

client/src/store/manualJournals/manualJournals.types.js

@@ -6,7 +6,7 @@ export default {
   MANUAL_JOURNALS_PAGE_SET: 'MANUAL_JOURNALS_PAGE_SET',
   MANUAL_JOURNALS_ITEMS_SET: 'MANUAL_JOURNALS_ITEMS_SET',
   MANUAL_JOURNALS_SET_CURRENT_VIEW: 'MANUAL_JOURNALS_SET_CURRENT_VIEW',
-  MANUAL_JOURNALS_TABLE_QUERIES_ADD: 'MANUAL_JOURNALS_TABLE_QUERIES_ADD',
+  MANUAL_JOURNALS_TABLE_QUERIES_ADD: 'MANUAL_JOURNALS/TABLE_QUERIES_ADD',
   MANUAL_JOURNAL_REMOVE: 'MANUAL_JOURNAL_REMOVE',
 
   MANUAL_JOURNAL_PUBLISH: 'MANUAL_JOURNAL_PUBLISH',