fix: toggle display filter drawer of financial statements.

2026-02-17 13:20:31 +00:00 · 2021-02-22 15:38:17 +02:00
parent 1e3b8df702
commit 2750d64fac
49 changed files with 716 additions and 1075 deletions
--- 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 (
--- 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={<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);
--- 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 (
    <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);
--- 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 (
-              <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',
        })}
--- a/client/src/containers/FinancialStatements/GeneralLedger/components.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/components.js
@@ -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],
+  );
+}
--- 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;
  };
--- 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);
+export default connect(null, mapDispatchToProps);