wip

packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx

@@ -36,6 +36,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
 
 import { compose } from '@/utils';
+import { isEmpty } from 'lodash';
 
 /**
  * Expenses actions bar.
@@ -46,6 +47,7 @@ function ExpensesActionsBar({
 
   // #withExpenses
   expensesFilterConditions,
+  expensesSelectedRows,
 
   // #withSettings
   expensesTableSize,
@@ -73,7 +75,7 @@ function ExpensesActionsBar({
     history.push('/expenses/new');
   };
   // Handle delete button click.
-  const handleBulkDelete = () => {};
+  const handleBulkDelete = () => { };
 
   // Handles the tab chaning.
   const handleTabChange = (view) => {
@@ -102,6 +104,21 @@ function ExpensesActionsBar({
     downloadExportPdf({ resource: 'Expense' });
   };
 
+  if (!isEmpty(expensesSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -185,8 +202,9 @@ export default compose(
   withDialogActions,
   withExpensesActions,
   withSettingsActions,
-  withExpenses(({ expensesTableState }) => ({
+  withExpenses(({ expensesTableState, expensesSelectedRows }) => ({
     expensesFilterConditions: expensesTableState.filterRoles,
+    expensesSelectedRows,
   })),
   withSettings(({ expenseSettings }) => ({
     expensesTableSize: expenseSettings?.tableSize,

packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.tsx

@@ -31,6 +31,7 @@ import { DRAWERS } from '@/constants/drawers';
 function ExpensesDataTable({
   // #withExpensesActions
   setExpensesTableState,
+  setExpensesSelectedRows,
 
   // #withDrawerActions
   openDrawer,
@@ -42,7 +43,7 @@ function ExpensesDataTable({
   expensesTableSize,
 
   // #withExpenses
-  expensesTableState
+  expensesTableState,
 }) {
   // Expenses list context.
   const {
@@ -102,6 +103,12 @@ function ExpensesDataTable({
     openDrawer(DRAWERS.EXPENSE_DETAILS, { expenseId: cell.row.original.id });
   };
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedFlatRows) => {
+    const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+    setExpensesSelectedRows(selectedIds);
+  };
+
   // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <ExpensesEmptyStatus />;
@@ -132,6 +139,7 @@ function ExpensesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        onSelectedRowsChange={handleSelectedRowsChange}
         size={expensesTableSize}
         payload={{
           onPublish: handlePublishExpense,
@@ -152,5 +160,5 @@ export default compose(
   withSettings(({ expenseSettings }) => ({
     expensesTableSize: expenseSettings?.tableSize,
   })),
-  withExpenses(({ expensesTableState }) => ({ expensesTableState }))
+  withExpenses(({ expensesTableState }) => ({ expensesTableState })),
 )(ExpensesDataTable);

packages/webapp/src/containers/Expenses/ExpensesLanding/withExpenses.tsx

@@ -2,17 +2,20 @@
 import { connect } from 'react-redux';
 import {
   expensesTableStateChangedFactory,
+  getExpensesSelectedRowsFactory,
   getExpensesTableStateFactory,
 } from '@/store/expenses/expenses.selectors';
 
 export default (mapState) => {
   const getExpensesTableState = getExpensesTableStateFactory();
   const expensesTableStateChanged = expensesTableStateChangedFactory();
+  const getSelectedRows = getExpensesSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       expensesTableState: getExpensesTableState(state, props),
       expensesTableStateChanged: expensesTableStateChanged(state, props),
+      expensesSelectedRows: getSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

packages/webapp/src/containers/Expenses/ExpensesLanding/withExpensesActions.tsx

@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 import {
   setExpensesTableState,
   resetExpensesTableState,
+  setExpensesSelectedRows,
 } from '@/store/expenses/expenses.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setExpensesTableState: (state) => dispatch(setExpensesTableState(state)),
   resetExpensesTableState: (state) => dispatch(resetExpensesTableState(state)),
+  setExpensesSelectedRows: (selectedRows) =>
+    dispatch(setExpensesSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapDispatchToProps);