diff --git a/moneymgr_web/package-lock.json b/moneymgr_web/package-lock.json index cca96de..90572c6 100644 --- a/moneymgr_web/package-lock.json +++ b/moneymgr_web/package-lock.json @@ -26,7 +26,8 @@ "react": "^19.1.0", "react-dom": "^19.1.0", "react-router": "^7.4.1", - "react-router-dom": "^7.4.1" + "react-router-dom": "^7.4.1", + "ts-pattern": "^5.7.0" }, "devDependencies": { "@eslint/js": "^9.23.0", @@ -4575,7 +4576,6 @@ "version": "5.7.0", "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.7.0.tgz", "integrity": "sha512-0/FvIG4g3kNkYgbNwBBW5pZBkfpeYQnH+2AA3xmjkCAit/DSDPKmgwC3fKof4oYUq6gupClVOJlFl+939VRBMg==", - "dev": true, "license": "MIT" }, "node_modules/tslib": { diff --git a/moneymgr_web/package.json b/moneymgr_web/package.json index dfdd22b..00953fb 100644 --- a/moneymgr_web/package.json +++ b/moneymgr_web/package.json @@ -28,7 +28,8 @@ "react": "^19.1.0", "react-dom": "^19.1.0", "react-router": "^7.4.1", - "react-router-dom": "^7.4.1" + "react-router-dom": "^7.4.1", + "ts-pattern": "^5.7.0" }, "devDependencies": { "@eslint/js": "^9.23.0", diff --git a/moneymgr_web/src/dialogs/AttachMultipleInboxEntriesDialog.tsx b/moneymgr_web/src/dialogs/AttachMultipleInboxEntriesDialog.tsx index 86f6419..3817587 100644 --- a/moneymgr_web/src/dialogs/AttachMultipleInboxEntriesDialog.tsx +++ b/moneymgr_web/src/dialogs/AttachMultipleInboxEntriesDialog.tsx @@ -1,25 +1,76 @@ +import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; import { Button, Dialog, DialogActions, DialogContent, DialogTitle, + Divider, } from "@mui/material"; +import React from "react"; import { InboxEntry } from "../api/InboxApi"; import { Movement } from "../api/MovementsApi"; +import { MovementSelect } from "../widgets/forms/MovementSelect"; +import { InboxEntryWidget } from "../widgets/InboxEntryWidget"; export function AttachMultipleInboxEntriesDialog(p: { open: boolean; entries: InboxEntry[]; movements: Movement[][]; onClose: () => void; - onSelected: (mapping: (number | undefined)[]) => void; + onSelected: (mapping: (Movement | undefined)[]) => void; }): React.ReactElement { - const handleSubmit = () => {}; + const [mapping, setMapping] = React.useState<(Movement | undefined)[]>( + p.movements.map(() => undefined) + ); + + const handleSubmit = () => { + p.onSelected(mapping); + }; + return ( - + Attach multiple entries to movements - TODO + + {p.entries.map((entry, num) => { + return ( +
+
+ + + + + + {p.movements[num].length > 0 ? ( + + setMapping((m) => { + const n = [...m]; + n[num] = v; + return n; + }) + } + /> + ) : ( + <>No movement found + )} + +
+ +
+ ); + })} +
+ {p.small ? ( + { + setOpen(true); + }} + > + + + ) : ( + + )} ); } + +function FileIcon(p: { file: UploadedFile }): React.ReactElement { + return p.file.mime_type === "application/pdf" ? ( + + ) : ( + + ); +} diff --git a/moneymgr_web/src/widgets/forms/MovementSelect.tsx b/moneymgr_web/src/widgets/forms/MovementSelect.tsx new file mode 100644 index 0000000..7c5dcf8 --- /dev/null +++ b/moneymgr_web/src/widgets/forms/MovementSelect.tsx @@ -0,0 +1,31 @@ +import { MenuItem, Select, SelectChangeEvent } from "@mui/material"; +import { Movement } from "../../api/MovementsApi"; +import { MovementWidget } from "../MovementWidget"; + +export function MovementSelect(p: { + list: Movement[]; + value: Movement | undefined; + onChange: (value: Movement | undefined) => void; +}): React.ReactElement { + const handleChange = (event: SelectChangeEvent) => { + if (!event.target.value) { + p.onChange(undefined); + return; + } + const id = Number(event.target.value); + p.onChange(p.list.find((m) => m.id === id)); + }; + + return ( + + ); +}