QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 06:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: export reports csv and xlsx (#286)

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2023-11-28 19:53:13 +02:00
committed by GitHub
parent 151aff4c8e
commit d15c5890ed
125 changed files with 4674 additions and 934 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx
View File

@@ -19,6 +19,7 @@ import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions
import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
import { saveInvoke, compose } from '@/utils';
import { VendorSummarySheetExportMenu } from './components';
/**
* Vendors balance summary action bar.
@@ -106,11 +107,18 @@ function VendorsBalanceSummaryActionsBar({
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={<VendorSummarySheetExportMenu />}
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>
);

2
packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
View File

@@ -31,7 +31,7 @@ export default function VendorsBalanceSummaryTable({
>
<VendorBalanceDataTable
columns={columns}
data={table.data}
data={table.rows}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
sticky={true}

96
packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/components.tsx
View File

@@ -1,13 +1,18 @@
// @ts-nocheck
import React from 'react';
import React, { useRef } from 'react';
import intl from 'react-intl-universal';
import * as R from 'ramda';
import classNames from 'classnames';
import { If } from '@/components';
import { Align } from '@/constants';
import { AppToaster, If, Stack } from '@/components';
import { Align, CLASSES } from '@/constants';
import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
import { Intent, Menu, MenuItem, ProgressBar, Text } from '@blueprintjs/core';
import {
useVendorBalanceSummaryCsvExport,
useVendorBalanceSummaryXlsxExport,
} from '@/hooks/query';
/**
* Retrieve vendors balance summary columns.
@@ -85,3 +90,86 @@ export function VendorsSummarySheetLoadingBar() {
</If>
);
}
/**
* Vendor summary sheet export menu.
* @returns {JSX.Element}
*/
export function VendorSummarySheetExportMenu() {
const toastKey = useRef(null);
const commonToastConfig = {
isCloseButtonShown: true,
timeout: 2000,
};
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 } = useVendorBalanceSummaryXlsxExport({
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 } = useVendorBalanceSummaryCsvExport({
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().then(() => {});
};
// Handle xlsx export button click.
const handleXlsxExportBtnClick = () => {
xlsxExport().then(() => {});
};
return (
<Menu>
<MenuItem
text={'XLSX (Microsoft Excel)'}
onClick={handleXlsxExportBtnClick}
/>
<MenuItem text={'CSV'} onClick={handleCsvExportBtnClick} />
</Menu>
);
}