Can create movements from UI

2025-04-21 15:29:00 +02:00
parent 18bed77c7b
commit 09e44da46e
8 changed files with 189 additions and 15 deletions
--- a/moneymgr_web/src/widgets/NewMovementWidget.tsx
+++ b/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>
+  );
+}