From 38fb163c2dc5615d6fe2e2d5a849601e46720a23 Mon Sep 17 00:00:00 2001
From: Brian DiChiara <brian.dichiara@viget.com>
Date: Fri, 20 Sep 2024 10:20:34 -0500
Subject: [PATCH] [#31420] Replace confirms with Modals, added Mixins

---
 resources/js/components/Category/Editable.vue |  93 ++++++----
 .../js/components/Concept/mixins/Term.js      |  12 --
 resources/js/components/Term/Editable.vue     | 166 +++++++++++-------
 resources/js/components/Term/List.vue         |   2 +-
 .../components/Term/mixins/ConfirmDelete.js   |  17 ++
 .../Term/mixins/ConfirmPreferred.js           |  17 ++
 .../js/components/Term/mixins/InlineEdit.js   |  33 ++++
 7 files changed, 225 insertions(+), 115 deletions(-)
 create mode 100644 resources/js/components/Term/mixins/ConfirmDelete.js
 create mode 100644 resources/js/components/Term/mixins/ConfirmPreferred.js
 create mode 100644 resources/js/components/Term/mixins/InlineEdit.js

diff --git a/resources/js/components/Category/Editable.vue b/resources/js/components/Category/Editable.vue
index 49b251c..7b7c10e 100644
--- a/resources/js/components/Category/Editable.vue
+++ b/resources/js/components/Category/Editable.vue
@@ -1,35 +1,52 @@
 <template>
-  <BInputGroup>
-    <div
-      v-if="originalId"
-      class="category-item custom-select"
-      :class="{ 'font-weight-bold': isPrimary }"
-    >
-      {{ selectedValue }}
-    </div>
-    <BFormSelect
-      v-else
-      v-model="selectedId"
-      @change="trackChanges"
-      :options="getCategories"
-      :class="{ 'alert-info': isDirty() }"
-      aria-placeholder="Select a category"
-      placeholder="Select a category"
-    ></BFormSelect>
+  <div>
+    <BInputGroup>
+      <div
+        v-if="originalId"
+        class="category-item custom-select"
+        :class="{ 'font-weight-bold': isPrimary }"
+      >
+        {{ selectedValue }}
+      </div>
+      <BFormSelect
+        v-else
+        v-model="selectedId"
+        @change="trackChanges"
+        :options="getCategories"
+        :class="{ 'alert-info': isDirty() }"
+        aria-placeholder="Select a category"
+        placeholder="Select a category"
+      ></BFormSelect>
+
+      <BInputGroupAppend>
+        <BButton
+          @click="emitSaveCategory"
+          class="btn btn-info"
+          title="Save"
+          v-show="!originalId && isDirty()"
+          ><i class="fa fa-floppy-o"></i
+        ></BButton>
+        <BButton @click="showDeleteModal" class="btn btn-danger" title="Delete"
+          ><i class="fa fa-trash"></i
+        ></BButton>
+      </BInputGroupAppend>
+    </BInputGroup>
 
-    <BInputGroupAppend>
-      <BButton
-        @click="emitSaveCategory"
-        class="btn btn-info"
-        title="Save"
-        v-show="!originalId && isDirty()"
-        ><i class="fa fa-floppy-o"></i
-      ></BButton>
-      <BButton @click="emitDeleteCategory" class="btn btn-danger" title="Delete"
-        ><i class="fa fa-trash"></i
-      ></BButton>
-    </BInputGroupAppend>
-  </BInputGroup>
+    <BModal
+      id="delete-confirmation-modal"
+      ref="deleteModal"
+      title="Confirm Deletion"
+      @hide="resetCategory"
+      @shown="focusConfirmDeleteButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to delete this category?</p>
+        <BButton variant="danger" ref="confirmDeleteButton" @click="confirmDelete">Yes, delete</BButton>
+        <BButton variant="secondary" @click="hideDeleteModal">Cancel</BButton>
+      </div>
+    </BModal>
+  </div>
 </template>
 
 <script>
@@ -39,6 +56,7 @@ import {
   BFormSelect,
   BInputGroup,
   BInputGroupAppend,
+  BModal,
 } from 'bootstrap-vue';
 import { categories } from '../../config/categories';
 
@@ -124,11 +142,18 @@ export default {
         (cat) => parseInt(cat.value) === this.originalId,
       ).text;
     },
-    emitDeleteCategory() {
-      if (!confirm('Are you sure you want to delete this category?')) {
-        return;
-      }
+    showDeleteModal() {
+      this.$refs.deleteModal.show();
+    },
+    focusConfirmDeleteButton() {
+      this.$refs.confirmDeleteButton.focus();
+    },
+    hideDeleteModal() {
+      this.$refs.deleteModal.hide();
+    },
+    confirmDelete() {
       this.$emit('delete-category', this.categoryId, this.categoryIndex);
+      this.hideDeleteModal();
     },
     isDirty() {
       if (!this.selectedId) {
diff --git a/resources/js/components/Concept/mixins/Term.js b/resources/js/components/Concept/mixins/Term.js
index 32cdabe..ecc44bc 100644
--- a/resources/js/components/Concept/mixins/Term.js
+++ b/resources/js/components/Concept/mixins/Term.js
@@ -84,14 +84,6 @@ export default {
       return term;
     },
     makeTermPreferred(term, termIndex) {
-      if (
-        !confirm(
-          `Are you sure you want to make '${term.text}' the preferred term for this concept?`,
-        )
-      ) {
-        return;
-      }
-
       const currentPreferred = this.preferredTerm;
 
       if (currentPreferred && currentPreferred.id !== term.id) {
@@ -105,10 +97,6 @@ export default {
       this.$set(this.terms, termIndex, term);
     },
     async deleteTerm(termId, termText) {
-      if (!confirm('Are you sure you want to delete this term?')) {
-        return;
-      }
-
       let term = {
         id: termId,
         text: termText,
diff --git a/resources/js/components/Term/Editable.vue b/resources/js/components/Term/Editable.vue
index 44d2ddb..c0992b9 100644
--- a/resources/js/components/Term/Editable.vue
+++ b/resources/js/components/Term/Editable.vue
@@ -1,44 +1,89 @@
 <template>
-  <BInputGroup>
-    <BFormInput
-      type="text"
-      ref="termText"
-      :required="true"
-      v-model="text"
-      @input="trackChanges"
-      @keydown.enter="emitSaveTerm"
-      :class="{ 'alert-info': isDirty() }"
-    ></BFormInput>
+  <div>
+    <BInputGroup>
+      <BFormInput
+        type="text"
+        ref="termText"
+        :required="true"
+        v-model="text"
+        @input="trackChanges"
+        @keydown.enter="emitSaveTerm"
+        :class="{ 'alert-info': isDirty() }"
+      ></BFormInput>
 
-    <BInputGroupAppend>
-      <BButton
-        @click="emitSaveTerm"
-        class="btn btn-info"
-        title="Save"
-        v-show="isDirty()"
-      ><i class="fa fa-floppy-o"></i
-      ></BButton>
-      <BButton
-        @click="cancelInlineEdit"
-        v-if="inlineEdit"
-      ><i class="fa fa-ban"></i></BButton>
-      <BButton
-        variant="primary"
-        @click="emitMakeTermPreferred"
-        v-if="!isPreferred && termId"
-        class="btn"
-        title="Make Preferred"
-      ><i class="fa fa-check-square-o"></i
-      ></BButton>
-      <BButton
-        @click="emitDeleteTerm"
-        v-if="!isPreferred"
-        class="btn btn-danger"
-        title="Delete"
-      ><i class="fa fa-trash"></i
-      ></BButton>
-    </BInputGroupAppend>
-  </BInputGroup>
+      <BInputGroupAppend>
+        <BButton
+          @click="emitSaveTerm"
+          class="btn btn-info"
+          title="Save"
+          v-show="isDirty()"
+        ><i class="fa fa-floppy-o"></i
+        ></BButton>
+        <BButton
+          @click="showCancelModal"
+          v-if="inlineEdit"
+        ><i class="fa fa-ban"></i></BButton>
+        <BButton
+          variant="primary"
+          @click="showPreferredModal"
+          v-if="!isPreferred && termId"
+          class="btn"
+          title="Make Preferred"
+        ><i class="fa fa-check-square-o"></i
+        ></BButton>
+        <BButton
+          @click="showDeleteModal"
+          v-if="!isPreferred"
+          class="btn btn-danger"
+          title="Delete"
+        ><i class="fa fa-trash"></i
+        ></BButton>
+      </BInputGroupAppend>
+    </BInputGroup>
+
+    <BModal
+      id="delete-confirmation-modal"
+      ref="deleteModal"
+      title="Confirm Deletion"
+      @hide="resetTerm"
+      @shown="focusConfirmDeleteButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to delete this term?</p>
+        <BButton ref="confirmDeleteButton" variant="danger" @click="confirmDelete">Yes, delete</BButton>
+        <BButton variant="secondary" @click="hideDeleteModal">Cancel</BButton>
+      </div>
+    </BModal>
+
+    <BModal
+      id="cancel-confirmation-modal"
+      ref="cancelModal"
+      title="Confirm Cancel"
+      @shown="focusConfirmCancelButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Cancelling will cause you to lose your changes. Are you sure you want to cancel?</p>
+        <BButton ref="confirmCancelButton" variant="danger" @click="confirmCancel">Yes, cancel</BButton>
+        <BButton variant="secondary" @click="hideCancelModal">No</BButton>
+      </div>
+    </BModal>
+
+    <BModal
+      id="preferred-confirmation-modal"
+      ref="preferredModal"
+      title="Confirm Preferred Term"
+      @shown="focusConfirmPreferredButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to make this term the preferred term for this concept?</p>
+        <BButton ref="confirmPreferredButton" variant="primary" @click="confirmPreferred">Yes, make preferred</BButton>
+        <BButton variant="secondary" @click="hidePreferredModal">Cancel</BButton>
+      </div>
+    </BModal>
+  </div>
 </template>
 
 <script>
@@ -47,10 +92,22 @@ import {
   BFormInput,
   BInputGroup,
   BInputGroupAppend,
+  BModal,
 } from 'bootstrap-vue';
+import InlineEdit from './mixins/InlineEdit';
+import ConfirmDelete from './mixins/ConfirmDelete';
+import ConfirmPreferred from './mixins/ConfirmPreferred';
 import termApi from '../../api/TermService';
 
 export default {
+  mixins: [InlineEdit, ConfirmDelete, ConfirmPreferred],
+  components: {
+    BButton,
+    BFormInput,
+    BInputGroup,
+    BInputGroupAppend,
+    BModal,
+  },
   data() {
     return {
       term: null,
@@ -89,20 +146,9 @@ export default {
       default: false,
     },
   },
-  components: {
-    BInputGroup,
-    BInputGroupAppend,
-    BFormInput,
-    BButton,
-  },
   mounted() {
     this.getConceptTerm();
   },
-  computed: {
-    inlineEdit () {
-      return this.inEdit;
-    },
-  },
   methods: {
     async getConceptTerm () {
       if (!this.termId) {
@@ -110,7 +156,7 @@ export default {
         return;
       }
 
-      const [error,term] = await termApi.getTerm(this.termId);
+      const [error, term] = await termApi.getTerm(this.termId);
       if(term) {
         this.term = { ...term, inEdit: false };
         this.text = term.text;
@@ -135,12 +181,6 @@ export default {
       this.$emit('save-term', term, this.termIndex);
       this.resetTerm();
     },
-    emitMakeTermPreferred() {
-      this.$emit('make-term-preferred', this.term, this.termIndex);
-    },
-    emitDeleteTerm() {
-      this.$emit('delete-term', this.termId, this.termIndex);
-    },
     resetTerm() {
       this.originalText = this.text;
       this.originalId = this.termId;
@@ -149,22 +189,12 @@ export default {
       if(!this.termId){
         return !!this.text;
       }
-      if(this.termId !== this.originalId){
+      if(this.termId !== this.originalId) {
         this.resetTerm();
         return false;
       }
       return this.text !== this.originalText;
     },
-    cancelInlineEdit() {
-      if(this.isDirty()){
-        if(!confirm('Cancelling will cause you to lose your changes. Are you sure you want to cancel?')){
-          return;
-        }
-      }
-      this.$emit('cancel-inline-edit', this.term, this.termIndex);
-      this.text = this.originalText;
-      this.resetTerm();
-    }
   },
 };
 </script>
diff --git a/resources/js/components/Term/List.vue b/resources/js/components/Term/List.vue
index da45c7b..e6c8fe3 100644
--- a/resources/js/components/Term/List.vue
+++ b/resources/js/components/Term/List.vue
@@ -23,7 +23,7 @@
         ></EditableTerm>
         <span
           v-else
-          class="block"
+          class="d-block"
           @dblclick="enableInlineEdit(term, term.index)"
         >
           {{ term.text }}
diff --git a/resources/js/components/Term/mixins/ConfirmDelete.js b/resources/js/components/Term/mixins/ConfirmDelete.js
new file mode 100644
index 0000000..b9c53a2
--- /dev/null
+++ b/resources/js/components/Term/mixins/ConfirmDelete.js
@@ -0,0 +1,17 @@
+export default {
+  methods: {
+    showDeleteModal() {
+      this.$refs.deleteModal.show();
+    },
+    hideDeleteModal() {
+      this.$refs.deleteModal.hide();
+    },
+    confirmDelete() {
+      this.$emit('delete-term', this.termId, this.termIndex);
+      this.hideDeleteModal();
+    },
+    focusConfirmDeleteButton() {
+      this.$refs.confirmDeleteButton.focus();
+    },
+  },
+};
diff --git a/resources/js/components/Term/mixins/ConfirmPreferred.js b/resources/js/components/Term/mixins/ConfirmPreferred.js
new file mode 100644
index 0000000..8a5bf2e
--- /dev/null
+++ b/resources/js/components/Term/mixins/ConfirmPreferred.js
@@ -0,0 +1,17 @@
+export default {
+  methods: {
+    showPreferredModal() {
+      this.$refs.preferredModal.show();
+    },
+    hidePreferredModal() {
+      this.$refs.preferredModal.hide();
+    },
+    confirmPreferred() {
+      this.$emit('make-term-preferred', this.term, this.termIndex);
+      this.hidePreferredModal();
+    },
+    focusConfirmPreferredButton() {
+      this.$refs.confirmPreferredButton.focus();
+    },
+  },
+};
diff --git a/resources/js/components/Term/mixins/InlineEdit.js b/resources/js/components/Term/mixins/InlineEdit.js
new file mode 100644
index 0000000..6328fc9
--- /dev/null
+++ b/resources/js/components/Term/mixins/InlineEdit.js
@@ -0,0 +1,33 @@
+export default {
+  computed: {
+    inlineEdit() {
+      return this.inEdit;
+    },
+  },
+  methods: {
+    showCancelModal() {
+      this.$refs.cancelModal.show();
+    },
+    hideCancelModal() {
+      this.$refs.cancelModal.hide();
+    },
+    confirmCancel() {
+      this.$emit('cancel-inline-edit', this.term, this.termIndex);
+      this.text = this.originalText;
+      this.resetTerm();
+      this.hideCancelModal();
+    },
+    focusConfirmCancelButton() {
+      this.$refs.confirmCancelButton.focus();
+    },
+    cancelInlineEdit() {
+      if (this.isDirty()) {
+        this.showCancelModal();
+      } else {
+        this.$emit('cancel-inline-edit', this.term, this.termIndex);
+        this.text = this.originalText;
+        this.resetTerm();
+      }
+    },
+  },
+};