From bd1e1cbfb88df6d5d120cf4bec18ef85cb5235e0 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 08:05:48 +0000
Subject: [PATCH] Move Transaction row to own component

---
 web/src/components/TransactionRow.vue | 40 +++++++++++++++++++++++++++
 web/src/pages/Account.vue             | 32 ++++-----------------
 2 files changed, 45 insertions(+), 27 deletions(-)
 create mode 100644 web/src/components/TransactionRow.vue

diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
new file mode 100644
index 0000000..0c102d4
--- /dev/null
+++ b/web/src/components/TransactionRow.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import Currency from "./Currency.vue";
+
+export default defineComponent({
+    props: [ "transaction", "index" ],
+    components: { Currency }
+})
+</script>
+
+<template>
+    <tr class="{{transaction.Date.After now ? 'future' : ''}}"
+        :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
+        <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
+        <td style="width: 90px;">{{ transaction.Date.substring(0, 10) }}</td>
+        <td style="max-width: 150px;">{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
+        <td style="max-width: 200px;">
+            {{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}
+        </td>
+        <td>
+            <a :href="'/budget/' + $store.getters.CurrentBudgetID + '/transaction/' + transaction.ID">
+                {{ transaction.Memo }}
+            </a>
+        </td>
+        <td>
+            <Currency class="block" :value="transaction.Amount" />
+        </td>
+        <td style="width: 20px;">
+            {{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}
+        </td>
+        <td style="width: 20px;">{{ transaction.GroupID ? "☀" : "" }}</td>
+    </tr>
+</template>
+
+<style>
+td {
+    overflow: hidden;
+    white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index ff74f8f..e1bd3d8 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -2,6 +2,7 @@
 import { defineComponent } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
+import TransactionRow from "../components/TransactionRow.vue";
 
 export default defineComponent({
     data() {
@@ -13,7 +14,7 @@ export default defineComponent({
             Amount: 0
         }
     },
-    components: { Autocomplete, Currency },
+    components: { Autocomplete, Currency, TransactionRow },
     props: ["budgetid", "accountid"],
     methods: {
         saveTransaction(e : MouseEvent) {
@@ -66,28 +67,9 @@ export default defineComponent({
                 </td>
                 <td style="width: 20px;"></td>
             </tr>
-            <tr v-for="(transaction, index) in $store.getters.Transactions"
-                class="{{transaction.Date.After now ? 'future' : ''}}"
-                :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
-                <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
-                <td style="width: 90px;">{{ transaction.Date.substring(0, 10) }}</td>
-                <td style="max-width: 150px;">{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
-                <td
-                    style="max-width: 200px;"
-                >{{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}</td>
-                <td>
-                    <a
-                        :href="'/budget/' + $store.getters.CurrentBudgetID + '/transaction/' + transaction.ID"
-                    >{{ transaction.Memo }}</a>
-                </td>
-                <td>
-                    <Currency class="block" :value="transaction.Amount" />
-                </td>
-                <td
-                    style="width: 20px;"
-                >{{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}</td>
-                <td style="width: 20px;">{{ transaction.GroupID ? "☀" : "" }}</td>
-            </tr>
+            <TransactionRow v-for="(transaction, index) in $store.getters.Transactions"
+                :transaction="transaction"
+                :index="index" />
         </table>
 </template>
 
@@ -96,10 +78,6 @@ table {
     width: 100%;
     table-layout: fixed;
 }
-td {
-    overflow: hidden;
-    white-space: nowrap;
-}
 .negative {
     color: red;
 }