Start to build a dialog to create movements

2025-05-13 23:08:11 +02:00
parent baca466209
commit b2f8a66c12
2 changed files with 116 additions and 1 deletions
--- a/moneymgr_web/src/dialogs/UpdateMovementDialog.tsx
+++ b/moneymgr_web/src/dialogs/UpdateMovementDialog.tsx
@@ -0,0 +1,113 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import React from "react";
+import { Movement, MovementUpdate } from "../api/MovementsApi";
+import { ServerApi } from "../api/ServerApi";
+import { AmountInput } from "../widgets/forms/AmountInput";
+import { DateInput } from "../widgets/forms/DateInput";
+import { TextInput } from "../widgets/forms/TextInput";
+import { AccountInput } from "../widgets/forms/AccountInput";
+
+export function UpdateMovementDialog(p: {
+  open: boolean;
+  updateId?: number;
+  initial: MovementUpdate;
+  onClose: () => void;
+  onFinished: (m: Movement) => void;
+}): React.ReactElement {
+  const [movement, setMovement] = React.useState(p.initial);
+
+  const style: React.CSSProperties = { width: "100%", marginBottom: "15px" };
+
+  const canSubmit =
+    movement.amount !== 0 &&
+    movement.account_id &&
+    movement.time !== 0 &&
+    movement.label.length > 0;
+
+  const handleSubmit = async () => {};
+
+  return (
+    <Dialog open={p.open} onClose={p.onClose}>
+      <DialogTitle>
+        {p.updateId ? `Update a movement` : `Create a movement`}
+      </DialogTitle>
+      <DialogContent>
+        {/* Account */}
+        <AccountInput
+          value={movement.account_id}
+          label="Amount"
+          variant="standard"
+          style={style}
+          onChange={(a) =>
+            setMovement((m) => {
+              return {
+                ...m,
+                account_id: a ?? 0,
+              };
+            })
+          }
+        />
+        {/* Date input */}
+        <DateInput
+          autoFocus
+          editable
+          label="Movement date"
+          value={movement.time}
+          style={style}
+          onValueChange={(t) =>
+            setMovement((m) => {
+              return {
+                ...m,
+                time: t ?? 0,
+              };
+            })
+          }
+        />
+        {/* Label input */}
+        <TextInput
+          editable
+          placeholder={`Movement label`}
+          label="Movement label"
+          value={movement.label}
+          onValueChange={(l) =>
+            setMovement((m) => {
+              return {
+                ...m,
+                label: l ?? "",
+              };
+            })
+          }
+          size={ServerApi.Config.constraints.movement_label}
+        />
+        {/* Amount input */}
+        <AmountInput
+          editable
+          placeholder="Amount"
+          label="Amount"
+          style={style}
+          value={movement.amount}
+          onValueChange={(l) =>
+            setMovement((m) => {
+              return {
+                ...m,
+                amount: m.amount,
+              };
+            })
+          }
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onClose}>Cancel</Button>
+        <Button onClick={handleSubmit} autoFocus disabled={!canSubmit}>
+          {p.updateId ? `Update` : `Create`}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}