Start to build a dialog to create movements

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>
+  );
+}

moneymgr_web/src/widgets/forms/AccountInput.tsx

@@ -1,4 +1,4 @@
-import { MenuItem, Select, Typography } from "@mui/material";
+import { MenuItem, Select, TextFieldVariants, Typography } from "@mui/material";
 import { AccountIconWidget } from "../AccountIconWidget";
 import { useAccounts } from "../../hooks/AccountsListProvider";
 import { AmountWidget } from "../AmountWidget";
@@ -8,6 +8,7 @@ export function AccountInput(p: {
   onChange: (value: number) => void;
   label?: string;
   style?: React.CSSProperties;
+  variant?: TextFieldVariants;
 }): React.ReactElement {
   const accounts = useAccounts();
   let current = p.value;
@@ -23,6 +24,7 @@ export function AccountInput(p: {
       onChange={(e) => p.onChange(Number(e.target.value))}
       size="small"
       style={p.style}
+      variant={p.variant}
     >
       {accounts.list.list.map((a) => (
         <MenuItem value={a.id}>