From ab8a200a18be092504742390e4a5a8aa147610b4 Mon Sep 17 00:00:00 2001
From: Brian DiChiara <brian.dichiara@viget.com>
Date: Fri, 20 Sep 2024 10:45:14 -0500
Subject: [PATCH] [#31420] Confirm Dialog replacement

---
 resources/js/components/Concept/Default.js    | 12 +++++--
 resources/js/components/Concept/Default.vue   | 16 ++++++++-
 .../js/components/Concept/mixins/EditMode.js  | 35 ++++++++++++-------
 3 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/Concept/Default.js b/resources/js/components/Concept/Default.js
index 53dd691..4fbb04b 100644
--- a/resources/js/components/Concept/Default.js
+++ b/resources/js/components/Concept/Default.js
@@ -1,4 +1,4 @@
-import { BButton, BInputGroup, BInputGroupAppend } from 'bootstrap-vue';
+import { BButton, BInputGroup, BInputGroupAppend, BModal } from 'bootstrap-vue';
 import EditableTerm from '../Term/Editable.vue';
 import EditableSource from '../Source/Editable.vue';
 import EditableCategory from '../Category/Editable.vue';
@@ -10,7 +10,15 @@ import MixinTerm from './mixins/Term';
 
 export default {
   mixins: [MixinCategory, MixinDirty, MixinEditMode, MixinSource, MixinTerm],
-  components: { BButton, BInputGroup, BInputGroupAppend, EditableTerm, EditableSource, EditableCategory },
+  components: {
+    BModal,
+    BButton,
+    BInputGroup,
+    BInputGroupAppend,
+    EditableTerm,
+    EditableSource,
+    EditableCategory,
+  },
   props: {
     conceptProps: {
       type: Object,
diff --git a/resources/js/components/Concept/Default.vue b/resources/js/components/Concept/Default.vue
index dcdf588..8705dd8 100644
--- a/resources/js/components/Concept/Default.vue
+++ b/resources/js/components/Concept/Default.vue
@@ -15,11 +15,25 @@
         </BButton>
         <BButton
           variant="secondary"
-          @click="toggleEditMode()"
+          @click="leaveEditMode()"
           v-show="getEditMode()"
         >
           Done Editing
         </BButton>
+
+        <BModal
+          id="exit-confirmation-modal"
+          ref="exitModal"
+          title="Confirm Exit"
+          @shown="focusConfirmExitButton"
+          hide-footer
+        >
+          <div class="d-block text-center">
+            <p>You have unsaved changes. Are you sure you want to exit Edit Mode?</p>
+            <BButton ref="confirmExitButton" variant="danger" @click="confirmExit">Yes, exit</BButton>
+            <BButton variant="secondary" @click="hideExitModal">No</BButton>
+          </div>
+        </BModal>
       </div>
 
       <h2>
diff --git a/resources/js/components/Concept/mixins/EditMode.js b/resources/js/components/Concept/mixins/EditMode.js
index e819b5b..06ba4b7 100644
--- a/resources/js/components/Concept/mixins/EditMode.js
+++ b/resources/js/components/Concept/mixins/EditMode.js
@@ -5,25 +5,22 @@ export default {
     return {
       state: state,
     };
-  },mounted() {
+  },
+  mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.handleEscapeKey);
   },
   methods: {
-    toggleEditMode() {
+    leaveEditMode() {
       if (this.getEditMode() && this.isDirty()) {
-        if (
-          !confirm(
-            'You have unsaved changes. Are you sure you want to exit Edit Mode?',
-          )
-        ) {
-          return;
-        }
-        this.resetDirty();
+        this.showExitModal();
+        return;
       }
-
+      this.toggleEditMode();
+    },
+    toggleEditMode() {
       this.state.editMode = !this.state.editMode;
     },
     getEditMode() {
@@ -31,8 +28,22 @@ export default {
     },
     handleEscapeKey(event) {
       if (event.key === 'Escape' && this.getEditMode()) {
-        this.toggleEditMode();
+        this.leaveEditMode();
       }
     },
+    showExitModal() {
+      this.$refs.exitModal.show();
+    },
+    hideExitModal() {
+      this.$refs.exitModal.hide();
+    },
+    confirmExit() {
+      this.hideExitModal();
+      this.resetDirty();
+      this.toggleEditMode();
+    },
+    focusConfirmExitButton() {
+      this.$refs.confirmExitButton.focus();
+    },
   },
 };