feat: financial report numbers format dropdown.

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}

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">

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) => {