Extract date to own row on small screens

web/src/components/TransactionRow.vue

@@ -5,6 +5,7 @@ import { useTransactionsStore } from "../stores/transactions";
 import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
+import { useAccountStore } from "../stores/budget-account";
 
 const props = defineProps<{
     transactionid: string,
@@ -18,17 +19,43 @@ const Reconciling = computed(() => useTransactionsStore().Reconciling);
 
 const transactionsStore = useTransactionsStore();
 const TX = transactionsStore.Transactions.get(props.transactionid)!;
+
+function dateChanged() {
+    const currentAccount = useAccountStore().CurrentAccount;
+    if (currentAccount == null)
+        return true;
+    const transactionIndex = currentAccount.Transactions.indexOf(props.transactionid);
+    if(transactionIndex<=0)
+        return true;
+
+    const previousTransactionId = currentAccount.Transactions[transactionIndex-1];
+    const previousTransaction = transactionsStore.Transactions.get(previousTransactionId);
+    return TX.Date.getTime() != previousTransaction?.Date.getTime();
+}
+
+function getStatusSymbol() {
+    if(TX.Status == "Reconciled")
+        return "✔";
+
+    if(TX.Status == "Uncleared")
+        return "*";
+
+    return "✘";
+}
 </script>
 
 <template>
+    <tr v-if="dateChanged()" class="table-row md:hidden">
+        <td class="bg-gray-200 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td>
+    </tr>
     <tr
         v-if="!edit"
         class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
-        :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']"
+        :class="[index % 6 < 3 ? 'md:bg-gray-300' : 'md:bg-gray-100']"
     >
         <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
-        <td>{{ formatDate(TX.Date) }}</td>
+        <td class="hidden md:block">{{ formatDate(TX.Date) }}</td>
-        <td>{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}</td>
+        <td class="pl-2 md:pl-0">{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}</td>
         <td>{{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}</td>
         <td>
             <a
@@ -38,13 +65,11 @@ const TX = transactionsStore.Transactions.get(props.transactionid)!;
         <td>
             <Currency class="block" :value="TX.Amount" />
         </td>
-        <td>{{ TX.Status == "Reconciled" ? "✔" : (TX.Status == "Uncleared" ? "" : "*") }}</td>
         <td class="text-right">
             {{ TX.GroupID ? "☀" : "" }}
+            {{ getStatusSymbol() }}
             <a @click="edit = true;">✎</a>
-        </td>
+            <input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
-        <td v-if="Reconciling && TX.Status != 'Reconciled'">
-            <input type="checkbox" v-model="TX.Reconciled" />
         </td>
     </tr>
     <TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />