From 6fcd55549305d2577d1883083e3274a4f1e76c14 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 19:48:24 +0000
Subject: [PATCH 1/3] Extract Input component and add some dark color tags

---
 web/src/components/Autocomplete.vue        |  8 +++++---
 web/src/components/DateInput.vue           |  1 +
 web/src/components/Input.vue               | 10 ++++++++++
 web/src/components/TransactionEditRow.vue  | 20 +++++++++++---------
 web/src/components/TransactionInputRow.vue |  5 +++--
 5 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 web/src/components/Input.vue

diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index 5568a60..b71f1fe 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -2,6 +2,7 @@
 import { ref, watch } from "vue"
 import { GET } from "../api";
 import { useBudgetsStore } from "../stores/budget";
+import Input from "./Input.vue";
 
 export interface Suggestion {
     ID: string
@@ -77,14 +78,15 @@ function clear() {
 
 <template>
     <div>
-        <input
+        <Input
+            type="text"
             class="border-b-2 border-black"
             @keypress="keypress"
             v-if="id == undefined"
             v-model="SearchQuery"
         />
-        <span @click="clear" v-if="id != undefined" class="bg-gray-300">{{ text }}</span>
-        <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
+        <span @click="clear" v-if="id != undefined" class="bg-gray-300 dark:bg-gray-700">{{ text }}</span>
+        <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2">
             <span
                 v-for="suggestion in Suggestions"
                 class="block"
diff --git a/web/src/components/DateInput.vue b/web/src/components/DateInput.vue
index fbe9d2a..0fa0f1e 100644
--- a/web/src/components/DateInput.vue
+++ b/web/src/components/DateInput.vue
@@ -26,6 +26,7 @@ function selectAll(event: FocusEvent) {
 
 <template>
   <input
+    class="dark:bg-slate-900"
     type="date"
     ref="input"
     v-bind:value="dateToYYYYMMDD(modelValue)"
diff --git a/web/src/components/Input.vue b/web/src/components/Input.vue
new file mode 100644
index 0000000..47c8871
--- /dev/null
+++ b/web/src/components/Input.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+const props = defineProps(["modelValue"]);
+</script>
+
+<template>
+    <input 
+        v-model="modelValue"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
+        class="dark:bg-slate-900">
+</template>
\ No newline at end of file
diff --git a/web/src/components/TransactionEditRow.vue b/web/src/components/TransactionEditRow.vue
index 07eaaf0..c7e3f4e 100644
--- a/web/src/components/TransactionEditRow.vue
+++ b/web/src/components/TransactionEditRow.vue
@@ -4,6 +4,8 @@ import Autocomplete from './Autocomplete.vue'
 import { useAccountStore } from '../stores/budget-account'
 import DateInput from "./DateInput.vue";
 import { useTransactionsStore } from "../stores/transactions";
+import Input from "./Input.vue";
+import Button from "./Button.vue";
 
 const props = defineProps<{
     transactionid: string
@@ -37,28 +39,28 @@ function saveTransaction(e: MouseEvent) {
 
 <template>
     <tr>
-        <td style="width: 90px;" class="text-sm">
+        <td class="text-sm">
             <DateInput class="border-b-2 border-black" v-model="TX.Date" />
         </td>
-        <td style="max-width: 150px;">
+        <td>
             <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
         </td>
-        <td style="max-width: 200px;">
+        <td>
             <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
         </td>
         <td>
-            <input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
+            <Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
         </td>
-        <td style="width: 80px;" class="text-right">
-            <input
+        <td class="text-right">
+            <Input
                 class="text-right block w-full border-b-2 border-black"
                 type="currency"
                 v-model="TX.Amount"
             />
         </td>
-        <td style="width: 20px;">
-            <input type="submit" @click="saveTransaction" value="Save" />
+        <td>
+            <Button class="bg-blue-500" @click="saveTransaction">Save</Button>
         </td>
-        <td style="width: 20px;"></td>
+        <td></td>
     </tr>
 </template>
\ No newline at end of file
diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
index 52e20c0..d892eda 100644
--- a/web/src/components/TransactionInputRow.vue
+++ b/web/src/components/TransactionInputRow.vue
@@ -4,6 +4,7 @@ import Autocomplete from '../components/Autocomplete.vue'
 import { Transaction, useTransactionsStore } from "../stores/transactions";
 import DateInput from "./DateInput.vue";
 import Button from "./Button.vue";
+import Input from "./Input.vue";
 
 const props = defineProps<{
     budgetid: string
@@ -65,11 +66,11 @@ function saveTransaction(e: MouseEvent) {
             <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
         </td>
         <td class="col-span-2">
-            <input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
+            <Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
         </td>
         <label class="md:hidden">Amount</label>
         <td class="text-right">
-            <input
+            <Input
                 class="text-right block w-full border-b-2 border-black"
                 type="currency"
                 v-model="TX.Amount"
-- 
2.47.2


From e708cd5d0e3e4676be5815aedc504f0c4e790c0f Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 19:49:22 +0000
Subject: [PATCH 2/3] Invert if

---
 web/src/components/Autocomplete.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index b71f1fe..470c4be 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -44,22 +44,25 @@ function load(text: String) {
         });
 };
 function keypress(e: KeyboardEvent) {
-    if (e.key == "Enter") {
-        const selected = Suggestions.value[0];
-        selectElement(selected);
-        const el = (<HTMLInputElement>e.target);
-        const inputElements = Array.from(el.ownerDocument.querySelectorAll('input:not([disabled]):not([readonly])'));
-        const currentIndex = inputElements.indexOf(el);
-        const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
-        (<HTMLInputElement>nextElement).focus();
-    }
+    if (e.key != "Enter")
+        return;
+
+    const selected = Suggestions.value[0];
+    selectElement(selected);
+    const el = (<HTMLInputElement>e.target);
+    const inputElements = Array.from(el.ownerDocument.querySelectorAll('input:not([disabled]):not([readonly])'));
+    const currentIndex = inputElements.indexOf(el);
+    const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
+    (<HTMLInputElement>nextElement).focus();
 };
+
 function selectElement(element: Suggestion) {
     emit('update:id', element.ID);
     emit('update:text', element.Name);
     emit('update:type', element.Type);
     Suggestions.value = [];
 };
+
 function select(e: MouseEvent) {
     const target = (<HTMLInputElement>e.target);
     const valueAttribute = target.attributes.getNamedItem("value");
@@ -69,6 +72,7 @@ function select(e: MouseEvent) {
     const selected = Suggestions.value.filter(x => x.ID == selectedID)[0];
     selectElement(selected);
 };
+
 function clear() {
     emit('update:id', null);
     emit('update:text', SearchQuery.value);
-- 
2.47.2


From 3bfab1abf392d4297de45adcacaa6abb7601b99f Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 19:53:12 +0000
Subject: [PATCH 3/3] Use Input component for all inputs except file-input

---
 web/src/components/DateInput.vue      | 4 ++--
 web/src/components/TransactionRow.vue | 3 ++-
 web/src/dialogs/EditAccount.vue       | 5 +++--
 web/src/dialogs/NewBudget.vue         | 3 ++-
 web/src/pages/Account.vue             | 5 +++--
 web/src/pages/Login.vue               | 5 +++--
 web/src/pages/Register.vue            | 7 ++++---
 web/src/pages/Settings.vue            | 1 +
 8 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/web/src/components/DateInput.vue b/web/src/components/DateInput.vue
index 0fa0f1e..5177b1e 100644
--- a/web/src/components/DateInput.vue
+++ b/web/src/components/DateInput.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Input from './Input.vue';
 const props = defineProps(["modelValue"]);
 const emit = defineEmits(['update:modelValue']);
 
@@ -25,8 +26,7 @@ function selectAll(event: FocusEvent) {
 </script>
 
 <template>
-  <input
-    class="dark:bg-slate-900"
+  <Input
     type="date"
     ref="input"
     v-bind:value="dateToYYYYMMDD(modelValue)"
diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
index 231b4a1..9472156 100644
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@@ -6,6 +6,7 @@ import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
 import { useAccountStore } from "../stores/budget-account";
+import Input from "./Input.vue";
 
 const props = defineProps<{
     transactionid: string,
@@ -69,7 +70,7 @@ function getStatusSymbol() {
             {{ TX.GroupID ? "☀" : "" }}
             {{ getStatusSymbol() }}
             <a @click="edit = true;">✎</a>
-            <input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
+            <Input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
         </td>
     </tr>
     <TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />
diff --git a/web/src/dialogs/EditAccount.vue b/web/src/dialogs/EditAccount.vue
index 26cd884..a883b51 100644
--- a/web/src/dialogs/EditAccount.vue
+++ b/web/src/dialogs/EditAccount.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import Modal from '../components/Modal.vue';
 import { useAccountStore } from '../stores/budget-account';
+import Input from '../components/Input.vue';
 
 const accountStore = useAccountStore();
 const CurrentAccount = computed(() => accountStore.CurrentAccount);
@@ -23,7 +24,7 @@ function openEditAccount(e : any) {
     <Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
         <template v-slot:placeholder>✎</template>
         <div class="mt-2 px-7 py-3">
-            <input
+            <Input
                 class="border-2"
                 type="text"
                 v-model="accountName"
@@ -32,7 +33,7 @@ function openEditAccount(e : any) {
             />
         </div>
         <div class="mt-2 px-7 py-3">
-            <input
+            <Input
                 class="border-2"
                 type="checkbox"
                 v-model="accountOnBudget"
diff --git a/web/src/dialogs/NewBudget.vue b/web/src/dialogs/NewBudget.vue
index 9d23508..86d72d7 100644
--- a/web/src/dialogs/NewBudget.vue
+++ b/web/src/dialogs/NewBudget.vue
@@ -2,6 +2,7 @@
 import Modal from '../components/Modal.vue';
 import { ref } from "vue";
 import { useBudgetsStore } from '../stores/budget';
+import Input from '../components/Input.vue';
 
 const budgetName = ref("");
 function saveBudget() {
@@ -12,7 +13,7 @@ function saveBudget() {
 <template>
   <Modal button-text="New Budget" @submit="saveBudget">
     <div class="mt-2 px-7 py-3">
-      <input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
+      <Input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
     </div>
   </Modal>
 </template>
\ No newline at end of file
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 6e14d9b..339716d 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -8,6 +8,7 @@ import EditAccount from "../dialogs/EditAccount.vue";
 import Button from "../components/Button.vue";
 import { useTransactionsStore } from "../stores/transactions";
 import Modal from "../components/Modal.vue";
+import Input from "../components/Input.vue";
 
 defineProps<{
     budgetid: string
@@ -73,7 +74,7 @@ function createReconcilationTransaction() {
             <Currency :value="transactions.ReconcilingBalance" />your current balance?
             <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
             <br />No, it's:
-            <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
+            <Input class="text-right" type="number" v-model="TargetReconcilingBalance" />
             Difference:
             <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
             <Button
@@ -93,7 +94,7 @@ function createReconcilationTransaction() {
             <td>Memo</td>
             <td class="text-right">Amount</td>
             <td style="width: 80px;">
-                <input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
+                <Input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
             </td>
         </tr>
         <TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />
diff --git a/web/src/pages/Login.vue b/web/src/pages/Login.vue
index 0c7ca26..0914df1 100644
--- a/web/src/pages/Login.vue
+++ b/web/src/pages/Login.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useSessionStore } from "../stores/session";
+import Input from "../components/Input.vue";
 
 const error = ref("");
 const login = ref({ user: "", password: "" });
@@ -28,10 +29,10 @@ function formSubmit(e: MouseEvent) {
 
 <template>
     <div>
-        <input type="text" v-model="login.user"
+        <Input type="text" v-model="login.user"
             placeholder="Username"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <input type="password" v-model="login.password"
+        <Input type="password" v-model="login.password"
             placeholder="Password"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
     </div>
diff --git a/web/src/pages/Register.vue b/web/src/pages/Register.vue
index 42ff644..cc4a1ec 100644
--- a/web/src/pages/Register.vue
+++ b/web/src/pages/Register.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useSessionStore } from "../stores/session";
+import Input from "../components/Input.vue";
 
 const error = ref("");
 const login = ref({ email: "", password: "", name: "" });
@@ -28,13 +29,13 @@ function formSubmit(e: MouseEvent) {
 
 <template>
     <div>
-        <input type="text" v-model="login.name"
+        <Input type="text" v-model="login.name"
             placeholder="Name"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <input type="text" v-model="login.email"
+        <Input type="text" v-model="login.email"
             placeholder="Email"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <input type="password" v-model="login.password"
+        <Input type="password" v-model="login.password"
             placeholder="Password"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
     </div>
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index d63382b..21dab9a 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -7,6 +7,7 @@ import { useSessionStore } from "../stores/session";
 import Card from "../components/Card.vue";
 import Button from "../components/Button.vue";
 import { saveAs } from 'file-saver';
+import Input from "../components/Input.vue";
 
 const transactionsFile = ref<File | undefined>(undefined);
 const assignmentsFile = ref<File | undefined>(undefined);
-- 
2.47.2