Missing modal when deleting an archived result [SCI-9291]

app/javascript/vue/results/delete_result.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="modal" @keydown.esc="cancel" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-sm" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
+          <h4 class="modal-title">
+            {{ i18n.t("my_modules.results.delete_modal.title") }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <p>{{ i18n.t("my_modules.results.delete_modal.description_1") }}</p>
+          <p><b>{{ i18n.t("my_modules.results.delete_modal.description_2") }}</b></p>
+
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
+          <button class="btn btn-danger" @click="confirm">{{ i18n.t("my_modules.results.delete_modal.confirm") }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ <script>
+  export default {
+    name: 'deleteResultModal',
+    mounted() {
+      $(this.$refs.modal).modal('show');
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('cancel');
+      });
+    },
+    methods: {
+      confirm() {
+        $(this.$refs.modal).modal('hide');
+        this.$emit('confirm');
+      },
+      cancel() {
+        $(this.$refs.modal).modal('hide');
+      }
+    }
+  }
+</script>

app/javascript/vue/results/result.vue

@@ -56,7 +56,7 @@
           @duplicate="duplicateResult"
           @archive="archiveResult"
           @restore="restoreResult"
-          @delete="deleteResult"
+          @delete="showDeleteModal"
         ></MenuDropdown>
       </div>
     </div>
@@ -65,6 +65,8 @@
       {{ i18n.t('protocols.steps.timestamp', {date: result.attributes.created_at, user: result.attributes.created_by }) }}
     </div>
 
+    <deleteResultModal v-if="confirmingDelete" @confirm="deleteResult" @cancel="closeDeleteModal"/>
+
     <ReorderableItemsModal v-if="reordering"
       :title="i18n.t('my_modules.modals.reorder_results.title')"
       :items="reorderableElements"
@@ -111,6 +113,7 @@
   import Attachments from '../shared/content/attachments.vue';
   import InlineEdit from '../shared/inline_edit.vue'
   import MenuDropdown from '../shared/menu_dropdown.vue'
+  import deleteResultModal from './delete_result.vue';
 
   import AttachmentsMixin from '../shared/content/mixins/attachments.js'
   import WopiFileModal from '../shared/content/attachments/mixins/wopi_file_modal.js'
@@ -138,7 +141,8 @@
           { text: I18n.t('protocols.steps.insert.well_plate_options.6_x_4'), emit: 'create:table', params: [6, 4] },
           { text: I18n.t('protocols.steps.insert.well_plate_options.2_x_3'), emit: 'create:table', params: [2, 3] }
         ],
-        editingName: false
+        editingName: false,
+        confirmingDelete: false
       }
     },
     mixins: [UtilsMixin, AttachmentsMixin, WopiFileModal, OveMixin],
@@ -148,7 +152,8 @@
       ResultText,
       Attachments,
       InlineEdit,
-      MenuDropdown
+      MenuDropdown,
+      deleteResultModal
     },
     watch: {
       resultToReload() {
@@ -393,6 +398,12 @@
           this.$emit('result:restored', this.result.id);
         });
       },
+      showDeleteModal() {
+        this.confirmingDelete = true;
+      },
+      closeDeleteModal() {
+        this.confirmingDelete = false;
+      },
       deleteResult() {
         axios.delete(this.urls.delete_url).then((response) => {
           this.$emit('result:deleted', this.result.id);

config/locales/en.yml

@@ -1320,6 +1320,11 @@ en:
       move_modal:
         search_placeholder: "Enter result name"
         no_options_placeholder: "No results available to select"
+      delete_modal:
+        title: "Delete result"
+        description_1: "You’re about to delete the result. It might contain data you don’t want to lose. You won’t be able to get it back."
+        description_2: "Are you sure you want to delete it?"
+        confirm: "Delete forever"
     archive_results:
       preview: "View"
     activities: