Add delete step modal [SCI-6781]

app/javascript/vue/protocol/modals/delete_step.vue

@@ -0,0 +1,41 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title">
+            {{ i18n.t('protocols.steps.modals.delete_step.title')}}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <p>{{ i18n.t('protocols.steps.modals.delete_step.description_1')}}</p>
+          <p><b>{{ i18n.t('protocols.steps.modals.delete_step.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('protocols.steps.modals.delete_step.confirm')}}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ <script>
+  export default {
+    name: 'deleteStepModal',
+    mounted() {
+      $(this.$refs.modal).modal('show');
+    },
+    methods: {
+      confirm() {
+        $(this.$refs.modal).modal('hide');
+        this.$emit('confirm');
+      },
+      cancel() {
+        $(this.$refs.modal).modal('hide');
+        this.$emit('cancel');
+      }
+    }
+  }
+</script>

app/javascript/vue/protocol/step.vue

@@ -46,7 +46,7 @@
             </li>
           </ul>
         </div>
-        <button class="btn icon-btn btn-light" @click="deleteStep">
+        <button class="btn icon-btn btn-light" @click="showDeleteModal">
           <i class="fas fa-trash"></i>
         </button>
       </div>
@@ -60,6 +60,7 @@
           :element.sync="elements[index]"/>
       </template>
     </div>
+    <deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
@@ -68,6 +69,7 @@
   import StepTable from 'vue/protocol/step_components/table.vue'
   import StepText from 'vue/protocol/step_components/text.vue'
   import Checklist from 'vue/protocol/step_components/checklist.vue'
+  import deleteStepModal from 'vue/protocol/modals/delete_step.vue'
 
   export default {
     name: 'StepContainer',
@@ -79,14 +81,16 @@
     },
     data() {
       return {
-        elements: []
+        elements: [],
+        confirmingDelete: false
       }
     },
     components: {
       InlineEdit,
       StepTable,
       StepText,
-      Checklist
+      Checklist,
+      deleteStepModal
     },
     created() {
       $.get(this.step.attributes.urls.elements_url, (result) => {
@@ -94,6 +98,12 @@
       });
     },
     methods: {
+      showDeleteModal() {
+        this.confirmingDelete = true;
+      },
+      closeDeleteModal() {
+        this.confirmingDelete = false;
+      },
       deleteStep() {
         $.ajax({
           url: this.step.attributes.urls.delete_url,

config/locales/en.yml

@@ -2530,6 +2530,11 @@ en:
           description_1: 'You’re about to delete a content block from your protocol. 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'
+        delete_step:
+          title: 'Delete step'
+          description_1: 'You’re about to delete a whole step from your protocol. 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'
       options:
         up_arrow_title: "Move step up"
         down_arrow_title: "Move step down"