feat: bulk transcations delete

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

@@ -33,6 +33,7 @@ import withEstimatesActions from './withEstimatesActions';
 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 { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from '@/hooks/query/estimates';
@@ -43,6 +44,7 @@ import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { DRAWERS } from '@/constants/drawers';
+import { isEmpty } from 'lodash';
 import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
@@ -57,6 +59,7 @@ function EstimateActionsBar({
 
   // #withEstimates
   estimatesFilterRoles,
+  estimatesSelectedRows = [],
 
   // #withSettings
   estimatesTableSize,
@@ -69,6 +72,9 @@ function EstimateActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #withAlertActions
+  openAlert,
 }) {
   const history = useHistory();
 
@@ -116,6 +122,11 @@ function EstimateActionsBar({
     openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleEstimate' });
   };
 
+  // Handle bulk estimates delete.
+  const handleBulkDelete = () => {
+    openAlert('estimates-bulk-delete', { estimatesIds: estimatesSelectedRows });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -150,13 +161,13 @@ function EstimateActionsBar({
           />
         </AdvancedFilterPopover>
 
-        <If condition={false}>
+        <If condition={!isEmpty(estimatesSelectedRows)}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
-            // onClick={handleBulkDelete}
+            onClick={handleBulkDelete}
           />
         </If>
         <Button
@@ -218,8 +229,10 @@ function EstimateActionsBar({
 export default compose(
   withEstimatesActions,
   withSettingsActions,
-  withEstimates(({ estimatesTableState }) => ({
+  withAlertActions,
+  withEstimates(({ estimatesTableState, estimatesSelectedRows }) => ({
     estimatesFilterRoles: estimatesTableState.filterRoles,
+    estimatesSelectedRows: estimatesSelectedRows || [],
   })),
   withSettings(({ estimatesSettings }) => ({
     estimatesTableSize: estimatesSettings?.tableSize,

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

@@ -31,6 +31,7 @@ import { DialogsName } from '@/constants/dialogs';
 function EstimatesDataTable({
   // #withEstimatesActions
   setEstimatesTableState,
+  setEstimatesSelectedRows,
 
   // #withAlertsActions
   openAlert,
@@ -126,6 +127,15 @@ function EstimatesDataTable({
     [setEstimatesTableState],
   );
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (selectedFlatRows) => {
+      const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+      setEstimatesSelectedRows(selectedIds);
+    },
+    [setEstimatesSelectedRows],
+  );
+
   // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <EstimatesEmptyStatus />;
@@ -140,6 +150,8 @@ function EstimatesDataTable({
         headerLoading={isEstimatesLoading}
         progressBarLoading={isEstimatesFetching}
         onFetchData={handleFetchData}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        autoResetSelectedRows={false}
         noInitialFetch={true}
         manualSortBy={true}
         selectionColumn={true}

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

@@ -22,27 +22,31 @@ import { safeCallback } from '@/utils';
 export const statusAccessor = (row) => (
   <Choose>
     <Choose.When condition={row.is_approved}>
-      <Tag intent={Intent.SUCCESS} round>
+      <Tag intent={Intent.SUCCESS} round minimal>
         <T id={'approved'} />
       </Tag>
     </Choose.When>
+
     <Choose.When condition={row.is_rejected}>
-      <Tag intent={Intent.DANGER} round>
+      <Tag intent={Intent.DANGER} round minimal>
         <T id={'rejected'} />
       </Tag>
     </Choose.When>
+
     <Choose.When condition={row.is_expired}>
-      <Tag intent={Intent.WARNING} round>
+      <Tag intent={Intent.WARNING} round minimal>
         <T id={'estimate.status.expired'} />
       </Tag>
     </Choose.When>
+
     <Choose.When condition={row.is_delivered}>
-      <Tag intent={Intent.SUCCESS} round>
+      <Tag intent={Intent.SUCCESS} round minimal>
         <T id={'delivered'} />
       </Tag>
     </Choose.When>
+
     <Choose.Otherwise>
-      <Tag round>
+      <Tag round minimal>
         <T id={'draft'} />
       </Tag>
     </Choose.Otherwise>

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

@@ -13,6 +13,7 @@ export default (mapState) => {
     const mapped = {
       estimatesTableState: getEstimatesTableState(state, props),
       estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
+      estimatesSelectedRows: state.estimates?.selectedRows || [],
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -3,11 +3,13 @@ import { connect } from 'react-redux';
 import {
   setEstimatesTableState,
   resetEstimatesTableState,
+  setEstimatesSelectedRows,
 } from '@/store/Estimate/estimates.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
   resetEstimatesTableState: () => dispatch(resetEstimatesTableState()),
+  setEstimatesSelectedRows: (selectedRows) => dispatch(setEstimatesSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapDispatchToProps);