From 67c013799dcf532aa29c64d1c32f0fb8846c8b0a Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 3 Mar 2022 10:44:50 +0000
Subject: [PATCH] Calculate available balance locally

---
 web/src/pages/Budgeting.vue      | 5 +++--
 web/src/stores/budget-account.ts | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index ef235fe..77c1535 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -4,6 +4,7 @@ import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
 import { useAccountStore } from "../stores/budget-account";
 import { useSessionStore } from "../stores/session";
+import Input from "../components/Input.vue";
 
 const props = defineProps<{
     budgetid: string,
@@ -92,9 +93,9 @@ function getGroupState(group: { Name: string, Expand: boolean }): boolean {
             <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" />
-                <Currency :value="category.Assigned" class="hidden sm:block" />
+                <Input type="number" v-model="category.Assigned" class="hidden sm:block mx-2 text-right" />
                 <Currency :value="category.Activity" class="hidden sm:block" />
-                <Currency :value="category.Available" />
+                <Currency :value="accountStore.GetCategoryAvailable(category)" />
             </template>
         </template>
     </div>
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index 4c6d71e..0360411 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -31,7 +31,6 @@ export interface Category {
     AvailableLastMonth: number
     Assigned: number
     Activity: number
-    Available: number
 }
 
 export const useAccountStore = defineStore("budget/account", {
@@ -51,6 +50,11 @@ export const useAccountStore = defineStore("budget/account", {
             const monthMap = yearMap?.get(month);
             return [...monthMap?.values() || []];
         },
+        GetCategoryAvailable(state) {
+            return (category : Category) : number => {
+                return category.AvailableLastMonth + Number(category.Assigned) + category.Activity;
+            }
+        },
         CategoryGroupsForMonth(state) {
             return (year: number, month: number) => {
                 const categories = this.AllCategoriesForMonth(year, month);