Can attach inbox entry to movement

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<undefined | Movement>();
+
+  const handleSubmit = () => {
+    if (!value) return;
+    p.onSelected(value);
+  };
+
+  return (
+    <Dialog fullScreen open={true} onClose={p.onClose}>
+      <AppBar sx={{ position: "relative" }}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            onClick={p.onClose}
+            aria-label="close"
+          >
+            <CloseIcon />
+          </IconButton>
+          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            Attach inbox entry to movement
+          </Typography>
+          <Typography
+            sx={{ ml: 2, flex: 1 }}
+            style={{ display: "flex", flexDirection: "column" }}
+          >
+            <span>
+              {p.entry.amount !== undefined && (
+                <>
+                  <span>
+                    Amount: <AmountWidget amount={p.entry.amount} />
+                  </span>
+                </>
+              )}
+            </span>
+            <span>{p.entry.label && <>Label: {p.entry.label}</>}</span>
+            <span>
+              {p.entry.time && <>Date: {fmtDateFromTime(p.entry.time)}</>}
+            </span>
+          </Typography>
+          {Number.isFinite(p.entry.amount) &&
+            value !== undefined &&
+            p.entry.amount !== value?.amount && (
+              <Alert severity="warning">Amount mismatch!</Alert>
+            )}
+          <Button
+            autoFocus
+            color="inherit"
+            onClick={handleSubmit}
+            disabled={!value}
+          >
+            Attach
+          </Button>
+        </Toolbar>
+      </AppBar>
+      <Grid container style={{ flex: 1 }}>
+        <Grid
+          size={{ sm: 12, md: 6 }}
+          style={{
+            display: "flex",
+            height: "100%",
+          }}
+        >
+          <AsyncFileViewerWidget fileID={p.entry.file_id} />
+        </Grid>
+        <Grid
+          size={{ sm: 12, md: 6 }}
+          style={{ display: "flex", height: "100%" }}
+        >
+          <SelectMovementWidget
+            value={value?.id}
+            onChange={setValue}
+            initialValues={{
+              amount: p.entry.amount,
+              time: p.entry.time,
+              label: p.entry.label,
+            }}
+          />
+        </Grid>
+      </Grid>
+    </Dialog>
+  );
+}