Ready to implement file dialog

moneymgr_web/src/dialogs/FileViewerDialog.tsx

@@ -0,0 +1,21 @@
+import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { UploadedFile } from "../api/FileApi";
+import { filesize } from "filesize";
+
+export function FileViewerDialog(p: {
+  open: boolean;
+  onClose: () => void;
+  file: UploadedFile;
+}): React.ReactElement {
+  return (
+    <Dialog open={p.open} onClose={p.onClose}>
+      <DialogTitle>
+        {p.file.file_name} ({filesize(p.file.file_size)})
+      </DialogTitle>
+      TODO
+      <DialogActions>
+        <Button onClick={p.onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

moneymgr_web/src/widgets/UploadedFileWidget.tsx

@@ -5,6 +5,7 @@ import { filesize } from "filesize";
 import React from "react";
 import { FileApi, UploadedFile } from "../api/FileApi";
 import { AsyncWidget } from "./AsyncWidget";
+import { FileViewerDialog } from "../dialogs/FileViewerDialog";
 
 export function UploadedFileWidget(p: { file_id: number }): React.ReactElement {
   const [file, setFile] = React.useState<UploadedFile | null>(null);
@@ -26,7 +27,14 @@ export function UploadedFileWidget(p: { file_id: number }): React.ReactElement {
 function UploadedFileWidgetInner(p: {
   file: UploadedFile;
 }): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
   return (
+    <>
+      <FileViewerDialog
+        open={open}
+        file={p.file}
+        onClose={() => setOpen(false)}
+      />
       <Button
         startIcon={
           p.file.mime_type === "application/pdf" ? (
@@ -35,8 +43,10 @@ function UploadedFileWidgetInner(p: {
             <ImageIcon />
           )
         }
+        onClick={() => setOpen(true)}
       >
         {p.file.file_name} ({filesize(p.file.file_size)})
       </Button>
+    </>
   );
 }