feat: print action when click on print button

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

@@ -28,11 +28,13 @@ import withBills from './withBills';
 import withBillsActions from './withBillsActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { useBillsListContext } from './BillsListProvider';
 import { useRefreshBills } from '@/hooks/query/bills';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+
 import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 
 /**
@@ -62,11 +64,14 @@ function BillActionsBar({
   // Bills list context.
   const { billsViews, fields } = useBillsListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle click a new bill.
   const handleClickNewBill = () => {
     history.push('/bills/new');
   };
-
   // Handle tab change.
   const handleTabChange = (view) => {
     setBillsTableState({
@@ -77,21 +82,22 @@ function BillActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
-
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('bills', 'tableSize', size);
   };
-
   // Handle the import button click.
   const handleImportBtnClick = () => {
     history.push('/bills/import');
   };
-
   // Handle the export button click.
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'bill' });
   };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'Bill' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -133,13 +139,15 @@ function BillActionsBar({
             icon={<Icon icon={'trash-16'} iconSize={16} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
-            // onClick={handleBulkDelete}
           />
         </If>
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          disabled={isExportPdfLoading}
+          onClick={handlePrintBtnClick}
         />
         <Button
           className={Classes.MINIMAL}
@@ -153,7 +161,6 @@ function BillActionsBar({
           text={<T id={'export'} />}
           onClick={handleExportBtnClick}
         />
-
         <NavbarDivider />
         <DashboardRowsHeightButton
           initialValue={billsTableSize}

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

@@ -21,6 +21,7 @@ import {
 } from '@/components';
 
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
 
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
@@ -60,35 +61,38 @@ function VendorsCreditNoteActionsBar({
   const { VendorCreditsViews, fields, refresh } =
     useVendorsCreditNoteListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle click a new Vendor.
   const handleClickNewVendorCredit = () => {
     history.push('/vendor-credits/new');
   };
-
   // Handle view tab change.
   const handleTabChange = (view) => {
     setVendorCreditsTableState({ viewSlug: view ? view.slug : null });
   };
-
   // Handle click a refresh credit note.
   const handleRefreshBtnClick = () => {
     refresh();
   };
-
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('vendorCredit', 'tableSize', size);
   };
-
   // Handle import button click.
   const handleImportBtnClick = () => {
     history.push('/vendor-credits/import');
   };
-
   // Handle the export button click.
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'vendor_credit' });
   };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'VendorCredit' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -127,6 +131,8 @@ function VendorsCreditNoteActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

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

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   Button,
   Classes,
@@ -22,19 +21,20 @@ import {
   DashboardRowsHeightButton,
   DashboardActionsBar,
 } from '@/components';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 
 import withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from '@/hooks/query/paymentMades';
-import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
-import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';
 
 /**
  * Payment made actions bar.
@@ -57,6 +57,10 @@ function PaymentMadeActionsBar({
 }) {
   const history = useHistory();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Payment receives list context.
   const { paymentMadesViews, fields } = usePaymentMadesListContext();
 
@@ -67,31 +71,30 @@ function PaymentMadeActionsBar({
   const handleClickNewPaymentMade = () => {
     history.push('/payment-mades/new');
   };
-
   // Handle tab changing.
   const handleTabChange = (viewSlug) => {
     setPaymentMadesTableState({ viewSlug });
   };
-
   // Handle click a refresh payment receives.
   const handleRefreshBtnClick = () => {
     refresh();
   };
-
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('billPayments', 'tableSize', size);
   };
-
   // 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' });
   };
+  // Handle the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'PaymentMade' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -138,6 +141,8 @@ function PaymentMadeActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}