Refactor modal loading [SCI-6780]

app/controllers/step_orderable_elements_controller.rb

@@ -2,7 +2,7 @@
 
 class StepOrderableElementsController < ApplicationController
   before_action :load_vars_nested
-  before_action :load_vars
+  before_action :load_vars, only: :destroy
   before_action :check_manage_permissions, only: %i(create destroy)
 
   def create

app/javascript/vue/protocol/mixins/components/delete.js

@@ -1,11 +1,15 @@
 export default {
+  data() {
+    return {
+      confirmingDelete: false
+    };
+  },
   methods: {
     showDeleteModal() {
-      $('#modalDestroyProtocolContent').modal('show');
+      this.confirmingDelete = true;
-      $('#modalDestroyProtocolContent .delete-step').off().one('click', () => {
+    },
-        this.deleteComponent();
+    closeDeleteModal() {
-        $('#modalDestroyProtocolContent').modal('hide');
+      this.confirmingDelete = false;
-      });
     },
     deleteComponent() {
       $.ajax({

app/javascript/vue/protocol/modals.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="protocol-modals">
-    <deleteComponentModal/>
   </div>
 </template>
 <script>

app/javascript/vue/protocol/modals/delete_component.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modal" id="modalDestroyProtocolContent" tabindex="-1" role="dialog">
+  <div ref="modal" class="modal" id="modalDestroyProtocolContent" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -14,8 +14,8 @@
 
         </div>
         <div class="modal-footer">
-          <button class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-danger delete-step">Delete forever</button>
+          <button class="btn btn-danger" @click="confirm">{{ i18n.t('protocols.steps.modals.delete_component.confirm')}}</button>
         </div>
       </div>
     </div>
@@ -23,6 +23,19 @@
 </template>
  <script>
   export default {
-    name: 'deleteComponentModal'
+    name: 'deleteComponentModal',
+    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

@@ -109,10 +109,10 @@
       },
       changeState() {
         this.step.attributes.completed = !this.step.attributes.completed;
-        this.$emit('step:update', this.step)
+        this.$emit('step:update', this.step.attributes)
         $.post(this.step.attributes.urls.state_url, {completed: this.step.attributes.completed}).error(() => {
           this.step.attributes.completed = !this.step.attributes.completed;
-          this.$emit('step:update', this.step)
+          this.$emit('step:update', this.step.attributes)
           HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
         })
       },

app/javascript/vue/protocol/step_components/checklist.vue

@@ -4,13 +4,17 @@
    <button class="btn icon-btn btn-light" @click="showDeleteModal">
       <i class="fas fa-trash"></i>
     </button>
+    <deleteComponentModal v-if="confirmingDelete" @confirm="deleteComponent" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
+  import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+
   export default {
     name: 'Checklist',
+    components: { deleteComponentModal },
     mixins: [DeleteMixin],
     props: {
       element: {

app/javascript/vue/protocol/step_components/table.vue

@@ -4,13 +4,17 @@
     <button class="btn icon-btn btn-light" @click="showDeleteModal">
       <i class="fas fa-trash"></i>
     </button>
+    <deleteComponentModal v-if="confirmingDelete" @confirm="deleteComponent" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
+  import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+
   export default {
     name: 'StepTable',
+    components: { deleteComponentModal },
     mixins: [DeleteMixin],
     props: {
       element: {

app/javascript/vue/protocol/step_components/text.vue

@@ -4,13 +4,17 @@
    <button class="btn icon-btn btn-light" @click="showDeleteModal">
       <i class="fas fa-trash"></i>
     </button>
+    <deleteComponentModal v-if="confirmingDelete" @confirm="deleteComponent" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
+  import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+
   export default {
     name: 'StepText',
+    components: { deleteComponentModal },
     mixins: [DeleteMixin],
     props: {
       element: {

app/serializers/checklist_serializer.rb

@@ -6,7 +6,7 @@ class ChecklistSerializer < ActiveModel::Serializer
   attributes :name, :urls
 
   def urls
-    return unless object.step
+    return if object.destroyed?
 
     {
       delete_url: step_checklist_path(object.step, object)

app/serializers/step_table_serializer.rb

@@ -6,7 +6,9 @@ class StepTableSerializer < ActiveModel::Serializer
   attributes :name, :urls
 
   def urls
-    return unless object.step
+    return if object.destroyed?
+
+    object.reload unless object.step
 
     {
       delete_url: step_table_path(object.step, object)

app/serializers/step_text_serializer.rb

@@ -6,7 +6,7 @@ class StepTextSerializer < ActiveModel::Serializer
   attributes :text, :urls
 
   def urls
-    return unless object.step
+    return if object.destroyed?
 
     {
       delete_url: step_text_path(object.step, object)

config/locales/en.yml

@@ -2528,6 +2528,7 @@ en:
           title: 'Delete content'
           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'
       options:
         up_arrow_title: "Move step up"
         down_arrow_title: "Move step down"