Can move entries between accounts

moneymgr_web/src/dialogs/SelectAccountDialog.tsx

@@ -23,7 +23,7 @@ export function SelectAccountDialog(p: {
   onClose: () => void;
   onSelected: (c: Account) => void;
   title: string;
-  description: string;
+  description: string | React.ReactElement;
   confirmButton?: string;
   excludedAccounts?: Account[];
 }): React.ReactElement {

moneymgr_web/src/hooks/context_providers/ChooseAccountDialogProvider.tsx

@@ -4,7 +4,7 @@ import { SelectAccountDialog } from "../../dialogs/SelectAccountDialog";
 
 type DialogContext = (
   title: string,
-  description: string,
+  description: string | React.ReactElement,
   confirmButton?: string,
   excludedAccounts?: Account[]
 ) => Promise<Account | undefined>;
@@ -15,7 +15,9 @@ export function ChooseAccountDialogProvider(
   p: React.PropsWithChildren
 ): React.ReactElement {
   const [title, setTitle] = React.useState("");
-  const [description, setDescription] = React.useState("");
+  const [description, setDescription] = React.useState<
+    string | React.ReactElement
+  >("");
   const [confirmButton, setConfirmButton] = React.useState<
     string | undefined
   >();

moneymgr_web/src/routes/AccountRoute.tsx

@@ -108,7 +108,7 @@ function MovementsTable(p: {
   // Change account of movement
   const handleMoveClick = async (movement: Movement) => {
     const targetAccount = await chooseAccount(
-      "Transfer movementd",
+      "Transfer movement",
       `Please select the target account that will receive the movement: ${movement.label} (${movement.amount} €)`,
       "Transfer movement",
       [accounts.get(movement.account_id)!]
@@ -152,6 +152,50 @@ function MovementsTable(p: {
     }
   };
 
+  // Move multiple movements
+  const moveMultiple = async () => {
+    try {
+      const movements = p.movements.filter((m) =>
+        rowSelectionModel.includes(m.id)
+      );
+
+      const targetAccount = await chooseAccount(
+        "Transfer movements",
+        <>
+          Please select the target account that will receive the selected
+          movements:
+          <ul>
+            {movements.map((m) => (
+              <li>
+                {m.label} ({m.amount} €)
+              </li>
+            ))}
+          </ul>
+        </>,
+        "Transfer movement",
+        [accounts.get(movements[0].account_id)!]
+      );
+
+      if (!targetAccount) return;
+
+      for (const [num, m] of movements.entries()) {
+        loadingMessage.show(`Moveing movement ${num}/${movements.length}`);
+
+        m.account_id = targetAccount.id;
+        await MovementApi.Update(m);
+      }
+
+      snackbar("The movements have been successfully moved!");
+
+      p.needReload(false);
+    } catch (e) {
+      console.error("Failed to delete multiple movements!", e);
+      alert(`Failed to delete multiple movements! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   // Delete multiple movements
   const deleteMultiple = async () => {
     try {
@@ -274,6 +318,17 @@ function MovementsTable(p: {
   return (
     <>
       <div style={{ display: "flex", justifyContent: "end" }}>
+        <Tooltip title="Move all the selected entries to another account">
+          <IconButton
+            disabled={
+              rowSelectionModel.length === 0 ||
+              rowSelectionModel.length === p.movements.length
+            }
+            onClick={moveMultiple}
+          >
+            <DriveFileMoveOutlineIcon />
+          </IconButton>
+        </Tooltip>
         <Tooltip title="Delete all the selected entries">
           <IconButton
             disabled={