Add delete action for step components [SCI-6780]

app/controllers/step_components/checklists_controller.rb

@@ -13,5 +13,11 @@ module StepComponents
     def element_params
       params.require(:checklist).permit(:name)
     end
+
+    def load_vars
+      @element = @step.checklists.find_by(id: params[:id])
+      @orderable_element = @element.step_orderable_elements.find_by(step: @step)
+      return render_404 unless @element && @orderable_element
+    end
   end
 end

app/controllers/step_components/tables_controller.rb

@@ -16,5 +16,11 @@ module StepComponents
     def element_params
       params.require(:table).permit(:name, :contents)
     end
+
+    def load_vars
+      @element = @step.tables.find_by(id: params[:id])
+      @orderable_element = @element.step_table.step_orderable_elements.find_by(step: @step)
+      return render_404 unless @element && @orderable_element
+    end
   end
 end

app/controllers/step_components/texts_controller.rb

@@ -11,5 +11,11 @@ module StepComponents
     def element_params
       params.require(:step_text).permit(:text)
     end
+
+    def load_vars
+      @element = @step.step_texts.find_by(id: params[:id])
+      @orderable_element = @element.step_orderable_elements.find_by(step: @step)
+      return render_404 unless @element && @orderable_element
+    end
   end
 end

app/controllers/step_orderable_elements_controller.rb

@@ -2,7 +2,8 @@
 
 class StepOrderableElementsController < ApplicationController
   before_action :load_vars_nested
-  before_action :check_manage_permissions, only: :create
+  before_action :load_vars
+  before_action :check_manage_permissions, only: %i(create destroy)
 
   def create
     ActiveRecord::Base.transaction do
@@ -16,6 +17,14 @@ class StepOrderableElementsController < ApplicationController
     end
   end
 
+  def destroy
+    if @element.destroy
+      render json: @orderable_element, serializer: StepOrderableElementSerializer
+    else
+      render json: {}, status: :unprocessable_entity
+    end
+  end
+
   private
 
   def load_vars_nested

app/javascript/vue/protocol/container.vue

@@ -57,6 +57,7 @@
         {{ i18n.t("protocols.steps.new_step") }}
       </button>
     </div>
+    <ProtocolModals/>
   </div>
 </template>
 
@@ -64,6 +65,7 @@
   import InlineEdit from 'vue/shared/inline_edit.vue'
   import Step from 'vue/protocol/step'
   import ProtocolOptions from 'vue/protocol/protocolOptions'
+  import ProtocolModals from 'vue/protocol/modals'
 
   export default {
     name: 'ProtocolContainer',
@@ -85,7 +87,7 @@
         required: true
       }
     },
-    components: { Step, InlineEdit, ProtocolOptions },
+    components: { Step, InlineEdit, ProtocolModals, ProtocolOptions },
     data() {
       return {
         protocol: {

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

@@ -0,0 +1,23 @@
+export default {
+  methods: {
+    showDeleteModal() {
+      $('#modalDestroyProtocolContent').modal('show');
+      $('#modalDestroyProtocolContent .delete-step').off().one('click', () => {
+        this.deleteComponent();
+        $('#modalDestroyProtocolContent').modal('hide');
+      });
+    },
+    deleteComponent() {
+      $.ajax({
+        url: this.element.attributes.element.urls.delete_url,
+        type: 'DELETE',
+        success: (result) => {
+          this.$emit(
+            'component:delete',
+            result.data
+          );
+        }
+      });
+    }
+  }
+};

app/javascript/vue/protocol/modals.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="protocol-modals">
+    <deleteComponentModal/>
+  </div>
+</template>
+<script>
+  import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+
+  export default {
+    name: 'ProtocolModals',
+    components: { deleteComponentModal }
+  }
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="modal" id="modalDestroyProtocolContent" 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" id="modal-destroy-team-label">
+            {{ i18n.t('protocols.steps.modals.delete_component.title')}}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <p>{{ i18n.t('protocols.steps.modals.delete_component.description_1')}}</p>
+          <p><b>{{ i18n.t('protocols.steps.modals.delete_component.description_2')}}</b></p>
+
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+          <button class="btn btn-danger delete-step">Delete forever</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ <script>
+  export default {
+    name: 'deleteComponentModal'
+  }
+</script>

app/javascript/vue/protocol/step.vue

@@ -56,6 +56,7 @@
         <component
           :is="elements[index].attributes.orderable_type"
           :key="index"
+          @component:delete="deleteComponent"
           :element.sync="elements[index]"/>
       </template>
     </div>
@@ -115,6 +116,21 @@
           HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
         })
       },
+      deleteComponent(element) {
+        let position = element.attributes.position;
+        this.elements.splice(position, 1)
+        let unordered_elements = this.elements.map( e => {
+          if (e.attributes.position >= position) {
+            e.attributes.position -= 1;
+          }
+          return e;
+        })
+        this.reorderComponents(unordered_elements)
+
+      },
+      reorderComponents(elements) {
+        this.elements = elements.sort((a, b) => a.attributes.position - b.attributes.position);
+      },
       updateName(newName) {
         $.ajax({
           url: this.step.attributes.urls.update_url,

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

@@ -1,11 +1,22 @@
 <template>
   <div class="step-checklist-container">
     Checklist
+   <button class="btn icon-btn btn-light" @click="showDeleteModal">
+      <i class="fas fa-trash"></i>
+    </button>
   </div>
 </template>
 
  <script>
+  import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
   export default {
-    name: 'Checklist'
+    name: 'Checklist',
+    mixins: [DeleteMixin],
+    props: {
+      element: {
+        type: Object,
+        required: true
+      }
+    }
   }
 </script>

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

@@ -1,11 +1,22 @@
 <template>
   <div class="step-table-container">
     Table
+    <button class="btn icon-btn btn-light" @click="showDeleteModal">
+      <i class="fas fa-trash"></i>
+    </button>
   </div>
 </template>
 
  <script>
+  import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
   export default {
-    name: 'StepTable'
+    name: 'StepTable',
+    mixins: [DeleteMixin],
+    props: {
+      element: {
+        type: Object,
+        required: true
+      }
+    }
   }
 </script>

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

@@ -1,11 +1,22 @@
 <template>
   <div class="step-text-container">
     Text
+   <button class="btn icon-btn btn-light" @click="showDeleteModal">
+      <i class="fas fa-trash"></i>
+    </button>
   </div>
 </template>
 
  <script>
+  import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
   export default {
-    name: 'StepText'
+    name: 'StepText',
+    mixins: [DeleteMixin],
+    props: {
+      element: {
+        type: Object,
+        required: true
+      }
+    }
   }
 </script>

app/serializers/checklist_serializer.rb

@@ -1,5 +1,15 @@
 # frozen_string_literal: true
 
 class ChecklistSerializer < ActiveModel::Serializer
-  attributes :name
+  include Rails.application.routes.url_helpers
+
+  attributes :name, :urls
+
+  def urls
+    return unless object.step
+
+    {
+      delete_url: step_checklist_path(object.step, object)
+    }
+  end
 end

app/serializers/step_table_serializer.rb

@@ -1,5 +1,15 @@
 # frozen_string_literal: true
 
 class StepTableSerializer < ActiveModel::Serializer
-  attributes :name
+  include Rails.application.routes.url_helpers
+
+  attributes :name, :urls
+
+  def urls
+    return unless object.step
+
+    {
+      delete_url: step_table_path(object.step, object)
+    }
+  end
 end

app/serializers/step_text_serializer.rb

@@ -1,5 +1,15 @@
 # frozen_string_literal: true
 
 class StepTextSerializer < ActiveModel::Serializer
-  attributes :text
+  include Rails.application.routes.url_helpers
+
+  attributes :text, :urls
+
+  def urls
+    return unless object.step
+
+    {
+      delete_url: step_text_path(object.step, object)
+    }
+  end
 end

config/locales/en.yml

@@ -2523,7 +2523,11 @@ en:
         default_name: 'Table %{position}'
       checklist:
         default_name: 'Checklist %{position}'
-
+      modals:
+        delete_component:
+          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?'
       options:
         up_arrow_title: "Move step up"
         down_arrow_title: "Move step down"

config/routes.rb

@@ -449,9 +449,9 @@ Rails.application.routes.draw do
                 path: '/comments',
                 only: %i(create index update destroy)
 
-      resources :tables, controller: 'step_components/tables', only: :create
-      resources :texts, controller: 'step_components/texts', only: :create
-      resources :checklists, controller: 'step_components/checklists', only: :create
+      resources :tables, controller: 'step_components/tables', only: %i(create destroy)
+      resources :texts, controller: 'step_components/texts', only: %i(create destroy)
+      resources :checklists, controller: 'step_components/checklists', only: %i(create destroy)
       member do
         get 'elements'
         post 'checklistitem_state'