feat: Items data table.

client/src/store/customViews/customViews.selectors.js

@@ -12,4 +12,9 @@ export const getViewMeta = (state, viewId) => {
 
 export const getViewItem = (state, viewId) => {
   return state.views.views[viewId] || {};
+};
+
+export const getViewPages = (resourceViews, viewId) => {
+  return (typeof resourceViews[viewId] === 'undefined') ? 
+    {} : resourceViews[viewId].pages;
 };

client/src/store/items/items.actions.js

@@ -11,10 +11,16 @@ export const editItem = ({ id, form }) => {
 
 export const fetchItems = ({ query }) => {
   return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.get(`items`, query).then(response => {
+    ApiService.get(`items`).then(response => {    
       dispatch({
-        type: t.ITEMS_LIST_SET,
-        items: response.data.items,
+        type: t.ITEMS_SET,
+        items: response.data.items.results,
+      });
+      dispatch({
+        type: t.ITEMS_PAGE_SET,
+        items: response.data.items.results,
+        customViewId: response.data.customViewId,
+        paginationMeta: response.data.items.pagination,
       });
       resolve(response);
     }).catch(error => { reject(error); });

client/src/store/items/items.reducer.js

@@ -1,6 +1,92 @@
+import t from 'store/types';
+import { createReducer } from '@reduxjs/toolkit';
+import {
+  getItemsViewPages,
+} from 'store/items/items.selectors';
 
 const initialState = {
-  list: [],
-  itemById: {},
+  items: {},
+  views: {},
+  itemsRelation: {},
+  currentPage: 1,
+  currentViewId: -1,
+  bulkActions: {},
 };
 
+export default createReducer(initialState, {
+  [t.ITEMS_SET]: (state, action) => {
+    const _items = {};
+
+    action.items.forEach(item => {
+      _items[item.id] = item;
+    });
+    state.items = {
+      ...state.items,
+      ..._items,
+    };
+  },
+
+  [t.ITEMS_PAGE_SET]: (state, action) => {
+    const { items, customViewId, paginationMeta } = action;
+
+    const viewId = customViewId || -1;
+    const view = state.views[viewId] || {};
+    const viewPages = getItemsViewPages(state.views, viewId);
+
+    items.forEach((item) => {
+      const stateItem = state.items[item.id];
+      const itemRelation = state.itemsRelation[stateItem.id];
+
+      if (typeof itemRelation === 'undefined') {
+        state.itemsRelation[item.id] = [];
+      }
+      const filteredRelation = state.itemsRelation[item.id]
+        .filter((relation) => (
+          relation.viewId === viewId &&
+          relation.pageNumber === paginationMeta.page
+        ));
+
+      filteredRelation.push({
+        viewId,
+        pageNumber: paginationMeta.page,
+      });
+      state.itemsRelation[item.id] = filteredRelation;
+    });
+
+    state.views[viewId] = {
+      ...view,
+      pages: {
+        ...viewPages,
+        [paginationMeta.page]: {
+          ids: items.map(i => i.id),
+          meta: paginationMeta,
+        },
+      },      
+    };
+  },
+
+  [t.ITEM_BULK_ACTION_ADD]: (state, action) => {
+    state.bulkActions[action.itemId] = true;
+  },
+
+  [t.ITEM_BULK_ACTION_REMOVE]: (state, action) => {
+    delete state.bulkActions[action.itemId];
+  },
+
+  [t.ITEM_DELETE]: (state, action) => {
+    const { itemId } = action;
+
+    if (state.items[itemId]) {
+      const item = state.items[itemId];
+      const itemPageNumber = item._page_number;
+
+      delete state.items[itemId];
+
+    }
+
+  },
+});
+
+export const getItemById = (state, id) => {
+  return state.items.items[id];
+};

client/src/store/items/items.selectors.js

@@ -0,0 +1,7 @@
+
+
+
+export const getItemsViewPages = (itemsViews, viewId) => {
+  return itemsViews[viewId] ? 
+    itemsViews[viewId].pages : {};
+};

client/src/store/items/items.types.js

@@ -0,0 +1,9 @@
+
+
+export default {
+  ITEMS_SET: 'ITEMS_SET',
+  ITEMS_PAGE_SET: 'ITEMS_PAGE_SET',
+  ITEM_DELETE: 'ITEM_DELETE',
+  ITEM_BULK_ACTION_ADD: 'ITEM_BULK_ACTION_ADD',
+  ITEM_BULK_ACTION_REMOVE: 'ITEM_BULK_ACTION_REMOVE',
+}

client/src/store/paginator.reducer.js

@@ -0,0 +1,27 @@
+const pages = (pages, action) => {
+  const { type, items, meta } = action;
+
+  switch(type) {
+    case REQUEST_PAGE: 
+      return {
+        ...pages,
+        [meta.currentPage]: {
+          ...pages[meta.currentPage],
+          ids: [],
+          fetching: true,
+        },
+      };
+    case RECEIVE_PAGE: 
+      return {
+        ...pages,
+        [meta.currentPage]: {
+          ...pages[meta.currentPage],
+          ids: items.map(i => i.id),
+          fetching: false,
+        },
+      };
+  }
+};
+
+
+

client/src/store/reducers.js

@@ -5,6 +5,7 @@ import dashboard from './dashboard/dashboard.reducer';
 import users from './users/users.reducer';
 import accounts from './accounts/accounts.reducer';
 import fields from './customFields/customFields.reducer';
+import items from './items/items.reducer';
 import views from './customViews/customViews.reducer';
 import expenses from './expenses/expenses.reducer';
 import currencies from './currencies/currencies.reducer';
@@ -22,4 +23,5 @@ export default combineReducers({
   currencies,
   resources,
   financialStatements,
+  items,
 });

client/src/store/selectors.js

@@ -4,9 +4,10 @@ export const pickItemsFromIds = (items, ids) => {
   return Object.values(pick(items, ids));
 }
 
-export const getCurrentPageResults = (items, page, name) => {
-  const currentPage = page.pages[page.currentPages[name]]
-  return typeof currentPage == 'undefined' ? [] : Object.values(pick(items || [], currentPage.ids))
+export const getCurrentPageResults = (items, pages, pageNumber) => {
+  const currentPage = pages[pageNumber]
+  return typeof currentPage == 'undefined' ?
+    [] : Object.values(pick(items || [], currentPage.ids));
 }
 
 export const getCurrentTotalResultsCount = (pagination, name) => {