44 lines
1.6 KiB
Vue
44 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import { useBudgetsStore } from "../stores/budget";
|
|
import { Transaction } from "../stores/budget-account";
|
|
import Currency from "./Currency.vue";
|
|
|
|
const props = defineProps<{
|
|
transaction: Transaction,
|
|
index: number,
|
|
}>();
|
|
|
|
const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
|
|
</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/' + 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> |