Migrate Account.vue to composition API

web/src/pages/Account.vue

@@ -1,89 +1,90 @@
-<script lang="ts">
-import { mapState } from "pinia";
-import { defineComponent } from "vue"
+<script lang="ts" setup>
+import { ref } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
 import { useAPI } from "../stores/api";
 import { useAccountStore } from "../stores/budget-account";
-import { useSessionStore } from "../stores/session";
 
-export default defineComponent({
-    data() {
-        return {
-            TransactionDate: new Date().toISOString().substring(0, 10),
-            Payee: undefined as Suggestion | undefined,
-            Category: undefined as Suggestion | undefined,
-            Memo: "",
-            Amount: 0
-        }
-    },
-    components: { Autocomplete, Currency, TransactionRow },
-    props: ["budgetid", "accountid"],
-    computed: {
-        ...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]),
-    },
-    methods: {
-        saveTransaction(e : MouseEvent) {
-            e.preventDefault();
-            const api = useAPI();
-            api.POST("/transaction/new", JSON.stringify({
-                    budget_id: this.budgetid,
-                    account_id: this.accountid,
-                    date: this.$data.TransactionDate,
-                    payee: this.$data.Payee,
-                    category: this.$data.Category,
-                    memo: this.$data.Memo,
-                    amount: this.$data.Amount,
-                    state: "Uncleared"
-                }))
-                .then(x => x.json());
-        },
-    }
-})
+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);
+
+function saveTransaction(e: MouseEvent) {
+    e.preventDefault();
+    const api = useAPI();
+    api.POST("/transaction/new", JSON.stringify({
+        budget_id: props.budgetid,
+        account_id: props.accountid,
+        date: TransactionDate,
+        payee: Payee,
+        category: Category,
+        memo: Memo,
+        amount: Amount,
+        state: "Uncleared"
+    }))
+        .then(x => x.json());
+}
+
+const accountStore = useAccountStore();
+const CurrentAccount = accountStore.CurrentAccount;
+const TransactionsList = accountStore.TransactionsList;
 </script>
 
 <template>
-        <h1>{{ CurrentAccount?.Name }}</h1>
-        <p>
-            Current Balance:
-            <Currency :value="CurrentAccount?.Balance" />
-        </p>
-        <table>
-            <tr class="font-bold">
-                <td style="width: 90px;">Date</td>
-                <td style="max-width: 150px;">Payee</td>
-                <td style="max-width: 200px;">Category</td>
-                <td>Memo</td>
-                <td class="text-right">Amount</td>
-                <td style="width: 20px;"></td>
-                <td style="width: 20px;"></td>
-            </tr>
-            <tr>
-                <td style="width: 90px;" class="text-sm">
-                    <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
-                </td>
-                <td style="max-width: 150px;">
-                    <Autocomplete v-model="Payee" type="payees" />
-                </td>
-                <td style="max-width: 200px;">
-                    <Autocomplete v-model="Category" type="categories" />
-                </td>
-                <td>
-                    <input class="block w-full border-b-2 border-black" type="text" v-model="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" />
-                </td>
-                <td style="width: 20px;">
-                    <input type="submit" @click="saveTransaction" value="Save" />
-                </td>
-                <td style="width: 20px;"></td>
-            </tr>
-            <TransactionRow v-for="(transaction, index) in TransactionsList"
-                :transaction="transaction"
-                :index="index" />
-        </table>
+    <h1>{{ CurrentAccount?.Name }}</h1>
+    <p>
+        Current Balance:
+        <Currency :value="CurrentAccount?.Balance" />
+    </p>
+    <table>
+        <tr class="font-bold">
+            <td style="width: 90px;">Date</td>
+            <td style="max-width: 150px;">Payee</td>
+            <td style="max-width: 200px;">Category</td>
+            <td>Memo</td>
+            <td class="text-right">Amount</td>
+            <td style="width: 20px;"></td>
+            <td style="width: 20px;"></td>
+        </tr>
+        <tr>
+            <td style="width: 90px;" class="text-sm">
+                <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
+            </td>
+            <td style="max-width: 150px;">
+                <Autocomplete v-model="Payee" type="payees" />
+            </td>
+            <td style="max-width: 200px;">
+                <Autocomplete v-model="Category" type="categories" />
+            </td>
+            <td>
+                <input class="block w-full border-b-2 border-black" type="text" v-model="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"
+                />
+            </td>
+            <td style="width: 20px;">
+                <input type="submit" @click="saveTransaction" value="Save" />
+            </td>
+            <td style="width: 20px;"></td>
+        </tr>
+        <TransactionRow
+            v-for="(transaction, index) in TransactionsList"
+            :transaction="transaction"
+            :index="index"
+        />
+    </table>
 </template>
 
 <style>