Move Transaction row to own component

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>