Merge pull request 'design-improvements' (#5) from design-improvements into master

Reviewed-on: #5

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>

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) {
@@ -45,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" />
@@ -58,36 +68,17 @@ export default defineComponent({
                 <td>
                     <input type="text" v-model="Memo" />
                 </td>
-                <td style="width: 80px;">
+                <td style="width: 80px;" class="text-right">
-                    <input type="currency" v-model="Amount" />
+                    <input class="text-right" type="currency" v-model="Amount" />
                 </td>
                 <td style="width: 20px;">
                     <input type="submit" @click="saveTransaction" value="Save" />
                 </td>
                 <td style="width: 20px;"></td>
             </tr>
-            <tr v-for="(transaction, index) in $store.getters.Transactions"
+            <TransactionRow v-for="(transaction, index) in $store.getters.Transactions"
-                class="{{transaction.Date.After now ? 'future' : ''}}"
+                :transaction="transaction"
-                :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
+                :index="index" />
-                <!--: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>
         </table>
 </template>
 
@@ -96,10 +87,6 @@ table {
     width: 100%;
     table-layout: fixed;
 }
-td {
-    overflow: hidden;
-    white-space: nowrap;
-}
 .negative {
     color: red;
 }