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 1/3] 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;
 }

From 07cd7a7c2bba3e38282b108b30efabc6f8858ec2 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 08:05:58 +0000
Subject: [PATCH 2/3] Add table Header

---
 web/src/pages/Account.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index e1bd3d8..f9d702f 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -46,6 +46,15 @@ export default defineComponent({
             <Currency :value="$store.getters.CurrentAccount.Balance" />
         </p>
         <table>
+            <tr class="font-bold">
+                <td style="width: 90px;">Date</td>
+                <td style="max-width: 150px;">Payee</td>
+                <td style="max-width: 200px;">Category</td>
+                <td>Memo</td>
+                <td class="text-right">Amount</td>
+                <td style="width: 20px;"></td>
+                <td style="width: 20px;"></td>
+            </tr>
             <tr>
                 <td style="width: 90px;" class="text-sm">
                     <input type="date" v-model="TransactionDate" />

From 227c2a756462943fd316f43d1c09cb285227f9a6 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 21:55:32 +0000
Subject: [PATCH 3/3] Align amount input right

---
 web/src/pages/Account.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index f9d702f..ca8e2aa 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -68,8 +68,8 @@ export default defineComponent({
                 <td>
                     <input type="text" v-model="Memo" />
                 </td>
-                <td style="width: 80px;">
-                    <input type="currency" v-model="Amount" />
+                <td style="width: 80px;" class="text-right">
+                    <input class="text-right" type="currency" v-model="Amount" />
                 </td>
                 <td style="width: 20px;">
                     <input type="submit" @click="saveTransaction" value="Save" />