Can change default account

moneymgr_web/src/api/AccountApi.ts

@@ -14,6 +14,7 @@ export class AccountsList {
 
   constructor(list: Account[]) {
     this.list = list;
+    this.list.sort((a, b) => a.id - b.id);
   }
 
   /**
@@ -38,4 +39,14 @@ export class AccountApi {
 
     return new AccountsList(array);
   }
+
+  /**
+   * Set default account
+   */
+  static async SetDefaultAccount(account: Account): Promise<void> {
+    await APIClient.exec({
+      uri: `/account/${account.id}/default`,
+      method: "PUT",
+    });
+  }
 }

moneymgr_web/src/hooks/AccountsListProvider.tsx

@@ -4,7 +4,7 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 
 interface AccountContext {
   list: AccountsList;
-  reload: () => void;
+  reload: () => Promise<void>;
   get(id: number): Account | null;
 }
 
@@ -24,9 +24,10 @@ export function AccountsListProvider(
   };
 
   const onReload = async () => {
-    loadKey.current += 1;
     setList(null);
 
+    loadKey.current += 1;
+
     return new Promise<void>((res) => {
       loadPromise.current = () => {
         res();
@@ -36,6 +37,7 @@ export function AccountsListProvider(
 
   return (
     <AsyncWidget
+      ready={list !== null}
       loadKey={loadKey.current}
       load={load}
       errMsg="Failed to load the list of accounts!"

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>
   );
 }