Can change default account

moneymgr_web/src/routes/AccountsRoute.tsx

@@ -1,17 +1,38 @@
-import { IconButton, Tooltip } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import RefreshIcon from "@mui/icons-material/Refresh";
-import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
+import { IconButton, Tooltip } from "@mui/material";
 import { DataGrid, 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";
 
 export function AccountsRoute(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
   const accounts = useAccounts();
 
   const list = accounts.list.list;
 
+  const setDefaultAccount = async (account: Account) => {
+    try {
+      snackbar("Default account successfully updated!");
+
+      AccountApi.SetDefaultAccount(account);
+
+      await accounts.reload();
+
+      return accounts.get(account.id);
+    } catch (e) {
+      console.error("Failed to change default account!", e);
+      alert(`Failed to change default account! ${e}`);
+      return account;
+    }
+  };
+
   const columns: GridColDef<(typeof list)[number]>[] = [
     { field: "id", headerName: "ID", flex: 1 },
     { field: "name", headerName: "Name", flex: 6 },
@@ -36,6 +57,7 @@ export function AccountsRoute(): React.ReactElement {
       headerName: "Default",
       flex: 1,
       type: "boolean",
+      editable: true,
     },
   ];
 
@@ -57,7 +79,18 @@ export function AccountsRoute(): React.ReactElement {
         </span>
       }
     >
-      <DataGrid rows={list} columns={columns} disableRowSelectionOnClick />
+      <DataGrid<Account>
+        rows={list}
+        columns={columns}
+        disableRowSelectionOnClick
+        processRowUpdate={(updated, original) => {
+          if (updated.default_account && !original.default_account) {
+            return setDefaultAccount(updated);
+          }
+
+          return original as any;
+        }}
+      />
     </MoneyMgrWebRouteContainer>
   );
 }