Can delete account from web ui

moneymgr_web/src/api/AccountApi.ts

@@ -62,4 +62,14 @@ export class AccountApi {
       },
     });
   }
+
+  /**
+   * Delete account
+   */
+  static async Delete(account: Account): Promise<void> {
+    await APIClient.exec({
+      uri: `/account/${account.id}`,
+      method: "DELETE",
+    });
+  }
 }

moneymgr_web/src/routes/AccountsRoute.tsx

@@ -1,16 +1,19 @@
 import AddIcon from "@mui/icons-material/Add";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { IconButton, Tooltip } from "@mui/material";
-import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { DataGrid, GridActionsCellItem, GridColDef } from "@mui/x-data-grid";
 import { Account, AccountApi } from "../api/AccountApi";
 import { useAccounts } from "../hooks/AccountsListProvider";
 import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
 import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
+import DeleteIcon from "@mui/icons-material/DeleteOutlined";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 
 export function AccountsRoute(): React.ReactElement {
   const alert = useAlert();
+  const confirm = useConfirm();
   const snackbar = useSnackbar();
 
   const accounts = useAccounts();
@@ -49,6 +52,27 @@ export function AccountsRoute(): React.ReactElement {
     }
   };
 
+  const deleteAccount = async (account: Account) => {
+    try {
+      if (
+        !(await confirm(
+          `Do you really want to delete account ${account.name}?`,
+          "Delete account"
+        ))
+      )
+        return;
+
+      await AccountApi.Delete(account);
+
+      snackbar("Account successfully deleted!");
+
+      await accounts.reload();
+    } catch (e) {
+      console.error(`Failed to delete account!`, e);
+      alert(`Failed to delete account! ${e}`);
+    }
+  };
+
   const columns: GridColDef<(typeof list)[number]>[] = [
     { field: "id", headerName: "ID", flex: 1 },
     { field: "name", headerName: "Name", flex: 6, editable: true },
@@ -75,6 +99,24 @@ export function AccountsRoute(): React.ReactElement {
       type: "boolean",
       editable: true,
     },
+    {
+      field: "actions",
+      type: "actions",
+      headerName: "",
+      flex: 1,
+      cellClassName: "actions",
+      getActions: ({ row }) => {
+        return [
+          <GridActionsCellItem
+            key={row.id}
+            icon={<DeleteIcon />}
+            label="Delete account"
+            onClick={() => deleteAccount(row)}
+            color="inherit"
+          />,
+        ];
+      },
+    },
   ];
 
   return (