Update TransactionInputRow to new models

web/src/components/TransactionInputRow.vue

@@ -1,27 +1,42 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
-import { useAccountStore } from '../stores/budget-account'
+import { Transaction, 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");
+const TX = ref<Transaction>({
+    Date: new Date().toISOString().substring(0, 10),
+    Memo: "",
+    Amount: 0,
+    Payee: "",
+    PayeeID: undefined,
+    Category: "",
+    CategoryID: undefined,
+    CategoryGroup: "",
+    GroupID: "",
+    ID: "",
+    Status: "Uncleared",
+    TransferAccount: "",
+});
 
 const payload = computed(() => JSON.stringify({
     budgetId: props.budgetid,
     accountId: props.accountid,
-    date: TransactionDate.value,
-    payee: Payee.value,
-    category: Category.value,
-    memo: Memo.value,
-    amount: Amount.value,
+    date: TX.value.Date,
+    payee: {
+        Name: TX.value.Payee,
+        ID: TX.value.PayeeID,
+    },
+    category: {
+        Name: TX.value.Category,
+        ID: TX.value.CategoryID,
+    },
+    memo: TX.value.Memo,
+    amount: TX.value.Amount,
     state: "Uncleared"
 }));
 
@@ -35,22 +50,22 @@ function saveTransaction(e: MouseEvent) {
 <template>
     <tr>
         <td style="width: 90px;" class="text-sm">
-            <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
+            <input class="border-b-2 border-black" type="date" v-model="TX.Date" />
         </td>
         <td style="max-width: 150px;">
-            <Autocomplete v-model="Payee" type="payees" />
+            <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" type="payees" />
         </td>
         <td style="max-width: 200px;">
-            <Autocomplete v-model="Category" type="categories" />
+            <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" type="categories" />
         </td>
         <td>
-            <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
+            <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="Amount"
+                v-model="TX.Amount"
             />
         </td>
         <td style="width: 20px;">

web/src/stores/budget-account.ts

@@ -18,12 +18,12 @@ export interface Transaction {
     TransferAccount: string,
     CategoryGroup: string,
     Category: string,
-    CategoryID: string,
+    CategoryID: string | undefined,
     Memo: string,
     Status: string,
     GroupID: string,
     Payee: string,
-    PayeeID: string,
+    PayeeID: string | undefined,
     Amount: number,
 }