wip

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

@@ -8,6 +8,7 @@ import {
   Intent,
   Alignment,
 } from '@blueprintjs/core';
+import { isEmpty } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import {
   Icon,
@@ -43,6 +44,7 @@ function ManualJournalActionsBar({
 
   // #withManualJournals
   manualJournalsFilterConditions,
+  manualJournalsSelectedRows,
 
   // #withSettings
   manualJournalsTableSize,
@@ -70,7 +72,7 @@ function ManualJournalActionsBar({
     history.push('/make-journal-entry');
   };
   // Handle delete button click.
-  const handleBulkDelete = () => {};
+  const handleBulkDelete = () => { };
 
   // Handle tab change.
   const handleTabChange = (view) => {
@@ -100,6 +102,22 @@ function ManualJournalActionsBar({
     downloadExportPdf({ resource: 'ManualJournal' });
   };
 
+  if (!isEmpty(manualJournalsSelectedRows)) {
+    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>
@@ -184,8 +202,9 @@ export default compose(
   withDialogActions,
   withManualJournalsActions,
   withSettingsActions,
-  withManualJournals(({ manualJournalsTableState }) => ({
+  withManualJournals(({ manualJournalsTableState, manualJournalsSelectedRows }) => ({
     manualJournalsFilterConditions: manualJournalsTableState.filterRoles,
+    manualJournalsSelectedRows,
   })),
   withSettings(({ manualJournalsSettings }) => ({
     manualJournalsTableSize: manualJournalsSettings?.tableSize,

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

@@ -33,6 +33,7 @@ import { DRAWERS } from '@/constants/drawers';
 function ManualJournalsDataTable({
   // #withManualJournalsActions
   setManualJournalsTableState,
+  setManualJournalsSelectedRows,
 
   // #withAlertsActions
   openAlert,
@@ -67,31 +68,26 @@ function ManualJournalsDataTable({
   const handlePublishJournal = ({ id }) => {
     openAlert('journal-publish', { manualJournalId: id });
   };
-
   // Handle the journal edit action.
   const handleEditJournal = ({ id }) => {
     history.push(`/manual-journals/${id}/edit`);
   };
-
   // Handle the journal delete action.
   const handleDeleteJournal = ({ id }) => {
     openAlert('journal-delete', { manualJournalId: id });
   };
-
   // Handle view detail journal.
   const handleViewDetailJournal = ({ id }) => {
     openDrawer(DRAWERS.JOURNAL_DETAILS, {
       manualJournalId: id,
     });
   };
-
   // Handle cell click.
   const handleCellClick = (cell, event) => {
     openDrawer(DRAWERS.JOURNAL_DETAILS, {
       manualJournalId: cell.row.original.id,
     });
   };
-
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.MANUAL_JOURNALS);
@@ -107,6 +103,12 @@ function ManualJournalsDataTable({
     },
     [setManualJournalsTableState],
   );
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedFlatRows) => {
+    const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+    setManualJournalsSelectedRows(selectedIds);
+  };
+
 
   // Display manual journal empty status instead of the table.
   if (isEmptyStatus) {
@@ -130,6 +132,7 @@ function ManualJournalsDataTable({
         pagesCount={pagination.pagesCount}
         autoResetSortBy={false}
         autoResetPage={false}
+        onSelectedRowsChange={handleSelectedRowsChange}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}

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

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { connect } from 'react-redux';
 import {
+  getManualJournalsSelectedRowsFactory,
   getManualJournalsTableStateFactory,
   manualJournalTableStateChangedFactory,
 } from '@/store/manualJournals/manualJournals.selectors';
@@ -9,6 +10,7 @@ export default (mapState) => {
   const getJournalsTableQuery = getManualJournalsTableStateFactory();
   const manualJournalTableStateChanged =
     manualJournalTableStateChangedFactory();
+  const getSelectedRows = getManualJournalsSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
@@ -17,6 +19,7 @@ export default (mapState) => {
         state,
         props,
       ),
+      manualJournalsSelectedRows: getSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -2,11 +2,14 @@
 import { connect } from 'react-redux';
 import {
   setManualJournalsTableState,
+  setManualJournalsSelectedRows,
 } from '@/store/manualJournals/manualJournals.actions';
 
 const mapActionsToProps = (dispatch) => ({
   setManualJournalsTableState: (queries) =>
     dispatch(setManualJournalsTableState(queries)),
+  setManualJournalsSelectedRows: (selectedRows) =>
+    dispatch(setManualJournalsSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapActionsToProps);