wip

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

@@ -36,6 +36,7 @@ import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-
 
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { isEmpty } from 'lodash';
 
 /**
  * Bills actions bar.
@@ -46,6 +47,7 @@ function BillActionsBar({
 
   // #withBills
   billsConditionsRoles,
+  billsSelectedRows,
 
   // #withSettings
   billsTableSize,
@@ -97,6 +99,26 @@ function BillActionsBar({
   const handlePrintBtnClick = () => {
     downloadExportPdf({ resource: 'Bill' });
   };
+  // Handle bulk delete.
+  const handleBulkDelete = () => {
+    openAlert('bills-bulk-delete', { billsIds: billsSelectedRows });
+  };
+
+  if (!isEmpty(billsSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
 
   return (
     <DashboardActionsBar>
@@ -180,8 +202,9 @@ function BillActionsBar({
 export default compose(
   withBillsActions,
   withSettingsActions,
-  withBills(({ billsTableState }) => ({
+  withBills(({ billsTableState, billsSelectedRows }) => ({
     billsConditionsRoles: billsTableState.filterRoles,
+    billsSelectedRows,
   })),
   withSettings(({ billsettings }) => ({
     billsTableSize: billsettings?.tableSize,

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

@@ -32,6 +32,7 @@ import { DRAWERS } from '@/constants/drawers';
 function BillsDataTable({
   // #withBillsActions
   setBillsTableState,
+  setBillsSelectedRows,
 
   // #withBills
   billsTableState,
@@ -108,6 +109,12 @@ function BillsDataTable({
     openDrawer(DRAWERS.BILL_DETAILS, { billId: cell.row.original.id });
   };
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedFlatRows) => {
+    const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+    setBillsSelectedRows(selectedIds);
+  };
+
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.BILLS);
@@ -138,6 +145,7 @@ function BillsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        onSelectedRowsChange={handleSelectedRowsChange}
         size={billsTableSize}
         payload={{
           onDelete: handleDeleteBill,

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

@@ -3,16 +3,19 @@ import { connect } from 'react-redux';
 import {
   getBillsTableStateFactory,
   billsTableStateChangedFactory,
+  getBillsSelectedRowsFactory,
 } from '@/store/Bills/bills.selectors';
 
 export default (mapState) => {
   const getBillsTableState = getBillsTableStateFactory();
   const billsTableStateChanged = billsTableStateChangedFactory();
+  const getBillsSelectedRows = getBillsSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       billsTableState: getBillsTableState(state, props),
       billsTableStateChanged: billsTableStateChanged(state, props),
+      billsSelectedRows: getBillsSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 import {
   setBillsTableState,
   resetBillsTableState,
+  setBillsSelectedRows,
 } from '@/store/Bills/bills.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
   resetBillsTableState: () => dispatch(resetBillsTableState()),
+  setBillsSelectedRows: (selectedRows) =>
+    dispatch(setBillsSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapDispatchToProps);

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

@@ -6,7 +6,7 @@ import {
 } from '@/store/VendorCredit/vendorCredit.selector';
 
 export default (mapState) => {
-  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactory();
+  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactoryth();
   const isVendorsCreditNoteTableChanged =
     isVendorCreditTableStateChangedFactory();
 
@@ -17,6 +17,7 @@ export default (mapState) => {
         state,
         props,
       ),
+      vendorsCreditNoteSelectedRows: getVendorsCreditNoteSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import {
   setVendorCreditTableState,
   resetVendorCreditTableState,
+  setVendorCreditsSelectedRows,
 } from '@/store/VendorCredit/vendorCredit.actions';
 
 const mapDispatchToProps = (dispatch) => ({
@@ -10,6 +11,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setVendorCreditTableState(queries)),
   resetVendorsCreditNoteTableState: () =>
     dispatch(resetVendorCreditTableState()),
+  setVendorsCreditNoteSelectedRows: (selectedRows) =>
+    dispatch(setVendorCreditsSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapDispatchToProps);