wip

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx

@@ -127,6 +127,24 @@ function EstimateActionsBar({
     openAlert('estimates-bulk-delete', { estimatesIds: estimatesSelectedRows });
   };
 
+  console.log(estimatesSelectedRows, 'estimatesSelectedRows');
+
+  if (!isEmpty(estimatesSelectedRows)) {
+    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>
@@ -160,16 +178,7 @@ function EstimateActionsBar({
             conditionsCount={estimatesFilterRoles.length}
           />
         </AdvancedFilterPopover>
-
-        <If condition={!isEmpty(estimatesSelectedRows)}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={handleBulkDelete}
-          />
-        </If>
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.tsx

@@ -3,17 +3,19 @@ import { connect } from 'react-redux';
 import {
   getEstimatesTableStateFactory,
   isEstimatesTableStateChangedFactory,
+  getEstimatesSelectedRowsFactory,
 } from '@/store/Estimate/estimates.selectors';
 
 export default (mapState) => {
   const getEstimatesTableState = getEstimatesTableStateFactory();
+  const getSelectedRows = getEstimatesSelectedRowsFactory();
   const isEstimatesTableStateChanged = isEstimatesTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       estimatesTableState: getEstimatesTableState(state, props),
       estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
-      estimatesSelectedRows: state.estimates?.selectedRows || [],
+      estimatesSelectedRows: getSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx

@@ -123,6 +123,22 @@ function InvoiceActionsBar({
     openAlert('invoices-bulk-delete', { invoicesIds: invoicesSelectedRows });
   };
 
+  if (!isEmpty(invoicesSelectedRows)) {
+    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>
@@ -155,16 +171,6 @@ function InvoiceActionsBar({
         </AdvancedFilterPopover>
 
         <NavbarDivider />
-
-        <If condition={!isEmpty(invoicesSelectedRows)}>
-          <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'} />}
@@ -224,9 +230,9 @@ export default compose(
   withInvoiceActions,
   withSettingsActions,
   withAlertActions,
-  withInvoices(({ invoicesTableState }) => ({
+  withInvoices(({ invoicesTableState, invoicesSelectedRows }) => ({
     invoicesFilterRoles: invoicesTableState.filterRoles,
-    invoicesSelectedRows: invoicesTableState?.selectedRows || [],
+    invoicesSelectedRows,
   })),
   withSettings(({ invoiceSettings }) => ({
     invoicesTableSize: invoiceSettings?.tableSize,

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.tsx

@@ -3,17 +3,19 @@ import { connect } from 'react-redux';
 import {
   getInvoicesTableStateFactory,
   isInvoicesTableStateChangedFactory,
+  getInvoicesSelectedRowsFactory,
 } from '@/store/Invoice/invoices.selector';
 
 export default (mapState) => {
   const getInvoicesTableState = getInvoicesTableStateFactory();
   const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
+  const getSelectedRows = getInvoicesSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       invoicesTableState: getInvoicesTableState(state, props),
       invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
-      invoicesSelectedRows: state.invoices?.selectedRows || [],
+      invoicesSelectedRows: getSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -45,6 +45,7 @@ import { DialogsName } from '@/constants/dialogs';
 import { compose } from '@/utils';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { DRAWERS } from '@/constants/drawers';
+import { isEmpty } from 'lodash';
 
 /**
  * Receipts actions bar.
@@ -55,6 +56,7 @@ function ReceiptActionsBar({
 
   // #withReceipts
   receiptsFilterConditions,
+  receiptSelectedRows,
 
   // #withSettings
   receiptsTableSize,
@@ -118,6 +120,24 @@ function ReceiptActionsBar({
     openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleReceipt' });
   };
 
+  if (!isEmpty(receiptSelectedRows)) {
+    const handleBulkDelete = () => {
+      openAlert('receipts-bulk-delete', { receiptsIds: receiptSelectedRows });
+    };
+    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>
@@ -219,8 +239,9 @@ function ReceiptActionsBar({
 export default compose(
   withReceiptsActions,
   withSettingsActions,
-  withReceipts(({ receiptTableState }) => ({
+  withReceipts(({ receiptTableState, receiptSelectedRows }) => ({
     receiptsFilterConditions: receiptTableState.filterRoles,
+    receiptSelectedRows,
   })),
   withSettings(({ receiptSettings }) => ({
     receiptsTableSize: receiptSettings?.tableSize,

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

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { connect } from 'react-redux';
 import {
+  getReceiptsSelectedRowsFactory,
   getReceiptsTableStateFactory,
   receiptsTableStateChangedFactory,
 } from '@/store/receipts/receipts.selector';
@@ -8,11 +9,13 @@ import {
 export default (mapState) => {
   const getReceiptsTableState = getReceiptsTableStateFactory();
   const receiptsTableStateChanged = receiptsTableStateChangedFactory();
+  const getSelectedRows = getReceiptsSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       receiptTableState: getReceiptsTableState(state, props),
       receiptsTableStateChanged: receiptsTableStateChanged(state, props),
+      receiptSelectedRows: getSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };