Replace modelValue by models for id and name

web/src/components/Autocomplete.vue

@@ -8,21 +8,15 @@ export interface Suggestion {
     Name: string
 }
 
-interface Data {
-    Selected: Suggestion | undefined
-    SearchQuery: String
-    Suggestions: Suggestion[]
-}
-
 const props = defineProps<{
-    modelValue: Suggestion | undefined,
+    text: String,
+    id: String | undefined,
     type: String
 }>();
 
-const Selected = ref<Suggestion | undefined>(props.modelValue || undefined);
+const SearchQuery = ref(props.text || "");
-const SearchQuery = ref(props.modelValue?.Name || "");
 const Suggestions = ref<Array<Suggestion>>([]);
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:id", "update:text"]);
 watch(SearchQuery, () => {
     load(SearchQuery.value);
 });
@@ -30,7 +24,8 @@ function saveTransaction(e: MouseEvent) {
     e.preventDefault();
 };
 function load(text: String) {
-    emit('update:modelValue', { ID: null, Name: text });
+    emit('update:id', null);
+    emit('update:text', text);
     if (text == "") {
         Suggestions.value = [];
         return;
@@ -56,13 +51,12 @@ function keypress(e: KeyboardEvent) {
         const currentIndex = inputElements.indexOf(el);
         const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
         (<HTMLInputElement>nextElement).focus();
-
     }
 };
 function selectElement(element: Suggestion) {
-    Selected.value = element;
+    emit('update:id', element.ID);
+    emit('update:text', element.Name);
     Suggestions.value = [];
-    emit('update:modelValue', element);
 };
 function select(e: MouseEvent) {
     const target = (<HTMLInputElement>e.target);
@@ -74,8 +68,8 @@ function select(e: MouseEvent) {
     selectElement(selected);
 };
 function clear() {
-    Selected.value = undefined;
+    emit('update:id', null);
-    emit('update:modelValue', { ID: null, Name: SearchQuery.value });
+    emit('update:text', SearchQuery.value);
 };
 </script>
 
@@ -84,10 +78,10 @@ function clear() {
         <input
             class="border-b-2 border-black"
             @keypress="keypress"
-            v-if="Selected == undefined"
+            v-if="id == undefined"
             v-model="SearchQuery"
         />
-        <span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{ Selected.Name }}</span>
+        <span @click="clear" v-if="id != undefined" class="bg-gray-300">{{ text }}</span>
         <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
             <span
                 v-for="suggestion in Suggestions"

web/src/components/TransactionEditRow.vue

@@ -1,54 +1,49 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
-import Autocomplete, { Suggestion } from './Autocomplete.vue'
+import Autocomplete from './Autocomplete.vue'
-import { Transaction, useAccountStore } from '../stores/budget-account'
+import { useAccountStore } from '../stores/budget-account'
 
 const props = defineProps<{
-    transaction: Transaction
+    transactionid: string
 }>()
 
-const TransactionDate = ref(props.transaction.Date.substring(0, 10));
+const accountStore = useAccountStore();
-const Payee = ref<Suggestion | undefined>({ID: "", Name: props.transaction.Payee});
+const Transaction = accountStore.Transactions.get(props.transactionid)!;
-const Category = ref<Suggestion | undefined>({ID: "", Name: props.transaction.Category});
-const Memo = ref(props.transaction.Memo);
-const Amount = ref(props.transaction.Amount);
 
 const payload = computed(() => JSON.stringify({
-    date: TransactionDate.value,
+    date: Transaction.Date,
-    payee: Payee.value,
+    payee: Transaction.Payee,
-    category: Category.value,
+    category: Transaction.Category,
-    memo: Memo.value,
+    memo: Transaction.Memo,
-    amount: Amount.value,
+    amount: Transaction.Amount,
     state: "Uncleared"
 }));
 
-const accountStore = useAccountStore();
 function saveTransaction(e: MouseEvent) {
     e.preventDefault();
-    console.log(props.transaction);
+    accountStore.saveTransaction(payload.value);
-    //accountStore.saveTransaction(payload.value);
 }
 </script>
 
 <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="Transaction.Date" />
         </td>
         <td style="max-width: 150px;">
-            <Autocomplete v-model="Payee" type="payees" />
+            <Autocomplete v-model:text="Transaction.Payee" v-model:id="Transaction.PayeeID" type="payees" />
         </td>
         <td style="max-width: 200px;">
-            <Autocomplete v-model="Category" type="categories" />
+            <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="Memo" />
+            <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="Amount"
+                v-model="Transaction.Amount"
             />
         </td>
         <td style="width: 20px;">

web/src/components/TransactionRow.vue

@@ -37,7 +37,7 @@ const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
         </td>
         <td class="text-right">{{ transaction.GroupID ? "☀" : "" }}<a @click="edit = true;">✎</a></td>
     </tr>
-    <TransactionEditRow v-if="edit" :transaction="transaction" />
+    <TransactionEditRow v-if="edit" :transactionid="transaction.ID" />
 </template>
 
 <style>

web/src/stores/budget-account.ts

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