Display info of uploaded files

moneymgr_web/src/api/FileApi.ts

@@ -25,4 +25,16 @@ export class FileApi {
       })
     ).data;
   }
+
+  /**
+   * Get a file information
+   */
+  static async GetFile(id: number): Promise<UploadedFile> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/file/${id}`,
+      })
+    ).data;
+  }
 }

moneymgr_web/src/routes/AccountRoute.tsx

@@ -25,6 +25,7 @@ import { NewMovementWidget } from "../widgets/NewMovementWidget";
 import { NotFoundRoute } from "./NotFound";
 import { UploadFileButton } from "../widgets/forms/UploadFileButton";
 import { UploadedFile } from "../api/FileApi";
+import { UploadedFileWidget } from "../widgets/UploadedFileWidget";
 
 export function AccountRoute(): React.ReactElement {
   const loadingMessage = useLoadingMessage();
@@ -281,7 +282,7 @@ function MovementsTable(p: {
     {
       field: "label",
       headerName: "Label",
-      flex: 1,
+      flex: 3,
       editable: true,
       type: "string",
     },
@@ -301,7 +302,7 @@ function MovementsTable(p: {
       field: "file",
       headerName: "File",
       editable: false,
-      width: 150,
+      flex: 1,
       renderCell: (params) => {
         if (!params.row.file_id)
           return (
@@ -311,7 +312,7 @@ function MovementsTable(p: {
               onUploaded={(f) => setUploadedFile(params.row, f)}
             />
           );
-        else return <>got file</>;
+        else return <UploadedFileWidget file_id={params.row.file_id} />;
       },
     },
     {

moneymgr_web/src/widgets/UploadedFileWidget.tsx

@@ -0,0 +1,42 @@
+import ImageIcon from "@mui/icons-material/Image";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { Button } from "@mui/material";
+import { filesize } from "filesize";
+import React from "react";
+import { FileApi, UploadedFile } from "../api/FileApi";
+import { AsyncWidget } from "./AsyncWidget";
+
+export function UploadedFileWidget(p: { file_id: number }): React.ReactElement {
+  const [file, setFile] = React.useState<UploadedFile | null>(null);
+
+  const load = async () => {
+    setFile(await FileApi.GetFile(p.file_id));
+  };
+
+  return (
+    <AsyncWidget
+      errMsg="Failed"
+      build={() => <UploadedFileWidgetInner file={file!} />}
+      loadKey={p.file_id}
+      load={load}
+    />
+  );
+}
+
+function UploadedFileWidgetInner(p: {
+  file: UploadedFile;
+}): React.ReactElement {
+  return (
+    <Button
+      startIcon={
+        p.file.mime_type === "application/pdf" ? (
+          <PictureAsPdfIcon />
+        ) : (
+          <ImageIcon />
+        )
+      }
+    >
+      {p.file.file_name} ({filesize(p.file.file_size)})
+    </Button>
+  );
+}