Use Numeric in JSON output

web/src/pages/Account.vue

@@ -14,11 +14,6 @@ export default defineComponent({
     },
     components: { Autocomplete },
     props: ["budgetid", "accountid"],
-    watch: {
-        Payee() {
-            console.log(this.$data.Payee);
-        }
-    },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
@@ -34,8 +29,7 @@ export default defineComponent({
                 }),
                 headers: this.$store.getters.AuthHeaders,
             })
-                .then(x => x.json())
-                .then(x => console.log(x));
+                .then(x => x.json());
         },
     }
 })

web/src/pages/BudgetSidebar.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
 import { defineComponent } from "vue"
+import Currency from "../components/Currency.vue"
 
 export default defineComponent({
-  props: ['budgetid', 'accountid'],
+    props: ["budgetid", "accountid"],
+    components: { Currency }
 })
 </script>
 
@@ -21,14 +23,14 @@ export default defineComponent({
       On-Budget Accounts
       <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{(account.Balance.Int / 100).toLocaleString(undefined, {minimumFractionDigits: 2,})}} €</span>
+        <Currency :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Off-Budget Accounts
       <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
-            <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-            <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
+        <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
+        <Currency :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">

web/src/pages/Budgeting.vue

@@ -1,38 +1,53 @@
 <script lang="ts">
 import { defineComponent } from "vue";
+import { FETCH_MONTH_BUDGET } from "../store/action-types";
 import { TITLE } from "../store/mutation-types";
+import Currency from "../components/Currency.vue";
 
 export default defineComponent({
     mounted() {
-        this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year)
+        this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
+        return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
+    },
+    watch: {
+        year() {
+            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
+        },
+        month() {
+            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
+        },
     },
     props: ["budgetid", "year", "month"],
     data() {
         return {
-            Year: this.year || new Date().getFullYear(),
-            Month: this.month || new Date().getMonth()
-        }
+            Year: (this.year || new Date().getFullYear()) as number,
+            Month: (this.month || new Date().getMonth()) as number
+        };
     },
     computed: {
+        Categories() {
+            return this.$store.getters.Categories(this.$data.Year, this.$data.Month);
+        },
         previous() {
             return {
                 Year: new Date(this.$data.Year, this.$data.Month - 1, 1).getFullYear(),
                 Month: new Date(this.$data.Year, this.$data.Month - 1, 1).getMonth(),
-            }
+            };
         },
         current() {
             return {
                 Year: new Date().getFullYear(),
                 Month: new Date().getMonth(),
-            }
+            };
         },
         next() {
             return {
                 Year: new Date(this.$data.Year, this.$data.Month + 1, 1).getFullYear(),
                 Month: new Date(this.$data.Year, this.$data.Month + 1, 1).getMonth(),
-            }
+            };
         }
-    }
+    },
+    components: { Currency }
 })
 
 /*{{define "title"}}
@@ -42,7 +57,7 @@ export default defineComponent({
 
 <template>
     <h1>
-        Budget for {{current.Month}}/{{current.Year}}
+        Budget for {{Month}}/{{Year}}
     </h1>
     <div>
         <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
@@ -60,15 +75,15 @@ export default defineComponent({
             <th>Activity</th>
             <th>Available</th>
         </tr>
-        <tr v-for="category in $store.getters.Categories(2022, 1)">
+        <tr v-for="category in Categories">
             <td>{{category.Group}}</td>
             <td>{{category.Name}}</td>
             <td></td>
             <td></td>
-            <td>{{category.AvailableLastMonth}}</td>
-            <td>{{category.Assigned}}</td>
-            <td>{{category.Activity}}</td>
-            <td>{{category.Available}}</td>
+            <td class="text-right"><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>
     </table>
 </template>