feat: fix items list datatable.

This commit is contained in:
a.bouhuolia
2021-02-08 13:17:11 +02:00
parent adac2386bb
commit 304f0c9ae5
43 changed files with 777 additions and 835 deletions

View File

@@ -1,139 +0,0 @@
import ApiService from 'services/ApiService';
import t from 'store/types';
export const submitItem = ({ form }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.post('items', form)
.then((response) => {
resolve(response);
})
.catch((error) => {
const { response } = error;
const { data } = response;
reject(data?.errors);
});
});
};
export const editItem = (id, form) => {
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.post(`items/${id}`, form)
.then((response) => {
resolve(response);
})
.catch((error) => {
const { response } = error;
const { data } = response;
reject(data?.errors);
});
});
};
export const fetchItems = ({ query }) => {
return (dispatch, getState) =>
new Promise((resolve, reject) => {
let pageQuery = getState().items.tableQuery;
dispatch({
type: t.ITEMS_TABLE_LOADING,
payload: { loading: true },
});
ApiService.get(`items`, { params: { ...pageQuery, ...query } })
.then((response) => {
dispatch({
type: t.ITEMS_SET,
items: response.data.items,
});
dispatch({
type: t.ITEMS_PAGE_SET,
items: response.data.items,
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
paginationMeta: response.data.pagination,
});
dispatch({
type: t.ITEMS_PAGINATION_SET,
payload: {
pagination: response.data.pagination,
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
},
});
dispatch({
type: t.ITEMS_TABLE_LOADING,
payload: { loading: false },
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const fetchItem = ({ id }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.get(`items/${id}`)
.then((response) => {
dispatch({
type: t.ITEM_SET,
payload: {
id,
item: response.data.item,
},
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const deleteItem = ({ id }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.delete(`items/${id}`)
.then((response) => {
dispatch({
type: t.ITEM_DELETE,
payload: { id },
});
resolve(response);
})
.catch((error) => {
reject(error?.response?.data);
});
});
};
export const deleteBulkItems = ({ ids }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.delete('items', { params: { ids } })
.then((response) => {
dispatch({
type: t.ITEMS_BULK_DELETE,
payload: { ids },
});
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
});
};
export const activateItem = ({ id }) => {
return (dispatch) => ApiService.post(`items/${id}/activate`);
};
export const inactiveItem = ({ id }) => {
return (dispatch) => ApiService.post(`items/${id}/inactivate`);
};

View File

@@ -1,111 +1,16 @@
import t from 'store/types';
import { createReducer } from '@reduxjs/toolkit';
import { getItemsViewPages } from 'store/items/items.selectors';
import {
viewPaginationSetReducer,
createTableQueryReducers,
} from 'store/journalNumber.reducer';
const initialState = {
items: {},
views: {},
itemsRelation: {},
currentPage: 1,
currentViewId: -1,
bulkActions: {},
loading: false,
tableQuery: {
page_size: 12,
pageSize: 12,
page: 1,
},
selectedRows: [],
};
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.ITEM_SET]: (state, action) => {
const { id, item } = action.payload;
state.items[id] = { ...item };
},
[t.ITEMS_PAGE_SET]: (state, action) => {
const { items, customViewId, paginationMeta } = action;
const viewId = customViewId || -1;
const view = state.views[viewId] || {};
state.views[viewId] = {
...view,
pages: {
...(state.views?.[viewId]?.pages || {}),
[paginationMeta.page]: {
ids: items.map((item) => item.id),
},
},
};
},
[t.ITEM_BULK_ACTION_ADD]: (state, action) => {
state.bulkActions[action.itemId] = true;
},
[t.ITEM_SELECTED_ROWS_SET]: (state, action) => {
const { selectedRows } = action.payload;
state.selectedRows = selectedRows;
},
[t.ITEM_BULK_ACTION_REMOVE]: (state, action) => {
delete state.bulkActions[action.itemId];
},
[t.ITEM_DELETE]: (state, action) => {
const { id } = action.payload;
const items = { ...state.items };
if (items[id]) {
const item = items[id];
delete items[id];
state.items = items;
}
},
[t.ITEMS_TABLE_LOADING]: (state, action) => {
const { loading } = action.payload;
state.loading = !!loading;
},
[t.ITEMS_SET_CURRENT_VIEW]: (state, action) => {
state.currentViewId = action.currentViewId;
},
[t.ITEMS_BULK_DELETE]: (state, action) => {
const { ids } = action.payload;
const items = { ...state.items };
ids.forEach((id) => {
if (typeof items[id] !== 'undefined') {
delete items[id];
}
});
state.items = items;
},
...viewPaginationSetReducer(t.ITEMS_PAGINATION_SET),
...createTableQueryReducers('ITEMS'),
});
export const getItemById = (state, id) => {
return state.items.items[id];
};
});

View File

@@ -1,28 +1,11 @@
import { paginationLocationQuery } from 'store/selectors';
import { createSelector } from 'reselect';
import { pickItemsFromIds, defaultPaginationMeta } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
const itemsTableQuerySelector = (state) => state.items.tableQuery;
const itemsCurrentPageSelector = (state, props) => {
const currentViewId = state.items.currentViewId;
const currentView = state.items.views?.[currentViewId];
const currentPageId = currentView?.paginationMeta?.page;
return currentView?.pages?.[currentPageId];
};
const itemsDataSelector = (state) => state.items.items;
const itemsPaginationSelector = (state, props) => {
const viewId = state.items.currentViewId;
return state.items.views?.[viewId]?.paginationMeta;
};
const itemsCurrentViewIdSelector = (state) => {
return state.items.currentViewId;
};
// Get items table query marged with location query.
export const getItemsTableQueryFactory = () =>
createSelector(
createDeepEqualSelector(
paginationLocationQuery,
itemsTableQuerySelector,
(locationQuery, tableQuery) => {
@@ -32,30 +15,3 @@ export const getItemsTableQueryFactory = () =>
};
},
);
// Retrieve items current page and view.
export const getItemsCurrentPageFactory = () =>
createSelector(
itemsDataSelector,
itemsCurrentPageSelector,
(items, itemsIdsCurrentPage) => {
return typeof itemsIdsCurrentPage === 'object'
? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
: [];
},
);
// Retrieve items pagination meta.
export const getItemsPaginationMetaFactory = () =>
createSelector(itemsPaginationSelector, (itemsPagination) => {
return {
...defaultPaginationMeta(),
...itemsPagination,
};
});
// Retrieve items current view id.
export const getItemsCurrentViewIdFactory = () =>
createSelector(itemsCurrentViewIdSelector, (currentViewId) => {
return currentViewId;
});

View File

@@ -40,7 +40,7 @@ export const paginationLocationQuery = (state, props) => {
? new URLSearchParams(props.location.search)
: null;
const queryParamsKeys = ['page_size', 'page'];
const queryParamsKeys = ['page_size', 'page', 'custom_view_id'];
return queryParams
? mapValues(pick(Object.fromEntries(queryParams), queryParamsKeys), (v) =>