- feat: Update react-query package to V 2.1.1.

- feat: Favicon setup.
- feat: Fix accounts inactivate/activate 1 account.
- feat: Seed accounts, expenses and manual journals resource fields.
- feat: Validate make journal receivable/payable without contact.
- feat: Validate make journal contact without receivable or payable.
- feat: More components abstractions.
- feat: Use reselect.js to memorize components properties.
- fix: Journal type of manual journal.
- fix: Sidebar style optimization.
- fix: Data-table check-box style optimization.
- fix: Data-table spinner style dimensions.
- fix: Submit journal with contact_id and contact_type.

client/src/store/expenses/expenses.actions.js

@@ -19,6 +19,7 @@ export const fetchExpensesTable = ({ query } = {}) => {
             type: t.EXPENSES_PAGE_SET,
             payload: {
               expenses: response.data.expenses.results,
+              pagination: response.data.expenses.pagination,
               customViewId: response.data.customViewId || -1,
             },            
           });
@@ -28,6 +29,13 @@ export const fetchExpensesTable = ({ query } = {}) => {
               expenses: response.data.expenses.results,
             }
           });
+          dispatch({
+            type: t.EXPENSES_PAGINATION_SET,
+            payload: {
+              pagination: response.data.expenses.pagination,
+              customViewId: response.data.customViewId || -1,
+            }
+          });
           dispatch({
             type: t.EXPENSES_TABLE_LOADING,
             payload: {

client/src/store/expenses/expenses.reducer.js

@@ -7,6 +7,10 @@ const initialState = {
   items: {},
   views: {},
   loading: false,
+  tableQuery: {
+    page_size: 4,
+    page: 1,
+  },
   currentViewId: -1,
 };
 
@@ -46,13 +50,42 @@ const reducer = createReducer(initialState, {
   },
 
   [t.EXPENSES_PAGE_SET]: (state, action) => {
-    const { customViewId, expenses } = action.payload;
+    const { customViewId, expenses, pagination } = action.payload;
+
     const viewId = customViewId || -1;
     const view = state.views[viewId] || {};
 
     state.views[viewId] = {
       ...view,
-      ids: expenses.map((i) => i.id),
+      pages: {
+        ...(state.views?.[viewId]?.pages || {}),
+        [pagination.page]: {
+          ids: expenses.map((i) => i.id),
+        },
+      },
+    };
+  },
+
+  [t.EXPENSES_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,
+      },
     };
   },
 

client/src/store/expenses/expenses.selectors.js

@@ -1,19 +1,53 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { pickItemsFromIds } from 'store/selectors';
+import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
 
-const expensesViewsSelector = state => state.expenses.views;
-const expensesItemsSelector = state => state.expenses.items;
-const expensesCurrentViewSelector = state => state.expenses.currentViewId;
+const expensesTableQuery = state => state.expenses.tableQuery;
 
-export const getExpensesItems = createSelector(
-  expensesViewsSelector,
+export const getExpensesTableQuery = createSelector(
+  paginationLocationQuery,
+  expensesTableQuery,
+  (locationQuery, tableQuery) => {
+    return {
+      ...locationQuery,
+      ...tableQuery,
+    };
+  },
+);
+
+const expensesPageSelector = (state, props, query) => {
+  const viewId = state.expenses.currentViewId;
+  return state.expenses.views?.[viewId]?.pages?.[query.page];
+};
+
+const expensesItemsSelector = (state) => state.expenses.items;
+
+export const getExpensesCurrentPageFactory = () => createSelector(
+  expensesPageSelector,
   expensesItemsSelector,
-  expensesCurrentViewSelector,
-  (expensesViews, expensesItems, currentViewId) => {
-    const expensesView = expensesViews[currentViewId || -1];
-
-    return (typeof expensesView === 'object')
-      ? (pickItemsFromIds(expensesItems, expensesView.ids) || [])
+  (expensesPage, expensesItems) => {
+    return typeof expensesPage === 'object'
+      ? pickItemsFromIds(expensesItems, expensesPage.ids) || []
       : [];
   },
 );
+
+const expenseByIdSelector = (state, props) => state.expenses.items[props.expenseId];
+
+export const getExpenseByIdFactory = () => createSelector(
+  expenseByIdSelector,
+  (expense) => {
+    return expense;
+  }  
+);
+
+const manualJournalsPaginationSelector = (state, props) => {
+  const viewId = state.expenses.currentViewId;
+  return state.expenses.views?.[viewId];
+};
+
+export const getExpensesPaginationMetaFactory = () => createSelector(
+  manualJournalsPaginationSelector,
+  (expensesPage) => {
+    return expensesPage?.paginationMeta || {};
+  },
+);

client/src/store/expenses/expenses.types.js

@@ -9,4 +9,5 @@ export default {
   EXPENSES_TABLE_LOADING: 'EXPENSES_TABLE_LOADING',
   EXPENSES_PAGE_SET: 'EXPENSES_PAGE_SET',
   EXPENSES_ITEMS_SET: 'EXPENSES_ITEMS_SET',
+  EXPENSES_PAGINATION_SET: 'EXPENSES_PAGINATION_SET',
 };