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

feat: export dialog on resource table

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-05-01 16:26:10 +02:00
parent fab71d2b65
commit 00a1e070c6
26 changed files with 398 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/server/src/services/Accounts/AccountsExportable.ts
View File

@@ -20,6 +20,8 @@ export class AccountsExportable extends Exportable {
inactiveMode: false,
...query,
structure: IAccountsStructureType.Flat,
pageSize: 12000,
page: 1,
} as IAccountsFilter;
return this.accountsApplication

3
packages/webapp/src/components/DialogsContainer.tsx
View File

@@ -51,6 +51,7 @@ import EstimateMailDialog from '@/containers/Sales/Estimates/EstimateMailDialog/
import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
import PaymentMailDialog from '@/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog';
import { ConnectBankDialog } from '@/containers/CashFlow/ConnectBankDialog';
import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
/**
* Dialogs container.
@@ -148,6 +149,8 @@ export default function DialogsContainer() {
<ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
<PaymentMailDialog dialogName={DialogsName.PaymentMail} />
<ConnectBankDialog dialogName={DialogsName.ConnectBankCreditCard} />
<ExportDialog dialogName={DialogsName.Export} />
</div>
);
}

3
packages/webapp/src/constants/dialogs.ts
View File

@@ -73,5 +73,6 @@ export enum DialogsName {
CustomerTransactionsPdfPreview = 'CustomerTransactionsPdfPreview',
VendorTransactionsPdfPreview = 'VendorTransactionsPdfPreview',
GeneralLedgerPdfPreview = 'GeneralLedgerPdfPreview',
SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview'
SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview',
Export = 'Export',
}

14
packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.tsx
View File

@@ -18,7 +18,7 @@ import {
Can,
If,
DashboardActionViewsList,
DashboardActionsBar
DashboardActionsBar,
} from '@/components';
import { useRefreshJournals } from '@/hooks/query/manualJournals';
import { useManualJournalsContext } from './ManualJournalsListProvider';
@@ -31,6 +31,7 @@ import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Manual journal actions bar.
@@ -47,6 +48,9 @@ function ManualJournalActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog
}) {
// History context.
const history = useHistory();
@@ -75,13 +79,18 @@ function ManualJournalActionsBar({
// Handle import button click.
const handleImportBtnClick = () => {
history.push('/manual-journals/import');
}
};
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('manualJournals', 'tableSize', size);
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'manual_journal' });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -140,6 +149,7 @@ function ManualJournalActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton

5
packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx
View File

@@ -118,6 +118,10 @@ function AccountsActionsBar({
const handleImportBtnClick = () => {
history.push('/accounts/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'account' });
}
return (
<DashboardActionsBar>
@@ -186,6 +190,7 @@ function AccountsActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<Button
className={Classes.MINIMAL}

14
packages/webapp/src/containers/Customers/CustomersLanding/CustomersActionsBar.tsx
View File

@@ -31,9 +31,11 @@ import withCustomersActions from './withCustomersActions';
import withAlertActions from '@/containers/Alert/withAlertActions';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withSettings from '@/containers/Settings/withSettings';
import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Customers actions bar.
@@ -55,6 +57,9 @@ function CustomerActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog,
}) {
// History context.
const history = useHistory();
@@ -100,6 +105,11 @@ function CustomerActionsBar({
history.push('/customers/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'customer' });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -154,6 +164,7 @@ function CustomerActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -192,4 +203,5 @@ export default compose(
customersTableSize: customersSettings?.tableSize,
})),
withAlertActions,
withDialogActions,
)(CustomerActionsBar);

17
packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogContent.tsx Normal file
View File

@@ -0,0 +1,17 @@
// @ts-nocheck
import { ExportDialogForm } from './ExportDialogForm';
import { ExportFormInitialValues } from './type';
interface ExportDialogContentProps {
initialValues?: ExportFormInitialValues;
}
/**
* Account dialog content.
*/
export default function ExportDialogContent({
initialValues,
}: ExportDialogContentProps) {
return <ExportDialogForm initialValues={initialValues} />;
}

9
packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogForm.schema.ts Normal file
View File

@@ -0,0 +1,9 @@
// @ts-nocheck
import * as Yup from 'yup';
const Schema = Yup.object().shape({
resource: Yup.string().required().label('Resource'),
format: Yup.string().required().label('Format'),
});
export const ExportDialogFormSchema = Schema;

70
packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogForm.tsx Normal file
View File

@@ -0,0 +1,70 @@
// @ts-nocheck
import { Formik } from 'formik';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose, transformToForm } from '@/utils';
import { ExportDialogFormSchema } from './ExportDialogForm.schema';
import { ExportDialogFormContent } from './ExportDialogFormContent';
import { useResourceExport } from '@/hooks/query/FinancialReports/use-export';
import { ExportFormInitialValues } from './type';
// Default initial form values.
const defaultInitialValues = {
resource: '',
format: 'csv',
};
interface ExportDialogFormProps {
initialValues?: ExportFormInitialValues;
}
/**
* Account form dialog content.
*/
function ExportDialogFormRoot({
// #ownProps
initialValues,
// #withDialogActions
closeDialog,
}: ExportDialogFormProps) {
const { mutateAsync: mutateExport } = useResourceExport();
// Callbacks handles form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
setSubmitting(true);
const { resource, format } = values;
mutateExport({ resource, format })
.then(() => {
setSubmitting(false);
})
.catch(() => {
setSubmitting(false);
});
};
// Form initial values in create and edit mode.
const initialFormValues = {
...defaultInitialValues,
/**
* We only care about the fields in the form. Previously unfilled optional
* values such as `notes` come back from the API as null, so remove those
* as well.
*/
...transformToForm(initialValues, defaultInitialValues),
};
return (
<Formik
validationSchema={ExportDialogFormSchema}
initialValues={initialFormValues}
onSubmit={handleFormSubmit}
>
<ExportDialogFormContent />
</Formik>
);
}
export const ExportDialogForm =
compose(withDialogActions)(ExportDialogFormRoot);

29
packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogFormContent.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { FFormGroup, FRadioGroup, FSelect } from '@/components';
import { Button, Callout, Intent, Radio } from '@blueprintjs/core';
import { Form } from 'formik';
import { ExportResources } from './constants';
export function ExportDialogFormContent() {
return (
<Form>
<Callout>
You can export data from Bigcapital in CSV or XLSX format
</Callout>
<FFormGroup name={'resource'} label={'Select Resource'}>
<FSelect name={'resource'} items={ExportResources} />
</FFormGroup>
<FRadioGroup label={'Export As'} name={'format'}>
<Radio value={'xlsx'}>XLSX (Microsoft Excel)</Radio>
<Radio value={'csv'}>CSV (Comma Seperated Value)</Radio>
</FRadioGroup>
<div>
<Button type={'submit'} intent={Intent.PRIMARY}>
Export
</Button>
</div>
</Form>
);
}

17
packages/webapp/src/containers/Dialogs/ExportDialog/constants.ts Normal file
View File

@@ -0,0 +1,17 @@
export const ExportResources = [
{ value: 'account', text: 'Accounts' },
{ value: 'item', text: 'Items' },
{ value: 'item_category', text: 'Item Categories' },
{ value: 'customer', text: 'Customers' },
{ value: 'vendor', text: 'Vendors' },
{ value: 'manual_journal', text: 'Manual Journal' },
{ value: 'expense', text: 'Expenses' },
{ value: 'sale_invoice', text: 'Invoices' },
{ value: 'sale_estimate', text: ' Estimates' },
{ value: 'sale_receipt', text: 'Receipts' },
{ value: 'payment_receive', text: 'Payments Received' },
{ value: 'credit_note', text: 'Credit Notes' },
{ value: 'bill', text: 'Bills' },
{ value: 'bill_payment', text: 'Bill Payments' },
{ value: 'vendor_credit', text: 'Vendor Credits' },
];

31
packages/webapp/src/containers/Dialogs/ExportDialog/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
// @ts-nocheck
import React, { lazy } from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { compose } from '@/utils';
const ExportDialogContent = lazy(() => import('./ExportDialogContent'));
// User form dialog.
function ExportDialogRoot({ dialogName, payload, isOpen }) {
const { resource = null, format = null } = payload;
return (
<Dialog
name={dialogName}
title={'Export Data'}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
>
<DialogSuspense>
<ExportDialogContent
dialogName={dialogName}
initialValues={{ resource, format }}
/>
</DialogSuspense>
</Dialog>
);
}
export const ExportDialog = compose(withDialogRedux())(ExportDialogRoot);

6
packages/webapp/src/containers/Dialogs/ExportDialog/type.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface ExportFormInitialValues {
resource?: string;
format?: string;
}

16
packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx
View File

@@ -33,6 +33,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
import withSettings from '@/containers/Settings/withSettings';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Expenses actions bar.
@@ -49,6 +50,9 @@ function ExpensesActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog,
}) {
// History context.
const history = useHistory();
@@ -63,7 +67,6 @@ function ExpensesActionsBar({
const onClickNewExpense = () => {
history.push('/expenses/new');
};
// Handle delete button click.
const handleBulkDelete = () => {};
@@ -73,21 +76,23 @@ function ExpensesActionsBar({
viewSlug: view ? view.slug : null,
});
};
// Handle click a refresh
const handleRefreshBtnClick = () => {
refresh();
};
// Handle the import button click.
const handleImportBtnClick = () => {
history.push('/expenses/import');
}
};
// Handle table row size change.
const handleTableRowSizeChange = (size) => {
addSetting('expenses', 'tableSize', size);
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'expense' });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -146,6 +151,7 @@ function ExpensesActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton

12
packages/webapp/src/containers/Items/ItemsActionsBar.tsx
View File

@@ -33,7 +33,9 @@ import withItemsActions from './withItemsActions';
import withAlertActions from '@/containers/Alert/withAlertActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withDialogActions from '../Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
import { compose } from '@/utils';
/**
@@ -56,6 +58,9 @@ function ItemsActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog
}) {
// Items list context.
const { itemsViews, fields } = useItemsListContext();
@@ -99,6 +104,11 @@ function ItemsActionsBar({
history.push('/items/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'item' });
}
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -154,6 +164,7 @@ function ItemsActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -193,4 +204,5 @@ export default compose(
})),
withItemsActions,
withAlertActions,
withDialogActions
)(ItemsActionsBar);

6
packages/webapp/src/containers/ItemsCategories/ItemsCategoryActionsBar.tsx
View File

@@ -23,6 +23,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
import { compose } from '@/utils';
import { useItemsCategoriesContext } from './ItemsCategoriesProvider';
import { useHistory } from 'react-router-dom';
import { DialogsName } from '@/constants/dialogs';
/**
* Items categories actions bar.
@@ -58,6 +59,10 @@ function ItemsCategoryActionsBar({
itemCategoriesIds: itemCategoriesSelectedRows,
});
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'item_category' });
};
return (
<DashboardActionsBar>
@@ -105,6 +110,7 @@ function ItemsCategoryActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
</NavbarGroup>
</DashboardActionsBar>

14
packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
View File

@@ -32,6 +32,8 @@ import withSettingsActions from '@/containers/Settings/withSettingsActions';
import { useBillsListContext } from './BillsListProvider';
import { useRefreshBills } from '@/hooks/query/bills';
import { compose } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Bills actions bar.
@@ -48,6 +50,9 @@ function BillActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog,
}) {
const history = useHistory();
@@ -81,7 +86,12 @@ function BillActionsBar({
// Handle the import button click.
const handleImportBtnClick = () => {
history.push('/bills/import');
}
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'bill' });
};
return (
<DashboardActionsBar>
@@ -141,6 +151,7 @@ function BillActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
@@ -170,4 +181,5 @@ export default compose(
withSettings(({ billsettings }) => ({
billsTableSize: billsettings?.tableSize,
})),
withDialogActions,
)(BillActionsBar);

20
packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx
View File

@@ -22,14 +22,16 @@ import {
import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withVendorsCreditNotes from './withVendorsCreditNotes';
import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import withVendorActions from './withVendorActions';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Vendors Credit note table actions bar.
@@ -48,6 +50,9 @@ function VendorsCreditNoteActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog,
}) {
const history = useHistory();
@@ -77,8 +82,13 @@ function VendorsCreditNoteActionsBar({
// Handle import button click.
const handleImportBtnClick = () => {
history.push('/vendor-credits/import')
}
history.push('/vendor-credits/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'vendor_credit' });
};
return (
<DashboardActionsBar>
@@ -128,6 +138,7 @@ function VendorsCreditNoteActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -157,4 +168,5 @@ export default compose(
withSettings(({ vendorsCreditNoteSetting }) => ({
creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
})),
withDialogActions,
)(VendorsCreditNoteActionsBar);

14
packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.tsx
View File

@@ -33,6 +33,8 @@ import { useRefreshPaymentMades } from '@/hooks/query/paymentMades';
import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
import { compose } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Payment made actions bar.
@@ -47,6 +49,9 @@ function PaymentMadeActionsBar({
// #withSettings
paymentMadesTableSize,
// #withDialogActions
openDialog,
// #withSettingsActions
addSetting,
}) {
@@ -81,7 +86,12 @@ function PaymentMadeActionsBar({
// Handle the import button click.
const handleImportBtnClick = () => {
history.push('/payment-mades/import');
}
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'bill_payment' });
};
return (
<DashboardActionsBar>
@@ -139,6 +149,7 @@ function PaymentMadeActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
@@ -168,4 +179,5 @@ export default compose(
withSettings(({ billPaymentSettings }) => ({
paymentMadesTableSize: billPaymentSettings?.tableSize,
})),
withDialogActions,
)(PaymentMadeActionsBar);

12
packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx
View File

@@ -25,8 +25,10 @@ import withCreditNotes from './withCreditNotes';
import withCreditNotesActions from './withCreditNotesActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Credit note table actions bar.
@@ -43,6 +45,9 @@ function CreditNotesActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog,
}) {
const history = useHistory();
@@ -74,6 +79,11 @@ function CreditNotesActionsBar({
history.push('/credit-notes/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'credit_note' });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -122,6 +132,7 @@ function CreditNotesActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -150,4 +161,5 @@ export default compose(
withSettings(({ creditNoteSettings }) => ({
creditNoteTableSize: creditNoteSettings?.tableSize,
})),
withDialogActions,
)(CreditNotesActionsBar);

13
packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx
View File

@@ -31,6 +31,8 @@ import { useEstimatesListContext } from './EstimatesListProvider';
import { useRefreshEstimates } from '@/hooks/query/estimates';
import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
import { compose } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Estimates list actions bar.
@@ -45,6 +47,9 @@ function EstimateActionsBar({
// #withSettings
estimatesTableSize,
// #withDialogActions
openDialog,
// #withSettingsActions
addSetting,
}) {
@@ -80,7 +85,11 @@ function EstimateActionsBar({
// Handle the import button click.
const handleImportBtnClick = () => {
history.push('/estimates/import');
}
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'sale_estimate' });
};
return (
<DashboardActionsBar>
@@ -141,6 +150,7 @@ function EstimateActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -170,4 +180,5 @@ export default compose(
withSettings(({ estimatesSettings }) => ({
estimatesTableSize: estimatesSettings?.tableSize,
})),
withDialogActions
)(EstimateActionsBar);

12
packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx
View File

@@ -29,6 +29,8 @@ import withInvoiceActions from './withInvoiceActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import { compose } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Invoices table actions bar.
@@ -45,6 +47,9 @@ function InvoiceActionsBar({
// #withSettingsActions
addSetting,
// #withDialogsActions
openDialog
}) {
const history = useHistory();
@@ -79,6 +84,11 @@ function InvoiceActionsBar({
history.push('/invoices/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'sale_invoice' });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -135,6 +145,7 @@ function InvoiceActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -163,4 +174,5 @@ export default compose(
withSettings(({ invoiceSettings }) => ({
invoicesTableSize: invoiceSettings?.tableSize,
})),
withDialogActions,
)(InvoiceActionsBar);

11
packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.tsx
View File

@@ -26,6 +26,7 @@ import withPaymentReceives from './withPaymentReceives';
import withPaymentReceivesActions from './withPaymentReceivesActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import {
PaymentReceiveAction,
AbilitySubject,
@@ -33,6 +34,7 @@ import {
import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
import { useRefreshPaymentReceive } from '@/hooks/query/paymentReceives';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Payment receives actions bar.
@@ -49,6 +51,9 @@ function PaymentReceiveActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog,
}) {
// History context.
const history = useHistory();
@@ -82,6 +87,10 @@ function PaymentReceiveActionsBar({
const handleImportBtnClick = () => {
history.push('/payment-receives/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'payment_receive' });
};
return (
<DashboardActionsBar>
@@ -139,6 +148,7 @@ function PaymentReceiveActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
@@ -169,4 +179,5 @@ export default compose(
withSettings(({ paymentReceiveSettings }) => ({
paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
})),
withDialogActions,
)(PaymentReceiveActionsBar);

12
packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
View File

@@ -35,6 +35,8 @@ import { useRefreshReceipts } from '@/hooks/query/receipts';
import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
import { compose } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
/**
* Receipts actions bar.
@@ -49,6 +51,9 @@ function ReceiptActionsBar({
// #withSettings
receiptsTableSize,
// #withDialogActions
openDialog,
// #withSettingsActions
addSetting,
}) {
@@ -86,6 +91,11 @@ function ReceiptActionsBar({
history.push('/receipts/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'sale_receipt' });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -145,6 +155,7 @@ function ReceiptActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -173,4 +184,5 @@ export default compose(
withSettings(({ receiptSettings }) => ({
receiptsTableSize: receiptSettings?.tableSize,
})),
withDialogActions,
)(ReceiptActionsBar);

14
packages/webapp/src/containers/Vendors/VendorsLanding/VendorActionsBar.tsx
View File

@@ -31,8 +31,10 @@ import withVendors from './withVendors';
import withVendorsActions from './withVendorsActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Vendors actions bar.
@@ -50,6 +52,9 @@ function VendorActionsBar({
// #withSettingsActions
addSetting,
// #withDialogActions
openDialog,
}) {
const history = useHistory();
@@ -83,10 +88,17 @@ function VendorActionsBar({
const handleTableRowSizeChange = (size) => {
addSetting('vendors', 'tableSize', size);
};
// Handle import button success.
const handleImportBtnSuccess = () => {
history.push('/vendors/import');
};
// Handle the export button click.
const handleExportBtnClick = () => {
openDialog(DialogsName.Export, { resource: 'vendor' });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -138,6 +150,7 @@ function VendorActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
onClick={handleExportBtnClick}
/>
<NavbarDivider />
<DashboardRowsHeightButton
@@ -175,4 +188,5 @@ export default compose(
withSettings(({ vendorsSettings }) => ({
vendorsTableSize: vendorsSettings?.tableSize,
})),
withDialogActions,
)(VendorActionsBar);

38
packages/webapp/src/hooks/query/FinancialReports/use-export.ts Normal file
View File

@@ -0,0 +1,38 @@
// @ts-nocheck
import { downloadFile } from '@/hooks/useDownloadFile';
import useApiRequest from '@/hooks/useRequest';
import { AxiosError } from 'axios';
import { useMutation } from 'react-query';
interface ResourceExportValues {
resource: string;
format: string;
}
/**
* Initiates a download of the balance sheet in XLSX format.
* @param {Object} query - The query parameters for the request.
* @param {Object} args - Additional configurations for the download.
* @returns {Function} A function to trigger the file download.
*/
export const useResourceExport = () => {
const apiRequest = useApiRequest();
return useMutation<void, AxiosError, any>((data: ResourceExportValues) => {
return apiRequest
.get('/export', {
responseType: 'blob',
headers: {
accept:
data.format === 'xlsx' ? 'application/xlsx' : 'application/csv',
},
params: {
resource: data.resource,
format: data.format,
},
})
.then((res) => {
downloadFile(res.data, `${data.resource}.${data.format}`);
return res;
});
});
};