From b3ff5cf055293f2621b2355f3ac131f166fdf36a Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 15 Feb 2022 09:02:14 +0000
Subject: [PATCH] Extract component for new Transaction

---
 web/src/components/TransactionInputRow.vue | 59 ++++++++++++++++++++++
 web/src/pages/Account.vue                  | 49 +-----------------
 2 files changed, 61 insertions(+), 47 deletions(-)
 create mode 100644 web/src/components/TransactionInputRow.vue

diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
new file mode 100644
index 0000000..1724dc3
--- /dev/null
+++ b/web/src/components/TransactionInputRow.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { POST } from "../api";
+import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
+
+const props = defineProps<{
+    budgetid: string
+    accountid: string
+}>()
+
+const TransactionDate = ref(new Date().toISOString().substring(0, 10));
+const Payee = ref<Suggestion | undefined>(undefined);
+const Category = ref<Suggestion | undefined>(undefined);
+const Memo = ref("");
+const Amount = ref("");
+
+function saveTransaction(e: MouseEvent) {
+    e.preventDefault();
+    POST("/transaction/new", JSON.stringify({
+        budget_id: props.budgetid,
+        account_id: props.accountid,
+        date: TransactionDate.value,
+        payee: Payee.value,
+        category: Category.value,
+        memo: Memo.value,
+        amount: Amount.value,
+        state: "Uncleared"
+    }))
+        .then(x => x.json());
+}
+</script>
+
+<template>
+    <tr>
+        <td style="width: 90px;" class="text-sm">
+            <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
+        </td>
+        <td style="max-width: 150px;">
+            <Autocomplete v-model="Payee" type="payees" />
+        </td>
+        <td style="max-width: 200px;">
+            <Autocomplete v-model="Category" type="categories" />
+        </td>
+        <td>
+            <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
+        </td>
+        <td style="width: 80px;" class="text-right">
+            <input
+                class="text-right block w-full border-b-2 border-black"
+                type="currency"
+                v-model="Amount"
+            />
+        </td>
+        <td style="width: 20px;">
+            <input type="submit" @click="saveTransaction" value="Save" />
+        </td>
+        <td style="width: 20px;"></td>
+    </tr>
+</template>
\ No newline at end of file
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index dcc7905..d38b6b1 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -3,7 +3,7 @@ import { computed, ref } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
-import { POST } from "../api";
+import TransactionInputRow from "../components/TransactionInputRow.vue";
 import { useAccountStore } from "../stores/budget-account";
 
 const props = defineProps<{
@@ -11,27 +11,6 @@ const props = defineProps<{
   accountid: string
 }>()
 
-const TransactionDate = ref(new Date().toISOString().substring(0, 10));
-const Payee = ref<Suggestion | undefined>(undefined);
-const Category = ref<Suggestion | undefined>(undefined);
-const Memo = ref("");
-const Amount = ref(0);
-
-function saveTransaction(e: MouseEvent) {
-    e.preventDefault();
-    POST("/transaction/new", JSON.stringify({
-        budget_id: props.budgetid,
-        account_id: props.accountid,
-        date: TransactionDate.value,
-        payee: Payee.value,
-        category: Category.value,
-        memo: Memo.value,
-        amount: Amount,
-        state: "Uncleared"
-    }))
-        .then(x => x.json());
-}
-
 const accountStore = useAccountStore();
 const CurrentAccount = computed(() => accountStore.CurrentAccount);
 const TransactionsList = computed(() => accountStore.TransactionsList);
@@ -53,31 +32,7 @@ const TransactionsList = computed(() => accountStore.TransactionsList);
             <td style="width: 20px;"></td>
             <td style="width: 20px;"></td>
         </tr>
-        <tr>
-            <td style="width: 90px;" class="text-sm">
-                <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
-            </td>
-            <td style="max-width: 150px;">
-                <Autocomplete v-model="Payee" type="payees" />
-            </td>
-            <td style="max-width: 200px;">
-                <Autocomplete v-model="Category" type="categories" />
-            </td>
-            <td>
-                <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
-            </td>
-            <td style="width: 80px;" class="text-right">
-                <input
-                    class="text-right block w-full border-b-2 border-black"
-                    type="currency"
-                    v-model="Amount"
-                />
-            </td>
-            <td style="width: 20px;">
-                <input type="submit" @click="saveTransaction" value="Save" />
-            </td>
-            <td style="width: 20px;"></td>
-        </tr>
+        <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow
             v-for="(transaction, index) in TransactionsList"
             :transaction="transaction"