wip

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

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { isEmpty } from 'lodash';
 import {
   Button,
   Classes,
@@ -32,7 +33,6 @@ 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 withDialogActions from '@/containers/Dialog/withDialogActions';
 import withVendorActions from './withVendorActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
@@ -40,6 +40,8 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
 import { DRAWERS } from '@/constants/drawers';
+import withVendorsCreditNotes from './withVendorsCreditNotes';
+import { useBulkDeleteVendorCreditsDialog } from './hooks/use-bulk-delete-vendor-credits-dialog';
 
 /**
  * Vendors Credit note  table actions bar.
@@ -49,6 +51,7 @@ function VendorsCreditNoteActionsBar({
 
   // #withVendorsCreditNotes
   vendorCreditFilterRoles,
+  vendorsCreditNoteSelectedRows,
 
   // #withVendorsCreditNotesActions
   setVendorsCreditNoteTableState,
@@ -107,6 +110,32 @@ function VendorsCreditNoteActionsBar({
     openDrawer(DRAWERS.CREDIT_NOTE_DETAILS);
   };
 
+  const {
+    openBulkDeleteDialog,
+    isValidatingBulkDeleteVendorCredits,
+  } = useBulkDeleteVendorCreditsDialog();
+
+  if (!isEmpty(vendorsCreditNoteSelectedRows)) {
+    const handleBulkDelete = () => {
+      openBulkDeleteDialog(vendorsCreditNoteSelectedRows);
+    };
+
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+            disabled={isValidatingBulkDeleteVendorCredits}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -199,9 +228,12 @@ export default compose(
   withVendorsCreditNotesActions,
   withVendorActions,
   withSettingsActions,
-  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
-    vendorCreditFilterRoles: vendorsCreditNoteTableState.filterRoles,
-  })),
+  withVendorsCreditNotes(
+    ({ vendorsCreditNoteTableState, vendorsCreditNoteSelectedRows }) => ({
+      vendorCreditFilterRoles: vendorsCreditNoteTableState.filterRoles,
+      vendorsCreditNoteSelectedRows,
+    }),
+  ),
   withSettings(({ vendorsCreditNoteSetting }) => ({
     creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
   })),

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

@@ -32,6 +32,7 @@ import { DRAWERS } from '@/constants/drawers';
 function VendorsCreditNoteDataTable({
   // #withVendorsCreditNotesActions
   setVendorsCreditNoteTableState,
+  setVendorsCreditNoteSelectedRows,
 
   // #withVendorCredits
   vendorsCreditNoteTableState,
@@ -119,6 +120,11 @@ function VendorsCreditNoteDataTable({
     openDialog('reconcile-vendor-credit', { vendorCreditId: id });
   };
 
+  const handleSelectedRowsChange = (selectedFlatRows) => {
+    const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+    setVendorsCreditNoteSelectedRows(selectedIds);
+  };
+
   return (
     <DashboardContentTable>
       <DataTable
@@ -141,6 +147,7 @@ function VendorsCreditNoteDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        onSelectedRowsChange={handleSelectedRowsChange}
         size={creditNoteTableSize}
         payload={{
           onViewDetails: handleViewDetailVendorCredit,

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/hooks/use-bulk-delete-vendor-credits-dialog.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { DialogsName } from '@/constants/dialogs';
+import { useValidateBulkDeleteVendorCredits } from '@/hooks/query/vendorCredit';
+import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
+
+export const useBulkDeleteVendorCreditsDialog = () => {
+  const validateBulkDeleteMutation = useValidateBulkDeleteVendorCredits();
+  const {
+    openBulkDeleteDialog,
+    closeBulkDeleteDialog,
+    isValidatingBulkDelete,
+  } = useBulkDeleteDialog(DialogsName.VendorCreditBulkDelete, validateBulkDeleteMutation);
+
+  return {
+    openBulkDeleteDialog,
+    closeBulkDeleteDialog,
+    isValidatingBulkDeleteVendorCredits: isValidatingBulkDelete,
+  };
+};
+

packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.tsx

@@ -23,11 +23,6 @@ const ReconcileVendorCreditDeleteAlert = React.lazy(
     ),
 );
 
-const VendorCreditBulkDeleteAlert = React.lazy(
-  () =>
-    import('@/containers/Alerts/VendorCeditNotes/VendorCreditBulkDeleteAlert'),
-);
-
 /**
  * Vendor Credit notes alerts.
  */
@@ -48,8 +43,4 @@ export default [
     name: 'reconcile-vendor-delete',
     component: ReconcileVendorCreditDeleteAlert,
   },
-  {
-    name: 'vendor-credits-bulk-delete',
-    component: VendorCreditBulkDeleteAlert,
-  },
 ];