From 55dffbbe895db9740eacf9ec003809056104faa7 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 25 Feb 2022 20:06:26 +0000
Subject: [PATCH] Implmeent expand/collapse of category-groups

---
 web/src/pages/Budgeting.vue      | 18 +++++++++++++++---
 web/src/stores/budget-account.ts |  5 ++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index bf00f8c..3ffb2c1 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineProps, onMounted, watchEffect } from "vue";
+import { computed, defineProps, onMounted, ref, watchEffect } from "vue";
 import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
 import { useAccountStore } from "../stores/budget-account";
@@ -52,6 +52,18 @@ watchEffect(() => {
 onMounted(() => {
     useSessionStore().setTitle("Budget for " + selected.value.Month + "/" + selected.value.Year);
 })
+
+
+const expandedGroups = ref<Map<string, boolean>>(new Map<string, boolean>())
+
+function toggleGroup(group : {Name : string, Expand: boolean}) {
+    console.log(expandedGroups.value);
+    expandedGroups.value.set(group.Name, !(expandedGroups.value.get(group.Name) ?? group.Expand))
+}
+
+function getGroupState(group : {Name : string, Expand: boolean}) : boolean {
+    return expandedGroups.value.get(group.Name) ?? group.Expand;
+}
 </script>
 
 <template>
@@ -78,8 +90,8 @@ onMounted(() => {
             <th>Available</th>
         </tr>
         <tbody v-for="group in GroupsForMonth">
-            <p class="text-lg font-bold">{{ group }}</p>
-            <tr v-for="category in GetCategories(group)">
+            <a class="text-lg font-bold" @click="toggleGroup(group)">{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
+            <tr v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
                 <td>{{ category.Name }}</td>
                 <td></td>
                 <td></td>
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index c612c0d..1f0f3d2 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -67,7 +67,10 @@ export const useAccountStore = defineStore("budget/account", {
                 let prev = undefined;
                 for (const category of categories) {
                     if(category.Group != prev)
-                        categoryGroups.push(category.Group);
+                        categoryGroups.push({
+                            Name: category.Group,
+                            Expand: category.Group != "Hidden Categories",
+                        });
                     prev = category.Group;
                 }
                 return categoryGroups;