feat: export dialog on resource table

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx

@@ -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);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx

@@ -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);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx

@@ -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);

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.tsx

@@ -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);

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx

@@ -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);