Add default file viewer

moneymgr_web/src/api/FileApi.ts

@@ -37,4 +37,11 @@ export class FileApi {
       })
     ).data;
   }
+
+  /**
+   * Get a file download URL
+   */
+  static DownloadURL(file: UploadedFile): string {
+    return APIClient.backendURL() + `/file/${file.id}/download`;
+  }
 }

moneymgr_web/src/dialogs/FileViewerDialog.tsx

@@ -1,21 +1,73 @@
-import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import {
-import { UploadedFile } from "../api/FileApi";
+  Button,
+  Dialog,
+  DialogActions,
+  DialogTitle,
+  Paper,
+  Typography,
+} from "@mui/material";
+import { FileApi, UploadedFile } from "../api/FileApi";
 import { filesize } from "filesize";
+import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
 
 export function FileViewerDialog(p: {
   open: boolean;
   onClose: () => void;
   file: UploadedFile;
 }): React.ReactElement {
+  if (!p.open) return <></>;
   return (
     <Dialog open={p.open} onClose={p.onClose}>
       <DialogTitle>
         {p.file.file_name} ({filesize(p.file.file_size)})
       </DialogTitle>
-      TODO
+      <FileViewer
+        fileName={p.file.file_name}
+        fileSize={p.file.file_size}
+        url={FileApi.DownloadURL(p.file)}
+        mimetype={p.file.mime_type}
+      />
       <DialogActions>
         <Button onClick={p.onClose}>Close</Button>
       </DialogActions>
     </Dialog>
   );
 }
+
+interface ViewerProps {
+  fileName: string;
+  fileSize: number;
+  url: string;
+  mimetype: string;
+}
+
+function FileViewer(p: ViewerProps): React.ReactElement {
+  // Default viewer
+  return <DefaultViewer {...p} />;
+}
+
+function DefaultViewer(p: ViewerProps): React.ReactElement {
+  return (
+    <Paper
+      elevation={3}
+      style={{
+        margin: "10px",
+        padding: "10px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Typography variant="h5" gutterBottom>
+        <CloudDownloadIcon fontSize="large" />
+      </Typography>
+      <Typography variant="caption" gutterBottom>
+        {filesize(p.fileSize)}
+      </Typography>
+      <a href={p.url} target="_blank" referrerPolicy="no-referrer">
+        <Button variant="outlined">Download</Button>
+      </a>
+    </Paper>
+  );
+}