From 66322ebd86bb9d703335fa973a0701fe4676cee3 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 15 Mar 2022 19:50:49 +0000
Subject: [PATCH] Fix some linter issues

---
 web/src/components/DateInput.vue         |  4 +-
 web/src/components/Input.vue             |  2 +-
 web/src/pages/BudgetSidebar.vue          | 12 +++---
 web/src/pages/Budgeting.vue              | 52 ++++++++++++++----------
 web/src/pages/Dashboard.vue              |  8 +++-
 web/src/pages/{Index.vue => Welcome.vue} |  3 +-
 6 files changed, 49 insertions(+), 32 deletions(-)
 rename web/src/pages/{Index.vue => Welcome.vue} (91%)

diff --git a/web/src/components/DateInput.vue b/web/src/components/DateInput.vue
index 85aee48..79b5418 100644
--- a/web/src/components/DateInput.vue
+++ b/web/src/components/DateInput.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import Input from './Input.vue';
-const props = defineProps(["modelValue"]);
+const props = defineProps<{
+  modelValue: Date
+}>();
 const emit = defineEmits(['update:modelValue']);
 
 function dateToYYYYMMDD(d: Date) : string {
diff --git a/web/src/components/Input.vue b/web/src/components/Input.vue
index ea56231..accc67b 100644
--- a/web/src/components/Input.vue
+++ b/web/src/components/Input.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = defineProps(["modelValue"]);
+const props = defineProps<{modelValue : number | string}>();
 </script>
 
 <template>
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 7caf245..37d85c3 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import Currency from "../components/Currency.vue"
-import { useBudgetsStore } from "../stores/budget"
-import { Account, useAccountStore } from "../stores/budget-account"
-import { useSettingsStore } from "../stores/settings"
+import Currency from "../components/Currency.vue";
+import { useBudgetsStore } from "../stores/budget";
+import { Account, useAccountStore } from "../stores/budget-account";
+import { useSettingsStore } from "../stores/settings";
 import AccountWithReconciled from "../components/AccountWithReconciled.vue";
 
 const settings = useSettingsStore();
@@ -33,7 +33,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       >
         <router-link
           to="/dashboard"
-          style="font-size:150%"
+          style="font-size: 150%"
         >⌂</router-link>
         {{ CurrentBudgetName }}
       </span>
@@ -53,6 +53,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
         </div>
         <div
           v-for="account in OnBudgetAccounts"
+          :key="account.ID"
           class="flex flex-row justify-between"
         >
           <AccountWithReconciled :account="account" />
@@ -72,6 +73,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
         </div>
         <div
           v-for="account in OffBudgetAccounts"
+          :key="account.ID"
           class="flex flex-row justify-between"
         >
           <AccountWithReconciled :account="account" />
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index c1f9a92..4953b59 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -106,7 +106,10 @@ function assignedChanged(e : Event, category : Category){
     <span class="hidden sm:block text-right">Assigned</span>
     <span class="hidden sm:block text-right">Activity</span>
     <span class="hidden sm:block text-right">Available</span>
-    <template v-for="group in GroupsForMonth">
+    <template
+      v-for="group in GroupsForMonth"
+      :key="group.Name"
+    >
       <span
         class="text-lg font-bold mt-2"
         @click="toggleGroup(group)"
@@ -137,28 +140,33 @@ function assignedChanged(e : Event, category : Category){
       />
       <template
         v-for="category in GetCategories(group.Name)"
-        v-if="getGroupState(group)"
+        :key="category.ID"
       >
-        <span
-          class="whitespace-nowrap overflow-hidden"
-        >{{ category.Name }}</span>
-        <Currency
-          :value="category.AvailableLastMonth"
-          class="hidden lg:block"
-        />
-        <Input
-          v-model="category.Assigned"
-          type="number"
-          class="hidden sm:block mx-2 text-right"
-          @input="(evt) => assignedChanged(evt, category)"
-        />
-        <Currency
-          :value="category.Activity"
-          class="hidden sm:block"
-        />
-        <Currency
-          :value="accountStore.GetCategoryAvailable(category)"
-        />
+        <div
+          v-if="getGroupState(group)"
+          class="contents"
+        >
+          <span
+            class="whitespace-nowrap overflow-hidden"
+          >{{ category.Name }}</span>
+          <Currency
+            :value="category.AvailableLastMonth"
+            class="hidden lg:block"
+          />
+          <Input
+            v-model="category.Assigned"
+            type="number"
+            class="hidden sm:block mx-2 text-right"
+            @input="(evt) => assignedChanged(evt, category)"
+          />
+          <Currency
+            :value="category.Activity"
+            class="hidden sm:block"
+          />
+          <Currency
+            :value="accountStore.GetCategoryAvailable(category)"
+          />
+        </div>
       </template>
     </template>
   </div>
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
index 5a4d89f..c1a836d 100644
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@@ -13,14 +13,18 @@ const BudgetsList = useSessionStore().BudgetsList;
 <template>
   <h1>Budgets</h1>
   <div class="grid md:grid-cols-2 gap-6">
-    <Card v-for="budget in BudgetsList">
+    <Card
+      v-for="budget in BudgetsList"
+      :key="budget.ID"
+    >
       <router-link
         :to="'/budget/'+budget.ID+'/budgeting'"
         class="contents"
       >
         <!--<svg class="w-24"></svg>-->
         <p class="w-24 text-center text-6xl" />
-        <span class="text-lg">{{ budget.Name }}{{ budget.ID == budgetid ? " *" : "" }}</span>
+        <span class="text-lg">{{ budget.Name
+        }}{{ budget.ID == budgetid ? " *" : "" }}</span>
       </router-link>
     </Card>
     <NewBudget />
diff --git a/web/src/pages/Index.vue b/web/src/pages/Welcome.vue
similarity index 91%
rename from web/src/pages/Index.vue
rename to web/src/pages/Welcome.vue
index 8eb7917..5dbd548 100644
--- a/web/src/pages/Index.vue
+++ b/web/src/pages/Welcome.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+</script>
 
 <template>
   <div>