jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Extract date to own row on small screens

Browse Source
This commit is contained in:
Jan Bader 2022-03-01 20:11:59 +00:00
parent 7c08ddacb7
commit 67c9b53e91
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/TransactionRow.vue
View File

@ -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>{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}</td>
<td class="hidden md:block">{{ formatDate(TX.Date) }}</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>
<td v-if="Reconciling && TX.Status != 'Reconciled'">
<input type="checkbox" v-model="TX.Reconciled" />
<input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
</td>
</tr>
<TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />