Update movement dialog is operational

moneymgr_backend/src/controllers/movement_controller.rs

@@ -12,9 +12,9 @@ pub async fn create(auth: AuthExtractor, req: web::Json<UpdateMovementQuery>) ->
         return Ok(HttpResponse::BadRequest().json(err));
     }
 
-    movements_service::create(&req).await?;
+    let movement = movements_service::create(&req).await?;
 
-    Ok(HttpResponse::Created().finish())
+    Ok(HttpResponse::Created().json(movement))
 }
 
 /// Get the balances of all the accounts of the user

moneymgr_web/src/api/MovementsApi.ts

@@ -39,12 +39,14 @@ export class MovementApi {
   /**
    * Create a new movement
    */
-  static async Create(q: MovementUpdate): Promise<void> {
-    await APIClient.exec({
-      uri: `/movement`,
-      method: "POST",
-      jsonData: q,
-    });
+  static async Create(q: MovementUpdate): Promise<Movement> {
+    return (
+      await APIClient.exec({
+        uri: `/movement`,
+        method: "POST",
+        jsonData: q,
+      })
+    ).data;
   }
 
   /**
@@ -97,7 +99,9 @@ export class MovementApi {
   /**
    * Update a movement information
    */
-  static async Update(movement: Movement): Promise<Movement> {
+  static async Update(
+    movement: MovementUpdate & { id: number }
+  ): Promise<Movement> {
     return (
       await APIClient.exec({
         uri: `/movement/${movement.id}`,

moneymgr_web/src/dialogs/UpdateMovementDialog.tsx

@@ -6,12 +6,16 @@ import {
   DialogTitle,
 } from "@mui/material";
 import React from "react";
-import { Movement, MovementUpdate } from "../api/MovementsApi";
+import { Movement, MovementApi, MovementUpdate } from "../api/MovementsApi";
 import { ServerApi } from "../api/ServerApi";
+import { useAccounts } from "../hooks/AccountsListProvider";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+import { AccountInput } from "../widgets/forms/AccountInput";
 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;
@@ -20,6 +24,11 @@ export function UpdateMovementDialog(p: {
   onClose: () => void;
   onFinished: (m: Movement) => void;
 }): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
+  const accounts = useAccounts();
+
   const [movement, setMovement] = React.useState(p.initial);
 
   const style: React.CSSProperties = { width: "100%", marginBottom: "15px" };
@@ -30,7 +39,32 @@ export function UpdateMovementDialog(p: {
     movement.time !== 0 &&
     movement.label.length > 0;
 
-  const handleSubmit = async () => {};
+  const handleSubmit = async () => {
+    try {
+      loadingMessage.show(
+        `${p.updateId ? "Updating" : "Creating"} the movement...`
+      );
+
+      let res: Movement;
+
+      if (p.updateId) {
+        res = await MovementApi.Update({ ...movement, id: p.updateId });
+      } else {
+        res = await MovementApi.Create(movement);
+      }
+
+      accounts.reloadBalances();
+
+      snackbar("The movement was successfully saved!");
+
+      p.onFinished(res);
+    } catch (e) {
+      console.error("Failed to save movement!", e);
+      alert(`Failed to ${p.updateId ? "update" : "create"} movement! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
 
   return (
     <Dialog open={p.open} onClose={p.onClose}>