From cd0b370b5060e69ec9ed3b22a5cdd1eaa939411f Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 11 Feb 2022 22:18:00 +0000
Subject: [PATCH] Fix typescript errors

---
 web/src/main.ts             |  2 +-
 web/src/pages/Budgeting.vue | 61 ++++++++++++++++++++-----------------
 web/src/pages/Settings.vue  |  2 +-
 web/src/stores/budget.ts    |  2 +-
 4 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/web/src/main.ts b/web/src/main.ts
index 4269aec..2c59f5f 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
 import router from './router'
-import { createPinia, SubscriptionCallbackMutation } from 'pinia'
+import { createPinia } from 'pinia'
 import { useBudgetsStore } from './stores/budget';
 import { useAccountStore } from './stores/budget-account'
 import PiniaLogger from './pinia-logger'
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 55dd8d4..022ca0d 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -1,61 +1,66 @@
 <script lang="ts">
 import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
 import { Category, useAccountStore } from "../stores/budget-account";
 
 interface Date {
-    Year: Number,
-    Month: Number,
+    Year: number,
+    Month: number,
 }
 
 export default defineComponent({
-    mounted() {
-        document.title = "Budgeteer - Budget for " + this.selected.Month + "/" + this.selected.Year;
-        return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
+    props: {
+        budgetid: {} as PropType<string>, 
+        year: {} as PropType<number>,
+        month: {} as PropType<number>,
     },
-    watch: {
-        year() {
-            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
-        },
-        month() {
-            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
-        },
-    },
-    props: ["budgetid", "year", "month"],
     computed: {
         ...mapState(useBudgetsStore, ["CurrentBudgetID"]),
-        Categories() : IterableIterator<Category> | undefined {
+        Categories() : Category[] {
             const accountStore = useAccountStore();
-            console.log(accountStore.CategoriesForMonth(this.year, this.month));
-            return accountStore.CategoriesForMonth(this.year, this.month);
+            return [...accountStore.CategoriesForMonth(this.selected.Year, this.selected.Month)];
         },
-        previous(): Date {
+        previous() : Date {
             return {
-                Year: new Date(this.year, this.month - 1, 1).getFullYear(),
-                Month: new Date(this.year, this.month - 1, 1).getMonth(),
+                Year: new Date(this.selected.Year, this.selected.Month - 1, 1).getFullYear(),
+                Month: new Date(this.selected.Year, this.selected.Month - 1, 1).getMonth(),
             };
         },
-        current(): Date {
+        current() : Date {
             return {
                 Year: new Date().getFullYear(),
                 Month: new Date().getMonth(),
             };
         },
-        selected(): Date {
+        selected() : Date {
             return {
-                Year: this.year,
-                Month: Number(this.month) + 1
+                Year: this.year ?? this.current.Year,
+                Month: Number(this.month ?? this.current.Month) + 1
             }
         },
-        next(): Date {
+        next() : Date {
             return {
-                Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
-                Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
+                Year: new Date(this.selected.Year, Number(this.month) + 1, 1).getFullYear(),
+                Month: new Date(this.selected.Year, Number(this.month) + 1, 1).getMonth(),
             };
         }
     },
+    mounted() : Promise<void> {
+        document.title = "Budgeteer - Budget for " + this.selected.Month + "/" + this.selected.Year;
+        return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.selected.Year, this.selected.Month);
+    },
+    watch: {
+        year() {
+            if (this.year != undefined && this.month != undefined)
+                return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.year, this.month);
+        },
+        month() {
+            if (this.year != undefined && this.month != undefined)
+                return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.year, this.month);
+        },
+    },
     components: { Currency }
 })
 
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index be1c7ea..08ebdea 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -12,7 +12,7 @@ export default defineComponent({
         }
     },
     computed: {
-        filesIncomplete() {
+        filesIncomplete() : boolean {
             return this.$data.transactionsFile == undefined || this.$data.assignmentsFile == undefined;
         }
     },
diff --git a/web/src/stores/budget.ts b/web/src/stores/budget.ts
index 736662b..5b536ab 100644
--- a/web/src/stores/budget.ts
+++ b/web/src/stores/budget.ts
@@ -8,7 +8,7 @@ interface State {
 }
 
 export const useBudgetsStore = defineStore('budget', {
-    state: () => ({
+    state: (): State => ({
         CurrentBudgetID: null,
     }),
     getters: {