Migrate Account.vue to composition API

web/src/pages/Account.vue

@@ -1,46 +1,41 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { mapState } from "pinia";
+import { ref } from "vue"
-import { defineComponent } 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({
+const props = defineProps<{
-    data() {
+  budgetid: string
-        return {
+  accountid: string
-            TransactionDate: new Date().toISOString().substring(0, 10),
+}>()
-            Payee: undefined as Suggestion | undefined,
+
-            Category: undefined as Suggestion | undefined,
+const TransactionDate = ref(new Date().toISOString().substring(0, 10));
-            Memo: "",
+const Payee = ref<Suggestion | undefined>(undefined);
-            Amount: 0
+const Category = ref<Suggestion | undefined>(undefined);
-        }
+const Memo = ref("");
-    },
+const Amount = ref(0);
-    components: { Autocomplete, Currency, TransactionRow },
+
-    props: ["budgetid", "accountid"],
+function saveTransaction(e: MouseEvent) {
-    computed: {
-        ...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]),
-    },
-    methods: {
-        saveTransaction(e : MouseEvent) {
     e.preventDefault();
     const api = useAPI();
     api.POST("/transaction/new", JSON.stringify({
-                    budget_id: this.budgetid,
+        budget_id: props.budgetid,
-                    account_id: this.accountid,
+        account_id: props.accountid,
-                    date: this.$data.TransactionDate,
+        date: TransactionDate,
-                    payee: this.$data.Payee,
+        payee: Payee,
-                    category: this.$data.Category,
+        category: Category,
-                    memo: this.$data.Memo,
+        memo: Memo,
-                    amount: this.$data.Amount,
+        amount: Amount,
         state: "Uncleared"
     }))
         .then(x => x.json());
-        },
 }
-})
+
+const accountStore = useAccountStore();
+const CurrentAccount = accountStore.CurrentAccount;
+const TransactionsList = accountStore.TransactionsList;
 </script>
 
 <template>
@@ -73,16 +68,22 @@ export default defineComponent({
                 <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" />
+                <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"
+        <TransactionRow
+            v-for="(transaction, index) in TransactionsList"
             :transaction="transaction"
-                :index="index" />
+            :index="index"
+        />
     </table>
 </template>