From b176ce26ba4f1d3f123741641a03b899a40bb8ef Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sat, 5 Mar 2022 22:23:41 +0000
Subject: [PATCH] Implement summing per category group

---
 web/src/pages/Budgeting.vue      |  6 +++++-
 web/src/stores/budget-account.ts | 31 ++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index c796090..01e8178 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -96,9 +96,13 @@ function assignedChanged(e : Event, category : Category){
         <span class="hidden sm:block text-right">Available</span>
         <template v-for="group in GroupsForMonth">
             <a
-                class="text-lg font-bold col-span-2 sm:col-span-4 lg:col-span-5"
+                class="text-lg font-bold"
                 @click="toggleGroup(group)"
             >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
+            <Currency :value="group.AvailableLastMonth" class="hidden lg:block" />
+            <Currency :value="group.Assigned" class="hidden sm:block mx-2 text-right" />
+            <Currency :value="group.Activity" class="hidden sm:block" />
+            <Currency :value="group.Available" />
             <template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
                 <span class="whitespace-nowrap overflow-hidden">{{ category.Name }}</span>
                 <Currency :value="category.AvailableLastMonth" class="hidden lg:block" />
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index becea06..bf64694 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -51,7 +51,7 @@ export const useAccountStore = defineStore("budget/account", {
             return [...monthMap?.values() || []];
         },
         GetCategoryAvailable(state) {
-            return (category : Category) : number => {
+            return (category: Category): number => {
                 return category.AvailableLastMonth + Number(category.Assigned) + category.Activity;
             }
         },
@@ -62,7 +62,7 @@ export const useAccountStore = defineStore("budget/account", {
         GetIncomeAvailable(state) {
             return (year: number, month: number) => {
                 const IncomeCategoryID = this.GetIncomeCategoryID;
-                if(IncomeCategoryID == null)
+                if (IncomeCategoryID == null)
                     return 0;
 
                 const categories = this.AllCategoriesForMonth(year, month);
@@ -80,13 +80,26 @@ export const useAccountStore = defineStore("budget/account", {
                 for (const category of categories) {
                     if (category.ID == this.GetIncomeCategoryID)
                         continue;
-                        
-                    if (category.Group != prev)
-                        categoryGroups.push({
+
+                    if (prev == undefined || category.Group != prev.Name) {
+                        prev = {
                             Name: category.Group,
-                            Expand: category.Group != "Hidden Categories",
+                            Available: this.GetCategoryAvailable(category),
+                            AvailableLastMonth: category.AvailableLastMonth,
+                            Activity: category.Activity,
+                            Assigned: category.Assigned,
+                        }
+                        categoryGroups.push({
+                            ...prev,
+                            Expand: prev.Name != "Hidden Categories",
                         });
-                    prev = category.Group;
+                    } else {
+                        categoryGroups[categoryGroups.length-1].Available += this.GetCategoryAvailable(category);
+                        categoryGroups[categoryGroups.length-1].AvailableLastMonth += category.AvailableLastMonth;
+                        categoryGroups[categoryGroups.length-1].Activity += category.Activity;
+                        categoryGroups[categoryGroups.length-1].Assigned += category.Assigned;
+                        continue;
+                    }
                 }
                 return categoryGroups;
             }
@@ -142,7 +155,7 @@ export const useAccountStore = defineStore("budget/account", {
             account.Transactions = transactions;
         },
         async FetchMonthBudget(budgetid: string, year: number, month: number) {
-            const result = await GET("/budget/" + budgetid + "/" + year + "/" + (month+1));
+            const result = await GET("/budget/" + budgetid + "/" + year + "/" + (month + 1));
             const response = await result.json();
             if (response.Categories == undefined || response.Categories.length <= 0)
                 return;
@@ -153,7 +166,7 @@ export const useAccountStore = defineStore("budget/account", {
             const response = await result.json();
             useBudgetsStore().MergeBudgetingData(response);
 
-            if(!isOpen) {
+            if (!isOpen) {
                 this.Accounts.delete(accountid);
             }
         },