QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 14:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: datatables pagination.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-11-16 13:36:14 +02:00
parent 6d4b3164a8
commit 13dd14b9d4
76 changed files with 1160 additions and 1315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/store/PaymentMades/paymentMade.reducer.js
View File

@@ -1,6 +1,8 @@
import { createReducer } from '@reduxjs/toolkit';
import { createTableQueryReducers } from 'store/queryReducers';
import { omit } from 'lodash';
import {
createTableQueryReducers,
viewPaginationSetReducer,
} from 'store/journalNumber.reducer';
import t from 'store/types';
const initialState = {
@@ -9,7 +11,7 @@ const initialState = {
loading: false,
currentViewId: -1,
tableQuery: {
page_size: 5,
page_size: 12,
page: 1,
},
nextPaymentNumberChanged: false,
@@ -19,11 +21,12 @@ const defaultPaymentMade = {
entries: [],
};
const reducer = createReducer(initialState, {
export default createReducer(initialState, {
[t.PAYMENT_MADES_TABLE_LOADING]: (state, action) => {
const { loading } = action.payload;
state.loading = loading;
},
[t.PAYMENT_MADES_ITEMS_SET]: (state, action) => {
const { bill_payments } = action.payload;
const _bill_payments = {};
@@ -41,7 +44,7 @@ const reducer = createReducer(initialState, {
[t.PAYMENT_MADE_SET]: (state, action) => {
const { id, paymentMade } = action.payload;
const _oldPaymentMade = (state.items[id] || {});
const _oldPaymentMade = state.items[id] || {};
state.items[id] = {
...defaultPaymentMade,
@@ -58,28 +61,6 @@ const reducer = createReducer(initialState, {
}
},
[t.PAYMENT_MADES_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,
},
};
},
[t.PAYMENT_MADES_PAGE_SET]: (state, action) => {
const { customViewId, bill_payments, pagination } = action.payload;
@@ -97,10 +78,11 @@ const reducer = createReducer(initialState, {
};
},
[t.PAYMENT_MADES_NUMBER_CHANGED]:(state,action)=>{
[t.PAYMENT_MADES_NUMBER_CHANGED]: (state, action) => {
const { isChanged } = action.payload;
state.nextPaymentNumberChanged = isChanged
state.nextPaymentNumberChanged = isChanged;
},
}
...viewPaginationSetReducer(t.PAYMENT_MADES_PAGINATION_SET),
...createTableQueryReducers('PAYMENT_MADES'),
});
export default createTableQueryReducers('bill_payments', reducer);

62
client/src/store/PaymentMades/paymentMade.selector.js
View File

@@ -1,12 +1,19 @@
import { createSelector } from '@reduxjs/toolkit';
import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
import {
pickItemsFromIds,
paginationLocationQuery,
defaultPaginationMeta,
} from 'store/selectors';
import { transformToObject } from 'utils';
const paymentMadeTableQuery = (state) => state.paymentMades.tableQuery;
const paymentMadesPageSelector = (state, props, query) => {
const paymentMadesPageSelector = (state) => {
const viewId = state.paymentMades.currentViewId;
return state.paymentMades.views?.[viewId]?.pages?.[query.page];
const currentView = state.paymentMades.views?.[viewId];
const currentPageId = currentView?.paginationMeta?.page;
return currentView?.pages?.[currentPageId];
};
const paymentMadesItemsSelector = (state) => state.paymentMades.items;
@@ -16,12 +23,15 @@ const PaymentMadePaginationSelector = (state, props) => {
return state.paymentMades.views?.[viewId];
};
const paymentMadeById = (state, props) => state.paymentMades.items[props.paymentMadeId];
const paymentMadeById = (state, props) =>
state.paymentMades.items[props.paymentMadeId];
const paymentMadeEntries = (state, props) => props.paymentMadeEntries;
const billsItemsSelector = (state, props) => state.bills.items;
const billsPayableByPaymentMadeSelector = (state, props) => state.bills.payable.byBillPayamentId[props.paymentMadeId];
const paymentMadeBillsSelector = (state, props) => state.bills.byBillPayamentId[props.paymentMadeId];
const billsPayableByPaymentMadeSelector = (state, props) =>
state.bills.payable.byBillPayamentId[props.paymentMadeId];
const paymentMadeBillsSelector = (state, props) =>
state.bills.byBillPayamentId[props.paymentMadeId];
export const getPaymentMadeCurrentPageFactory = () =>
createSelector(
@@ -46,8 +56,11 @@ export const getPaymentMadeTableQuery = createSelector(
);
export const getPaymentMadePaginationMetaFactory = () =>
createSelector(PaymentMadePaginationSelector, (Page) => {
return Page?.paginationMeta || {};
createSelector(PaymentMadePaginationSelector, (page) => {
return {
...defaultPaginationMeta(),
...(page?.paginationMeta || {}),
};
});
export const getPaymentMadeByIdFactory = () =>
@@ -55,39 +68,40 @@ export const getPaymentMadeByIdFactory = () =>
return payment_Made;
});
export const getPaymentMadeEntriesDataFactory = () =>
export const getPaymentMadeEntriesDataFactory = () =>
createSelector(
billsItemsSelector,
paymentMadeEntries,
(billsItems, paymentEntries) => {
return Array.isArray(paymentEntries) ?
paymentEntries.map((entry) => ({
...entry, ...(billsItems[entry.bill_id] || {}),
})) : [];
}
return Array.isArray(paymentEntries)
? paymentEntries.map((entry) => ({
...entry,
...(billsItems[entry.bill_id] || {}),
}))
: [];
},
);
export const getPaymentMadeEntriesFactory = () =>
// Retrieve payment made entries.
export const getPaymentMadeEntriesFactory = () =>
createSelector(
billsItemsSelector,
billsPayableByPaymentMadeSelector,
paymentMadeBillsSelector,
paymentMadeById,
(
billsItems,
paymentPayableBillsIds,
paymentMadeBillsIds,
paymentMade,
) => {
(billsItems, paymentPayableBillsIds, paymentMadeBillsIds, paymentMade) => {
const billsIds = [
...(paymentPayableBillsIds || []),
...(paymentMadeBillsIds || []),
];
const bills = pickItemsFromIds(billsItems, billsIds);
const billEntries = transformToObject((paymentMade?.entries || []), 'bill_id');
const billEntries = transformToObject(
paymentMade?.entries || [],
'bill_id',
);
return bills.map((bill) => {
const paymentMadeEntry = (billEntries?.[bill.id] || {});
const paymentMadeEntry = billEntries?.[bill.id] || {};
return {
...bill,
@@ -98,4 +112,4 @@ export const getPaymentMadeEntriesFactory = () =>
};
});
},
);
);

2
client/src/store/PaymentMades/paymentMade.type.js
View File

@@ -3,7 +3,7 @@ export default {
PAYMENT_MADE_DELETE: 'PAYMENT_MADE_DELETE',
PAYMENT_MADE_SET: 'PAYMENT_MADE_SET',
PAYMENT_MADE_SET_CURRENT_VIEW: 'PAYMENT_MADE_SET_CURRENT_VIEW',
PAYMENT_MADE_TABLE_QUERIES_ADD: 'PAYMENT_MADE_TABLE_QUERIES_ADD',
PAYMENT_MADES_TABLE_QUERIES_ADD: 'PAYMENT_MADES/TABLE_QUERIES_ADD',
PAYMENT_MADES_TABLE_LOADING: 'PAYMENT_MADES_TABLE_LOADING',
PAYMENT_MADES_PAGE_SET: 'PAYMENT_MADES_PAGE_SET',
PAYMENT_MADES_ITEMS_SET: 'PAYMENT_MADES_ITEMS_SET',