97 lines
3.0 KiB
Vue
97 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from "vue"
|
|
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
|
|
import Currency from "../components/Currency.vue";
|
|
import TransactionRow from "../components/TransactionRow.vue";
|
|
import { POST } from "../api";
|
|
import { useAccountStore } from "../stores/budget-account";
|
|
|
|
const props = defineProps<{
|
|
budgetid: string
|
|
accountid: string
|
|
}>()
|
|
|
|
const TransactionDate = ref(new Date().toISOString().substring(0, 10));
|
|
const Payee = ref<Suggestion | undefined>(undefined);
|
|
const Category = ref<Suggestion | undefined>(undefined);
|
|
const Memo = ref("");
|
|
const Amount = ref(0);
|
|
|
|
function saveTransaction(e: MouseEvent) {
|
|
e.preventDefault();
|
|
POST("/transaction/new", JSON.stringify({
|
|
budget_id: props.budgetid,
|
|
account_id: props.accountid,
|
|
date: TransactionDate.value,
|
|
payee: Payee.value,
|
|
category: Category.value,
|
|
memo: Memo.value,
|
|
amount: Amount,
|
|
state: "Uncleared"
|
|
}))
|
|
.then(x => x.json());
|
|
}
|
|
|
|
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>
|
|
<tr>
|
|
<td style="width: 90px;" class="text-sm">
|
|
<input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
|
|
</td>
|
|
<td style="max-width: 150px;">
|
|
<Autocomplete v-model="Payee" type="payees" />
|
|
</td>
|
|
<td style="max-width: 200px;">
|
|
<Autocomplete v-model="Category" type="categories" />
|
|
</td>
|
|
<td>
|
|
<input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
|
|
</td>
|
|
<td style="width: 80px;" class="text-right">
|
|
<input
|
|
class="text-right block w-full border-b-2 border-black"
|
|
type="currency"
|
|
v-model="Amount"
|
|
/>
|
|
</td>
|
|
<td style="width: 20px;">
|
|
<input type="submit" @click="saveTransaction" value="Save" />
|
|
</td>
|
|
<td style="width: 20px;"></td>
|
|
</tr>
|
|
<TransactionRow
|
|
v-for="(transaction, index) in TransactionsList"
|
|
:transaction="transaction"
|
|
:index="index"
|
|
/>
|
|
</table>
|
|
</template>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.negative {
|
|
color: red;
|
|
}
|
|
</style> |