From 6dd8a3791fa1c3426fec294fc3bafcf3238849b2 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 1 Mar 2022 08:36:03 +0000
Subject: [PATCH] Use grid instead of table

---
 web/src/pages/Budgeting.vue | 69 +++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index b1d05ac..1c5332c 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -17,7 +17,7 @@ const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
 const accountStore = useAccountStore();
 const categoriesForMonth = accountStore.CategoriesForMonthAndGroup;
 
-function GetCategories(group : string) {
+function GetCategories(group: string) {
     return [...categoriesForMonth(selected.value.Year, selected.value.Month, group)];
 };
 
@@ -28,20 +28,20 @@ const GroupsForMonth = computed(() => {
 
 
 const previous = computed(() => ({
-        Year: new Date(selected.value.Year, selected.value.Month - 1, 1).getFullYear(),
-        Month: new Date(selected.value.Year, selected.value.Month - 1, 1).getMonth(),
+    Year: new Date(selected.value.Year, selected.value.Month - 1, 1).getFullYear(),
+    Month: new Date(selected.value.Year, selected.value.Month - 1, 1).getMonth(),
 }));
 const current = computed(() => ({
-        Year: new Date().getFullYear(),
-        Month: new Date().getMonth(),
+    Year: new Date().getFullYear(),
+    Month: new Date().getMonth(),
 }));
 const selected = computed(() => ({
-        Year: Number(props.year) ?? current.value.Year,
-        Month: Number(props.month ?? current.value.Month)
+    Year: Number(props.year) ?? current.value.Year,
+    Month: Number(props.month ?? current.value.Month)
 }));
 const next = computed(() => ({
-        Year: new Date(selected.value.Year, Number(props.month) + 1, 1).getFullYear(),
-        Month: new Date(selected.value.Year, Number(props.month) + 1, 1).getMonth(),
+    Year: new Date(selected.value.Year, Number(props.month) + 1, 1).getFullYear(),
+    Month: new Date(selected.value.Year, Number(props.month) + 1, 1).getMonth(),
 }));
 
 watchEffect(() => {
@@ -56,12 +56,12 @@ onMounted(() => {
 
 const expandedGroups = ref<Map<string, boolean>>(new Map<string, boolean>())
 
-function toggleGroup(group : {Name : string, Expand: 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 {
+function getGroupState(group: { Name: string, Expand: boolean }): boolean {
     return expandedGroups.value.get(group.Name) ?? group.Expand;
 }
 </script>
@@ -79,31 +79,24 @@ function getGroupState(group : {Name : string, Expand: boolean}) : boolean {
             :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
         >Next Month</router-link>
     </div>
-    <table class="container col-lg-12" id="content">
-        <tr>
-            <th>Category</th>
-            <th class="hidden md:block">Leftover</th>
-            <th>Assigned</th>
-            <th>Activity</th>
-            <th>Available</th>
-        </tr>
-        <tbody v-for="group in GroupsForMonth">
-            <tr><td><a class="text-lg font-bold" colspan="4" @click="toggleGroup(group)">{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a></td></tr>
-            <tr v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
-                <td>{{ category.Name }}</td>
-                <td class="text-right hidden md:block">
-                    <Currency :value="category.AvailableLastMonth" />
-                </td>
-                <td class="text-right">
-                    <Currency :value="category.Assigned" />
-                </td>
-                <td class="text-right">
-                    <Currency :value="category.Activity" />
-                </td>
-                <td class="text-right">
-                    <Currency :value="category.Available" />
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="container col-lg-12 grid grid-cols-4 md:grid-cols-5" id="content">
+        <span>Category</span>
+        <span class="hidden md:block">Leftover</span>
+        <span>Assigned</span>
+        <span>Activity</span>
+        <span>Available</span>
+        <template v-for="group in GroupsForMonth">
+            <a
+                class="text-lg font-bold col-span-4 md:col-span-5"
+                @click="toggleGroup(group)"
+            >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
+            <template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
+                <span>{{ category.Name }}</span>
+                <Currency :value="category.AvailableLastMonth" />
+                <Currency :value="category.Assigned" />
+                <Currency :value="category.Activity" />
+                <Currency :value="category.Available" />
+            </template>
+        </template>
+    </div>
 </template>