97 lines
3.0 KiB
Vue
97 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from "vue";
|
|
import { useBudgetsStore } from "../stores/budget";
|
|
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";
|
|
import Input from "./Input.vue";
|
|
import Checkbox from "./Checkbox.vue";
|
|
|
|
const props = defineProps<{
|
|
transactionid: string,
|
|
index: number,
|
|
}>();
|
|
|
|
const edit = ref(false);
|
|
|
|
const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID);
|
|
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 dark:bg-gray-800 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 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']">
|
|
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
|
|
<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
|
|
:href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
|
|
>{{ TX.Memo }}</a
|
|
>
|
|
</td>
|
|
<td>
|
|
<Currency class="block" :value="TX.Amount" />
|
|
</td>
|
|
<td class="text-right">
|
|
{{ TX.GroupID ? "☀" : "" }}
|
|
{{ getStatusSymbol() }}
|
|
<a @click="edit = true;">✎</a>
|
|
<Checkbox
|
|
v-if="Reconciling && TX.Status != 'Reconciled'"
|
|
v-model="TX.Reconciled" />
|
|
</td>
|
|
</tr>
|
|
<TransactionEditRow
|
|
v-if="edit"
|
|
:transactionid="TX.ID"
|
|
@save="edit = false" />
|
|
</template>
|
|
|
|
<style>
|
|
td {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|