Display categories

web/src/stores/budget-account.ts

@@ -1,7 +1,8 @@
 import { defineStore } from "pinia";
 import { GET, POST } from "../api";
 import { useBudgetsStore } from "./budget";
-import { Category } from "./category";
+import { Category, useCategoryStore } from "./category";
+import { useCategoryGroupStore } from "./category-group";
 import { useSessionStore } from "./session";
 import { Transaction, useTransactionsStore } from "./transactions";
 
@@ -230,22 +231,25 @@ export const useAccountStore = defineStore("budget/account", {
             available: number,
             overspentLastMonth: number,
         ): void {
-            this.$patch((state) => {
-                const yearMap =
-                    state.Months.get(year) ||
-                    new Map<number, Map<string, Category>>();
-                const monthMap =
-                    yearMap.get(month) || new Map<string, Category>();
-                for (const category of categories) {
-                    monthMap.set(category.ID, category);
-                }
+          useCategoryStore().AddCategory(...categories)
+          useCategoryGroupStore().AddCategoryGroup(...categories.map(x => ({ID: x.CategoryGroupID, Name: x.Group})));
 
-                yearMap.set(month, monthMap);
-                state.Months.set(year, yearMap);
+          this.$patch((state) => {
+            const yearMap =
+                state.Months.get(year) ||
+                new Map<number, Map<string, Category>>();
+            const monthMap =
+              yearMap.get(month) || new Map<string, Category>();
+            for (const category of categories) {
+              monthMap.set(category.ID, category);
+            }
 
-                state.Available = available;
-                state.OverspentLastMonth = overspentLastMonth;
-            });
+            yearMap.set(month, monthMap);
+            state.Months.set(year, yearMap);
+
+            state.Available = available;
+            state.OverspentLastMonth = overspentLastMonth;
+          });
         },
         logout() {
             this.$reset();

web/src/stores/category-group.ts

@@ -9,7 +9,6 @@ interface State {
 export interface CategoryGroup {
   ID: string;
   Name: string;
-  CategoryIDs: string[];
 }
 
 export const useCategoryGroupStore = defineStore("category-group", {
@@ -32,8 +31,10 @@ export const useCategoryGroupStore = defineStore("category-group", {
       const response = await result.json();
       this.AddCategoryGroup(response);
     },
-    async AddCategoryGroup(categoryGroup : CategoryGroup){
-      this.CategoryGroups.set(categoryGroup.ID, categoryGroup);
+    async AddCategoryGroup(...categoryGroups : CategoryGroup[]){
+      for (const categoryGroup of categoryGroups) {
+        this.CategoryGroups.set(categoryGroup.ID, categoryGroup);
+      }
     }
   },
 });

web/src/stores/category.ts

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { POST } from "../api";
 import { useBudgetsStore } from "./budget";
+import { CategoryGroup } from "./category-group";
 
 interface State {
     Categories: Map<string, Category>;
@@ -8,6 +9,7 @@ interface State {
 
 export interface Category {
     ID: string;
+    CategoryGroupID: string;
     Group: string;
     Name: string;
     AvailableLastMonth: number;
@@ -20,6 +22,11 @@ export const useCategoryStore = defineStore("category", {
       Categories: new Map<string, Category>(),
   }),
   getters: {
+    GetCategoriesForGroup(state) {
+      return (group : CategoryGroup) : Category[] => {
+        return [...state.Categories.values()].filter(x => x.CategoryGroupID == group.ID);
+      }
+    },
   },
   actions: {
     async CreateCategory(
@@ -37,8 +44,10 @@ export const useCategoryStore = defineStore("category", {
       const response = await result.json();
       this.AddCategory(response);
     },
-    async AddCategory(category : Category){
-      this.Categories.set(category.ID, category);
+    async AddCategory(...categories : Category[]){
+      for (const category of categories) {
+        this.Categories.set(category.ID, category);
+      }
     },
   },
 });