Can delete multiple inbox entries

moneymgr_web/src/routes/InboxRoute.tsx

@@ -10,6 +10,7 @@ import {
   ListItemText,
   Menu,
   MenuItem,
+  TextField,
   Tooltip,
 } from "@mui/material";
 import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
@@ -117,6 +118,14 @@ function InboxTable(p: {
   const snackbar = useSnackbar();
   const loadingMessage = useLoadingMessage();
 
+  const [labelFilter, setLabelFilter] = React.useState("");
+
+  const filteredList = React.useMemo(() => {
+    return p.entries.filter((m) =>
+      (m.label ?? "").toLowerCase().includes(labelFilter.toLowerCase())
+    );
+  }, [p.entries, labelFilter]);
+
   const [rowSelectionModel, setRowSelectionModel] =
     React.useState<GridRowSelectionModel>([]);
 
@@ -168,6 +177,50 @@ function InboxTable(p: {
     }
   };
 
+  // Delete multiple inbox entries
+  const deleteMultiple = async () => {
+    try {
+      const deletedEntries = p.entries.filter((m) =>
+        rowSelectionModel.includes(m.id)
+      );
+
+      if (
+        !(await confirm(
+          <>
+            Do you really want to delete the following inbox entries:
+            <ul>
+              {deletedEntries.map((m) => (
+                <li key={m.id}>
+                  {m.label ?? "Label unspecified"} ({m.amount ?? 0} €)
+                </li>
+              ))}
+            </ul>
+          </>
+        ))
+      )
+        return;
+
+      for (const [num, e] of deletedEntries.entries()) {
+        loadingMessage.show(
+          `Deleting inbox entry ${num}/${deletedEntries.length}`
+        );
+
+        await InboxApi.Delete(e);
+
+        p.onDeleteEntry(e);
+      }
+
+      snackbar("The inbox entries have been successfully deleted!");
+
+      p.onReload(false);
+    } catch (e) {
+      console.error("Failed to delete multiple inbox entries!", e);
+      alert(`Failed to delete multiple inbox entries! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   const columns: GridColDef<(typeof p.entries)[number]>[] = [
     {
       field: "time",
@@ -247,10 +300,35 @@ function InboxTable(p: {
   ];
 
   return (
+    <>
+      <div style={{ display: "flex" }}>
+        <TextField
+          placeholder="Filter by label"
+          variant="standard"
+          size="small"
+          value={labelFilter}
+          onChange={(e) => {
+            setLabelFilter(e.target.value);
+          }}
+          style={{ padding: "0px", flex: 1 }}
+        />
+        <span style={{ flex: 1 }}></span>
+        <Tooltip title="Delete all the selected inbox entries">
+          <IconButton
+            disabled={
+              rowSelectionModel.length === 0 ||
+              rowSelectionModel.length === p.entries.length
+            }
+            onClick={deleteMultiple}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
       <div style={{ flex: 1 }}>
         <DataGrid<InboxEntry>
           columns={columns}
-        rows={p.entries}
+          rows={filteredList}
           autoPageSize
           checkboxSelection
           initialState={{
@@ -271,7 +349,7 @@ function InboxTable(p: {
             try {
               return await InboxApi.Update(n);
             } catch (e) {
-            console.error("Failed to update movement information!", e);
+              console.error("Failed to update inbox entry information!", e);
               alert(`Failed to update row! ${e}`);
               throw e;
             } finally {
@@ -280,6 +358,7 @@ function InboxTable(p: {
           }}
         />
       </div>
+    </>
   );
 }