Can attach inbox entry to movement

moneymgr_web/src/routes/InboxRoute.tsx

@@ -2,6 +2,7 @@ import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import RefreshIcon from "@mui/icons-material/Refresh";
+import SearchIcon from "@mui/icons-material/Search";
 import {
   Checkbox,
   FormControlLabel,
@@ -13,9 +14,16 @@ import {
   TextField,
   Tooltip,
 } from "@mui/material";
-import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
+import {
+  DataGrid,
+  GridActionsCellItem,
+  GridColDef,
+  GridRowSelectionModel,
+} from "@mui/x-data-grid";
 import React from "react";
 import { InboxApi, InboxEntry } from "../api/InboxApi";
+import { Movement, MovementApi } from "../api/MovementsApi";
+import { AttachInboxEntryToMovementDialog } from "../dialogs/AttachInboxEntryToMovementDialog";
 import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
@@ -124,6 +132,51 @@ function InboxTable(p: {
   const [rowSelectionModel, setRowSelectionModel] =
     React.useState<GridRowSelectionModel>([]);
 
+  const [attaching, setAttaching] = React.useState<InboxEntry | undefined>();
+
+  // Request to attach entry to movement
+  const handleAttachClick = async (entry: InboxEntry) => {
+    setAttaching(entry);
+  };
+
+  const handleCloseAttachDialog = () => {
+    setAttaching(undefined);
+  };
+
+  // Finish attach entry to movement
+  const performAttach = async (movement: Movement) => {
+    try {
+      loadingMessage.show("Attaching inbox entry to movement...");
+
+      await Promise.all([
+        // Update movement
+        MovementApi.Update({
+          ...movement,
+          file_id: attaching?.file_id,
+        }),
+
+        // Update inbox entries
+        InboxApi.Update({
+          ...attaching!,
+          movement_id: movement.id,
+        }),
+      ]);
+
+      snackbar(
+        "The inbox entry has been successfully attached to the movement!"
+      );
+
+      setAttaching(undefined);
+
+      p.onReload(false);
+    } catch (e) {
+      console.error("Failed to attach inbox entry to movement!", e);
+      alert(`Failed to attach inbox entry to movement! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   // Delete inbox entry
   const handleDeleteClick = async (entry: InboxEntry) => {
     try {
@@ -278,11 +331,18 @@ function InboxTable(p: {
       field: "actions",
       type: "actions",
       headerName: "",
-      width: 55,
+      width: 82,
       cellClassName: "actions",
       editable: false,
       getActions: (params) => {
         return [
+          <GridActionsCellItem
+            key={`del-${params.row.id}`}
+            icon={<SearchIcon />}
+            label="Attach entry to movement"
+            color="inherit"
+            onClick={() => handleAttachClick(params.row)}
+          />,
           <InboxEntryActionMenu
             key="menu"
             entry={params.row}
@@ -296,6 +356,15 @@ function InboxTable(p: {
 
   return (
     <>
+      {attaching && (
+        <AttachInboxEntryToMovementDialog
+          open
+          entry={attaching}
+          onSelected={performAttach}
+          onClose={handleCloseAttachDialog}
+        />
+      )}
+
       <div style={{ display: "flex" }}>
         <TextField
           placeholder="Filter by label"