diff --git a/moneymgr_web/src/dialogs/AttachInboxEntryToMovementDialog.tsx b/moneymgr_web/src/dialogs/AttachInboxEntryToMovementDialog.tsx new file mode 100644 index 0000000..e987c17 --- /dev/null +++ b/moneymgr_web/src/dialogs/AttachInboxEntryToMovementDialog.tsx @@ -0,0 +1,108 @@ +import CloseIcon from "@mui/icons-material/Close"; +import { + Alert, + AppBar, + Button, + Dialog, + Grid, + IconButton, + Toolbar, + Typography, +} from "@mui/material"; +import React from "react"; +import { InboxEntry } from "../api/InboxApi"; +import { Movement } from "../api/MovementsApi"; +import { AsyncFileViewerWidget } from "../widgets/FileViewerWidget"; +import { SelectMovementWidget } from "../widgets/SelectMovementWidget"; +import { AmountWidget } from "../widgets/AmountWidget"; +import { fmtDateFromTime } from "../utils/DateUtils"; + +export function AttachInboxEntryToMovementDialog(p: { + open: boolean; + entry: InboxEntry; + onSelected: (m: Movement) => void; + onClose: () => void; +}): React.ReactElement { + const [value, setValue] = React.useState(); + + const handleSubmit = () => { + if (!value) return; + p.onSelected(value); + }; + + return ( + + + + + + + + Attach inbox entry to movement + + + + {p.entry.amount !== undefined && ( + <> + + Amount: + + + )} + + {p.entry.label && <>Label: {p.entry.label}} + + {p.entry.time && <>Date: {fmtDateFromTime(p.entry.time)}} + + + {Number.isFinite(p.entry.amount) && + value !== undefined && + p.entry.amount !== value?.amount && ( + Amount mismatch! + )} + + + + + + + + + + + + + ); +} diff --git a/moneymgr_web/src/dialogs/FileViewerDialog.tsx b/moneymgr_web/src/dialogs/FileViewerDialog.tsx index 783aded..af01fd7 100644 --- a/moneymgr_web/src/dialogs/FileViewerDialog.tsx +++ b/moneymgr_web/src/dialogs/FileViewerDialog.tsx @@ -1,18 +1,17 @@ import CloseIcon from "@mui/icons-material/Close"; -import CloudDownloadIcon from "@mui/icons-material/CloudDownload"; import DownloadIcon from "@mui/icons-material/Download"; import { AppBar, Button, Dialog, IconButton, - Paper, Toolbar, Typography, } from "@mui/material"; import { filesize } from "filesize"; import React from "react"; import { FileApi, UploadedFile } from "../api/FileApi"; +import { FileViewerWidget } from "../widgets/FileViewerWidget"; export function FileViewerDialog(p: { open: boolean; @@ -51,65 +50,7 @@ export function FileViewerDialog(p: { - + ); } - -type ViewerProps = { - url: string; - downloadUrl: string; -} & UploadedFile; - -function FileViewer(p: ViewerProps): React.ReactElement { - // Image - if (p.mime_type.startsWith("image/")) return ; - // PDF - else if (p.mime_type === "application/pdf") return ; - // Default viewer - else return ; -} - -function ImageViewer(p: ViewerProps): React.ReactElement { - return ( - - ); -} - -function PDFViewer(p: ViewerProps): React.ReactElement { - // eslint-disable-next-line react-dom/no-missing-iframe-sandbox - return