Add account type

moneymgr_web/src/api/AccountApi.ts

@@ -1,4 +1,5 @@
 import { APIClient } from "./ApiClient";
+import { ServerApi } from "./ServerApi";
 
 export interface Account {
   id: number;
@@ -6,6 +7,7 @@ export interface Account {
   user_id: number;
   time_create: number;
   time_update: number;
+  type: string;
   default_account: boolean;
 }
 
@@ -66,6 +68,7 @@ export class AccountApi {
       method: "POST",
       jsonData: {
         name,
+        type: ServerApi.Config.accounts_types[0].code,
       },
     });
   }
@@ -79,6 +82,7 @@ export class AccountApi {
       method: "PUT",
       jsonData: {
         name: account.name,
+        type: account.type,
       },
     });
   }

moneymgr_web/src/api/ServerApi.ts

@@ -3,9 +3,16 @@ import { APIClient } from "./ApiClient";
 export interface ServerConfig {
   auth_disabled: boolean;
   oidc_provider_name: string;
+  accounts_types: AccountType[];
   constraints: ServerConstraints;
 }
 
+export interface AccountType {
+  label: string;
+  code: string;
+  icon: string;
+}
+
 export interface ServerConstraints {
   token_name: LenConstraint;
   token_ip_net: LenConstraint;

moneymgr_web/src/routes/AccountsRoute.tsx

@@ -10,6 +10,8 @@ import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer"
 import { TimeWidget } from "../widgets/TimeWidget";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
+import { AccountWidget } from "../widgets/AccountWidget";
+import { ServerApi } from "../api/ServerApi";
 
 export function AccountsRoute(): React.ReactElement {
   const alert = useAlert();
@@ -88,6 +90,35 @@ export function AccountsRoute(): React.ReactElement {
 
   const columns: GridColDef<(typeof list)[number]>[] = [
     { field: "id", headerName: "ID", flex: 1 },
+    {
+      field: "type",
+      headerName: "Type",
+      flex: 2,
+      editable: true,
+      type: "singleSelect",
+      valueOptions: ServerApi.Config.accounts_types.map((v) => {
+        return { label: v.label, value: v.code };
+      }),
+      renderCell(params) {
+        return (
+          <span
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "start",
+              alignItems: "center",
+            }}
+          >
+            <AccountWidget account={params.row} />
+            {
+              ServerApi.Config.accounts_types.find(
+                (t) => t.code === params.row.type
+              )!.label
+            }
+          </span>
+        );
+      },
+    },
     { field: "name", headerName: "Name", flex: 6, editable: true },
     {
       field: "time_create",
@@ -159,7 +190,10 @@ export function AccountsRoute(): React.ReactElement {
             return setDefaultAccount(updated);
           }
 
-          if (updated.name !== original.name) {
+          if (
+            updated.name !== original.name ||
+            updated.type !== original.type
+          ) {
             return updateAccount(updated);
           }
 

moneymgr_web/src/widgets/AccountWidget.tsx

@@ -0,0 +1,25 @@
+import { Account } from "../api/AccountApi";
+import { ServerApi } from "../api/ServerApi";
+import { useDarkTheme } from "../hooks/context_providers/DarkThemeProvider";
+import { toBase64 } from "@jsonjoy.com/base64";
+
+export function AccountWidget(p: { account: Account }): React.ReactElement {
+  const darkTheme = useDarkTheme();
+
+  return (
+    <img
+      style={{
+        height: "1.5em",
+        width: "1.5em",
+        backgroundColor: darkTheme.enabled ? "white" : "black",
+        mask: `url(\"data:image/svg+xml;base64,${toBase64(
+          new TextEncoder().encode(
+            ServerApi.Config.accounts_types.find(
+              (t) => t.code === p.account.type
+            )!.icon
+          )
+        )}\")`,
+      }}
+    />
+  );
+}

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -1,4 +1,4 @@
-import { mdiAccount, mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
+import { mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   Divider,
@@ -8,8 +8,10 @@ import {
   ListItemText,
   Typography,
 } from "@mui/material";
+import React from "react";
 import { useLocation } from "react-router-dom";
 import { useAccounts } from "../hooks/AccountsListProvider";
+import { AccountWidget } from "./AccountWidget";
 import { RouterLink } from "./RouterLink";
 
 export function MoneyNavList(): React.ReactElement {
@@ -59,7 +61,7 @@ export function MoneyNavList(): React.ReactElement {
         <NavLink
           label={a.name}
           uri={`/account/${a.id}`}
-          icon={<Icon path={mdiAccount} size={1} />}
+          icon={<AccountWidget account={a} />}
         />
       ))}
     </List>