58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import Autocomplete from './Autocomplete.vue'
|
|
import { useAccountStore } from '../stores/budget-account'
|
|
import DateInput from "./DateInput.vue";
|
|
|
|
const props = defineProps<{
|
|
transactionid: string
|
|
}>()
|
|
|
|
const accountStore = useAccountStore();
|
|
const Transaction = accountStore.Transactions.get(props.transactionid)!;
|
|
|
|
const payload = computed(() => JSON.stringify({
|
|
date: Transaction.Date,
|
|
payee: {
|
|
Name: Transaction.Payee,
|
|
ID: Transaction.PayeeID,
|
|
},
|
|
categoryId: Transaction.CategoryID,
|
|
memo: Transaction.Memo,
|
|
amount: Transaction.Amount,
|
|
state: "Uncleared"
|
|
}));
|
|
|
|
function saveTransaction(e: MouseEvent) {
|
|
e.preventDefault();
|
|
accountStore.saveTransaction(payload.value);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<tr>
|
|
<td style="width: 90px;" class="text-sm">
|
|
<DateInput class="border-b-2 border-black" v-model="Transaction.Date" />
|
|
</td>
|
|
<td style="max-width: 150px;">
|
|
<Autocomplete v-model:text="Transaction.Payee" v-model:id="Transaction.PayeeID" type="payees" />
|
|
</td>
|
|
<td style="max-width: 200px;">
|
|
<Autocomplete v-model:text="Transaction.Category" v-model:id="Transaction.CategoryID" type="categories" />
|
|
</td>
|
|
<td>
|
|
<input class="block w-full border-b-2 border-black" type="text" v-model="Transaction.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="Transaction.Amount"
|
|
/>
|
|
</td>
|
|
<td style="width: 20px;">
|
|
<input type="submit" @click="saveTransaction" value="Save" />
|
|
</td>
|
|
<td style="width: 20px;"></td>
|
|
</tr>
|
|
</template> |