From 94c2465109676655317f37ad68b1f1609abb06f2 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 23 Sep 2022 20:12:06 +0000
Subject: [PATCH] Display categories

---
 web/src/pages/Budgeting.vue      | 18 ++++++++++-------
 web/src/stores/budget-account.ts | 34 ++++++++++++++++++--------------
 web/src/stores/category-group.ts |  7 ++++---
 web/src/stores/category.ts       | 13 ++++++++++--
 4 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 48d3da2..4ac3fe7 100644
--- a/web/src/pages/Budgeting.vue
+++ b/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
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index 88aaecc..970bd7e 100644
--- a/web/src/stores/budget-account.ts
+++ b/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();
diff --git a/web/src/stores/category-group.ts b/web/src/stores/category-group.ts
index 075dc13..e0127e6 100644
--- a/web/src/stores/category-group.ts
+++ b/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);
+      }
     }
   },
 });
\ No newline at end of file
diff --git a/web/src/stores/category.ts b/web/src/stores/category.ts
index 70d939f..2cbe74b 100644
--- a/web/src/stores/category.ts
+++ b/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);
+      }
     },
   },
 });
\ No newline at end of file