51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from "vue"
|
|
import Currency from "../components/Currency.vue";
|
|
import TransactionRow from "../components/TransactionRow.vue";
|
|
import TransactionInputRow from "../components/TransactionInputRow.vue";
|
|
import { useAccountStore } from "../stores/budget-account";
|
|
|
|
const props = defineProps<{
|
|
budgetid: string
|
|
accountid: string
|
|
}>()
|
|
|
|
const accountStore = useAccountStore();
|
|
const CurrentAccount = computed(() => accountStore.CurrentAccount);
|
|
const TransactionsList = computed(() => accountStore.TransactionsList);
|
|
</script>
|
|
|
|
<template>
|
|
<h1>{{ CurrentAccount?.Name }}</h1>
|
|
<p>
|
|
Current Balance:
|
|
<Currency :value="CurrentAccount?.Balance" />
|
|
</p>
|
|
<table>
|
|
<tr class="font-bold">
|
|
<td style="width: 90px;">Date</td>
|
|
<td style="max-width: 150px;">Payee</td>
|
|
<td style="max-width: 200px;">Category</td>
|
|
<td>Memo</td>
|
|
<td class="text-right">Amount</td>
|
|
<td style="width: 20px;"></td>
|
|
<td style="width: 20px;"></td>
|
|
</tr>
|
|
<TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
|
|
<TransactionRow
|
|
v-for="(transaction, index) in TransactionsList"
|
|
:transaction="transaction"
|
|
:index="index"
|
|
/>
|
|
</table>
|
|
</template>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.negative {
|
|
color: red;
|
|
}
|
|
</style> |