Can attach file to movement

moneymgr_web/src/routes/AccountRoute.tsx

@@ -23,6 +23,8 @@ import { DateWidget } from "../widgets/DateWidget";
 import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
 import { NewMovementWidget } from "../widgets/NewMovementWidget";
 import { NotFoundRoute } from "./NotFound";
+import { UploadFileButton } from "../widgets/forms/UploadFileButton";
+import { UploadedFile } from "../api/FileApi";
 
 export function AccountRoute(): React.ReactElement {
   const loadingMessage = useLoadingMessage();
@@ -105,6 +107,21 @@ function MovementsTable(p: {
   const [rowSelectionModel, setRowSelectionModel] =
     React.useState<GridRowSelectionModel>([]);
 
+  // Set uploaded file
+  const setUploadedFile = async (
+    m: Movement,
+    file: UploadedFile | undefined
+  ) => {
+    try {
+      await MovementApi.Update({ ...m, file_id: file?.id ?? undefined });
+
+      p.needReload(false);
+    } catch (e) {
+      console.error("Failed to attach file to movement!", e);
+      alert("Failed to attach uploaded file to movement!");
+    }
+  };
+
   // Change account of movement
   const handleMoveClick = async (movement: Movement) => {
     const targetAccount = await chooseAccount(
@@ -283,7 +300,19 @@ function MovementsTable(p: {
     {
       field: "file",
       headerName: "File",
-      // TODO
+      editable: false,
+      width: 150,
+      renderCell: (params) => {
+        if (!params.row.file_id)
+          return (
+            <UploadFileButton
+              label="Attach file"
+              tooltip="Attach a file to this movement"
+              onUploaded={(f) => setUploadedFile(params.row, f)}
+            />
+          );
+        else return <>got file</>;
+      },
     },
     {
       field: "actions",