Can create new movement when performing mapping

moneymgr_web/src/dialogs/UpdateMovementDialog.tsx

@@ -130,7 +130,7 @@ export function UpdateMovementDialog(p: {
             setMovement((m) => {
               return {
                 ...m,
-                amount: m.amount,
+                amount: l,
               };
             })
           }

moneymgr_web/src/widgets/SelectMovementWidget.tsx

@@ -1,6 +1,15 @@
-import { ListItem, ListItemButton, Paper, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import {
+  Fab,
+  ListItem,
+  ListItemButton,
+  Paper,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import React from "react";
 import { Movement, MovementApi } from "../api/MovementsApi";
+import { UpdateMovementDialog } from "../dialogs/UpdateMovementDialog";
 import { AsyncWidget } from "./AsyncWidget";
 import { AccountInput } from "./forms/AccountInput";
 import { AmountInput } from "./forms/AmountInput";
@@ -18,6 +27,8 @@ export function SelectMovementWidget(p: {
     label?: string;
   };
 }): React.ReactElement {
+  const loadKey = React.useRef(1);
+
   const [amount, setAmount] = React.useState<number | undefined>(
     p.initialValues?.amount
   );
@@ -48,10 +59,42 @@ export function SelectMovementWidget(p: {
     else setList(undefined);
   };
 
+  const [creating, setCreating] = React.useState(false);
+
+  const handleStartCreateNewMovement = () => {
+    setCreating(true);
+  };
+
+  const handleCloseCreateNewMovement = () => {
+    setCreating(false);
+  };
+
+  const handleCreatedNewMovement = (m: Movement) => {
+    setAmount(m.amount);
+    setAccountId(m.account_id);
+    setTime(m.time);
+    setLabel(m.label);
+    p.onChange(m);
+    loadKey.current += 1;
+    setCreating(false);
+  };
+
   return (
-    <Paper style={{ padding: "10px", flex: 1 }}>
+    <>
+      <Paper
+        style={{
+          padding: "10px",
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         <div
-        style={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+          }}
         >
           <AccountInput
             value={accountId}
@@ -88,8 +131,11 @@ export function SelectMovementWidget(p: {
           />
         </div>
 
+        <div style={{ flex: 1 }}>
           <AsyncWidget
-        loadKey={accountId + "/" + JSON.stringify(filters)}
+            loadKey={
+              loadKey.current + "/" + accountId + "/" + JSON.stringify(filters)
+            }
             load={load}
             errMsg="Failed to load the list of movements!"
             build={() => {
@@ -122,6 +168,34 @@ export function SelectMovementWidget(p: {
               );
             }}
           />
+        </div>
+
+        <div style={{ textAlign: "right" }}>
+          <Tooltip title="Create a new movement">
+            <Fab
+              color="primary"
+              aria-label="Create a new movement"
+              onClick={handleStartCreateNewMovement}
+            >
+              <AddIcon />
+            </Fab>
+          </Tooltip>
+        </div>
       </Paper>
+      {creating && accountId && (
+        <UpdateMovementDialog
+          open
+          initial={{
+            account_id: accountId,
+            amount: amount ?? 0,
+            checked: false,
+            label: label ?? "",
+            time: time ?? 0,
+          }}
+          onClose={handleCloseCreateNewMovement}
+          onFinished={handleCreatedNewMovement}
+        />
+      )}
+    </>
   );
 }