Implement EditAccount in Frontend

web/src/pages/Account.vue

@@ -4,19 +4,54 @@ import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
 import TransactionInputRow from "../components/TransactionInputRow.vue";
 import { useAccountStore } from "../stores/budget-account";
+import Modal from "../components/Modal.vue";
 
 const props = defineProps<{
-  budgetid: string
-  accountid: string
+    budgetid: string
+    accountid: string
 }>()
 
 const accountStore = useAccountStore();
 const CurrentAccount = computed(() => accountStore.CurrentAccount);
 const TransactionsList = computed(() => accountStore.TransactionsList);
+
+const accountName = ref("");
+const accountOnBudget = ref(true);
+
+function editAccount(e : any) {
+    accountStore.EditAccount(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value);
+}
+
+function openEditAccount(e : any) {
+    accountName.value = CurrentAccount.value?.Name ?? "";
+    accountOnBudget.value = CurrentAccount.value?.OnBudget ?? true;
+}
 </script>
 
 <template>
-    <h1>{{ CurrentAccount?.Name }}</h1>
+    <h1 class="inline">{{ CurrentAccount?.Name }}</h1>
+    <Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
+        <template v-slot:placeholder>✎</template>
+        <div class="mt-2 px-7 py-3">
+            <input
+                class="border-2"
+                type="text"
+                v-model="accountName"
+                placeholder="Account name"
+                required
+            />
+        </div>
+        <div class="mt-2 px-7 py-3">
+            <input
+                class="border-2"
+                type="checkbox"
+                v-model="accountOnBudget"
+                required
+            />
+            <label>On Budget</label>
+        </div>
+    </Modal>
+
     <p>
         Current Balance:
         <Currency :value="CurrentAccount?.Balance" />