feat: Pagination component.

This commit is contained in:
Ahmed Bouhuolia
2020-06-21 19:21:27 +02:00
parent 3e15cd42c8
commit 15bcd55979
19 changed files with 668 additions and 167 deletions

View File

@@ -7,7 +7,10 @@ const initialState = {
views: {},
accountsTypes: [],
accountsById: {},
tableQuery: {},
tableQuery: {
pageSize: 2,
page: 1,
},
currentViewId: -1,
selectedRows: [],
loading: false,
@@ -90,9 +93,4 @@ export default createTableQueryReducers('accounts', accountsReducer);
export const getAccountById = (state, id) => {
return state.accounts.accountsById[id];
};
// export default {
// // ...accountsReducer,
// // testReducer,
// }
};

View File

@@ -2,44 +2,55 @@ import ApiService from 'services/ApiService';
import t from 'store/types';
export const makeJournalEntries = ({ form }) => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.post('accounting/make-journal-entries', form).then((response) => {
resolve(response);
}).catch((error) => {
const { response } = error;
const { data } = response;
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.post('accounting/make-journal-entries', form)
.then((response) => {
resolve(response);
})
.catch((error) => {
const { response } = error;
const { data } = response;
reject(data?.errors);
reject(data?.errors);
});
});
});
};
export const fetchManualJournal = ({ id }) => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.get(`accounting/manual-journals/${id}`).then((response) => {
dispatch({
type: t.MANUAL_JOURNAL_SET,
payload: {
id,
manualJournal: response.data.manual_journal,
},
});
resolve(response);
}).catch((error) => { reject(error); });
});
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.get(`accounting/manual-journals/${id}`)
.then((response) => {
dispatch({
type: t.MANUAL_JOURNAL_SET,
payload: {
id,
manualJournal: response.data.manual_journal,
},
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const editManualJournal = ({ form, id }) => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.post(`accounting/manual-journals/${id}`, form).then((response) => {
resolve(response);
}).catch((error) => {
const { response } = error;
const { data } = response;
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.post(`accounting/manual-journals/${id}`, form)
.then((response) => {
resolve(response);
})
.catch((error) => {
const { response } = error;
const { data } = response;
reject(data?.errors);
reject(data?.errors);
});
});
});
};
export const deleteManualJournal = ({ id }) => {
@@ -53,24 +64,27 @@ export const deleteManualJournal = ({ id }) => {
});
resolve(response);
})
.catch((error) => { reject(error); });
.catch((error) => {
reject(error);
});
});
};
export const deleteBulkManualJournals = ({ ids }) => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.delete('accounting/manual-journals', { params: { ids } })
.then((response) => {
dispatch({
type: t.MANUAL_JOURNALS_BULK_DELETE,
payload: { ids },
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.delete('accounting/manual-journals', { params: { ids } })
.then((response) => {
dispatch({
type: t.MANUAL_JOURNALS_BULK_DELETE,
payload: { ids },
});
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
resolve(response);
}).catch((error) => {
reject(error.response.data.errors || []);
});
});
});
};
export const publishManualJournal = ({ id }) => {
@@ -84,40 +98,44 @@ export const publishManualJournal = ({ id }) => {
});
resolve(response);
})
.catch((error) => { reject(error); });
.catch((error) => {
reject(error);
});
});
}
};
export const fetchManualJournalsTable = ({ query } = {}) => {
return (dispatch, getState) =>
new Promise((resolve, reject) => {
const pageQuery = getState().manualJournals.tableQuery;
dispatch({
type: t.SET_DASHBOARD_REQUEST_LOADING,
});
dispatch({
type: t.MANUAL_JOURNALS_TABLE_LOADING,
loading: true,
});
ApiService.get('accounting/manual-journals', {
params: { ...pageQuery, ...query },
params: { ...query },
})
.then((response) => {
dispatch({
type: t.MANUAL_JOURNALS_PAGE_SET,
manual_journals: response.data.manualJournals.results,
customViewId: response.data.customViewId || -1,
payload: {
manualJournals: response.data.manualJournals.results,
customViewId: response.data.customViewId || -1,
pagination: response.data.manualJournals.pagination,
}
});
dispatch({
type: t.MANUAL_JOURNALS_ITEMS_SET,
manual_journals: response.data.manualJournals.results,
});
dispatch({
type: t.MANUAL_JOURNALS_TABLE_LOADING,
loading: false,
type: 'MANUAL_JOURNALS_PAGINATION_SET',
payload: {
pagination: response.data.manualJournals.pagination,
},
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
type: t.MANUAL_JOURNALS_TABLE_LOADING,
loading: false,
});
resolve(response);
})

View File

@@ -8,7 +8,13 @@ const initialState = {
views: {},
loading: false,
currentViewId: -1,
tableQuery: {},
tableQuery: {
page_size: 6,
page: 1,
},
paginationMeta: {
total: 0,
}
};
const defaultJournal = {
@@ -45,12 +51,19 @@ const reducer = createReducer(initialState, {
},
[t.MANUAL_JOURNALS_PAGE_SET]: (state, action) => {
const viewId = action.customViewId || -1;
const view = state.views[viewId] || {};
const { customViewId, manualJournals, pagination } = action.payload;
const viewId = customViewId || -1;
const view = state.views[viewId] || {};
state.views[viewId] = {
...view,
ids: action.manual_journals.map((i) => i.id),
pages: {
...(state.views?.[viewId]?.pages || {}),
[pagination.page]: {
ids: (manualJournals.map((i) => i.id)),
},
}
};
},
@@ -78,6 +91,22 @@ const reducer = createReducer(initialState, {
});
state.items = items;
},
[t.MANUAL_JOURNALS_PAGINATION_SET]: (state, action) => {
const { pagination } = action.payload;
const mapped = {
pageSize: parseInt(pagination.pageSize, 10),
page: parseInt(pagination.page, 10),
total: parseInt(pagination.total, 10),
};
state.paginationMeta = {
...state.paginationMeta,
...mapped,
pagesCount: Math.ceil(mapped.total / mapped.pageSize),
pageIndex: Math.max(mapped.page - 1, 0),
};
}
});
export default createTableQueryReducers('manual_journals', reducer);

View File

@@ -1,10 +1,11 @@
import { pickItemsFromIds } from 'store/selectors';
export const getManualJournalsItems = (state, viewId) => {
const accountsView = state.manualJournals.views[viewId || -1];
export const getManualJournalsItems = (state, viewId, pageNumber) => {
const accountsViewPages = state.manualJournals.views[viewId || -1];
const accountsView = accountsViewPages?.pages?.[pageNumber]?.ids || {};
const accountsItems = state.manualJournals.items;
return typeof accountsView === 'object'
? pickItemsFromIds(accountsItems, accountsView.ids) || []
? pickItemsFromIds(accountsItems, accountsView) || []
: [];
};

View File

@@ -11,4 +11,5 @@ export default {
MANUAL_JOURNAL_PUBLISH: 'MANUAL_JOURNAL_PUBLISH',
MANUAL_JOURNALS_BULK_DELETE: 'MANUAL_JOURNALS_BULK_DELETE',
MANUAL_JOURNALS_PAGINATION_SET: 'MANUAL_JOURNALS_PAGINATION_SET',
};