Add Transaction to list after saving

server/transaction.go

@@ -68,8 +68,11 @@ func (h *Handler) newTransaction(c *gin.Context) {
 		CategoryID: payload.Category.ID,
 		Status:     postgres.TransactionStatus(payload.State),
 	}
-	_, err = h.Service.CreateTransaction(c.Request.Context(), newTransaction)
+	transaction, err := h.Service.CreateTransaction(c.Request.Context(), newTransaction)
 	if err != nil {
 		c.AbortWithError(http.StatusInternalServerError, fmt.Errorf("create transaction: %w", err))
+		return
 	}
+
+	c.JSON(http.StatusOK, transaction)
 }

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>
 

web/src/pages/Account.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue"
-import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
 import TransactionInputRow from "../components/TransactionInputRow.vue";

web/src/stores/budget-account.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia"
-import { GET } from "../api";
+import { GET, POST } from "../api";
 import { useSessionStore } from "./session";
 
 interface State {
@@ -7,7 +7,7 @@ interface State {
     CurrentAccountID: string | null,
     Categories: Map<string, Category>,
     Months: Map<number, Map<number, Map<string, Category>>>,
-    Transactions: [],
+    Transactions: any[],
     Assignments: []
 }
 
@@ -16,7 +16,7 @@ export interface Transaction {
     Date: string,
     TransferAccount: string,
     CategoryGroup: string,
-    Category:string,
+    Category: string,
     Memo: string,
     Status: string,
     GroupID: string,
@@ -69,13 +69,13 @@ export const useAccountStore = defineStore("budget/account", {
         OnBudgetAccounts(state) {
             return [...state.Accounts.values()].filter(x => x.OnBudget);
         },
-        OnBudgetAccountsBalance(state) : number {
+        OnBudgetAccountsBalance(state): number {
             return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
         },
         OffBudgetAccounts(state) {
             return [...state.Accounts.values()].filter(x => !x.OnBudget);
         },
-        OffBudgetAccountsBalance(state) : number {
+        OffBudgetAccountsBalance(state): number {
             return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
         },
         TransactionsList(state) {
@@ -119,6 +119,11 @@ export const useAccountStore = defineStore("budget/account", {
         logout() {
             this.$reset()
         },
+        async saveTransaction(payload: string) {
+            const result = await POST("/transaction/new", payload);
+            const response = await result.json();
+            this.Transactions.unshift(response);
+        }
     }
 
 })