wip

packages/webapp/src/containers/Vendors/VendorsLanding/VendorActionsBar.tsx

@@ -11,7 +11,6 @@ import {
 } from '@blueprintjs/core';
 
 import {
-  If,
   Can,
   Icon,
   FormattedMessage as T,
@@ -28,6 +27,8 @@ import { useRefreshVendors } from '@/hooks/query/vendors';
 import { useVendorsListContext } from './VendorsListProvider';
 import { useHistory } from 'react-router-dom';
 import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+import { useBulkDeleteVendorsDialog } from './hooks/use-bulk-delete-vendors-dialog';
+import { isEmpty } from 'lodash';
 
 import withVendors from './withVendors';
 import withVendorsActions from './withVendorsActions';
@@ -43,6 +44,7 @@ import { DialogsName } from '@/constants/dialogs';
  */
 function VendorActionsBar({
   // #withVendors
+  vendorsSelectedRows = [],
   vendorsFilterConditions,
 
   // #withVendorActions
@@ -59,6 +61,9 @@ function VendorActionsBar({
   openDialog,
 }) {
   const history = useHistory();
+  const { openBulkDeleteDialog, isValidatingBulkDeleteVendors } =
+    useBulkDeleteVendorsDialog();
+
 
   // Vendors list context.
   const { vendorsViews, fields } = useVendorsListContext();
@@ -102,6 +107,27 @@ function VendorActionsBar({
     downloadExportPdf({ resource: 'Vendor' });
   };
 
+  const handleBulkDelete = () => {
+    openBulkDeleteDialog(vendorsSelectedRows);
+  };
+
+  if (!isEmpty(vendorsSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+            disabled={isValidatingBulkDeleteVendors}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -111,7 +137,7 @@ function VendorActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Can I={VendorActionsBar.Create} a={AbilitySubject.Vendor}>
+        <Can I={VendorAction.Create} a={AbilitySubject.Vendor}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'plus'} />}
@@ -135,15 +161,6 @@ function VendorActionsBar({
           />
         </AdvancedFilterPopover>
 
-        <If condition={false}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon="trash-16" iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-          />
-        </If>
-        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
@@ -191,7 +208,8 @@ function VendorActionsBar({
 export default compose(
   withVendorsActions,
   withSettingsActions,
-  withVendors(({ vendorsTableState }) => ({
+  withVendors(({ vendorsTableState, vendorsSelectedRows }) => ({
+    vendorsSelectedRows,
     vendorsInactiveMode: vendorsTableState.inactiveMode,
     vendorsFilterConditions: vendorsTableState.filterRoles,
   })),

packages/webapp/src/containers/Vendors/VendorsLanding/VendorsList.tsx

@@ -24,13 +24,15 @@ function VendorsList({
 
   // #withVendorsActions
   resetVendorsTableState,
+  resetVendorsSelectedRows,
 }) {
   // Resets the vendors table state once the page unmount.
   useEffect(
     () => () => {
       resetVendorsTableState();
+      resetVendorsSelectedRows();
     },
-    [resetVendorsTableState],
+    [resetVendorsSelectedRows, resetVendorsTableState],
   );
 
   return (

packages/webapp/src/containers/Vendors/VendorsLanding/VendorsTable.tsx

@@ -31,6 +31,7 @@ import { DRAWERS } from '@/constants/drawers';
 function VendorsTable({
   // #withVendorsActions
   setVendorsTableState,
+  setVendorsSelectedRows,
 
   // #withVendors
   vendorsTableState,
@@ -118,6 +119,14 @@ function VendorsTable({
     [setVendorsTableState],
   );
 
+  const handleSelectedRowsChange = React.useCallback(
+    (selectedFlatRows) => {
+      const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+      setVendorsSelectedRows(selectedIds);
+    },
+    [setVendorsSelectedRows],
+  );
+
   // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <VendorsEmptyStatus />;
@@ -142,6 +151,8 @@ function VendorsTable({
         pagesCount={pagination.pagesCount}
         autoResetSortBy={false}
         autoResetPage={false}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        autoResetSelectedRows={false}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}

packages/webapp/src/containers/Vendors/VendorsLanding/hooks/use-bulk-delete-vendors-dialog.ts

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { DialogsName } from '@/constants/dialogs';
+import { useValidateBulkDeleteVendors } from '@/hooks/query/vendors';
+import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
+
+export const useBulkDeleteVendorsDialog = () => {
+  const validateBulkDeleteMutation = useValidateBulkDeleteVendors();
+
+  return useBulkDeleteDialog(
+    DialogsName.VendorBulkDelete,
+    validateBulkDeleteMutation,
+  );
+};
+

packages/webapp/src/containers/Vendors/VendorsLanding/withVendors.tsx

@@ -11,6 +11,7 @@ export default (mapState) => {
 
   const mapStateToProps = (state, props) => {
     const mapped = {
+      vendorsSelectedRows: state.vendors.selectedRows,
       vendorsTableState: getVendorsTableState(state, props),
       vendorsTableStateChanged: vendorsTableStateChanged(state, props),
     };

packages/webapp/src/containers/Vendors/VendorsLanding/withVendorsActions.tsx

@@ -3,11 +3,16 @@ import { connect } from 'react-redux';
 import {
   setVendorsTableState,
   resetVendorsTableState,
+  setVendorsSelectedRows,
+  resetVendorsSelectedRows,
 } from '@/store/vendors/vendors.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setVendorsTableState: (queries) => dispatch(setVendorsTableState(queries)),
   resetVendorsTableState: () => dispatch(resetVendorsTableState()),
+  setVendorsSelectedRows: (selectedRows) =>
+    dispatch(setVendorsSelectedRows(selectedRows)),
+  resetVendorsSelectedRows: () => dispatch(resetVendorsSelectedRows()),
 });
 
 export default connect(null, mapDispatchToProps);