Add Transaction to list after saving

web/src/components/TransactionInputRow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ref } from "vue";
-import { POST } from "../api";
+import { computed, ref } from "vue";
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
+import { useAccountStore } from '../stores/budget-account'
 
 const props = defineProps<{
     budgetid: string
@@ -12,21 +12,23 @@ 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("");
+const Amount = ref("0");
 
+const payload = computed(() => JSON.stringify({
+    budget_id: props.budgetid,
+    account_id: props.accountid,
+    date: TransactionDate.value,
+    payee: Payee.value,
+    category: Category.value,
+    memo: Memo.value,
+    amount: Amount.value,
+    state: "Uncleared"
+}));
+
+const accountStore = useAccountStore();
 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.value,
-        state: "Uncleared"
-    }))
-        .then(x => x.json());
+    accountStore.saveTransaction(payload.value);
 }
 </script>