From 1331304639baba557ef4771b504c7882c194f444 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 25 Feb 2022 20:17:54 +0000
Subject: [PATCH] Extract EditAccount Dialog

---
 web/src/dialogs/EditAccount.vue | 44 +++++++++++++++++++++++++++++++++
 web/src/pages/Account.vue       | 35 ++------------------------
 2 files changed, 46 insertions(+), 33 deletions(-)
 create mode 100644 web/src/dialogs/EditAccount.vue

diff --git a/web/src/dialogs/EditAccount.vue b/web/src/dialogs/EditAccount.vue
new file mode 100644
index 0000000..26cd884
--- /dev/null
+++ b/web/src/dialogs/EditAccount.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import Modal from '../components/Modal.vue';
+import { useAccountStore } from '../stores/budget-account';
+
+const accountStore = useAccountStore();
+const CurrentAccount = computed(() => accountStore.CurrentAccount);
+
+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>
+    <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>
+</template>
\ No newline at end of file
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 2106f6c..e5ec500 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -4,7 +4,7 @@ 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";
+import EditAccount from "../dialogs/EditAccount.vue";
 
 const props = defineProps<{
     budgetid: string
@@ -15,42 +15,11 @@ 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 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>
+    <EditAccount />
 
     <p>
         Current Balance: