diff --git a/client/src/components/DataTableCells/InputGroupCell.js b/client/src/components/DataTableCells/InputGroupCell.js index 3521fcbba..c34c89291 100644 --- a/client/src/components/DataTableCells/InputGroupCell.js +++ b/client/src/components/DataTableCells/InputGroupCell.js @@ -25,11 +25,7 @@ const InputEditableCell = ({ return ( { + setValue(newValue); + }; + const onBlur = () => { + payload.updateData(index, id, value); + }; + useEffect(() => { + setValue(initialValue); + }, [initialValue]); + + const error = payload.errors?.[index]?.[id]; + + return ( + + + + ); +} diff --git a/client/src/components/DataTableCells/index.js b/client/src/components/DataTableCells/index.js index 895e43e8a..8cde83de0 100644 --- a/client/src/components/DataTableCells/index.js +++ b/client/src/components/DataTableCells/index.js @@ -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 }; diff --git a/client/src/containers/Entries/ItemsEntriesTable.js b/client/src/containers/Entries/ItemsEntriesTable.js index b3ac1bd68..4b733c2f3 100644 --- a/client/src/containers/Entries/ItemsEntriesTable.js +++ b/client/src/containers/Entries/ItemsEntriesTable.js @@ -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); diff --git a/client/src/containers/Entries/components.js b/client/src/containers/Entries/components.js index 5ad8f427b..50d9ecae2 100644 --- a/client/src/containers/Entries/components.js +++ b/client/src/containers/Entries/components.js @@ -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 { formattedAmount(quantity, 'USD') }; + return { quantity }; } /** @@ -80,6 +81,11 @@ export function TotalCell({ value }) { return { formattedAmount(value, 'USD', { noZero: true }) }; } +// Index table cell. +export function IndexTableCell({ row: { index } }){ + return ({index + 1}); +} + /** * Retrieve editable items entries columns. */ @@ -91,7 +97,7 @@ export function useEditableItemsEntriesColumns() { { Header: '#', accessor: 'index', - Cell: ({ row: { index } }) => {index + 1}, + 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, diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js index 7224d2fa4..69c880264 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js @@ -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 ( ({ organizationName: organizationSettings.name, })), + withARAgingSummaryActions )(ReceivableAgingSummarySheet); diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js index 14ed6fe7e..af52486c5 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js @@ -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 ( @@ -63,14 +67,14 @@ function ARAgingSummaryActionsBar({ className={classNames(Classes.MINIMAL, 'button--table-views')} icon={} text={ - receivableAgingFilter ? ( + isFilterDrawerOpen ? ( ) : ( ) } onClick={handleFilterToggleClick} - active={receivableAgingFilter} + active={isFilterDrawerOpen} /> @@ -117,4 +121,7 @@ function ARAgingSummaryActionsBar({ export default compose( withARAgingSummaryActions, + withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({ + isFilterDrawerOpen: ARAgingSummaryFilterDrawer, + })) )(ARAgingSummaryActionsBar); diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js index 7eaa4bceb..e25aaef97 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js @@ -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 ( - + ({ - receivableAgingFilter: receivableAgingSummaryFilter, + withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({ + isFilterDrawerOpen: ARAgingSummaryFilterDrawer, })), )(ARAgingSummaryHeader); diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js b/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js index c2a93c923..4e14a456c 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js @@ -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; }; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.js b/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.js index 228e233d6..b11d2c22d 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.js @@ -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); diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js index 3f27d76b7..2f8c3f7f0 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js @@ -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 ( ({ organizationName: organizationSettings.name, })), + withBalanceSheetActions, )(BalanceSheet); diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js index ee6f08eca..83d9a21b0 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js @@ -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={} text={ - !balanceSheetFilter ? ( + !balanceSheetDrawerFilter ? ( ) : ( ) } onClick={handleFilterToggleClick} - active={balanceSheetFilter} + active={balanceSheetDrawerFilter} /> @@ -123,9 +123,6 @@ function BalanceSheetActionsBar({ } export default compose( - withBalanceSheetDetail(({ balanceSheetFilter, balanceSheetLoading }) => ({ - balanceSheetFilter, - balanceSheetLoading, - })), + withBalanceSheet(({ balanceSheetDrawerFilter }) => ({ balanceSheetDrawerFilter })), withBalanceSheetActions, )(BalanceSheetActionsBar); diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js index 9c6420a73..850bd3ed8 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js @@ -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 ( ({ - balanceSheetFilter, + withBalanceSheet(({ balanceSheetDrawerFilter }) => ({ + balanceSheetDrawerFilter, })), withBalanceSheetActions, )(BalanceSheetHeader); diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheet.js new file mode 100644 index 000000000..af0db5c02 --- /dev/null +++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheet.js @@ -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); +}; diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js index 20bbacb4e..63951784e 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js @@ -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); diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js deleted file mode 100644 index eefd2bd15..000000000 --- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js +++ /dev/null @@ -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); -}; diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js index 613099ce9..2d5649d16 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js @@ -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 ( diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js index cbdf48232..8f9c59386 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js @@ -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={} text={ - generalLedgerSheetFilter ? ( + isFilterDrawerOpen ? ( ) : ( ) } onClick={handleCustomizeClick} - active={generalLedgerSheetFilter} + active={isFilterDrawerOpen} /> @@ -97,8 +97,8 @@ function GeneralLedgerActionsBar({ } export default compose( - withGeneralLedger(({ generalLedgerSheetFilter }) => ({ - generalLedgerSheetFilter, + withGeneralLedger(({ generalLedgerFilterDrawer }) => ({ + isFilterDrawerOpen: generalLedgerFilterDrawer, })), withGeneralLedgerActions, )(GeneralLedgerActionsBar); diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js index 2bad5f370..b86b2dd2d 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js @@ -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 ( ({ - generalLedgerSheetFilter, + withGeneralLedger(({ generalLedgerFilterDrawer }) => ({ + isFilterDrawerOpen: generalLedgerFilterDrawer, })), withGeneralLedgerActions, )(GeneralLedgerHeader); diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js index ead49d4d9..b21a12f99 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js @@ -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 ( - - {row.date} - - ); - } - 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} > [ + { + Header: formatMessage({ id: 'date' }), + accessor: (row) => { + if (row.rowType === 'ACCOUNT_ROW') { + return ( + + {row.date} + + ); + } + 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], + ); +} diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js index b77951902..e2a5bb085 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js @@ -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; }; diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js index a7568dc4a..e0057e2ac 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js @@ -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); \ No newline at end of file +export default connect(null, mapDispatchToProps); diff --git a/client/src/containers/FinancialStatements/Journal/Journal.js b/client/src/containers/FinancialStatements/Journal/Journal.js index d9034a9e1..d238cfc85 100644 --- a/client/src/containers/FinancialStatements/Journal/Journal.js +++ b/client/src/containers/FinancialStatements/Journal/Journal.js @@ -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 ( @@ -94,7 +78,4 @@ export default compose( withSettings(({ organizationSettings }) => ({ organizationName: organizationSettings.name, })), - withJournal(({ journalSheetRefresh }) => ({ - journalSheetRefresh, - })), )(Journal); diff --git a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js index 08b32a91a..cc6b7234f 100644 --- a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js +++ b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js @@ -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={} text={ - (journalSheetFilter) ? ( + (isFilterDrawerOpen) ? ( ) : ( ) } - active={journalSheetFilter} + active={isFilterDrawerOpen} onClick={handleFilterToggleClick} /> @@ -96,6 +96,8 @@ function JournalActionsBar({ } export default compose( - withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })), + withJournal(({ journalSheetDrawerFilter }) => ({ + isFilterDrawerOpen: journalSheetDrawerFilter + })), withJournalActions, )(JournalActionsBar); diff --git a/client/src/containers/FinancialStatements/Journal/JournalHeader.js b/client/src/containers/FinancialStatements/Journal/JournalHeader.js index 576425121..f031c413b 100644 --- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js +++ b/client/src/containers/FinancialStatements/Journal/JournalHeader.js @@ -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 ( } + panel={} /> @@ -91,9 +88,8 @@ function JournalHeader({ } export default compose( - withJournal(({ journalSheetFilter, journalSheetRefresh }) => ({ - journalSheetFilter, - journalSheetRefresh, + withJournal(({ journalSheetDrawerFilter }) => ({ + journalSheetDrawerFilter, })), withJournalActions, )(JournalHeader); diff --git a/client/src/containers/FinancialStatements/Journal/JournalSheetHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/Journal/JournalSheetHeaderGeneral.js similarity index 100% rename from client/src/containers/FinancialStatements/Journal/JournalSheetHeaderGeneralPanel.js rename to client/src/containers/FinancialStatements/Journal/JournalSheetHeaderGeneral.js diff --git a/client/src/containers/FinancialStatements/Journal/JournalTable.js b/client/src/containers/FinancialStatements/Journal/JournalTable.js index 454935843..1d8ced6ea 100644 --- a/client/src/containers/FinancialStatements/Journal/JournalTable.js +++ b/client/src/containers/FinancialStatements/Journal/JournalTable.js @@ -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', })} diff --git a/client/src/containers/FinancialStatements/Journal/components.js b/client/src/containers/FinancialStatements/Journal/components.js new file mode 100644 index 000000000..34d95feb3 --- /dev/null +++ b/client/src/containers/FinancialStatements/Journal/components.js @@ -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], + ); +}; diff --git a/client/src/containers/FinancialStatements/Journal/withJournal.js b/client/src/containers/FinancialStatements/Journal/withJournal.js index f3038f75b..92404a204 100644 --- a/client/src/containers/FinancialStatements/Journal/withJournal.js +++ b/client/src/containers/FinancialStatements/Journal/withJournal.js @@ -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; }; diff --git a/client/src/containers/FinancialStatements/Journal/withJournalActions.js b/client/src/containers/FinancialStatements/Journal/withJournalActions.js index 0c747c6bc..0078dfba3 100644 --- a/client/src/containers/FinancialStatements/Journal/withJournalActions.js +++ b/client/src/containers/FinancialStatements/Journal/withJournalActions.js @@ -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); \ No newline at end of file +export default connect(null, mapDispatchToProps); diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js index 872342eee..d49e417c0 100644 --- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js +++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js @@ -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={} text={ - profitLossSheetFilter ? ( + profitLossDrawerFilter ? ( ) : ( ) } onClick={handleFilterClick} - active={profitLossSheetFilter} + active={profitLossDrawerFilter} /> @@ -122,6 +122,6 @@ function ProfitLossActionsBar({ } export default compose( - withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })), + withProfitLoss(({ profitLossDrawerFilter }) => ({ profitLossDrawerFilter })), withProfitLossActions, )(ProfitLossActionsBar); diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js index 3f627beb0..e2fb6c2af 100644 --- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js +++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js @@ -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 ( { 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 ( ({ - profitLossSheetFilter, + withProfitLoss(({ profitLossDrawerFilter }) => ({ + profitLossDrawerFilter, })), withProfitLossActions, )(ProfitLossHeader); diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js index 1d18527fd..b3385a81c 100644 --- a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js +++ b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js @@ -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; }; diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js index ef75185ec..5333f89cb 100644 --- a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js +++ b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js @@ -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); \ No newline at end of file +export default connect(null, mapDispatchToProps); diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js index b99a30125..0185866a1 100644 --- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js +++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js @@ -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={} text={ - trialBalanceSheetFilter ? ( + trialBalanceDrawerFilter ? ( ) : ( ) } - active={trialBalanceSheetFilter} + active={trialBalanceDrawerFilter} onClick={handleFilterToggleClick} /> @@ -121,9 +121,8 @@ function TrialBalanceActionsBar({ } export default compose( - withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({ - trialBalanceSheetFilter, - trialBalanceSheetLoading, + withTrialBalance(({ trialBalanceDrawerFilter }) => ({ + trialBalanceDrawerFilter, })), withTrialBalanceActions, )(TrialBalanceActionsBar); diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js index cc8969c41..d2c149eb2 100644 --- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js +++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js @@ -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 ( ({ - trialBalanceQuery, - })), withSettings(({ organizationSettings }) => ({ organizationName: organizationSettings.name, })), diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js index 2f45e45df..9cc1c1da4 100644 --- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js +++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js @@ -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 (
-