77 lines
2.2 KiB
Vue
77 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from "vue";
|
|
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
|
|
import { Transaction, useAccountStore } from '../stores/budget-account'
|
|
import DateInput from "./DateInput.vue";
|
|
|
|
const props = defineProps<{
|
|
budgetid: string
|
|
accountid: string
|
|
}>()
|
|
|
|
const TX = ref<Transaction>({
|
|
Date: new Date(),
|
|
Memo: "",
|
|
Amount: 0,
|
|
Payee: "",
|
|
PayeeID: undefined,
|
|
Category: "",
|
|
CategoryID: undefined,
|
|
CategoryGroup: "",
|
|
GroupID: "",
|
|
ID: "",
|
|
Status: "Uncleared",
|
|
TransferAccount: "",
|
|
});
|
|
|
|
const payeeType = ref<string|undefined>(undefined);
|
|
|
|
const payload = computed(() => JSON.stringify({
|
|
budgetId: props.budgetid,
|
|
accountId: props.accountid,
|
|
date: TX.value.Date.toISOString().split("T")[0],
|
|
payee: {
|
|
Name: TX.value.Payee,
|
|
ID: TX.value.PayeeID,
|
|
Type: payeeType.value,
|
|
},
|
|
categoryId: TX.value.CategoryID,
|
|
memo: TX.value.Memo,
|
|
amount: TX.value.Amount.toString(),
|
|
state: "Uncleared"
|
|
}));
|
|
|
|
const accountStore = useAccountStore();
|
|
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="TX.Date" />
|
|
</td>
|
|
<td style="max-width: 150px;">
|
|
<Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
|
|
</td>
|
|
<td style="max-width: 200px;">
|
|
<Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
|
|
</td>
|
|
<td>
|
|
<input class="block w-full border-b-2 border-black" type="text" v-model="TX.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="TX.Amount"
|
|
/>
|
|
</td>
|
|
<td style="width: 20px;">
|
|
<input type="submit" @click="saveTransaction" value="Save" />
|
|
</td>
|
|
<td style="width: 20px;"></td>
|
|
</tr>
|
|
</template> |