Display categories

web/src/pages/Budgeting.vue

@@ -2,7 +2,8 @@
 import { computed, onMounted, ref, watchEffect } from "vue";
 import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
-import { useCategoryGroupStore } from "../stores/category-group";
+import { useCategoryGroupStore, CategoryGroup } from "../stores/category-group";
+import { useCategoryStore } from "../stores/category";
 import { useAccountStore } from "../stores/budget-account";
 import { useSessionStore } from "../stores/session";
 import Input from "../components/Input.vue";
@@ -18,8 +19,13 @@ const props = defineProps<{
     month: string,
 }>()
 
-const categoryStore = useCategoryGroupStore()
-const categoryGroups = computed(() => [...categoryStore.CategoryGroups.values()]);
+const categoryGroupStore = useCategoryGroupStore()
+const categoryGroups = computed(() => [...categoryGroupStore.CategoryGroups.values()]);
+
+const categoryStore = useCategoryStore();
+function getCategoriesForGroup(group : CategoryGroup) {
+  return categoryStore.GetCategoriesForGroup(group);
+}
 
 const budgetsStore = useBudgetsStore();
 const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
@@ -67,9 +73,7 @@ function getGroupState(group: { Name: string, Expand: boolean }): boolean {
     return expandedGroups.value.get(group.Name) ?? group.Expand;
 }
 
-function assignedChanged(e : Event, category : Category){
-    const target = e.target as HTMLInputElement;
-    const value = target.valueAsNumber;
+function assignedChanged(_e : Event, category : Category){
     POST("/budget/"+CurrentBudgetID.value+"/category/" + category.ID + "/" + selected.value.Year + "/" + (selected.value.Month+1),
     JSON.stringify({Assigned: category.Assigned}));
 }
@@ -138,7 +142,7 @@ function assignedChanged(e : Event, category : Category){
         negative-class="text-red-700 dark:text-red-400"
       />
       <template
-        v-for="category in GetCategories(group.Name)"
+        v-for="category in getCategoriesForGroup(group)"
         :key="category.ID"
       >
         <div

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,6 +231,9 @@ export const useAccountStore = defineStore("budget/account", {
             available: number,
             overspentLastMonth: number,
         ): void {
+          useCategoryStore().AddCategory(...categories)
+          useCategoryGroupStore().AddCategoryGroup(...categories.map(x => ({ID: x.CategoryGroupID, Name: x.Group})));
+
           this.$patch((state) => {
             const yearMap =
                 state.Months.get(year) ||

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){
+    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){
+    async AddCategory(...categories : Category[]){
+      for (const category of categories) {
         this.Categories.set(category.ID, category);
+      }
     },
   },
 });