From b30854feea2db415c10b02ec5d227b0925d42123 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 28 Apr 2025 21:44:22 +0200
Subject: [PATCH] Ready to implement file dialog

---
 moneymgr_web/src/dialogs/FileViewerDialog.tsx | 21 ++++++++++++
 .../src/widgets/UploadedFileWidget.tsx        | 32 ++++++++++++-------
 2 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 moneymgr_web/src/dialogs/FileViewerDialog.tsx

diff --git a/moneymgr_web/src/dialogs/FileViewerDialog.tsx b/moneymgr_web/src/dialogs/FileViewerDialog.tsx
new file mode 100644
index 0000000..dc431e4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/moneymgr_web/src/widgets/UploadedFileWidget.tsx b/moneymgr_web/src/widgets/UploadedFileWidget.tsx
index 555d918..e0d7b6a 100644
--- a/moneymgr_web/src/widgets/UploadedFileWidget.tsx
+++ b/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,17 +27,26 @@ export function UploadedFileWidget(p: { file_id: number }): React.ReactElement {
 function UploadedFileWidgetInner(p: {
   file: UploadedFile;
 }): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
   return (
-    <Button
-      startIcon={
-        p.file.mime_type === "application/pdf" ? (
-          <PictureAsPdfIcon />
-        ) : (
-          <ImageIcon />
-        )
-      }
-    >
-      {p.file.file_name} ({filesize(p.file.file_size)})
-    </Button>
+    <>
+      <FileViewerDialog
+        open={open}
+        file={p.file}
+        onClose={() => setOpen(false)}
+      />
+      <Button
+        startIcon={
+          p.file.mime_type === "application/pdf" ? (
+            <PictureAsPdfIcon />
+          ) : (
+            <ImageIcon />
+          )
+        }
+        onClick={() => setOpen(true)}
+      >
+        {p.file.file_name} ({filesize(p.file.file_size)})
+      </Button>
+    </>
   );
 }