feat: financial report numbers format dropdown.

2026-02-16 12:50:38 +00:00 · 2021-01-18 20:08:08 +02:00
parent 10ab8f4711
commit 1fb523b5ff
36 changed files with 550 additions and 373 deletions
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
@@ -94,9 +94,19 @@ function ReceivableAgingSummarySheet({
    [refreshARAgingSummary, toggleFilterARAgingSummary],
  );

+  const handleNumberFormatSubmit = (numberFormat) => {
+    setQuery({
+      ...query,
+      numberFormat
+    });
+    refreshARAgingSummary(true);
+  };
+
  return (
    <DashboardInsider>
-      <ARAgingSummaryActionsBar />
+      <ARAgingSummaryActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}/>

      <DashboardPageContent>
        <FinancialStatement>
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
@@ -13,11 +13,13 @@ import classNames from 'classnames';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';

 import withARAgingSummary from './withARAgingSummary';
 import withARAgingSummaryActions from './withARAgingSummaryActions';

 import { compose } from 'utils';
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';

 /**
 * AR Aging summary sheet - Actions bar.
@@ -25,10 +27,15 @@ import { compose } from 'utils';
 function ARAgingSummaryActionsBar({
  // #withReceivableAging
  receivableAgingFilter,
+  ARAgingSummaryLoading,

  // #withReceivableAgingActions
  toggleFilterARAgingSummary,
  refreshARAgingSummary,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
 }) {
  const handleFilterToggleClick = () => {
    toggleFilterARAgingSummary();
@@ -37,6 +44,10 @@ function ARAgingSummaryActionsBar({
  const handleRecalcReport = () => {
    refreshARAgingSummary(true);
  };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    safeInvoke(onNumberFormatSubmit, numberFormat);
+  };

  return (
    <DashboardActionsBar>
@@ -64,6 +75,25 @@ function ARAgingSummaryActionsBar({
        />
        <NavbarDivider />

+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={ARAgingSummaryLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
        <Button
          className={Classes.MINIMAL}
          text={<T id={'filter'} />}
@@ -88,7 +118,7 @@ function ARAgingSummaryActionsBar({

 export default compose(
  withARAgingSummaryActions,
-  withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
-    receivableAgingFilter: receivableAgingSummaryFilter,
+  withARAgingSummary(({ receivableAgingSummaryLoading }) => ({
+    ARAgingSummaryLoading: receivableAgingSummaryLoading,
  })),
 )(ARAgingSummaryActionsBar);
--- a/client/src/containers/FinancialStatements/ARAgingSummary/common.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/common.js
@@ -1,5 +1,5 @@
-import { mapKeys, snakeCase } from 'lodash';
+import { transformToCamelCase, flatObject } from 'utils';

 export const transfromFilterFormToQuery = (form) => {
-  return mapKeys(form, (v, k) => snakeCase(k));
+  return flatObject(transformToCamelCase(form));
 };
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -6,6 +6,8 @@ import moment from 'moment';
 import { useIntl } from 'react-intl';
 import { queryCache } from 'react-query';

+import 'style/pages/FinancialStatements/BalanceSheet.scss';
+
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';

@@ -21,8 +23,9 @@ import withBalanceSheetDetail from './withBalanceSheetDetail';

 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';

-import 'style/pages/FinancialStatements/BalanceSheet.scss';
-
+/**
+ * Balance sheet.
+ */
 function BalanceSheet({
  // #withDashboardActions
  changePageTitle,
@@ -47,10 +50,11 @@ function BalanceSheet({
    displayColumnsType: 'total',
    accountsFilter: 'all-accounts',
  });
-
  // Fetches the balance sheet.
  const fetchHook = useQuery(['balance-sheet', filter], (key, query) =>
-    fetchBalanceSheet({ ...transformFilterFormToQuery(query) }),
+    fetchBalanceSheet({
+      ...transformFilterFormToQuery(query),
+    }),
  );

  useEffect(() => {
@@ -76,23 +80,30 @@ function BalanceSheet({
  }, [setDashboardBackLink]);

  // Handle re-fetch balance sheet after filter change.
-  const handleFilterSubmit = useCallback(
-    (filter) => {
-      const _filter = {
-        ...filter,
-        fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
-        toDate: moment(filter.toDate).format('YYYY-MM-DD'),
-      };
-      setFilter({ ..._filter });
-      refreshBalanceSheet(true);
-    },
-    [setFilter, refreshBalanceSheet],
-  );
+  const handleFilterSubmit = (filter) => {
+    const _filter = {
+      ...filter,
+      fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+    };
+    setFilter({ ..._filter });
+    refreshBalanceSheet(true);
+  };
+
+  const handleNumberFormatSubmit = (values) => {
+    setFilter({
+      ...filter,
+      numberFormat: values,
+    });
+    refreshBalanceSheet(true);
+  };

  return (
    <DashboardInsider>
-      <BalanceSheetActionsBar />
-
+      <BalanceSheetActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
      <DashboardPageContent>
        <FinancialStatement>
          <BalanceSheetHeader
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -13,19 +13,25 @@ import classNames from 'classnames';

 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import NumberFormats from 'components/NumberFormats';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';

-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 import withBalanceSheetActions from './withBalanceSheetActions';
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';

 function BalanceSheetActionsBar({
  // #withBalanceSheetDetail
  balanceSheetFilter,
+  balanceSheetLoading,

  // #withBalanceSheetActions
  toggleBalanceSheetFilter,
  refreshBalanceSheet,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
 }) {
  const handleFilterToggleClick = () => {
    toggleBalanceSheetFilter();
@@ -36,6 +42,10 @@ function BalanceSheetActionsBar({
    refreshBalanceSheet(true);
  };

+  const handleNumberFormatSubmit = (values) => {
+    safeInvoke(onNumberFormatSubmit, values);
+  };
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -63,18 +73,13 @@ function BalanceSheetActionsBar({
        <NavbarDivider />

        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-        <Popover
-          content={<NumberFormats />}
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={balanceSheetLoading}
+            />
+          }
          minimal={true}
          interactionKind={PopoverInteractionKind.CLICK}
          position={Position.BOTTOM_LEFT}
@@ -82,6 +87,18 @@ function BalanceSheetActionsBar({
          <Button
            className={classNames(Classes.MINIMAL, 'button--filter')}
            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'filter'} />}
            icon={<Icon icon="filter-16" iconSize={16} />}
          />
        </Popover>
@@ -104,6 +121,9 @@ function BalanceSheetActionsBar({
 }

 export default compose(
-  withBalanceSheetDetail(({ balanceSheetFilter }) => ({ balanceSheetFilter })),
+  withBalanceSheetDetail(({ balanceSheetFilter, balanceSheetLoading }) => ({
+    balanceSheetFilter,
+    balanceSheetLoading,
+  })),
  withBalanceSheetActions,
 )(BalanceSheetActionsBar);
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -2,8 +2,6 @@ import React, { useMemo, useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';

-
-import Money from 'components/Money';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';

@@ -16,12 +14,7 @@ function TotalCell({ cell }) {
  const row = cell.row.original;

  if (row.total) {
-    return (
-      <Money
-        amount={row.total.formatted_amount}
-        currency={row.total.currency_code}
-      />
-    );
+    return row.total.formatted_amount;
  }
  return '';
 }
@@ -32,9 +25,8 @@ const TotalPeriodCell = (index) => ({ cell }) => {

  if (original.total_periods && original.total_periods[index]) {
    const amount = original.total_periods[index].formatted_amount;
-    const currencyCode = original.total_periods[index].currency_code;

-    return <Money amount={amount} currency={currencyCode} />;
+    return amount;
  }
  return '';
 };
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
@@ -13,19 +13,25 @@ import classNames from 'classnames';

 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';

 import withProfitLossActions from './withProfitLossActions';
 import withProfitLoss from './withProfitLoss';

-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';

 function ProfitLossActionsBar({
  // #withProfitLoss
  profitLossSheetFilter,
+  profitLossSheetLoading,

  // #withProfitLossActions
  toggleProfitLossSheetFilter,
  refreshProfitLossSheet,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
 }) {
  const handleFilterClick = () => {
    toggleProfitLossSheetFilter();
@@ -34,6 +40,10 @@ function ProfitLossActionsBar({
  const handleRecalcReport = () => {
    refreshProfitLossSheet(true);
  };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };

  return (
    <DashboardActionsBar>
@@ -61,6 +71,25 @@ function ProfitLossActionsBar({
        />
        <NavbarDivider />

+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={profitLossSheetLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
        <Popover
          // content={}
          interactionKind={PopoverInteractionKind.CLICK}
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
@@ -77,18 +77,28 @@ function ProfitLossSheet({
    { manual: true });

  // Handle submit filter.
-  const handleSubmitFilter = useCallback((filter) => {
+  const handleSubmitFilter = (filter) => {
    const _filter = {
      ...filter,
      fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
      toDate: moment(filter.toDate).format('YYYY-MM-DD'),
    };
    setFilter(_filter);
-  }, [setFilter]);
+  };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setFilter({
+      ...filter,
+      numberFormat,
+    });
+  };

  return (
    <DashboardInsider>
-      <ProfitLossActionsBar />
+      <ProfitLossActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
 
      <DashboardPageContent>
        <div class="financial-statement">
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
@@ -32,18 +32,7 @@ function ProfitLossSheetTable({
        ? [
            {
              Header: formatMessage({ id: 'total' }),
-              Cell: ({ cell }) => {
-                const row = cell.row.original;
-                if (row.total) {
-                  return (
-                    <Money
-                      amount={row.total.formatted_amount}
-                      currency={row.total.currency_code}
-                    />
-                  );
-                }
-                return '';
-              },
+              accessor: 'total.formatted_amount',
              className: 'total',
              width: 140,
            },
@@ -53,13 +42,7 @@ function ProfitLossSheetTable({
        ? profitLossColumns.map((column, index) => ({
            id: `date_period_${index}`,
            Header: column,
-            accessor: (row) => {
-              if (row.total_periods && row.total_periods[index]) {
-                const amount = row.total_periods[index].formatted_amount;
-                return <Money amount={amount} currency={'USD'} />;
-              }
-              return '';
-            },
+            accessor: `total_periods[${index}].formatted_amount`,
            width: getColumnWidth(
              profitLossTableRows,
              `total_periods.${index}.formatted_amount`,
@@ -69,7 +52,12 @@ function ProfitLossSheetTable({
          }))
        : []),
    ],
-    [profitLossQuery.display_columns_type, profitLossTableRows, profitLossColumns, formatMessage],
+    [
+      profitLossQuery.display_columns_type,
+      profitLossTableRows,
+      profitLossColumns,
+      formatMessage,
+    ],
  );

  // Retrieve default expanded rows of balance sheet.
@@ -81,9 +69,7 @@ function ProfitLossSheetTable({
  // Retrieve conditional datatable row classnames.
  const rowClassNames = useCallback((row) => {
    const { original } = row;
-    const rowTypes = Array.isArray(original.rowTypes)
-      ? original.rowTypes
-      : [];
+    const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];

    return {
      ...rowTypes.reduce((acc, rowType) => {
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
@@ -13,18 +13,24 @@ import { FormattedMessage as T } from 'react-intl';

 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';

 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';

 function TrialBalanceActionsBar({
  // #withTrialBalance
  trialBalanceSheetFilter,
+  trialBalanceSheetLoading,

  // #withTrialBalanceActions
  toggleTrialBalanceFilter,
  refreshTrialBalance,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit
 }) {
  const handleFilterToggleClick = () => {
    toggleTrialBalanceFilter();
@@ -34,6 +40,10 @@ function TrialBalanceActionsBar({
    refreshTrialBalance(true);
  };

+  // Handle number format submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -60,6 +70,25 @@ function TrialBalanceActionsBar({
        />
        <NavbarDivider />

+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={trialBalanceSheetLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
        <Popover
          // content={}
          interactionKind={PopoverInteractionKind.CLICK}
@@ -88,8 +117,9 @@ function TrialBalanceActionsBar({
 }

 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter }) => ({
+  withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({
    trialBalanceSheetFilter,
+    trialBalanceSheetLoading
  })),
  withTrialBalanceActions,
 )(TrialBalanceActionsBar);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -92,9 +92,20 @@ function TrialBalanceSheet({
    }
  }, [trialBalanceSheetRefresh, refreshTrialBalance]);

+  const handleNumberFormatSubmit = (numberFormat) => {
+    setFilter({
+      ...filter,
+      numberFormat,
+    });
+    refreshTrialBalance(false);
+  };
+
  return (
    <DashboardInsider>
-      <TrialBalanceActionsBar />
+      <TrialBalanceActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />

      <DashboardPageContent>
        <div class="financial-statement">
@@ -102,7 +113,6 @@ function TrialBalanceSheet({
            pageFilter={filter}
            onSubmitFilter={handleFilterSubmit}
          />
-
          <div class="financial-statement__body">
            <TrialBalanceSheetTable companyName={organizationName} />
          </div>
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
@@ -31,11 +31,7 @@ function TrialBalanceSheetTable({
      },
      {
        Header: formatMessage({ id: 'credit' }),
-        accessor: 'credit',
-        Cell: ({ cell }) => {
-          const { currency_code, credit } = cell.row.original;
-          return <Money amount={credit} currency={currency_code} />;
-        },
+        accessor: 'formatted_credit',
        className: 'credit',
        width: getColumnWidth(trialBalanceTableRows, `credit`, {
          minWidth: 95,
@@ -43,20 +39,12 @@ function TrialBalanceSheetTable({
      },
      {
        Header: formatMessage({ id: 'debit' }),
-        accessor: 'debit',
-        Cell: ({ cell }) => {
-          const { currency_code, debit } = cell.row.original;
-          return <Money amount={debit} currency={currency_code} />;
-        },
+        accessor: 'formatted_debit',
        width: getColumnWidth(trialBalanceTableRows, `debit`, { minWidth: 95 }),
      },
      {
        Header: formatMessage({ id: 'balance' }),
-        accessor: 'balance',
-        Cell: ({ cell }) => {
-          const { currency_code, balance } = cell.row.original;
-          return <Money amount={balance} currency={currency_code} />;
-        },
+        accessor: 'formatted_balance',
        className: 'balance',
        width: getColumnWidth(trialBalanceTableRows, `balance`, {
          minWidth: 95,
--- a/client/src/containers/FinancialStatements/common.js
+++ b/client/src/containers/FinancialStatements/common.js
@@ -1,4 +1,5 @@
 import { mapKeys, omit, snakeCase } from 'lodash';
+import { transformToCamelCase, flatObject } from 'utils';
 import { formatMessage } from 'services/intl';

 export const displayColumnsByOptions = [
@@ -52,10 +53,11 @@ export const transformDisplayColumnsType = (form) => {
 };

 export const transformFilterFormToQuery = (form) => {
-  return mapKeys({
+  const transformed = transformToCamelCase({
    ...omit(form, ['accountsFilter']),
    ...transformDisplayColumnsType(form),
    noneZero: form.accountsFilter === 'without-zero-balance',
    noneTransactions: form.accountsFilter === 'with-transactions',
-  }, (v, k) => snakeCase(k));
+  });
+  return flatObject(transformed);
 };