Implement EditAccount in Frontend

web/src/components/Modal.vue

@@ -7,7 +7,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'submit'): void
+    (e: 'submit'): void,
+    (e: 'open'): void,
 }>();
 
 const visible = ref(false);
@@ -15,6 +16,7 @@ function closeDialog() {
     visible.value = false;
 };
 function openDialog() {
+    emit("open");
     visible.value = true;
 };
 function submitDialog() {
@@ -24,10 +26,14 @@ function submitDialog() {
 </script>
 
 <template>
-    <Card>
-        <p class="w-24 text-center text-6xl">+</p>
-        <button class="text-lg" dark @click="openDialog">{{ buttonText }}</button>
-    </Card>
+    <button @click="openDialog">
+        <slot name="placeholder">
+            <Card>
+                <p class="w-24 text-center text-6xl">+</p>
+                <span class="text-lg" dark>{{ buttonText }}</span>
+            </Card>
+        </slot>
+    </button>
     <div
         v-if="visible"
         class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"

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" />