From d09f5be69b36aeac95e9d5dc0cd4297c7c1bad23 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 24 Feb 2022 21:37:26 +0000
Subject: [PATCH] Extract modal component

---
 web/src/components/Button.vue |  8 +++--
 web/src/components/Modal.vue  | 54 +++++++++++++++++++++++++++++++++
 web/src/dialogs/NewBudget.vue | 56 ++++-------------------------------
 3 files changed, 64 insertions(+), 54 deletions(-)
 create mode 100644 web/src/components/Modal.vue

diff --git a/web/src/components/Button.vue b/web/src/components/Button.vue
index ff7554f..c7c16a0 100644
--- a/web/src/components/Button.vue
+++ b/web/src/components/Button.vue
@@ -2,7 +2,9 @@
 </script>
 
 <template>
-        <button class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2">
-                <slot></slot>
-        </button>
+    <button
+        class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2"
+    >
+        <slot></slot>
+    </button>
 </template>
\ No newline at end of file
diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
new file mode 100644
index 0000000..9dc851b
--- /dev/null
+++ b/web/src/components/Modal.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import Card from '../components/Card.vue';
+import { ref } from "vue";
+
+const props = defineProps<{
+    buttonText: string,
+}>();
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+}>();
+
+const visible = ref(false);
+function closeDialog() {
+    visible.value = false;
+};
+function openDialog() {
+    visible.value = true;
+};
+function submitDialog() {
+    visible.value = false;
+    emit("submit");
+}
+</script>
+
+<template>
+    <Card>
+        <p class="w-24 text-center text-6xl">+</p>
+        <button class="text-lg" dark @click="openDialog">{{ buttonText }}</button>
+    </Card>
+    <div
+        v-if="visible"
+        class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
+    >
+        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div class="mt-3 text-center">
+                <h3 class="mt-3 text-lg leading-6 font-medium text-gray-900">{{ buttonText }}</h3>
+                <slot></slot>
+                <div>
+                    <slot name="actions">
+                        <button
+                            @click="closeDialog"
+                            class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+                        >Close</button>
+                        <button
+                            @click="submitDialog"
+                            class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+                        >Save</button>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/web/src/dialogs/NewBudget.vue b/web/src/dialogs/NewBudget.vue
index 75e095e..9d23508 100644
--- a/web/src/dialogs/NewBudget.vue
+++ b/web/src/dialogs/NewBudget.vue
@@ -1,64 +1,18 @@
 <script lang="ts" setup>
-import Card from '../components/Card.vue';
+import Modal from '../components/Modal.vue';
 import { ref } from "vue";
 import { useBudgetsStore } from '../stores/budget';
 
-const dialog = ref(false);
 const budgetName = ref("");
 function saveBudget() {
   useBudgetsStore().NewBudget(budgetName.value);
-  dialog.value = false;
-};
-function newBudget() {
-  dialog.value = true;
 };
 </script>
 
 <template>
-  <Card>
-    <p class="w-24 text-center text-6xl">+</p>
-    <button class="text-lg" dark @click="newBudget">New Budget</button>
-  </Card>
-  <div v-if="dialog" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
-    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
-      <div class="mt-3 text-center">
-        <!--<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
-          <svg
-            class="h-6 w-6 text-green-600"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M5 13l4 4L19 7"
-            />
-          </svg>
-        </div>-->
-        <h3 class="mt-3 text-lg leading-6 font-medium text-gray-900">New Budget</h3>
-        <div class="mt-2 px-7 py-3">
-          <input
-            class="border-2"
-            type="text"
-            v-model="budgetName"
-            placeholder="Budget name"
-            required
-          />
-          <!--<p class="text-sm text-gray-500">Account has been successfully registered!</p>-->
-        </div>
-        <div class="items-center px-4 py-3">
-          <button
-            @click="dialog = false"
-            class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
-          >Close</button>
-          <button
-            class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
-            @click="saveBudget"
-          >Save</button>
-        </div>
-      </div>
+  <Modal button-text="New Budget" @submit="saveBudget">
+    <div class="mt-2 px-7 py-3">
+      <input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
     </div>
-  </div>
+  </Modal>
 </template>
\ No newline at end of file