Can create movements from UI

moneymgr_web/src/widgets/NewMovementWidget.tsx

@@ -0,0 +1,98 @@
+import { IconButton, Tooltip, Typography } from "@mui/material";
+import { Account } from "../api/AccountApi";
+import { DateInput } from "./forms/DateInput";
+import { time } from "../utils/DateUtils";
+import React from "react";
+import { TextInput } from "./forms/TextInput";
+import { ServerApi } from "../api/ServerApi";
+import AddIcon from "@mui/icons-material/Add";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { MovementApi } from "../api/MovementsApi";
+
+export function NewMovementWidget(p: {
+  account: Account;
+  onCreated: () => {};
+}): React.ReactElement {
+  const snackbar = useSnackbar();
+  const alert = useAlert();
+
+  const [movTime, setMovTime] = React.useState<number | undefined>(time());
+  const [label, setLabel] = React.useState<string | undefined>("");
+  const [amount, setAmount] = React.useState<number | undefined>(0);
+
+  const submit = async (e: React.SyntheticEvent<any>) => {
+    e.preventDefault();
+
+    if ((label?.length ?? 0) === 0) {
+      alert("Please specify movement label!");
+      return;
+    }
+
+    if (!movTime) {
+      alert("Please specify movement date!");
+      return;
+    }
+
+    try {
+      await MovementApi.Create({
+        account_id: p.account.id,
+        checked: false,
+        amount: amount!,
+        label: label!,
+        time: movTime,
+      });
+
+      snackbar("The movement was successfully created!");
+
+      p.onCreated();
+
+      setLabel("");
+      setAmount(0);
+    } catch (e) {
+      console.error(`Failed to create movement!`, e);
+      alert(`Failed to create movement! ${e}`);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={submit}
+      style={{ marginTop: "10px", display: "flex", alignItems: "center" }}
+    >
+      <Typography style={{ marginRight: "10px" }}>New movement</Typography>
+      &nbsp;
+      <DateInput
+        autoFocus
+        editable
+        style={{ flex: 1, maxWidth: "140px" }}
+        value={movTime}
+        onValueChange={setMovTime}
+      />
+      &nbsp;
+      <TextInput
+        editable
+        placeholder="Movement label"
+        value={label}
+        onValueChange={setLabel}
+        style={{ flex: 1 }}
+        size={ServerApi.Config.constraints.movement_label}
+      />
+      &nbsp;
+      <TextInput
+        editable
+        type="number"
+        placeholder="Amount"
+        style={{ flex: 1, maxWidth: "110px" }}
+        value={String(amount)}
+        onValueChange={(a) => setAmount(Number(a))}
+      />
+      <Tooltip title="Add new movement">
+        <IconButton onClick={submit}>
+          <AddIcon />
+        </IconButton>
+      </Tooltip>
+      <input type="submit" style={{ display: "none" }} />
+    </form>
+  );
+}

moneymgr_web/src/widgets/forms/DateInput.tsx

@@ -0,0 +1,28 @@
+import { DatePicker } from "@mui/x-date-pickers";
+import { dateToTime, timeToDate } from "../../utils/DateUtils";
+
+export function DateInput(p: {
+  editable?: boolean;
+  autoFocus?: boolean;
+  label?: string;
+  style?: React.CSSProperties;
+  value: number | undefined;
+  onValueChange: (v: number | undefined) => void;
+}): React.ReactElement {
+  return (
+    <DatePicker
+      autoFocus={p.autoFocus}
+      readOnly={p.editable === false}
+      label={p.label}
+      slotProps={{ textField: { variant: "standard", style: p.style } }}
+      value={timeToDate(p.value)}
+      onChange={(v) => {
+        try {
+          p.onValueChange(dateToTime(v ?? undefined));
+        } catch (e) {
+          console.warn("Failed to parse date!", e);
+        }
+      }}
+    />
+  );
+}

moneymgr_web/src/widgets/forms/TextInput.tsx

@@ -14,6 +14,7 @@ export function TextInput(p: {
   multiline?: boolean;
   minRows?: number;
   maxRows?: number;
+  placeholder?: string;
   type?: React.HTMLInputTypeAttribute;
   style?: React.CSSProperties;
   helperText?: string;
@@ -48,7 +49,7 @@ export function TextInput(p: {
           readOnly: !p.editable,
           type: p.type,
         },
-        htmlInput: { maxLength: p.size?.max },
+        htmlInput: { maxLength: p.size?.max, placeholder: p.placeholder },
       }}
       variant={p.variant ?? "standard"}
       style={p.style ?? { width: "100%", marginBottom: "15px" }}