Can delete multiple movements

moneymgr_web/src/routes/AccountRoute.tsx

@@ -1,7 +1,12 @@
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import DriveFileMoveOutlineIcon from "@mui/icons-material/DriveFileMoveOutline";
-import { Tooltip, Typography } from "@mui/material";
-import { DataGrid, GridActionsCellItem, GridColDef } from "@mui/x-data-grid";
+import { IconButton, Tooltip, Typography } from "@mui/material";
+import {
+  DataGrid,
+  GridActionsCellItem,
+  GridColDef,
+  GridRowSelectionModel,
+} from "@mui/x-data-grid";
 import React from "react";
 import { useParams } from "react-router-dom";
 import { Movement, MovementApi } from "../api/MovementsApi";
@@ -93,9 +98,13 @@ function MovementsTable(p: {
   const alert = useAlert();
   const confirm = useConfirm();
   const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
 
   const chooseAccount = useSelectAccount();
 
+  const [rowSelectionModel, setRowSelectionModel] =
+    React.useState<GridRowSelectionModel>([]);
+
   // Change account of movement
   const handleMoveClick = async (movement: Movement) => {
     const target = await chooseAccount(
@@ -143,6 +152,46 @@ function MovementsTable(p: {
     }
   };
 
+  // Delete multiple movements
+  const deleteMultiple = async () => {
+    try {
+      const movements = p.movements.filter((m) =>
+        rowSelectionModel.includes(m.id)
+      );
+
+      if (
+        !(await confirm(
+          <>
+            Do you really want to delete the following movements:
+            <ul>
+              {movements.map((m) => (
+                <li>
+                  {m.label} ({m.amount} €)
+                </li>
+              ))}
+            </ul>
+          </>
+        ))
+      )
+        return;
+
+      for (const [num, m] of movements.entries()) {
+        loadingMessage.show(`Deleting movement ${num}/${movements.length}`);
+
+        await MovementApi.Delete(m);
+      }
+
+      snackbar("The movements have been successfully deleted!");
+
+      p.needReload(false);
+    } catch (e) {
+      console.error("Failed to delete multiple movements!", e);
+      alert(`Failed to delete multiple movements! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   const columns: GridColDef<(typeof p.movements)[number]>[] = [
     {
       field: "checked",
@@ -221,33 +270,53 @@ function MovementsTable(p: {
       },
     },
   ];
+
   return (
-    <DataGrid<Movement>
-      columns={columns}
-      rows={p.movements}
-      autoPageSize
-      checkboxSelection
-      initialState={{
-        sorting: {
-          sortModel: [{ field: "time", sort: "desc" }],
-        },
-        columns: {
-          columnVisibilityModel: {
-            checked: false,
+    <>
+      <div>
+        <Tooltip title="Delete all the selected entries">
+          <IconButton
+            disabled={
+              rowSelectionModel.length === 0 ||
+              rowSelectionModel.length === p.movements.length
+            }
+            onClick={deleteMultiple}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+      <DataGrid<Movement>
+        columns={columns}
+        rows={p.movements}
+        autoPageSize
+        checkboxSelection
+        initialState={{
+          sorting: {
+            sortModel: [{ field: "time", sort: "desc" }],
           },
-        },
-      }}
-      processRowUpdate={async (n) => {
-        try {
-          return await MovementApi.Update(n);
-        } catch (e) {
-          console.error("Failed to update movement information!", e);
-          alert(`Failed to update row! ${e}`);
-          throw e;
-        } finally {
-          p.needReload(true);
-        }
-      }}
-    />
+          columns: {
+            columnVisibilityModel: {
+              checked: false,
+            },
+          },
+        }}
+        onRowSelectionModelChange={(newRowSelectionModel) => {
+          setRowSelectionModel(newRowSelectionModel);
+        }}
+        rowSelectionModel={rowSelectionModel}
+        processRowUpdate={async (n) => {
+          try {
+            return await MovementApi.Update(n);
+          } catch (e) {
+            console.error("Failed to update movement information!", e);
+            alert(`Failed to update row! ${e}`);
+            throw e;
+          } finally {
+            p.needReload(true);
+          }
+        }}
+      />
+    </>
   );
 }