From 3856e8a8a5bb6a4a15b32c847a101baccfeb7b5d Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 4 Mar 2022 22:24:50 +0000
Subject: [PATCH] Update assignment on modification

---
 web/src/pages/Budgeting.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index aef067e..c796090 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -2,9 +2,10 @@
 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";
+import { Category, useAccountStore } from "../stores/budget-account";
 import { useSessionStore } from "../stores/session";
 import Input from "../components/Input.vue";
+import { POST } from "../api";
 
 const props = defineProps<{
     budgetid: string,
@@ -64,6 +65,13 @@ function toggleGroup(group: { Name: string, Expand: boolean }) {
 function getGroupState(group: { Name: string, Expand: boolean }): boolean {
     return expandedGroups.value.get(group.Name) ?? group.Expand;
 }
+
+function assignedChanged(e : Event, category : Category){
+    const target = e.target as HTMLInputElement;
+    const value = target.valueAsNumber;
+    POST("/budget/"+CurrentBudgetID.value+"/category/" + category.ID + "/" + selected.value.Year + "/" + (selected.value.Month+1), 
+    JSON.stringify({Assigned: category.Assigned}));
+}
 </script>
 
 <template>
@@ -94,7 +102,7 @@ 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" />
-                <Input type="number" v-model="category.Assigned" class="hidden sm:block mx-2 text-right" />
+                <Input type="number" v-model="category.Assigned" @input="(evt) => assignedChanged(evt, category)" class="hidden sm:block mx-2 text-right" />
                 <Currency :value="category.Activity" class="hidden sm:block" />
                 <Currency :value="accountStore.GetCategoryAvailable(category)" />
             </template>