From f56d09501613388ac616f70a01bf49cb5731a9f8 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 22 Apr 2022 20:57:41 +0000
Subject: [PATCH] Reintroduce alternating row-colors by date

---
 web/src/components/TransactionRow.vue | 1 +
 web/src/pages/Account.vue             | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
index e3a56e4..3b34168 100644
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@@ -36,6 +36,7 @@ function getStatusSymbol() {
   <tr
     v-if="!edit"
     class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
+    :class="[index % 2 < 1 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
   >
     <td class="hidden md:block">
       {{ formatDate(TX.Date) }}
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index c5f070f..ab67e29 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -145,11 +145,11 @@ function createReconcilationTransaction() {
       :budgetid="budgetid"
       :accountid="accountid"
     />
-    <template v-for="(dayTransactions, index) in transactions.TransactionsByDate">
+    <template v-for="(dayTransactions, key, index) in transactions.TransactionsByDate">
       <tr class="table-row md:hidden">
         <td class="py-2" colspan="5">
           <span class="bg-gray-400 dark:bg-slate-600 rounded-lg p-1 px-2 w-full block">
-            {{ index }}
+            {{ key }}
           </span>
         </td>
       </tr>
@@ -157,6 +157,7 @@ function createReconcilationTransaction() {
         v-for="transaction in dayTransactions"
         :key="transaction.ID"
         :transactionid="transaction.ID"
+        :index="index"
       />
     </template>
   </table>