feat: export dialog on resource table

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx

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

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx

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

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.tsx

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