wip

packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.tsx

@@ -30,6 +30,7 @@ import withManualJournalsActions from './withManualJournalsActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 
 import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 import { compose } from '@/utils';
@@ -44,7 +45,7 @@ function ManualJournalActionsBar({
 
   // #withManualJournals
   manualJournalsFilterConditions,
-  manualJournalsSelectedRows,
+  manualJournalsSelectedRows = [],
 
   // #withSettings
   manualJournalsTableSize,
@@ -54,6 +55,9 @@ function ManualJournalActionsBar({
 
   // #withDialogActions
   openDialog,
+
+  // #withAlertActions
+  openAlert,
 }) {
   // History context.
   const history = useHistory();
@@ -72,7 +76,11 @@ function ManualJournalActionsBar({
     history.push('/make-journal-entry');
   };
   // Handle delete button click.
-  const handleBulkDelete = () => { };
+  const handleBulkDelete = () => {
+    openAlert('journals-bulk-delete', {
+      journalsIds: manualJournalsSelectedRows,
+    });
+  };
 
   // Handle tab change.
   const handleTabChange = (view) => {
@@ -200,6 +208,7 @@ function ManualJournalActionsBar({
 
 export default compose(
   withDialogActions,
+  withAlertActions,
   withManualJournalsActions,
   withSettingsActions,
   withManualJournals(({ manualJournalsTableState, manualJournalsSelectedRows }) => ({

packages/webapp/src/containers/Alerts/Invoices/InvoiceBulkDeleteAlert.tsx

@@ -4,8 +4,8 @@ import { FormattedMessage as T } from '@/components';
 import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
-import { AppToaster } from '@/components';
 
+import { AppToaster } from '@/components';
 import { useBulkDeleteInvoices } from '@/hooks/query/invoices';
 import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withAlertActions from '@/containers/Alert/withAlertActions';

packages/webapp/src/containers/Alerts/PaymentReceived/PaymentReceivedBulkDeleteAlert.tsx

@@ -26,7 +26,6 @@ function PaymentReceivedBulkDeleteAlert({
   const handleCancel = () => {
     closeAlert(name);
   };
-
   const handleConfirmBulkDelete = () => {
     bulkDeletePaymentReceives(paymentsReceivedIds)
       .then(() => {

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

@@ -34,6 +34,7 @@ import withExpensesActions from './withExpensesActions';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 
 import { compose } from '@/utils';
 import { isEmpty } from 'lodash';
@@ -47,7 +48,7 @@ function ExpensesActionsBar({
 
   // #withExpenses
   expensesFilterConditions,
-  expensesSelectedRows,
+  expensesSelectedRows = [],
 
   // #withSettings
   expensesTableSize,
@@ -57,6 +58,9 @@ function ExpensesActionsBar({
 
   // #withDialogActions
   openDialog,
+
+  // #withAlertActions
+  openAlert,
 }) {
   // History context.
   const history = useHistory();
@@ -75,7 +79,11 @@ function ExpensesActionsBar({
     history.push('/expenses/new');
   };
   // Handle delete button click.
-  const handleBulkDelete = () => { };
+  const handleBulkDelete = () => {
+    openAlert('expenses-bulk-delete', {
+      expensesIds: expensesSelectedRows,
+    });
+  };
 
   // Handles the tab chaning.
   const handleTabChange = (view) => {
@@ -113,6 +121,7 @@ function ExpensesActionsBar({
             icon={<Icon icon="trash-16" iconSize={16} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
+            onClick={handleBulkDelete}
           />
         </NavbarGroup>
       </DashboardActionsBar>
@@ -200,6 +209,7 @@ function ExpensesActionsBar({
 
 export default compose(
   withDialogActions,
+  withAlertActions,
   withExpensesActions,
   withSettingsActions,
   withExpenses(({ expensesTableState, expensesSelectedRows }) => ({

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

@@ -3,12 +3,15 @@ import { connect } from 'react-redux';
 import {
   getVendorCreditTableStateFactory,
   isVendorCreditTableStateChangedFactory,
+  getVendorsCreditNoteSelectedRowsFactory,
 } from '@/store/VendorCredit/vendorCredit.selector';
 
 export default (mapState) => {
-  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactoryth();
+  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactory();
   const isVendorsCreditNoteTableChanged =
     isVendorCreditTableStateChangedFactory();
+  const getVendorsCreditNoteSelectedRows =
+    getVendorsCreditNoteSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx

@@ -13,7 +13,7 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-
+import { isEmpty } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import {
   Icon,
@@ -27,6 +27,7 @@ import {
   DashboardActionsBar,
 } from '@/components';
 
+import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withPaymentsReceived from './withPaymentsReceived';
 import withPaymentsReceivedActions from './withPaymentsReceivedActions';
 import withSettings from '@/containers/Settings/withSettings';
@@ -55,6 +56,7 @@ function PaymentsReceivedActionsBar({
 
   // #withPaymentsReceived
   paymentFilterConditions,
+  paymentReceivesSelectedRows,
 
   // #withSettings
   paymentReceivesTableSize,
@@ -67,6 +69,9 @@ function PaymentsReceivedActionsBar({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withAlertsActions
+  openAlert,
 }) {
   // History context.
   const history = useHistory();
@@ -89,12 +94,10 @@ function PaymentsReceivedActionsBar({
   const handleTabChange = (viewId) => {
     setPaymentReceivesTableState({ customViewId: viewId.id || null });
   };
-
   // Handle click a refresh payment receives
   const handleRefreshBtnClick = () => {
     refresh();
   };
-
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('paymentReceives', 'tableSize', size);
@@ -116,6 +119,24 @@ function PaymentsReceivedActionsBar({
     openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'PaymentReceive' });
   };
 
+  if (!isEmpty(paymentReceivesSelectedRows)) {
+    const handleBulkDelete = () => {
+      openAlert('payments-received-bulk-delete', { paymentsReceivedIds: paymentReceivesSelectedRows });
+    };
+    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>
       <NavbarGroup>
@@ -147,16 +168,6 @@ function PaymentsReceivedActionsBar({
             conditionsCount={paymentFilterConditions.length}
           />
         </AdvancedFilterPopover>
-
-        <If condition={false}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            // onClick={handleBulkDelete}
-          />
-        </If>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
@@ -216,13 +227,15 @@ function PaymentsReceivedActionsBar({
 export default compose(
   withPaymentsReceivedActions,
   withSettingsActions,
-  withPaymentsReceived(({ paymentReceivesTableState }) => ({
+  withPaymentsReceived(({ paymentReceivesTableState, paymentReceivesSelectedRows }) => ({
     paymentReceivesTableState,
     paymentFilterConditions: paymentReceivesTableState.filterRoles,
+    paymentReceivesSelectedRows,
   })),
   withSettings(({ paymentReceiveSettings }) => ({
     paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
   })),
   withDialogActions,
   withDrawerActions,
+  withAlertsActions,
 )(PaymentsReceivedActionsBar);

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedTable.tsx

@@ -32,6 +32,7 @@ import { DialogsName } from '@/constants/dialogs';
 function PaymentsReceivedDataTable({
   // #withPaymentsReceivedActions
   setPaymentReceivesTableState,
+  setPaymentReceivesSelectedRows,
 
   // #withPaymentsReceived
   paymentReceivesTableState,
@@ -106,6 +107,12 @@ function PaymentsReceivedDataTable({
     [setPaymentReceivesTableState],
   );
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedRows) => {
+    const selectedIds = selectedRows?.map((row) => row.original.id) || [];
+    setPaymentReceivesSelectedRows(selectedIds);
+  };
+
   // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <PaymentReceivesEmptyStatus />;
@@ -127,6 +134,7 @@ function PaymentsReceivedDataTable({
         autoResetSortBy={false}
         autoResetPage={false}
         pagination={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
         initialPageSize={paymentReceivesTableState.pageSize}
         pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/withPaymentsReceived.tsx

@@ -2,17 +2,20 @@
 import { connect } from 'react-redux';
 import {
   getPaymentReceiveTableStateFactory,
-  paymentsTableStateChangedFactory
+  paymentsTableStateChangedFactory,
+  getPaymentReceivesSelectedRowsFactory
 } from '@/store/PaymentReceives/paymentReceives.selector';
 
 export default (mapState) => {
   const getPaymentReceiveTableState = getPaymentReceiveTableStateFactory();
   const paymentsTableStateChanged = paymentsTableStateChangedFactory();
+  const getSelectedRows = getPaymentReceivesSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       paymentReceivesTableState: getPaymentReceiveTableState(state, props),
       paymentsTableStateChanged: paymentsTableStateChanged(state, props),
+      paymentReceivesSelectedRows: getSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/withPaymentsReceivedActions.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import {
   setPaymentReceivesTableState,
   resetPaymentReceivesTableState,
+  setPaymentReceivesSelectedRows,
 } from '@/store/PaymentReceives/paymentReceives.actions';
 
 const mapDispatchToProps = (dispatch) => ({
@@ -11,6 +12,9 @@ const mapDispatchToProps = (dispatch) => ({
 
   resetPaymentReceivesTableState: () =>
     dispatch(resetPaymentReceivesTableState()),
+
+  setPaymentReceivesSelectedRows: (selectedRows: number[]) =>
+    dispatch(setPaymentReceivesSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapDispatchToProps);

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx

@@ -53,6 +53,7 @@ import { isEmpty } from 'lodash';
 function ReceiptActionsBar({
   // #withReceiptsActions
   setReceiptsTableState,
+  setReceiptsSelectedRows,
 
   // #withReceipts
   receiptsFilterConditions,
@@ -132,6 +133,7 @@ function ReceiptActionsBar({
             icon={<Icon icon="trash-16" iconSize={16} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
+            onClick={handleBulkDelete}
           />
         </NavbarGroup>
       </DashboardActionsBar>

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx

@@ -32,6 +32,7 @@ import { DialogsName } from '@/constants/dialogs';
 function ReceiptsDataTable({
   // #withReceiptsActions
   setReceiptsTableState,
+  setReceiptsSelectedRows,
 
   // #withReceipts
   receiptTableState,
@@ -107,14 +108,19 @@ function ReceiptsDataTable({
     },
     [setReceiptsTableState],
   );
-
-  if (isEmptyStatus) {
-    return <ReceiptsEmptyStatus />;
-  }
   // Handle cell click.
   const handleCellClick = (cell, event) => {
     openDrawer(DRAWERS.RECEIPT_DETAILS, { receiptId: cell.row.original.id });
   };
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedRows) => {
+    const selectedIds = selectedRows?.map((row) => row.original.id) || [];
+    setReceiptsSelectedRows(selectedIds);
+  };
+
+  if (isEmptyStatus) {
+    return <ReceiptsEmptyStatus />;
+  }
 
   return (
     <DashboardContentTable>
@@ -142,6 +148,7 @@ function ReceiptsDataTable({
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
         size={receiptsTableSize}
+        onSelectedRowsChange={handleSelectedRowsChange}
         payload={{
           onEdit: handleEditReceipt,
           onDelete: handleDeleteReceipt,
@@ -160,9 +167,7 @@ export default compose(
   withReceiptsActions,
   withDrawerActions,
   withDialogActions,
-  withReceipts(({ receiptTableState }) => ({
-    receiptTableState,
-  })),
+  withReceipts(({ receiptTableState }) => ({ receiptTableState })),
   withSettings(({ receiptSettings }) => ({
     receiptsTableSize: receiptSettings?.tableSize,
   })),

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.tsx

@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 import {
   setReceiptsTableState,
   resetReceiptsTableState,
+  setReceiptsSelectedRows,
 } from '@/store/receipts/receipts.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setReceiptsTableState: (queries) => dispatch(setReceiptsTableState(queries)),
   resetReceiptsTableState: () => dispatch(resetReceiptsTableState()),
+  setReceiptsSelectedRows: (selectedRows) =>
+    dispatch(setReceiptsSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapDispatchToProps);