86 lines
2.5 KiB
Vue
86 lines
2.5 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";
|
|
import Modal from "../components/Modal.vue";
|
|
|
|
const props = defineProps<{
|
|
budgetid: string
|
|
accountid: string
|
|
}>()
|
|
|
|
const accountStore = useAccountStore();
|
|
const CurrentAccount = computed(() => accountStore.CurrentAccount);
|
|
const TransactionsList = computed(() => accountStore.TransactionsList);
|
|
|
|
const accountName = ref("");
|
|
const accountOnBudget = ref(true);
|
|
|
|
function editAccount(e : any) {
|
|
accountStore.EditAccount(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value);
|
|
}
|
|
|
|
function openEditAccount(e : any) {
|
|
accountName.value = CurrentAccount.value?.Name ?? "";
|
|
accountOnBudget.value = CurrentAccount.value?.OnBudget ?? true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="inline">{{ CurrentAccount?.Name }}</h1>
|
|
<Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
|
|
<template v-slot:placeholder>✎</template>
|
|
<div class="mt-2 px-7 py-3">
|
|
<input
|
|
class="border-2"
|
|
type="text"
|
|
v-model="accountName"
|
|
placeholder="Account name"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mt-2 px-7 py-3">
|
|
<input
|
|
class="border-2"
|
|
type="checkbox"
|
|
v-model="accountOnBudget"
|
|
required
|
|
/>
|
|
<label>On Budget</label>
|
|
</div>
|
|
</Modal>
|
|
|
|
<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> |