feat: export reports csv and xlsx (#286)

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx

@@ -18,6 +18,7 @@ import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import { compose, saveInvoke } from '@/utils';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+import { TrialBalanceSheetExportMenu } from './components';
 
 function TrialBalanceActionsBar({
   // #withTrialBalance
@@ -109,11 +110,18 @@ function TrialBalanceActionsBar({
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
         />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="file-export-16" iconSize={16} />}
-          text={<T id={'export'} />}
-        />
+        <Popover
+          content={<TrialBalanceSheetExportMenu />}
+          interactionKind={PopoverInteractionKind.CLICK}
+          placement="bottom-start"
+          minimal
+        >
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="file-export-16" iconSize={16} />}
+            text={<T id={'export'} />}
+          />
+        </Popover>
       </NavbarGroup>
     </DashboardActionsBar>
   );

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/components.tsx

@@ -1,9 +1,30 @@
 // @ts-nocheck
-import { Button } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T } from '@/components';
+import { useRef } from 'react';
+import {
+  Button,
+  Classes,
+  Intent,
+  Menu,
+  MenuItem,
+  ProgressBar,
+  Text,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  If,
+  Icon,
+  FormattedMessage as T,
+  Stack,
+  AppToaster,
+} from '@/components';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import {
+  useTrialBalanceSheetCsvExport,
+  useTrialBalanceSheetXlsxExport,
+} from '@/hooks/query';
+import { useTrialBalanceSheetHttpQuery } from './utils';
 
 /**
  * Trial balance sheet progress loading bar.
@@ -22,11 +43,8 @@ export function TrialBalanceSheetLoadingBar() {
  * Trial balance sheet alerts.
  */
 export function TrialBalanceSheetAlerts() {
-  const {
-    trialBalanceSheet,
-    isLoading,
-    refetchSheet,
-  } = useTrialBalanceSheetContext();
+  const { trialBalanceSheet, isLoading, refetchSheet } =
+    useTrialBalanceSheetContext();
 
   // Handle refetch the sheet.
   const handleRecalcReport = () => {
@@ -52,3 +70,89 @@ export function TrialBalanceSheetAlerts() {
     </FinancialComputeAlert>
   );
 }
+
+/**
+ * Trial balance sheet export menu.
+ */
+export const TrialBalanceSheetExportMenu = () => {
+  const toastKey = useRef(null);
+  const commonToastConfig = {
+    isCloseButtonShown: true,
+    timeout: 2000,
+  };
+  const httpQuery = useTrialBalanceSheetHttpQuery();
+
+  const openProgressToast = (amount: number) => {
+    return (
+      <Stack spacing={8}>
+        <Text>The report has been exported successfully.</Text>
+        <ProgressBar
+          className={classNames('toast-progress', {
+            [Classes.PROGRESS_NO_STRIPES]: amount >= 100,
+          })}
+          intent={amount < 100 ? Intent.PRIMARY : Intent.SUCCESS}
+          value={amount / 100}
+        />
+      </Stack>
+    );
+  };
+  // Export the report to xlsx.
+  const { mutateAsync: xlsxExport } = useTrialBalanceSheetXlsxExport(
+    httpQuery,
+    {
+      onDownloadProgress: (xlsxExportProgress: number) => {
+        if (!toastKey.current) {
+          toastKey.current = AppToaster.show({
+            message: openProgressToast(xlsxExportProgress),
+            ...commonToastConfig,
+          });
+        } else {
+          AppToaster.show(
+            {
+              message: openProgressToast(xlsxExportProgress),
+              ...commonToastConfig,
+            },
+            toastKey.current,
+          );
+        }
+      },
+    },
+  );
+  // Export the report to csv.
+  const { mutateAsync: csvExport } = useTrialBalanceSheetCsvExport(httpQuery, {
+    onDownloadProgress: (xlsxExportProgress: number) => {
+      if (!toastKey.current) {
+        toastKey.current = AppToaster.show({
+          message: openProgressToast(xlsxExportProgress),
+          ...commonToastConfig,
+        });
+      } else {
+        AppToaster.show(
+          {
+            message: openProgressToast(xlsxExportProgress),
+            ...commonToastConfig,
+          },
+          toastKey.current,
+        );
+      }
+    },
+  });
+  // Handle csv export button click.
+  const handleCsvExportBtnClick = () => {
+    csvExport();
+  };
+  // Handle xlsx export button click.
+  const handleXlsxExportBtnClick = () => {
+    xlsxExport();
+  };
+
+  return (
+    <Menu>
+      <MenuItem
+        text={'XLSX (Microsoft Excel)'}
+        onClick={handleXlsxExportBtnClick}
+      />
+      <MenuItem text={'CSV'} onClick={handleCsvExportBtnClick} />
+    </Menu>
+  );
+};

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/utils.tsx

@@ -5,6 +5,7 @@ import { castArray } from 'lodash';
 
 import { useAppQueryString } from '@/hooks';
 import { transformToForm } from '@/utils';
+import { transformFilterFormToQuery } from '../common';
 
 /**
  * Retrieves the default trial balance query.
@@ -56,3 +57,13 @@ export const useTrialBalanceSheetQuery = () => {
     setLocationQuery,
   };
 };
+
+/**
+ * Retrieves the trial balance sheet http query.
+ * @returns {object}
+ */
+export const useTrialBalanceSheetHttpQuery = () => {
+  const { query } = useTrialBalanceSheetQuery();
+
+  return React.useMemo(() => transformFilterFormToQuery(query), [query]);
+};