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

fix: toggle display filter drawer of financial statements.

Browse Source
This commit is contained in:
a.bouhuolia
2021-02-22 15:38:17 +02:00
parent 1e3b8df702
commit 2750d64fac
49 changed files with 716 additions and 1075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/DataTableCells/InputGroupCell.js
View File

@@ -25,11 +25,7 @@ const InputEditableCell = ({
return (
<FormGroup
intent={error ? Intent.DANGER : null}
className={classNames(
'form-group--select-list',
'form-group--account',
Classes.FILL,
)}
className={classNames(Classes.FILL)}
>
<InputGroup
value={value}

43
client/src/components/DataTableCells/NumericInputCell.js Normal file
View File

@@ -0,0 +1,43 @@
import React, { useState, useEffect } from 'react';
import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
/**
* Numeric input table cell.
*/
export default function NumericInputCell({
row: { index },
column: { id },
cell: { value: initialValue },
payload,
}) {
const [value, setValue] = useState(initialValue);
const handleValueChange = (newValue) => {
setValue(newValue);
};
const onBlur = () => {
payload.updateData(index, id, value);
};
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
const error = payload.errors?.[index]?.[id];
return (
<FormGroup
intent={error ? Intent.DANGER : null}
className={classNames(CLASSES.FILL)}
>
<NumericInput
value={value}
onValueChange={handleValueChange}
onBlur={onBlur}
fill={true}
buttonPosition={"none"}
/>
</FormGroup>
);
}

2
client/src/components/DataTableCells/index.js
View File

@@ -5,6 +5,7 @@ import ContactsListFieldCell from './ContactsListFieldCell';
import ItemsListCell from './ItemsListCell';
import PercentFieldCell from './PercentFieldCell';
import { DivFieldCell, EmptyDiv } from './DivFieldCell';
import NumericInputCell from './NumericInputCell';
export {
AccountsListFieldCell,
@@ -15,4 +16,5 @@ export {
PercentFieldCell,
DivFieldCell,
EmptyDiv,
NumericInputCell
};

2
client/src/containers/Entries/ItemsEntriesTable.js
View File

@@ -51,8 +51,8 @@ function ItemsEntriesTable({
const handleUpdateData = useCallback(
(rowIndex, columnId, value) => {
const newRows = compose(
updateTableRow(rowIndex, columnId, value),
updateItemsEntriesTotal,
updateTableRow(rowIndex, columnId, value),
)(entries);
setRows(newRows);

12
client/src/containers/Entries/components.js
View File

@@ -9,6 +9,7 @@ import {
MoneyFieldCell,
ItemsListCell,
PercentFieldCell,
NumericInputCell
} from 'components/DataTableCells';
/**
@@ -62,7 +63,7 @@ export function ActionsCellRenderer({
*/
export function QuantityTotalFooterCell({ rows }) {
const quantity = sumBy(rows, r => parseInt(r.original.quantity, 10));
return <span>{ formattedAmount(quantity, 'USD') }</span>;
return <span>{ quantity }</span>;
}
/**
@@ -80,6 +81,11 @@ export function TotalCell({ value }) {
return <span>{ formattedAmount(value, 'USD', { noZero: true }) }</span>;
}
// Index table cell.
export function IndexTableCell({ row: { index } }){
return (<span>{index + 1}</span>);
}
/**
* Retrieve editable items entries columns.
*/
@@ -91,7 +97,7 @@ export function useEditableItemsEntriesColumns() {
{
Header: '#',
accessor: 'index',
Cell: ({ row: { index } }) => <span>{index + 1}</span>,
Cell: IndexTableCell,
width: 40,
disableResizing: true,
disableSortBy: true,
@@ -119,7 +125,7 @@ export function useEditableItemsEntriesColumns() {
{
Header: formatMessage({ id: 'quantity' }),
accessor: 'quantity',
Cell: InputGroupCell,
Cell: NumericInputCell,
Footer: QuantityTotalFooterCell,
disableSortBy: true,
width: 80,

12
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useCallback } from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/ARAgingSummary.scss';
@@ -11,6 +11,7 @@ import ARAgingSummaryTable from './ARAgingSummaryTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
import withARAgingSummaryActions from './withARAgingSummaryActions'
import withSettings from 'containers/Settings/withSettings';
import { compose } from 'utils';
@@ -21,6 +22,9 @@ import { compose } from 'utils';
function ReceivableAgingSummarySheet({
// #withSettings
organizationName,
// #withARAgingSummaryActions
toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer
}) {
const [filter, setFilter] = useState({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
@@ -42,6 +46,11 @@ function ReceivableAgingSummarySheet({
setFilter({ ...filter, numberFormat });
};
// Hide the filter drawer once the page unmount.
useEffect(() => () => {
toggleDisplayFilterDrawer(false);
}, [toggleDisplayFilterDrawer]);
return (
<ARAgingSummaryProvider filter={filter}>
<ARAgingSummaryActionsBar
@@ -67,4 +76,5 @@ export default compose(
withSettings(({ organizationSettings }) => ({
organizationName: organizationSettings.name,
})),
withARAgingSummaryActions
)(ReceivableAgingSummarySheet);

17
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
View File

@@ -17,6 +17,7 @@ import NumberFormatDropdown from 'components/NumberFormatDropdown';
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
import withARAgingSummaryActions from './withARAgingSummaryActions';
import withARAgingSummary from './withARAgingSummary';
import { compose } from 'utils';
import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
@@ -26,10 +27,10 @@ import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
*/
function ARAgingSummaryActionsBar({
// #withReceivableAging
receivableAgingFilter,
isFilterDrawerOpen,
// #withReceivableAgingActions
toggleFilterARAgingSummary,
toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
// #ownProps
numberFormat,
@@ -38,16 +39,19 @@ function ARAgingSummaryActionsBar({
const { isARAgingFetching, refetch } = useARAgingSummaryContext();
const handleFilterToggleClick = () => {
toggleFilterARAgingSummary();
toggleDisplayFilterDrawer(false);
};
// Handles re-calculate report button.
const handleRecalcReport = () => {
refetch();
};
// Handle number format submit.
const handleNumberFormatSubmit = (numberFormat) => {
safeInvoke(onNumberFormatSubmit, numberFormat);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -63,14 +67,14 @@ function ARAgingSummaryActionsBar({
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
receivableAgingFilter ? (
isFilterDrawerOpen ? (
<T id="hide_customizer" />
) : (
<T id={'customize_report'} />
)
}
onClick={handleFilterToggleClick}
active={receivableAgingFilter}
active={isFilterDrawerOpen}
/>
<NavbarDivider />
@@ -117,4 +121,7 @@ function ARAgingSummaryActionsBar({
export default compose(
withARAgingSummaryActions,
withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
}))
)(ARAgingSummaryActionsBar);

17
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
View File

@@ -20,10 +20,12 @@ function ARAgingSummaryHeader({
// #ownProps
pageFilter,
onSubmitFilter,
receivableAgingFilter,
// #withReceivableAgingSummaryActions
toggleFilterARAgingSummary,
toggleARAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
// #withARAgingSummary
isFilterDrawerOpen
}) {
const validationSchema = Yup.object().shape({
asDate: Yup.date().required().label('asDate'),
@@ -44,19 +46,20 @@ function ARAgingSummaryHeader({
agingDaysBefore: 30,
agingPeriods: 3,
};
// Handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
toggleFilterARAgingSummary();
toggleFilterDrawerDisplay(false);
setSubmitting(false);
};
// Handle cancel button click.
const handleCancelClick = () => {
toggleFilterARAgingSummary();
toggleFilterDrawerDisplay(false);
};
return (
<FinancialStatementHeader isOpen={receivableAgingFilter}>
<FinancialStatementHeader isOpen={isFilterDrawerOpen}>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
@@ -87,7 +90,7 @@ function ARAgingSummaryHeader({
export default compose(
withARAgingSummaryActions,
withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
receivableAgingFilter: receivableAgingSummaryFilter,
withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
})),
)(ARAgingSummaryHeader);

26
client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js
View File

@@ -1,34 +1,12 @@
import { connect } from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetAccountsFactory,
getFinancialSheetColumnsFactory,
getFinancialSheetQueryFactory,
getFinancialSheetTableRowsFactory,
getARAgingSummaryFilterDrawer,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getARAgingSheet = getFinancialSheetFactory('receivableAgingSummary');
const getARAgingSheetColumns = getFinancialSheetColumnsFactory(
'receivableAgingSummary',
);
const getARAgingSheetRows = getFinancialSheetTableRowsFactory(
'receivableAgingSummary',
);
const {
loading,
filter,
refresh,
} = state.financialStatements.receivableAgingSummary;
const mapped = {
receivableAgingSummarySheet: getARAgingSheet(state, props),
receivableAgingSummaryColumns: getARAgingSheetColumns(state, props),
receivableAgingSummaryRows: getARAgingSheetRows(state, props),
receivableAgingSummaryLoading: loading,
receivableAgingSummaryFilter: filter,
ARAgingSummaryRefresh: refresh,
ARAgingSummaryFilterDrawer: getARAgingSummaryFilterDrawer(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};

15
client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.js
View File

@@ -1,18 +1,9 @@
import { connect } from 'react-redux';
import {
fetchReceivableAgingSummary,
receivableAgingSummaryRefresh,
} from 'store/financialStatement/financialStatements.actions';
import { toggleARAgingSummaryFilterDrawer } from 'store/financialStatement/financialStatements.actions';
const mapActionsToProps = (dispatch) => ({
requestReceivableAgingSummary: (query) =>
dispatch(fetchReceivableAgingSummary({ query })),
toggleFilterARAgingSummary: () =>
dispatch({
type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
}),
refreshARAgingSummary: (refresh) =>
dispatch(receivableAgingSummaryRefresh(refresh)),
toggleARAgingSummaryFilterDrawer: (toggle) =>
dispatch(toggleARAgingSummaryFilterDrawer(toggle)),
});
export default connect(null, mapActionsToProps);

14
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/BalanceSheet.scss';
@@ -10,6 +10,7 @@ import BalanceSheetActionsBar from './BalanceSheetActionsBar';
import { FinancialStatement } from 'components';
import withBalanceSheetActions from './withBalanceSheetActions';
import withSettings from 'containers/Settings/withSettings';
import { BalanceSheetProvider } from './BalanceSheetProvider';
@@ -21,6 +22,9 @@ import { compose } from 'utils';
function BalanceSheet({
// #withPreferences
organizationName,
// #withBalanceSheetActions
toggleBalanceSheetFilterDrawer
}) {
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -40,7 +44,7 @@ function BalanceSheet({
setFilter({ ..._filter });
};
// Hnadle number format submit.
// Handle number format submit.
const handleNumberFormatSubmit = (values) => {
setFilter({
...filter,
@@ -48,6 +52,11 @@ function BalanceSheet({
});
};
// Hides the balance sheet filter drawer once the page unmount.
useEffect(() => () => {
toggleBalanceSheetFilterDrawer(false);
}, [toggleBalanceSheetFilterDrawer])
return (
<BalanceSheetProvider filter={filter}>
<BalanceSheetActionsBar
@@ -73,4 +82,5 @@ export default compose(
withSettings(({ organizationSettings }) => ({
organizationName: organizationSettings.name,
})),
withBalanceSheetActions,
)(BalanceSheet);

21
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import {
NavbarGroup,
Button,
@@ -16,16 +16,16 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import { compose, saveInvoke } from 'utils';
import withBalanceSheetDetail from './withBalanceSheetDetail';
import withBalanceSheet from './withBalanceSheet';
import withBalanceSheetActions from './withBalanceSheetActions';
import { useBalanceSheetContext } from './BalanceSheetProvider';
function BalanceSheetActionsBar({
// #withBalanceSheetDetail
balanceSheetFilter,
// #withBalanceSheet
balanceSheetDrawerFilter,
// #withBalanceSheetActions
toggleBalanceSheetFilter,
toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
// #ownProps
numberFormat,
@@ -35,7 +35,7 @@ function BalanceSheetActionsBar({
// Handle filter toggle click.
const handleFilterToggleClick = () => {
toggleBalanceSheetFilter();
toggleFilterDrawer();
};
// Handle recalculate the report button.
@@ -63,14 +63,14 @@ function BalanceSheetActionsBar({
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
!balanceSheetFilter ? (
!balanceSheetDrawerFilter ? (
<T id={'customize_report'} />
) : (
<T id={'hide_customizer'} />
)
}
onClick={handleFilterToggleClick}
active={balanceSheetFilter}
active={balanceSheetDrawerFilter}
/>
<NavbarDivider />
@@ -123,9 +123,6 @@ function BalanceSheetActionsBar({
}
export default compose(
withBalanceSheetDetail(({ balanceSheetFilter, balanceSheetLoading }) => ({
balanceSheetFilter,
balanceSheetLoading,
})),
withBalanceSheet(({ balanceSheetDrawerFilter }) => ({ balanceSheetDrawerFilter })),
withBalanceSheetActions,
)(BalanceSheetActionsBar);

19
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
View File

@@ -7,7 +7,7 @@ import { Formik, Form } from 'formik';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import withBalanceSheet from './withBalanceSheetDetail';
import withBalanceSheet from './withBalanceSheet';
import withBalanceSheetActions from './withBalanceSheetActions';
import { compose } from 'utils';
@@ -19,10 +19,10 @@ function BalanceSheetHeader({
pageFilter,
// #withBalanceSheet
balanceSheetFilter,
balanceSheetDrawerFilter,
// #withBalanceSheetActions
toggleBalanceSheetFilter,
toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
}) {
const { formatMessage } = useIntl();
@@ -51,22 +51,23 @@ function BalanceSheetHeader({
// Handle form submit.
const handleSubmit = (values, actions) => {
onSubmitFilter(values);
toggleBalanceSheetFilter();
toggleFilterDrawer(false);
actions.setSubmitting(false);
};
// Handle cancel button click.
const handleCancelClick = () => {
toggleBalanceSheetFilter();
toggleFilterDrawer(false);
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleBalanceSheetFilter();
toggleFilterDrawer(false);
};
return (
<FinancialStatementHeader
isOpen={balanceSheetFilter}
isOpen={balanceSheetDrawerFilter}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
@@ -98,8 +99,8 @@ function BalanceSheetHeader({
}
export default compose(
withBalanceSheet(({ balanceSheetFilter }) => ({
balanceSheetFilter,
withBalanceSheet(({ balanceSheetDrawerFilter }) => ({
balanceSheetDrawerFilter,
})),
withBalanceSheetActions,
)(BalanceSheetHeader);

13
client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheet.js Normal file
View File

@@ -0,0 +1,13 @@
import { connect } from 'react-redux';
import { getBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
balanceSheetDrawerFilter: getBalanceSheetFilterDrawer(state),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

9
client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
View File

@@ -1,14 +1,11 @@
import { connect } from 'react-redux';
import {
fetchBalanceSheet,
balanceSheetRefresh,
toggleBalanceSheetFilterDrawer,
} from 'store/financialStatement/financialStatements.actions';
const mapDispatchToProps = (dispatch) => ({
fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
toggleBalanceSheetFilter: () =>
dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
refreshBalanceSheet: (refresh) => dispatch(balanceSheetRefresh(refresh)),
toggleBalanceSheetFilterDrawer: (toggle) =>
dispatch(toggleBalanceSheetFilterDrawer(toggle)),
});
export default connect(null, mapDispatchToProps);

36
client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
View File

@@ -1,36 +0,0 @@
import { connect } from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetAccountsFactory,
getFinancialSheetColumnsFactory,
getFinancialSheetQueryFactory,
getFinancialSheetTableRowsFactory,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getBalanceSheet = getFinancialSheetFactory('balanceSheet');
const getBalanceSheetAccounts = getFinancialSheetAccountsFactory(
'balanceSheet',
);
const getBalanceSheetTableRows = getFinancialSheetTableRowsFactory(
'balanceSheet',
);
const getBalanceSheetColumns = getFinancialSheetColumnsFactory('balanceSheet');
const getBalanceSheetQuery = getFinancialSheetQueryFactory('balanceSheet');
const mapped = {
balanceSheet: getBalanceSheet(state, props),
balanceSheetAccounts: getBalanceSheetAccounts(state, props),
balanceSheetTableRows: getBalanceSheetTableRows(state, props),
balanceSheetColumns: getBalanceSheetColumns(state, props),
balanceSheetQuery: getBalanceSheetQuery(state, props),
balanceSheetLoading: state.financialStatements.balanceSheet.loading,
balanceSheetFilter: state.financialStatements.balanceSheet.filter,
balanceSheetRefresh: state.financialStatements.balanceSheet.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

13
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
View File

@@ -21,7 +21,7 @@ import { compose } from 'utils';
*/
function GeneralLedger({
// #withGeneralLedgerActions
refreshGeneralLedgerSheet,
toggleGeneralLedgerFilterDrawer,
// #withSettings
organizationName,
@@ -42,9 +42,16 @@ function GeneralLedger({
toDate: moment(filter.toDate).format('YYYY-MM-DD'),
};
setFilter(parsedFilter);
refreshGeneralLedgerSheet(true);
},
[setFilter, refreshGeneralLedgerSheet],
[setFilter],
);
// Hide the filter drawer once the page unmount.
React.useEffect(
() => () => {
toggleGeneralLedgerFilterDrawer(false);
},
[toggleGeneralLedgerFilterDrawer],
);
return (

14
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
View File

@@ -25,16 +25,16 @@ import { useGeneralLedgerContext } from './GeneralLedgerProvider';
*/
function GeneralLedgerActionsBar({
// #withGeneralLedger
generalLedgerSheetFilter,
isFilterDrawerOpen,
// #withGeneralLedgerActions
toggleGeneralLedgerSheetFilter,
toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
}) {
const { sheetRefresh } = useGeneralLedgerContext();
// Handle customize button click.
const handleCustomizeClick = () => {
toggleGeneralLedgerSheetFilter();
toggleDisplayFilterDrawer();
};
// Handle re-calculate button click.
@@ -57,14 +57,14 @@ function GeneralLedgerActionsBar({
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
generalLedgerSheetFilter ? (
isFilterDrawerOpen ? (
<T id={'hide_customizer'} />
) : (
<T id={'customize_report'} />
)
}
onClick={handleCustomizeClick}
active={generalLedgerSheetFilter}
active={isFilterDrawerOpen}
/>
<NavbarDivider />
@@ -97,8 +97,8 @@ function GeneralLedgerActionsBar({
}
export default compose(
withGeneralLedger(({ generalLedgerSheetFilter }) => ({
generalLedgerSheetFilter,
withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
isFilterDrawerOpen: generalLedgerFilterDrawer,
})),
withGeneralLedgerActions,
)(GeneralLedgerActionsBar);

20
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
View File

@@ -11,7 +11,7 @@ import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
import withGeneralLedger from './withGeneralLedger';
import withGeneralLedgerActions from './withGeneralLedgerActions';
import { compose } from 'utils';
import { compose, saveInvoke } from 'utils';
/**
* Geenral Ledger (GL) - Header.
@@ -22,10 +22,10 @@ function GeneralLedgerHeader({
pageFilter,
// #withGeneralLedgerActions
toggleGeneralLedgerSheetFilter,
toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
// #withGeneralLedger
generalLedgerSheetFilter,
isFilterDrawerOpen,
}) {
// Initial values.
const initialValues = {
@@ -43,24 +43,24 @@ function GeneralLedgerHeader({
// Handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
toggleGeneralLedgerSheetFilter();
saveInvoke(onSubmitFilter, values);
toggleDisplayFilterDrawer();
setSubmitting(false);
};
// Handle cancel button click.
const handleCancelClick = () => {
toggleGeneralLedgerSheetFilter(false);
toggleDisplayFilterDrawer(false);
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleGeneralLedgerSheetFilter(false);
toggleDisplayFilterDrawer(false);
};
return (
<FinancialStatementHeader
isOpen={generalLedgerSheetFilter}
isOpen={isFilterDrawerOpen}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
@@ -93,8 +93,8 @@ function GeneralLedgerHeader({
}
export default compose(
withGeneralLedger(({ generalLedgerSheetFilter }) => ({
generalLedgerSheetFilter,
withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
isFilterDrawerOpen: generalLedgerFilterDrawer,
})),
withGeneralLedgerActions,
)(GeneralLedgerHeader);

90
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
View File

@@ -6,8 +6,8 @@ import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import { getForceWidth, getColumnWidth } from 'utils';
import { useGeneralLedgerContext } from './GeneralLedgerProvider';
import { useGeneralLedgerTableColumns } from './components';
/**
* General ledger table.
@@ -23,90 +23,8 @@ export default function GeneralLedgerTable({
isSheetLoading
} = useGeneralLedgerContext();
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'date' }),
accessor: (row) => {
if (row.rowType === 'ACCOUNT_ROW') {
return (
<span
className={'force-width'}
style={{ minWidth: getForceWidth(row.date) }}
>
{row.date}
</span>
);
}
return row.date;
},
className: 'date',
width: 120,
},
{
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'name',
textOverview: true,
// width: 200,
},
{
Header: formatMessage({ id: 'transaction_type' }),
accessor: 'reference_type_formatted',
className: 'transaction_type',
width: 125 ,
},
{
Header: formatMessage({ id: 'transaction_number' }),
accessor: 'reference_id',
className: 'transaction_number',
width: 100,
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'note',
className: 'description',
// width: 145,
},
{
Header: formatMessage({ id: 'credit' }),
accessor: 'formatted_credit',
className: 'credit',
width: getColumnWidth(tableRows, 'formatted_credit', {
minWidth: 100,
magicSpacing: 10,
}),
},
{
Header: formatMessage({ id: 'debit' }),
accessor: 'formatted_debit',
className: 'debit',
width: getColumnWidth(tableRows, 'formatted_debit', {
minWidth: 100,
magicSpacing: 10,
}),
},
{
Header: formatMessage({ id: 'amount' }),
accessor: 'formatted_amount',
className: 'amount',
width: getColumnWidth(tableRows, 'formatted_amount', {
minWidth: 100,
magicSpacing: 10,
}),
},
{
Header: formatMessage({ id: 'running_balance' }),
accessor: 'formatted_running_balance',
className: 'running_balance',
width: getColumnWidth(tableRows, 'formatted_running_balance', {
minWidth: 100,
magicSpacing: 10,
}),
},
],
[formatMessage, tableRows],
);
// General ledger table columns.
const columns = useGeneralLedgerTableColumns();
// Default expanded rows of general ledger table.
const expandedRows = useMemo(
@@ -127,7 +45,7 @@ export default function GeneralLedgerTable({
fullWidth={true}
>
<DataTable
className="bigcapital-datatable--financial-report"
className="bigcapital-datatable--financial-report"
noResults={formatMessage({
id: 'this_report_does_not_contain_any_data_between_date_period',
})}

101
client/src/containers/FinancialStatements/GeneralLedger/components.js Normal file
View File

@@ -0,0 +1,101 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { getForceWidth, getColumnWidth } from 'utils';
import { useGeneralLedgerContext } from './GeneralLedgerProvider';
/**
* Retrieve the general ledger table columns.
*/
export function useGeneralLedgerTableColumns() {
const { formatMessage } = useIntl();
// General ledger context.
const {
generalLedger: { tableRows },
} = useGeneralLedgerContext();
return React.useMemo(
() => [
{
Header: formatMessage({ id: 'date' }),
accessor: (row) => {
if (row.rowType === 'ACCOUNT_ROW') {
return (
<span
className={'force-width'}
style={{ minWidth: getForceWidth(row.date) }}
>
{row.date}
</span>
);
}
return row.date;
},
className: 'date',
width: 120,
},
{
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'name',
textOverview: true,
// width: 200,
},
{
Header: formatMessage({ id: 'transaction_type' }),
accessor: 'reference_type_formatted',
className: 'transaction_type',
width: 125,
},
{
Header: formatMessage({ id: 'transaction_number' }),
accessor: 'reference_id',
className: 'transaction_number',
width: 100,
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'note',
className: 'description',
// width: 145,
},
{
Header: formatMessage({ id: 'credit' }),
accessor: 'formatted_credit',
className: 'credit',
width: getColumnWidth(tableRows, 'formatted_credit', {
minWidth: 100,
magicSpacing: 10,
}),
},
{
Header: formatMessage({ id: 'debit' }),
accessor: 'formatted_debit',
className: 'debit',
width: getColumnWidth(tableRows, 'formatted_debit', {
minWidth: 100,
magicSpacing: 10,
}),
},
{
Header: formatMessage({ id: 'amount' }),
accessor: 'formatted_amount',
className: 'amount',
width: getColumnWidth(tableRows, 'formatted_amount', {
minWidth: 100,
magicSpacing: 10,
}),
},
{
Header: formatMessage({ id: 'running_balance' }),
accessor: 'formatted_running_balance',
className: 'running_balance',
width: getColumnWidth(tableRows, 'formatted_running_balance', {
minWidth: 100,
magicSpacing: 10,
}),
},
],
[formatMessage, tableRows],
);
}

17
client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
View File

@@ -1,25 +1,12 @@
import { connect } from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetQueryFactory,
getFinancialSheetTableRowsFactory,
getGeneralLedgerFilterDrawer
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getGeneralLedgerSheet = getFinancialSheetFactory('generalLedger');
const getSheetTableRows = getFinancialSheetTableRowsFactory('generalLedger');
const getSheetQuery = getFinancialSheetQueryFactory('generalLedger');
const mapped = {
generalLedgerSheet: getGeneralLedgerSheet(state, props),
generalLedgerTableRows: getSheetTableRows(state, props),
generalLedgerQuery: getSheetQuery(state, props),
generalLedgerSheetLoading:
state.financialStatements.generalLedger.loading,
generalLedgerSheetFilter: state.financialStatements.generalLedger.filter,
generalLedgerSheetRefresh:
state.financialStatements.generalLedger.refresh,
generalLedgerFilterDrawer: getGeneralLedgerFilterDrawer(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};

12
client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
View File

@@ -1,13 +1,11 @@
import {connect} from 'react-redux';
import { connect } from 'react-redux';
import {
fetchGeneralLedger,
refreshGeneralLedgerSheet,
toggleGeneralLedgerFilterDrawer,
} from 'store/financialStatement/financialStatements.actions';
const mapDispatchToProps = (dispatch) => ({
fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
toggleGeneralLedgerSheetFilter: () => dispatch({ type: 'GENERAL_LEDGER_FILTER_TOGGLE' }),
refreshGeneralLedgerSheet: (refresh) => dispatch(refreshGeneralLedgerSheet(refresh)),
toggleGeneralLedgerFilterDrawer: (toggle) =>
dispatch(toggleGeneralLedgerFilterDrawer(toggle)),
});
export default connect(null, mapDispatchToProps);
export default connect(null, mapDispatchToProps);

35
client/src/containers/FinancialStatements/Journal/Journal.js
View File

@@ -13,9 +13,6 @@ import { JournalSheetProvider } from './JournalProvider';
import withSettings from 'containers/Settings/withSettings';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withJournalActions from './withJournalActions';
import withJournal from './withJournal';
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
import 'style/pages/FinancialStatements/Journal.scss';
@@ -23,35 +20,17 @@ import 'style/pages/FinancialStatements/Journal.scss';
* Journal sheet.
*/
function Journal({
// #withDashboardActions
changePageTitle,
setDashboardBackLink,
setSidebarShrink,
// #withPreferences
organizationName,
// #withJournalActions
toggleJournalSheetFilter
}) {
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'accural',
});
const { formatMessage } = useIntl();
useEffect(() => {
changePageTitle(formatMessage({ id: 'journal_sheet' }));
}, [changePageTitle, formatMessage]);
useEffect(() => {
setSidebarShrink();
// Show the back link on dashboard topbar.
setDashboardBackLink(true);
return () => {
// Hide the back link on dashboard topbar.
setDashboardBackLink(false);
};
}, [setDashboardBackLink, setSidebarShrink]);
// Handle financial statement filter change.
const handleFilterSubmit = useCallback(
@@ -66,6 +45,11 @@ function Journal({
[setFilter],
);
// Hide the journal sheet filter drawer once the page unmount.
useEffect(() => () => {
toggleJournalSheetFilter(false);
}, [toggleJournalSheetFilter]);
return (
<JournalSheetProvider query={filter}>
<JournalActionsBar />
@@ -94,7 +78,4 @@ export default compose(
withSettings(({ organizationSettings }) => ({
organizationName: organizationSettings.name,
})),
withJournal(({ journalSheetRefresh }) => ({
journalSheetRefresh,
})),
)(Journal);

10
client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
View File

@@ -24,7 +24,7 @@ import { useJournalSheetContext } from './JournalProvider';
*/
function JournalActionsBar({
// #withJournal
journalSheetFilter,
isFilterDrawerOpen,
// #withJournalActions
toggleJournalSheetFilter,
@@ -56,13 +56,13 @@ function JournalActionsBar({
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
(journalSheetFilter) ? (
(isFilterDrawerOpen) ? (
<T id={'hide_customizer'} />
) : (
<T id={'customize_report'} />
)
}
active={journalSheetFilter}
active={isFilterDrawerOpen}
onClick={handleFilterToggleClick}
/>
<NavbarDivider />
@@ -96,6 +96,8 @@ function JournalActionsBar({
}
export default compose(
withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
withJournal(({ journalSheetDrawerFilter }) => ({
isFilterDrawerOpen: journalSheetDrawerFilter
})),
withJournalActions,
)(JournalActionsBar);

16
client/src/containers/FinancialStatements/Journal/JournalHeader.js
View File

@@ -5,8 +5,7 @@ import { Tab, Tabs, Button, Intent } from '@blueprintjs/core';
import * as Yup from 'yup';
import { FormattedMessage as T } from 'react-intl';
import JournalSheetHeaderGeneralPanel from './JournalSheetHeaderGeneralPanel';
import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import withJournal from './withJournal';
@@ -22,12 +21,10 @@ function JournalHeader({
onSubmitFilter,
// #withJournalActions
refreshJournalSheet,
toggleJournalSheetFilter,
// #withJournal
journalSheetFilter,
journalSheetRefresh,
journalSheetDrawerFilter,
}) {
const initialValues = {
...pageFilter,
@@ -59,7 +56,7 @@ function JournalHeader({
return (
<FinancialStatementHeader
isOpen={journalSheetFilter}
isOpen={journalSheetDrawerFilter}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
@@ -72,7 +69,7 @@ function JournalHeader({
<Tab
id="general"
title={'General'}
panel={<JournalSheetHeaderGeneralPanel />}
panel={<JournalSheetHeaderGeneral />}
/>
</Tabs>
@@ -91,9 +88,8 @@ function JournalHeader({
}
export default compose(
withJournal(({ journalSheetFilter, journalSheetRefresh }) => ({
journalSheetFilter,
journalSheetRefresh,
withJournal(({ journalSheetDrawerFilter }) => ({
journalSheetDrawerFilter,
})),
withJournalActions,
)(JournalHeader);

0
client/src/containers/FinancialStatements/Journal/JournalSheetHeaderGeneralPanel.js → client/src/containers/FinancialStatements/Journal/JournalSheetHeaderGeneral.js
View File

64
client/src/containers/FinancialStatements/Journal/JournalTable.js
View File

@@ -1,12 +1,12 @@
import React, { useCallback, useMemo } from 'react';
import moment from 'moment';
import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import { useJournalSheetContext } from './JournalProvider';
import { defaultExpanderReducer, getForceWidth } from 'utils';
import { defaultExpanderReducer } from 'utils';
import { useJournalTableColumns } from './components';
export default function JournalSheetTable({
// #ownProps
@@ -21,63 +21,8 @@ export default function JournalSheetTable({
isLoading
} = useJournalSheetContext();
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'date' }),
accessor: row => row.date ? moment(row.date).format('YYYY MMM DD') : '',
className: 'date',
width: 100,
},
{
Header: formatMessage({ id: 'transaction_type' }),
accessor: 'reference_type_formatted',
className: 'reference_type_formatted',
width: 120,
},
{
Header: formatMessage({ id: 'num' }),
accessor: 'reference_id',
className: 'reference_id',
width: 70,
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'note',
className: 'note'
},
{
Header: formatMessage({ id: 'acc_code' }),
accessor: 'account_code',
width: 95,
className: 'account_code',
},
{
Header: formatMessage({ id: 'account' }),
accessor: 'account_name',
className: 'account_name',
textOverview: true,
},
{
Header: formatMessage({ id: 'credit' }),
accessor: 'formatted_credit',
className: 'credit'
},
{
Header: formatMessage({ id: 'debit' }),
accessor: 'formatted_debit',
className: 'debit'
},
],
[formatMessage],
);
const handleFetchData = useCallback(
(...args) => {
onFetchData && onFetchData(...args);
},
[onFetchData],
);
// Retreive the journal table columns.
const columns = useJournalTableColumns();
// Default expanded rows of general journal table.
const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
@@ -112,7 +57,6 @@ export default function JournalSheetTable({
columns={columns}
data={tableRows}
rowClassNames={rowClassNames}
onFetchData={handleFetchData}
noResults={formatMessage({
id: 'this_report_does_not_contain_any_data_between_date_period',
})}

62
client/src/containers/FinancialStatements/Journal/components.js Normal file
View File

@@ -0,0 +1,62 @@
import React from 'react';
import { useIntl } from 'react-intl';
import moment from 'moment';
/**
* Retrieve the journal table columns.
*/
export const useJournalTableColumns = () => {
const { formatMessage } = useIntl();
return React.useMemo(
() => [
{
Header: formatMessage({ id: 'date' }),
accessor: (row) =>
row.date ? moment(row.date).format('YYYY MMM DD') : '',
className: 'date',
width: 100,
},
{
Header: formatMessage({ id: 'transaction_type' }),
accessor: 'reference_type_formatted',
className: 'reference_type_formatted',
width: 120,
},
{
Header: formatMessage({ id: 'num' }),
accessor: 'reference_id',
className: 'reference_id',
width: 70,
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'note',
className: 'note',
},
{
Header: formatMessage({ id: 'acc_code' }),
accessor: 'account_code',
width: 95,
className: 'account_code',
},
{
Header: formatMessage({ id: 'account' }),
accessor: 'account_name',
className: 'account_name',
textOverview: true,
},
{
Header: formatMessage({ id: 'credit' }),
accessor: 'formatted_credit',
className: 'credit',
},
{
Header: formatMessage({ id: 'debit' }),
accessor: 'formatted_debit',
className: 'debit',
},
],
[formatMessage],
);
};

17
client/src/containers/FinancialStatements/Journal/withJournal.js
View File

@@ -1,25 +1,12 @@
import { connect } from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetTableRowsFactory,
getFinancialSheetQueryFactory,
getJournalFilterDrawer,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getJournalSheet = getFinancialSheetFactory('journal');
const getJournalSheetTableRows = getFinancialSheetTableRowsFactory(
'journal',
);
const getJournalSheetQuery = getFinancialSheetQueryFactory('journal');
const mapped = {
journalSheet: getJournalSheet(state, props),
journalSheetTableRows: getJournalSheetTableRows(state, props),
journalSheetQuery: getJournalSheetQuery(state, props),
journalSheetLoading: state.financialStatements.journal.loading,
journalSheetFilter: state.financialStatements.journal.filter,
journalSheetRefresh: state.financialStatements.journal.refresh,
journalSheetDrawerFilter: getJournalFilterDrawer(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};

14
client/src/containers/FinancialStatements/Journal/withJournalActions.js
View File

@@ -1,13 +1,9 @@
import {connect} from 'react-redux';
import {
fetchJournalSheet,
refreshJournalSheet,
} from 'store/financialStatement/financialStatements.actions';
import { connect } from 'react-redux';
import { toggleJournalSheeetFilterDrawer } from 'store/financialStatement/financialStatements.actions';
export const mapDispatchToProps = (dispatch) => ({
requestFetchJournalSheet: (query) => dispatch(fetchJournalSheet({ query })),
toggleJournalSheetFilter: () => dispatch({ type: 'JOURNAL_FILTER_TOGGLE' }),
refreshJournalSheet: (refresh) => dispatch(refreshJournalSheet(refresh)),
toggleJournalSheetFilter: (toggle) =>
dispatch(toggleJournalSheeetFilterDrawer(toggle)),
});
export default connect(null, mapDispatchToProps);
export default connect(null, mapDispatchToProps);

12
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
View File

@@ -26,10 +26,10 @@ import { useProfitLossSheetContext } from './ProfitLossProvider';
*/
function ProfitLossActionsBar({
// #withProfitLoss
profitLossSheetFilter,
profitLossDrawerFilter,
// #withProfitLossActions
toggleProfitLossSheetFilter,
toggleProfitLossFilterDrawer: toggleFilterDrawer,
// #ownProps
numberFormat,
@@ -38,7 +38,7 @@ function ProfitLossActionsBar({
const { sheetRefetch, isLoading } = useProfitLossSheetContext();
const handleFilterClick = () => {
toggleProfitLossSheetFilter();
toggleFilterDrawer();
};
const handleRecalcReport = () => {
@@ -64,14 +64,14 @@ function ProfitLossActionsBar({
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
profitLossSheetFilter ? (
profitLossDrawerFilter ? (
<T id={'hide_customizer'} />
) : (
<T id={'customize_report'} />
)
}
onClick={handleFilterClick}
active={profitLossSheetFilter}
active={profitLossDrawerFilter}
/>
<NavbarDivider />
@@ -122,6 +122,6 @@ function ProfitLossActionsBar({
}
export default compose(
withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
withProfitLoss(({ profitLossDrawerFilter }) => ({ profitLossDrawerFilter })),
withProfitLossActions,
)(ProfitLossActionsBar);

35
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import moment from 'moment';
import { compose } from 'utils';
import { useIntl } from 'react-intl';
import ProfitLossSheetHeader from './ProfitLossSheetHeader';
import ProfitLossSheetTable from './ProfitLossSheetTable';
@@ -20,13 +19,11 @@ import { ProfitLossSheetProvider } from './ProfitLossProvider';
* Profit/Loss financial statement sheet.
*/
function ProfitLossSheet({
// #withDashboardActions
changePageTitle,
setDashboardBackLink,
setSidebarShrink,
// #withPreferences
organizationName,
// #withProfitLossActions
toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer
}) {
const [filter, setFilter] = useState({
basis: 'cash',
@@ -35,24 +32,7 @@ function ProfitLossSheet({
displayColumnsType: 'total',
accountsFilter: 'all-accounts',
});
const { formatMessage } = useIntl();
// Change page title of the dashboard.
useEffect(() => {
changePageTitle(formatMessage({ id: 'profit_loss_sheet' }));
}, [changePageTitle, formatMessage]);
useEffect(() => {
setSidebarShrink();
// Show the back link on dashboard topbar.
setDashboardBackLink(true);
return () => {
// Hide the back link on dashboard topbar.
setDashboardBackLink(false);
};
}, [setDashboardBackLink, setSidebarShrink]);
// Handle submit filter.
const handleSubmitFilter = (filter) => {
const _filter = {
@@ -71,6 +51,11 @@ function ProfitLossSheet({
});
};
// Hide the filter drawer once the page unmount.
React.useEffect(() => () => {
toggleDisplayFilterDrawer(false);
}, [toggleDisplayFilterDrawer])
return (
<ProfitLossSheetProvider query={filter}>
<ProfitLossActionsBar

16
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -19,10 +19,10 @@ function ProfitLossHeader({
onSubmitFilter,
// #withProfitLoss
profitLossSheetFilter,
profitLossDrawerFilter,
// #withProfitLossActions
toggleProfitLossSheetFilter,
toggleProfitLossFilterDrawer: toggleFilterDrawer,
}) {
const { formatMessage } = useIntl();
@@ -49,21 +49,21 @@ function ProfitLossHeader({
// Handle form submit.
const handleSubmit = (values, actions) => {
onSubmitFilter(values);
toggleProfitLossSheetFilter();
toggleFilterDrawer(false);
};
// Handles the cancel button click.
const handleCancelClick = () => {
toggleProfitLossSheetFilter();
toggleFilterDrawer(false);
};
// Handles the drawer close action.
const handleDrawerClose = () => {
toggleProfitLossSheetFilter();
toggleFilterDrawer(false);
};
return (
<FinancialStatementHeader
isOpen={profitLossSheetFilter}
isOpen={profitLossDrawerFilter}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
@@ -95,8 +95,8 @@ function ProfitLossHeader({
}
export default compose(
withProfitLoss(({ profitLossSheetFilter }) => ({
profitLossSheetFilter,
withProfitLoss(({ profitLossDrawerFilter }) => ({
profitLossDrawerFilter,
})),
withProfitLossActions,
)(ProfitLossHeader);

19
client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js
View File

@@ -1,27 +1,12 @@
import {connect} from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetColumnsFactory,
getFinancialSheetQueryFactory,
getFinancialSheetTableRowsFactory,
getProfitLossFilterDrawer,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getProfitLossSheet = getFinancialSheetFactory('profitLoss');
const getProfitLossColumns = getFinancialSheetColumnsFactory('profitLoss');
const getProfitLossQuery = getFinancialSheetQueryFactory('profitLoss');
const getProfitLossTableRows = getFinancialSheetTableRowsFactory('profitLoss');
const mapped = {
profitLossSheet: getProfitLossSheet(state, props),
profitLossColumns: getProfitLossColumns(state, props),
profitLossQuery: getProfitLossQuery(state, props),
profitLossTableRows: getProfitLossTableRows(state, props),
profitLossSheetLoading: state.financialStatements.profitLoss.loading,
profitLossSheetFilter: state.financialStatements.profitLoss.filter,
profitLossSheetRefresh: state.financialStatements.profitLoss.refresh,
profitLossDrawerFilter: getProfitLossFilterDrawer(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};

14
client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js
View File

@@ -1,13 +1,9 @@
import {connect} from 'react-redux';
import {
fetchProfitLossSheet,
profitLossRefresh,
} from 'store/financialStatement/financialStatements.actions';
import { connect } from 'react-redux';
import { toggleProfitLossFilterDrawer } from 'store/financialStatement/financialStatements.actions';
export const mapDispatchToProps = (dispatch) => ({
fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
toggleProfitLossSheetFilter: () => dispatch({ type: 'PROFIT_LOSS_FILTER_TOGGLE' }),
refreshProfitLossSheet: (refresh) => dispatch(profitLossRefresh(refresh)),
toggleProfitLossFilterDrawer: (toggle) =>
dispatch(toggleProfitLossFilterDrawer(toggle)),
});
export default connect(null, mapDispatchToProps);
export default connect(null, mapDispatchToProps);

15
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
View File

@@ -22,10 +22,10 @@ import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
function TrialBalanceActionsBar({
// #withTrialBalance
trialBalanceSheetFilter,
trialBalanceDrawerFilter,
// #withTrialBalanceActions
toggleTrialBalanceFilter,
toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
// #ownProps
numberFormat,
@@ -35,7 +35,7 @@ function TrialBalanceActionsBar({
// Handle filter toggle click.
const handleFilterToggleClick = () => {
toggleTrialBalanceFilter();
toggleFilterDrawer();
};
// Handle re-calc button click.
@@ -63,13 +63,13 @@ function TrialBalanceActionsBar({
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
trialBalanceSheetFilter ? (
trialBalanceDrawerFilter ? (
<T id={'hide_customizer'} />
) : (
<T id={'customize_report'} />
)
}
active={trialBalanceSheetFilter}
active={trialBalanceDrawerFilter}
onClick={handleFilterToggleClick}
/>
<NavbarDivider />
@@ -121,9 +121,8 @@ function TrialBalanceActionsBar({
}
export default compose(
withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({
trialBalanceSheetFilter,
trialBalanceSheetLoading,
withTrialBalance(({ trialBalanceDrawerFilter }) => ({
trialBalanceDrawerFilter,
})),
withTrialBalanceActions,
)(TrialBalanceActionsBar);

14
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
@@ -11,7 +11,6 @@ import TrialBalanceSheetTable from './TrialBalanceSheetTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import withTrialBalanceActions from './withTrialBalanceActions';
import withSettings from 'containers/Settings/withSettings';
import withTrialBalance from './withTrialBalance';
import { compose } from 'utils';
@@ -21,6 +20,9 @@ import { compose } from 'utils';
function TrialBalanceSheet({
// #withPreferences
organizationName,
// #withTrialBalanceSheetActions
toggleTrialBalanceFilterDrawer: toggleFilterDrawer
}) {
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -50,6 +52,11 @@ function TrialBalanceSheet({
});
};
// Hide the filter drawer once the page unmount.
useEffect(() => () => {
toggleFilterDrawer(false)
}, [toggleFilterDrawer]);
return (
<TrialBalanceSheetProvider query={filter}>
<TrialBalanceActionsBar
@@ -73,9 +80,6 @@ function TrialBalanceSheet({
export default compose(
withTrialBalanceActions,
withTrialBalance(({ trialBalanceQuery }) => ({
trialBalanceQuery,
})),
withSettings(({ organizationSettings }) => ({
organizationName: organizationSettings.name,
})),

26
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
View File

@@ -13,16 +13,19 @@ import withTrialBalanceActions from './withTrialBalanceActions';
import { compose } from 'utils';
/**
* Trial balance sheet header.
*/
function TrialBalanceSheetHeader({
// #ownProps
pageFilter,
onSubmitFilter,
// #withTrialBalance
trialBalanceSheetFilter,
trialBalanceDrawerFilter,
// #withTrialBalanceActions
toggleTrialBalanceFilter
toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
}) {
const { formatMessage } = useIntl();
@@ -48,22 +51,22 @@ function TrialBalanceSheetHeader({
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
setSubmitting(false);
toggleTrialBalanceFilter(false);
toggleFilterDrawer(false);
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleTrialBalanceFilter(false);
toggleFilterDrawer(false);
};
// Handle cancel button click.
const handleCancelClick = () => {
toggleTrialBalanceFilter(false);
toggleFilterDrawer(false);
};
return (
<FinancialStatementHeader
isOpen={trialBalanceSheetFilter}
isOpen={trialBalanceDrawerFilter}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
@@ -81,11 +84,7 @@ function TrialBalanceSheetHeader({
</Tabs>
<div class="financial-header-drawer__footer">
<Button
className={'mr1'}
intent={Intent.PRIMARY}
type={'submit'}
>
<Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
<T id={'calculate_report'} />
</Button>
<Button onClick={handleCancelClick} minimal={true}>
@@ -99,9 +98,8 @@ function TrialBalanceSheetHeader({
}
export default compose(
withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetRefresh }) => ({
trialBalanceSheetFilter,
trialBalanceSheetRefresh,
withTrialBalance(({ trialBalanceDrawerFilter }) => ({
trialBalanceDrawerFilter,
})),
withTrialBalanceActions,
)(TrialBalanceSheetHeader);

45
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
View File

@@ -1,12 +1,13 @@
import React, { useMemo } from 'react';
import React from 'react';
import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import { CellTextSpan } from 'components/Datatable/Cells';
import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
import { getColumnWidth } from 'utils';
import { useTrialBalanceTableColumns } from './components';
/**
* Trial Balance sheet data table.
@@ -22,42 +23,8 @@ export default function TrialBalanceSheetTable({
isLoading
} = useTrialBalanceSheetContext();
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'account_name' }),
accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
className: 'name',
width: 160,
textOverview: true,
},
{
Header: formatMessage({ id: 'credit' }),
Cell: CellTextSpan,
accessor: 'formatted_credit',
className: 'credit',
width: getColumnWidth(tableRows, `credit`, {
minWidth: 95,
}),
},
{
Header: formatMessage({ id: 'debit' }),
Cell: CellTextSpan,
accessor: 'formatted_debit',
width: getColumnWidth(tableRows, `debit`, { minWidth: 95 }),
},
{
Header: formatMessage({ id: 'balance' }),
Cell: CellTextSpan,
accessor: 'formatted_balance',
className: 'balance',
width: getColumnWidth(tableRows, `balance`, {
minWidth: 95,
}),
},
],
[tableRows, formatMessage],
);
// Trial balance sheet table columns.
const columns = useTrialBalanceTableColumns();;
const rowClassNames = (row) => {
const { original } = row;

55
client/src/containers/FinancialStatements/TrialBalanceSheet/components.js Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { getColumnWidth } from 'utils';
import { CellTextSpan } from 'components/Datatable/Cells';
import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
/**
* Retrieve trial balance sheet table columns.
*/
export const useTrialBalanceTableColumns = () => {
const { formatMessage } = useIntl();
// Trial balance sheet context.
const {
trialBalanceSheet: { tableRows },
} = useTrialBalanceSheetContext();
return React.useMemo(
() => [
{
Header: formatMessage({ id: 'account_name' }),
accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
className: 'name',
width: 160,
textOverview: true,
},
{
Header: formatMessage({ id: 'credit' }),
Cell: CellTextSpan,
accessor: 'formatted_credit',
className: 'credit',
width: getColumnWidth(tableRows, `credit`, {
minWidth: 95,
}),
},
{
Header: formatMessage({ id: 'debit' }),
Cell: CellTextSpan,
accessor: 'formatted_debit',
width: getColumnWidth(tableRows, `debit`, { minWidth: 95 }),
},
{
Header: formatMessage({ id: 'balance' }),
Cell: CellTextSpan,
accessor: 'formatted_balance',
className: 'balance',
width: getColumnWidth(tableRows, `balance`, {
minWidth: 95,
}),
},
],
[tableRows, formatMessage],
);
};

19
client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
View File

@@ -1,23 +1,10 @@
import {connect} from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetQueryFactory,
getFinancialSheetTableRowsFactory,
} from 'store/financialStatement/financialStatements.selectors';
import { connect } from 'react-redux';
import { getTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getTrialBalance = getFinancialSheetFactory('trialBalance');
const getBalanceSheetQuery = getFinancialSheetQueryFactory('trialBalance');
const getTrialBalanceRows = getFinancialSheetTableRowsFactory('trialBalance');
const mapped = {
trialBalance: getTrialBalance(state, props),
trialBalanceQuery: getBalanceSheetQuery(state, props),
trialBalanceTableRows: getTrialBalanceRows(state, props),
trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
trialBalanceDrawerFilter: getTrialBalanceSheetFilterDrawer(state),
};
return mapState ? mapState(mapped, state, props) : mapped;
};

14
client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js
View File

@@ -1,13 +1,9 @@
import {connect} from 'react-redux';
import {
fetchTrialBalanceSheet,
trialBalanceRefresh,
} from 'store/financialStatement/financialStatements.actions';
import { connect } from 'react-redux';
import { toggleTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.actions';
export const mapDispatchToProps = (dispatch) => ({
fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
refreshTrialBalance: (refresh) => dispatch(trialBalanceRefresh(refresh)),
toggleTrialBalanceFilterDrawer: (toggle) =>
dispatch(toggleTrialBalanceSheetFilterDrawer(toggle)),
});
export default connect(null, mapDispatchToProps);
export default connect(null, mapDispatchToProps);

27
client/src/containers/Sales/Invoices/InvoiceForm/utils.js
View File

@@ -1,8 +1,10 @@
import moment from 'moment';
import { transformToForm, repeatValue } from 'utils';
import { compose, transformToForm, repeatValue } from 'utils';
import { updateItemsEntriesTotal } from 'containers/Entries/utils';
export const MIN_LINES_NUMBER = 4;
// Default invoice entry object.
export const defaultInvoiceEntry = {
index: 0,
item_id: '',
@@ -13,6 +15,7 @@ export const defaultInvoiceEntry = {
total: 0,
};
// Default invoice object.
export const defaultInvoice = {
customer_id: '',
invoice_date: moment(new Date()).format('YYYY-MM-DD'),
@@ -29,16 +32,18 @@ export const defaultInvoice = {
* Transform invoice to initial values in edit mode.
*/
export function transformToEditForm(invoice) {
const entries = compose(updateItemsEntriesTotal)([
...invoice.entries.map((invoice) => ({
...transformToForm(invoice, defaultInvoiceEntry),
})),
...repeatValue(
defaultInvoiceEntry,
Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
),
]);
return {
...transformToForm(invoice, defaultInvoice),
entries: [
...invoice.entries.map((invoice) => ({
...transformToForm(invoice, defaultInvoiceEntry),
})),
...repeatValue(
defaultInvoiceEntry,
Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
),
],
entries,
};
}
}

7
client/src/routes/dashboard.js
View File

@@ -136,6 +136,7 @@ export default [
hotkey: 'shift+5',
pageTitle: formatMessage({ id: 'trial_balance_sheet' }),
backLink: true,
sidebarShrink: true
},
{
path: `/financial-reports/profit-loss-sheet`,
@@ -144,6 +145,9 @@ export default [
),
breadcrumb: 'Profit Loss Sheet',
hotkey: 'shift+2',
pageTitle: formatMessage({ id: 'profit_loss_sheet' }),
backLink: true,
sidebarShrink: true,
},
{
path: '/financial-reports/receivable-aging-summary',
@@ -169,6 +173,9 @@ export default [
),
breadcrumb: 'Journal Sheet',
hotkey: 'shift+3',
pageTitle: formatMessage({ id: 'journal_sheet' }),
sidebarShrink: true,
backLink: true,
},
{
path: '/financial-reports',

331
client/src/store/financialStatement/financialStatements.actions.js
View File

@@ -1,266 +1,79 @@
import ApiService from 'services/ApiService';
import t from 'store/types';
export const balanceSheetRefresh = (refresh) => {
return (dispatch) =>
dispatch({
type: 'BALANCE_SHEET_REFRESH',
payload: { refresh },
});
};
/**
* Toggles display of the balance sheet filter drawer.
* @param {boolean} toggle
*/
export function toggleBalanceSheetFilterDrawer(toggle) {
return {
type: `${t.BALANCE_SHEET}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
toggle
},
};
}
export const fetchGeneralLedger = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.GENERAL_LEDGER_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/general_ledger', { params: query })
.then((response) => {
dispatch({
type: t.GENERAL_LEDGER_STATEMENT_SET,
data: response.data,
});
dispatch({
type: t.GENERAL_LEDGER_SHEET_LOADING,
loading: false,
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
/**
* Toggles display of the trial balance sheet filter drawer.
* @param {boolean} toggle
*/
export function toggleTrialBalanceSheetFilterDrawer(toggle) {
return {
type: `${t.TRIAL_BALANCE_SHEET}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
toggle,
},
};
}
export const refreshGeneralLedgerSheet = (refresh) => {
return (dispatch) =>
dispatch({
type: t.GENERAL_LEDGER_REFRESH,
payload: { refresh },
});
};
/**
* Toggles display of the journal sheet filter drawer.
* @param {boolean} toggle
*/
export function toggleJournalSheeetFilterDrawer(toggle) {
return {
type: `${t.JOURNAL}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
toggle
},
};
}
export const fetchBalanceSheet = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.BALANCE_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/balance_sheet', { params: query })
.then((response) => {
dispatch({
type: t.BALANCE_SHEET_STATEMENT_SET,
data: response.data,
query: query,
});
dispatch({
type: t.BALANCE_SHEET_LOADING,
loading: false,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
/**
* Toggles display of the profit/loss filter drawer.
* @param {boolean} toggle
*/
export function toggleProfitLossFilterDrawer(toggle) {
return {
type: `${t.PROFIT_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
toggle
},
};
}
export const fetchTrialBalanceSheet = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.TRIAL_BALANCE_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/trial_balance_sheet', {
params: query,
})
.then((response) => {
dispatch({
type: t.TRAIL_BALANCE_STATEMENT_SET,
data: response.data,
});
dispatch({
type: t.TRIAL_BALANCE_SHEET_LOADING,
loading: false,
});
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
};
/**
* Toggles display of the general ledger filter drawer.
* @param {boolean} toggle
*/
export function toggleGeneralLedgerFilterDrawer(toggle) {
return {
type: `${t.GENERAL_LEDGER}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
toggle
},
};
}
export const trialBalanceRefresh = (refresh) => {
return (dispatch) =>
dispatch({
type: t.TRIAL_BALANCE_REFRESH,
payload: { refresh },
});
};
export const fetchProfitLossSheet = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/profit_loss_sheet', {
params: query,
})
.then((response) => {
dispatch({
type: t.PROFIT_LOSS_SHEET_SET,
profitLoss: response.data.data,
columns: response.data.columns,
query: response.data.query,
});
dispatch({
type: t.PROFIT_LOSS_SHEET_LOADING,
loading: false,
});
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
};
export const profitLossRefresh = (refresh) => {
return (dispatch) =>
dispatch({
type: t.PROFIT_LOSS_REFRESH,
payload: { refresh },
});
};
export const fetchJournalSheet = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.JOURNAL_SHEET_LOADING,
loading: true,
});
ApiService.get('/financial_statements/journal', { params: query })
.then((response) => {
dispatch({
type: t.JOURNAL_SHEET_SET,
data: response.data,
query: response.data.query,
});
dispatch({
type: t.JOURNAL_SHEET_LOADING,
loading: false,
});
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
};
export const refreshJournalSheet = (refresh) => {
return (dispatch) =>
dispatch({
type: t.JOURNAL_SHEET_REFRESH,
payload: { refresh },
});
};
export const fetchReceivableAgingSummary = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
payload: {
loading: true,
},
});
ApiService.get('/financial_statements/receivable_aging_summary', {
params: query,
})
.then((response) => {
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_SET,
payload: {
customers: response.data.data.customers,
total: response.data.data.total,
columns: response.data.columns,
query,
},
});
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
payload: {
loading: false,
},
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const receivableAgingSummaryRefresh = (refresh) => {
return (dispatch) =>
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_REFRESH,
payload: { refresh },
});
};
export const fetchPayableAginSummary = ({ query }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.PAYABLE_AGING_SUMMARY_LOADING,
payload: {
loading: true,
},
});
ApiService.get('/financial_statements/payable_aging_summary', {
params: query,
})
.then((response) => {
dispatch({
type: t.PAYABLE_AGING_SUMMARY_SET,
payload: {
vendors: response.data.data.vendors,
total: response.data.data.total,
columns: response.data.columns,
query,
},
});
dispatch({
type: t.PAYABLE_AGING_SUMMARY_LOADING,
payload: {
loading: false,
},
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const payableAgingSummaryRefresh = (refresh) => {
return (dispatch) =>
dispatch({
type: t.PAYABLE_AGING_SUMMARY_REFRESH,
payload: { refresh },
});
};
/**
* Toggles display of the AR aging summary filter drawer.
* @param {boolean} toggle -
*/
export function toggleARAgingSummaryFilterDrawer(toggle) {
return {
type: `${t.AR_AGING_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
payload: {
toggle,
}
};
}

215
client/src/store/financialStatement/financialStatements.reducer.js
View File

@@ -1,216 +1,51 @@
import { createReducer } from '@reduxjs/toolkit';
import t from 'store/types';
import {
mapBalanceSheetToTableRows,
journalToTableRowsMapper,
generalLedgerToTableRows,
profitLossToTableRowsMapper,
ARAgingSummaryTableRowsMapper,
APAgingSummaryTableRowsMapper,
mapTrialBalanceSheetToRows,
} from './financialStatements.mappers';
// Initial state.
const initialState = {
balanceSheet: {
sheet: {},
loading: true,
filter: true,
refresh: false,
displayFilterDrawer: false,
},
trialBalance: {
sheet: {},
loading: true,
filter: true,
refresh: false,
displayFilterDrawer: false,
},
generalLedger: {
sheet: {},
loading: false,
filter: true,
refresh: false,
displayFilterDrawer: false,
},
journal: {
sheet: {},
loading: false,
tableRows: [],
filter: true,
refresh: true,
displayFilterDrawer: false,
},
profitLoss: {
sheet: {},
loading: true,
tableRows: [],
filter: true,
displayFilterDrawer: false,
},
receivableAgingSummary: {
sheet: {},
loading: false,
tableRows: [],
filter: true,
refresh: false,
ARAgingSummary: {
displayFilterDrawer: false,
},
payableAgingSummary: {
sheet: {},
loading: false,
tableRows: [],
filter: true,
refresh: false,
APAgingSummary: {
displayFilterDrawer: false,
},
};
/**
* Financial statement filter toggle.
*/
const financialStatementFilterToggle = (financialName, statePath) => {
return {
[`${financialName}_FILTER_TOGGLE`]: (state, action) => {
state[statePath].filter = !state[statePath].filter;
[`${financialName}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`]: (state, action) => {
state[statePath].displayFilterDrawer =
typeof action?.payload?.toggle !== 'undefined'
? action.payload.toggle
: !state[statePath].displayFilterDrawer;
},
};
};
export default createReducer(initialState, {
[t.BALANCE_SHEET_STATEMENT_SET]: (state, action) => {
const balanceSheet = {
sheet: action.data.data,
columns: action.data.columns,
query: action.data.query,
tableRows: mapBalanceSheetToTableRows(action.data.data),
};
state.balanceSheet.sheet = balanceSheet;
},
[t.BALANCE_SHEET_LOADING]: (state, action) => {
state.balanceSheet.loading = !!action.loading;
},
[t.BALANCE_SHEET_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.balanceSheet.refresh = refresh;
},
...financialStatementFilterToggle('BALANCE_SHEET', 'balanceSheet'),
[t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
const trailBalanceSheet = {
sheet: action.data.data,
tableRows: mapTrialBalanceSheetToRows(action.data.data),
query: action.data.query,
};
state.trialBalance.sheet = trailBalanceSheet;
},
[t.TRIAL_BALANCE_SHEET_LOADING]: (state, action) => {
state.trialBalance.loading = !!action.loading;
},
[t.TRIAL_BALANCE_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.trialBalance.refresh = refresh;
},
...financialStatementFilterToggle('TRIAL_BALANCE', 'trialBalance'),
[t.JOURNAL_SHEET_SET]: (state, action) => {
const journal = {
query: action.data.query,
data: action.data.data,
tableRows: journalToTableRowsMapper(action.data.data),
};
state.journal.sheet = journal;
},
[t.JOURNAL_SHEET_LOADING]: (state, action) => {
state.journal.loading = !!action.loading;
},
[t.JOURNAL_SHEET_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.journal.refresh = !!refresh;
},
...financialStatementFilterToggle('JOURNAL', 'journal'),
[t.GENERAL_LEDGER_STATEMENT_SET]: (state, action) => {
const generalLedger = {
query: action.data.query,
accounts: action.data.data,
tableRows: generalLedgerToTableRows(action.data.data),
};
state.generalLedger.sheet = generalLedger;
},
[t.GENERAL_LEDGER_SHEET_LOADING]: (state, action) => {
state.generalLedger.loading = !!action.loading;
},
[t.GENERAL_LEDGER_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.generalLedger.refresh = !!refresh;
},
...financialStatementFilterToggle('GENERAL_LEDGER', 'generalLedger'),
[t.PROFIT_LOSS_SHEET_SET]: (state, action) => {
const profitLossSheet = {
query: action.query,
profitLoss: action.profitLoss,
columns: action.columns,
tableRows: profitLossToTableRowsMapper(action.profitLoss),
};
state.profitLoss.sheet = profitLossSheet;
},
[t.PROFIT_LOSS_SHEET_LOADING]: (state, action) => {
state.profitLoss.loading = !!action.loading;
},
[t.PROFIT_LOSS_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.profitLoss.refresh = !!refresh;
},
...financialStatementFilterToggle('PROFIT_LOSS', 'profitLoss'),
[t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
const { customers, total, columns, query } = action.payload;
const receivableSheet = {
query,
columns,
customers,
total,
tableRows: ARAgingSummaryTableRowsMapper({ customers, columns, total }),
};
state.receivableAgingSummary.sheet = receivableSheet;
},
[t.RECEIVABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.receivableAgingSummary.refresh = !!refresh;
},
[t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
const { loading } = action.payload;
state.receivableAgingSummary.loading = loading;
},
...financialStatementFilterToggle(
'RECEIVABLE_AGING_SUMMARY',
'receivableAgingSummary',
),
[t.PAYABLE_AGING_SUMMARY_SET]: (state, action) => {
const { vendors, total, columns, query } = action.payload;
const receivableSheet = {
query,
columns,
vendors,
total,
// tableRows: APAgingSummaryTableRowsMapper({ vendors, columns, total }),
};
state.payableAgingSummary.sheet = receivableSheet;
},
[t.PAYABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.payableAgingSummary.refresh = !!refresh;
},
[t.PAYABLE_AGING_SUMMARY_LOADING]: (state, action) => {
const { loading } = action.payload;
state.payableAgingSummary.loading = loading;
},
...financialStatementFilterToggle(
'PAYABLE_AGING_SUMMARY',
'payableAgingSummary',
),
...financialStatementFilterToggle(t.BALANCE_SHEET, 'balanceSheet'),
...financialStatementFilterToggle(t.TRIAL_BALANCE_SHEET, 'trialBalance'),
...financialStatementFilterToggle(t.JOURNAL, 'journal'),
...financialStatementFilterToggle(t.GENERAL_LEDGER, 'generalLedger'),
...financialStatementFilterToggle(t.PROFIT_LOSS, 'profitLoss'),
...financialStatementFilterToggle(t.AR_AGING_SUMMARY, 'ARAgingSummary'),
...financialStatementFilterToggle(t.AP_AGING_SUMMARY, 'APAgingSummary'),
});

142
client/src/store/financialStatement/financialStatements.selectors.js
View File

@@ -1,71 +1,103 @@
import { createSelector } from 'reselect';
import { camelCase } from 'lodash';
const transformSheetType = (sheetType) => {
return camelCase(sheetType);
};
// Financial Statements selectors.
export const sheetByTypeSelector = (sheetType) => (state, props) => {
const sheetName = transformSheetType(sheetType);
return state.financialStatements[sheetName].sheet;
return state.financialStatements[sheetType];
};
export const filterDrawerByTypeSelector = (sheetType) => (state) => {
return sheetByTypeSelector(sheetType)(state)?.displayFilterDrawer;
};
export const balanceSheetFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('balanceSheet')(state);
};
export const profitLossSheetFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('profitLoss')(state);
};
export const generalLedgerFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('generalLedger')(state);
};
// Trial balance filter drawer selector.
export const trialBalanceFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('trialBalance')(state);
};
export const journalFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('journal')(state);
};
export const ARAgingSummaryFilterDrawerSelector = (state) => {
return filterDrawerByTypeSelector('ARAgingSummary')(state);
};
/**
* Retrieve financial statement sheet by the given sheet index.
* @param {array} sheets
* @param {number} index
* Retrieve balance sheet filter drawer.
*/
export const getFinancialSheetFactory = (sheetType) =>
createSelector(
sheetByTypeSelector(sheetType),
(sheet) => {
return sheet;
},
);
export const getBalanceSheetFilterDrawer = createSelector(
balanceSheetFilterDrawerSelector,
(isOpen) => {
return isOpen;
},
);
/**
* Retrieve financial statement columns by the given sheet index.
* @param {array} sheets
* @param {number} index
* Retrieve whether trial balance sheet display filter drawer.
*/
export const getFinancialSheetColumnsFactory = (sheetType) =>
createSelector(
sheetByTypeSelector(sheetType),
(sheet) => {
return (sheet && sheet.columns) ? sheet.columns : [];
},
);
export const getTrialBalanceSheetFilterDrawer = createSelector(
trialBalanceFilterDrawerSelector,
(isOpen) => {
return isOpen;
},
);
/**
* Retrieve profit/loss filter drawer.
*/
export const getProfitLossFilterDrawer = createSelector(
profitLossSheetFilterDrawerSelector,
(isOpen) => {
return isOpen;
},
);
/**
* Retrieve whether display general ledger (GL) filter drawer.
*/
export const getGeneralLedgerFilterDrawer = createSelector(
generalLedgerFilterDrawerSelector,
(isOpen) => {
return isOpen;
},
);
/**
* Retrieve whether display journal sheet filter drawer.
*/
export const getJournalFilterDrawer = createSelector(
journalFilterDrawerSelector,
(isOpen) => {
return isOpen;
},
);
/**
* Retrieve whether display AR aging summary drawer filter.
*/
export const getARAgingSummaryFilterDrawer = createSelector(
ARAgingSummaryFilterDrawerSelector,
(isOpen) => {
return isOpen;
},
);
/**
* Retrieve financial statement query by the given sheet index.
*/
export const getFinancialSheetQueryFactory = (sheetType) =>
createSelector(
sheetByTypeSelector(sheetType),
(sheet) => {
return (sheet && sheet.query) ? sheet.query : {};
},
);
/**
* Retrieve financial statement accounts by the given sheet index.
*/
export const getFinancialSheetAccountsFactory = (sheetType) =>
createSelector(
sheetByTypeSelector(sheetType),
(sheet) => {
return (sheet && sheet.accounts) ? sheet.accounts : [];
}
);
/**
* Retrieve financial statement table rows by the given sheet index.
*/
export const getFinancialSheetTableRowsFactory = (sheetType) =>
createSelector(
sheetByTypeSelector(sheetType),
(sheet) => {
return (sheet && sheet.tableRows) ? sheet.tableRows : [];
}
);
createSelector(sheetByTypeSelector(sheetType), (sheet) => {
return sheet && sheet.query ? sheet.query : {};
});

36
client/src/store/financialStatement/financialStatements.types.js
View File

@@ -1,30 +1,10 @@
export default {
GENERAL_LEDGER_STATEMENT_SET: 'GENERAL_LEDGER_STATEMENT_SET',
GENERAL_LEDGER_SHEET_LOADING: 'GENERAL_LEDGER_SHEET_LOADING',
GENERAL_LEDGER_REFRESH: 'GENERAL_LEDGER_REFRESH',
BALANCE_SHEET_STATEMENT_SET: 'BALANCE_SHEET_STATEMENT_SET',
BALANCE_SHEET_LOADING: 'BALANCE_SHEET_LOADING',
BALANCE_SHEET_REFRESH: 'BALANCE_SHEET_REFRESH',
TRAIL_BALANCE_STATEMENT_SET: 'TRAIL_BALANCE_STATEMENT_SET',
TRIAL_BALANCE_SHEET_LOADING: 'TRIAL_BALANCE_SHEET_LOADING',
TRIAL_BALANCE_REFRESH: 'TRIAL_BALANCE_REFRESH',
JOURNAL_SHEET_SET: 'JOURNAL_SHEET_SET',
JOURNAL_SHEET_LOADING: 'JOURNAL_SHEET_LOADING',
JOURNAL_SHEET_REFRESH: 'JOURNAL_SHEET_REFRESH',
PROFIT_LOSS_SHEET_SET: 'PROFIT_LOSS_SHEET_SET',
PROFIT_LOSS_SHEET_LOADING: 'PROFIT_LOSS_SHEET_LOADING',
PROFIT_LOSS_REFRESH: 'PROFIT_LOSS_REFRESH',
RECEIVABLE_AGING_SUMMARY_LOADING: 'RECEIVABLE_AGING_SUMMARY_LOADING',
RECEIVABLE_AGING_SUMMARY_SET: 'RECEIVABLE_AGING_SUMMARY_SET',
RECEIVABLE_AGING_REFRECH: 'RECEIVABLE_AGING_REFRECH',
RECEIVABLE_AGING_SUMMARY_REFRESH: 'RECEIVABLE_AGING_SUMMARY_REFRESH',
PAYABLE_AGING_SUMMARY_LOADING: 'PAYABLE_AGING_SUMMARY_LOADING',
PAYABLE_AGING_SUMMARY_SET: 'PAYABLE_AGING_SUMMARY_SET',
PAYABLE_AGING_SUMMARY_REFRESH: 'PAYABLE_AGING_SUMMARY_REFRESH',
BALANCE_SHEET: 'BALANCE_SHEET',
TRIAL_BALANCE_SHEET: 'TRIAL_BALANCE_SHEET',
JOURNAL: 'JOURNAL',
GENERAL_LEDGER: 'GENERAL_LEDGER',
PROFIT_LOSS: 'PROFIT_LOSS',
AR_AGING_SUMMARY: 'AR_AGING_SUMMARY',
AP_AGING_SUMMARY: 'AP_AGING_SUMMARY',
DISPLAY_FILTER_DRAWER_TOGGLE: 'DISPLAY_FILTER_DRAWER_TOGGLE'
};