From d9efa9f4a15e3b00da31e115e0294a01798537a3 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Mon, 14 Mar 2022 19:10:09 +0000
Subject: [PATCH] Improve layout of groups

---
 web/src/components/Currency.vue |  8 ++++++--
 web/src/pages/Budgeting.vue     | 12 ++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/src/components/Currency.vue b/web/src/components/Currency.vue
index 5f09804..809df4f 100644
--- a/web/src/components/Currency.vue
+++ b/web/src/components/Currency.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-const props = defineProps<{ value: number | undefined }>();
+const props = defineProps<{ 
+    value: number | undefined
+    negativeClass?: string
+    positiveClass?: string
+}>();
 
 const internalValue = computed(() => Number(props.value ?? 0));
 
@@ -11,5 +15,5 @@ const formattedValue = computed(() => internalValue.value.toLocaleString(undefin
 </script>
 
 <template>
-    <span class="text-right" :class="internalValue < 0 ? 'negative' : ''">{{ formattedValue }} €</span>
+    <span class="text-right" :class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass">{{ formattedValue }} €</span>
 </template>
\ No newline at end of file
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 01e8178..066d57a 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -95,14 +95,14 @@ function assignedChanged(e : Event, category : Category){
         <span class="hidden sm:block text-right">Activity</span>
         <span class="hidden sm:block text-right">Available</span>
         <template v-for="group in GroupsForMonth">
-            <a
+            <span
                 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" />
+            >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span>
+            <Currency :value="group.AvailableLastMonth" class="hidden lg:block font-thin" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
+            <Currency :value="group.Assigned" class="hidden sm:block mx-2 text-right" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
+            <Currency :value="group.Activity" class="hidden sm:block" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
+            <Currency :value="group.Available" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
             <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" />