From b8da9956973b05a8d241261d14bd63bdb9e32d33 Mon Sep 17 00:00:00 2001
From: Deepjyoti Barman <deep.barman30@gmail.com>
Date: Wed, 24 Feb 2021 18:32:43 +0530
Subject: [PATCH] Add a modal component to handle modals

---
 .gitignore                 |   3 +-
 src/components/Confirm.vue | 112 +++++++++++--------------------------
 src/components/Modal.vue   |  87 ++++++++++++++++++++++++++++
 src/views/Format.vue       |   2 +-
 4 files changed, 122 insertions(+), 82 deletions(-)
 create mode 100644 src/components/Modal.vue

diff --git a/.gitignore b/.gitignore
index b38fc5f..43d9033 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,5 +20,4 @@ pnpm-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
-Modal.*
+*.sw?
\ No newline at end of file
diff --git a/src/components/Confirm.vue b/src/components/Confirm.vue
index 9cc8e27..bd1957f 100644
--- a/src/components/Confirm.vue
+++ b/src/components/Confirm.vue
@@ -1,73 +1,44 @@
 <template>
-  <div
-    class="confirm__container modal micromodal-slide"
-    id="modal-frame"
-    aria-hidden="true"
-  >
-    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
-      <div
-        class="modal__container md:w-2/6 w-11/12"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-frame-title"
-      >
-        <header class="modal__header">
-          <h3 id="modal-frame-title" class="modal__title">
-            Confirm
-          </h3>
-          <button
-            v-if="showCancelButton"
-            id="close-btn"
-            class="modal__close strip-button"
-            aria-label="Close modal"
-            @click="closeModal"
-            data-micromodal-close
-          >
-            <XIcon class="dark:text-gray-400"></XIcon>
-          </button>
-        </header>
-        <main class="modal__content" id="modal-frame-content">
-          <div id="message" class="mb-2">
-            <h3
-              id="modal-frame-title"
-              class="modal__title md:text-2xl text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2"
-            >
-              {{ getHeading }}
-            </h3>
-            <h6 class="md:text-base text-sm text-gray-500 dark:text-gray-400">
-              {{ getText }}
-            </h6>
-          </div>
-          <div class="btn-container w-full mb-2 mt-8 flex text-xl">
-            <button
-              type="button"
-              class="no w-1/2 mx-2 py-1 rounded-md border-green-500 border-2 text-green-500 font-semibold"
-              @click="handleCancelClick"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              class="yes w-1/2 mx-2 rounded-md bg-green-500 text-white font-semibold"
-              @click="handleContinueClick"
-            >
-              {{ getContinueText }}
-            </button>
-          </div>
-        </main>
+  <div class="confirm__container">
+    <modal ref="modal" modalId="confirm" heading="Confirm">
+      <div id="message" class="mb-2">
+        <h3
+          id="modal-frame-title"
+          class="modal__title md:text-2xl text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2"
+        >
+          {{ getHeading }}
+        </h3>
+        <h6 class="md:text-base text-sm text-gray-500 dark:text-gray-400">
+          {{ getText }}
+        </h6>
       </div>
-    </div>
+      <div class="btn-container w-full mb-2 mt-8 flex text-xl">
+        <button
+          type="button"
+          class="no w-1/2 mx-2 py-1 rounded-md border-green-500 border-2 text-green-500 font-semibold"
+          @click="handleCancelClick"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="yes w-1/2 mx-2 rounded-md bg-green-500 text-white font-semibold"
+          @click="handleContinueClick"
+        >
+          {{ getContinueText }}
+        </button>
+      </div>
+    </modal>
   </div>
 </template>
 
 <script>
-import MicroModal from "micromodal";
-import { XIcon } from "vue-feather-icons";
+import Modal from "@/components/Modal.vue";
 
 export default {
   name: "Confirm",
   components: {
-    XIcon
+    Modal
   },
   props: {
     heading: {
@@ -102,23 +73,6 @@ export default {
     }
   },
   methods: {
-    showModal: function() {
-      /**
-       * Show the modal
-       */
-      MicroModal.show("modal-frame", {
-        disableFocus: true,
-        disableScroll: true,
-        awaitCloseAnimation: true,
-        awaitOpenAnimation: true
-      });
-    },
-    closeModal: function() {
-      /**
-       * Close the modal when the close button is clicked
-       */
-      MicroModal.close("modal-frame");
-    },
     handleCancelClick: function() {
       /**
        * Handle the click on the cancel button.
@@ -129,7 +83,7 @@ export default {
        */
       this.$emit("cancel");
 
-      this.closeModal();
+      this.$refs.modal.closeModal();
     },
     handleContinueClick: function() {
       /**
@@ -141,7 +95,7 @@ export default {
        */
       this.$emit("continue");
 
-      this.closeModal();
+      this.$refs.modal.closeModal();
     }
   }
 };
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..a9eef44
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="modal micromodal-slide" :id="`${getModalId}`" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div
+        class="modal__container md:w-2/6 w-full"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="`${getModalId}-title`"
+      >
+        <header class="modal__header">
+          <h3 :id="`${getModalId}-title`" class="modal__title">
+            Confirm
+          </h3>
+          <button
+            v-if="showCancelButton"
+            id="close-btn"
+            class="modal__close strip-button"
+            aria-label="Close modal"
+            @click="closeModal"
+            data-micromodal-close
+          >
+            <XIcon class="dark:text-gray-400"></XIcon>
+          </button>
+        </header>
+        <main class="modal__content" :id="`${getModalId}-content`">
+          <slot></slot>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MicroModal from "micromodal";
+import { XIcon } from "vue-feather-icons";
+
+export default {
+  name: "Modal",
+  components: {
+    XIcon
+  },
+  props: {
+    modalId: {
+      type: String,
+      default: ""
+    },
+    heading: {
+      type: String,
+      default: "Modal"
+    },
+    crossBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getHeading() {
+      return this.heading;
+    },
+    showCancelButton() {
+      return this.crossBtn;
+    },
+    getModalId() {
+      return `${this.modalId}-frame`;
+    }
+  },
+  methods: {
+    showModal: function() {
+      /**
+       * Show the modal
+       */
+      MicroModal.show(this.getModalId, {
+        disableFocus: true,
+        disableScroll: true,
+        awaitCloseAnimation: true,
+        awaitOpenAnimation: true
+      });
+    },
+    closeModal: function() {
+      /**
+       * Close the modal when the close button is clicked
+       */
+      MicroModal.close(this.getModalId);
+    }
+  }
+};
+</script>
diff --git a/src/views/Format.vue b/src/views/Format.vue
index 8f362a7..96f817b 100644
--- a/src/views/Format.vue
+++ b/src/views/Format.vue
@@ -83,7 +83,7 @@ export default {
 
       if (this.showConfirm) {
         // Ask the user if they would like to make it the default setting.
-        this.$refs.confirm.showModal();
+        this.$refs.confirm.$refs.modal.showModal();
         return;
       }