Add delete all steps button [SCI-6921]

app/assets/stylesheets/protocols/protocol.scss

@@ -122,3 +122,9 @@
     margin-top: 28px;
   }
 }
+
+.delete-steps-modal {
+  .btn {
+    float: initial;
+  }
+}

app/controllers/protocols_controller.rb

@@ -45,6 +45,7 @@ class ProtocolsController < ApplicationController
     revert_modal
     update_from_parent
     update_from_parent_modal
+    delete_steps
   )
   before_action :check_manage_parent_in_repository_permissions, only: %i(
     update_parent
@@ -257,6 +258,25 @@ class ProtocolsController < ApplicationController
     end
   end
 
+  def delete_steps
+    Protocol.transaction do
+      team = @protocol.team
+      previous_size = 0
+
+      @protocol.steps.each do |step|
+        previous_size += step.space_taken
+        step.destroy!
+      end
+
+      team.release_space(previous_size)
+      team.save
+      render json: { status: 'ok' }
+    rescue ActiveRecord::RecordNotDestroyed
+      render json: { status: 'error' }, status: :unprocessable_entity
+      raise ActiveRecord::Rollback
+    end
+  end
+
   def clone
     cloned = nil
     Protocol.transaction do

app/javascript/vue/protocol/container.vue

@@ -19,7 +19,12 @@
           <span class="fas fa-print" aria-hidden="true"></span>
           <span>{{ i18n.t("protocols.print.button") }}</span>
         </a>
-        <ProtocolOptions v-if="protocol.attributes && protocol.attributes.urls" :protocol="protocol" />
+        <ProtocolOptions
+          v-if="protocol.attributes && protocol.attributes.urls"
+          :protocol="protocol"
+          @protocol:delete_steps="deleteSteps"
+          :canDeleteSteps="steps.length > 0 && urls.delete_steps_url !== null"
+        />
       </div>
     </div>
     <div v-if="protocol.id" id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
@@ -158,6 +163,13 @@
       expandSteps() {
         $('.step-container .collapse').collapse('show')
       },
+      deleteSteps() {
+        $.post(this.urls.delete_steps_url, () => {
+          this.steps = []
+        }).error(() => {
+          HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger')
+        })
+      },
       refreshProtocolStatus() {
         if (this.inRepository) return
         // legacy method from app/assets/javascripts/my_modules/protocols.js

app/javascript/vue/protocol/modals/delete_steps.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="modal" @keydown.esc="cancel" class="modal delete-steps-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_steps.title')}}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <p>{{ i18n.t('protocols.steps.modals.delete_steps.description_1')}}</p>
+          <p><b>{{ i18n.t('protocols.steps.modals.delete_steps.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_steps.confirm')}}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ <script>
+  export default {
+    name: 'deleteStepsModal',
+    mounted() {
+      $(this.$refs.modal).modal('show');
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('close');
+      });
+    },
+    methods: {
+      confirm() {
+        $(this.$refs.modal).modal('hide');
+        this.$emit('confirm');
+      },
+      cancel() {
+        $(this.$refs.modal).modal('hide');
+      }
+    }
+  }
+</script>

app/javascript/vue/protocol/protocolOptions.vue

@@ -1,79 +1,106 @@
 <template>
-  <div class="dropdown sci-dropdown protocol-options-dropdown">
-    <button
-      class="btn btn-secondary dropdown-toggle"
-      type="button"
-      id="dropdownProtocolOptions"
-      data-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="true"
-    >
-      <span class="fas fa-cog"></span>
-      <span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>
-      <span class="caret"></span>
-    </button>
-    <ul
-      class="dropdown-menu dropdown-menu-right"
-      aria-labelledby="dropdownProtocolOptions"
-    >
-      <li>
-        <a
-          ref="loadProtocol"
-          data-action="load-from-repository"
-          @click="loadProtocol"
-          :class="{ disabled: !protocol.attributes.urls.load_from_repo_url }"
-        >
-          <span class="fas fa-edit"></span>
-          <span>{{ i18n.t("my_modules.protocol.options_dropdown.load_from_repo") }}</span>
-        </a>
-      </li>
-      <li>
-        <a
-          ref="saveProtocol"
-          data-action="copy-to-repository"
-          @click="saveProtocol"
-          :class="{ disabled: !protocol.attributes.urls.save_to_repo_url }"
-        >
-          <span class="fas fa-check"></span>
-          <span>{{
-            i18n.t("my_modules.protocol.options_dropdown.save_to_repo")
-          }}</span>
-        </a>
-      </li>
-      <li>
-        <a data-action="load-from-file"
-           class="btn-open-file"
-           :data-import-url="protocol.attributes.urls.import_url"
-           :class="{ disabled: !protocol.attributes.urls.import_url }">
-          <span class="fas fa-download"></span>
-          <span>{{ i18n.t("my_modules.protocol.options_dropdown.import") }}</span>
-          <input type="file" value="" accept=".eln" data-turbolinks="false">
-        </a>
-      </li>
-      <li>
-        <a
-          data-turbolinks="false"
-          :href="protocol.attributes.urls.export_url"
-          :class="{ disabled: !protocol.attributes.urls.export_url }"
-        >
-          <span class="fas fa-upload"></span>
-          <span>{{
-            i18n.t("my_modules.protocol.options_dropdown.export")
-          }}</span>
-        </a>
-      </li>
-    </ul>
+  <div>
+    <div class="dropdown sci-dropdown protocol-options-dropdown">
+      <button
+        class="btn btn-secondary dropdown-toggle"
+        type="button"
+        id="dropdownProtocolOptions"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="true"
+      >
+        <span class="fas fa-cog"></span>
+        <span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>
+        <span class="caret"></span>
+      </button>
+      <ul
+        class="dropdown-menu dropdown-menu-right"
+        aria-labelledby="dropdownProtocolOptions"
+      >
+        <li>
+          <a
+            ref="loadProtocol"
+            data-action="load-from-repository"
+            @click="loadProtocol"
+            :class="{ disabled: !protocol.attributes.urls.load_from_repo_url }"
+          >
+            <span class="fas fa-edit"></span>
+            <span>{{ i18n.t("my_modules.protocol.options_dropdown.load_from_repo") }}</span>
+          </a>
+        </li>
+        <li>
+          <a
+            ref="saveProtocol"
+            data-action="copy-to-repository"
+            @click="saveProtocol"
+            :class="{ disabled: !protocol.attributes.urls.save_to_repo_url }"
+          >
+            <span class="fas fa-check"></span>
+            <span>{{
+              i18n.t("my_modules.protocol.options_dropdown.save_to_repo")
+            }}</span>
+          </a>
+        </li>
+        <li>
+          <a data-action="load-from-file"
+              class="btn-open-file"
+              :data-import-url="protocol.attributes.urls.import_url"
+              :class="{ disabled: !protocol.attributes.urls.import_url }">
+            <span class="fas fa-download"></span>
+            <span>{{ i18n.t("my_modules.protocol.options_dropdown.import") }}</span>
+            <input type="file" value="" accept=".eln" data-turbolinks="false">
+          </a>
+        </li>
+        <li>
+          <a
+            data-turbolinks="false"
+            :href="protocol.attributes.urls.export_url"
+            :class="{ disabled: !protocol.attributes.urls.export_url }"
+          >
+            <span class="fas fa-upload"></span>
+            <span>{{
+              i18n.t("my_modules.protocol.options_dropdown.export")
+            }}</span>
+          </a>
+        </li>
+        <li v-if="canDeleteSteps">
+          <a
+            data-turbolinks="false"
+            @click.prevent="openStepsDeletingModal()()"
+          >
+            <span class="fas fa-trash"></span>
+            <span>{{
+              i18n.t("my_modules.protocol.options_dropdown.delete_steps")
+            }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <DeleteStepsModals v-if="stepsDeleting" @confirm="deleteSteps" @close="closeStartStepsDeletingModal" />
   </div>
 </template>
 
  <script>
+import DeleteStepsModals from 'vue/protocol/modals/delete_steps'
+
 export default {
+
   name: "ProtocolOptions",
+  components: { DeleteStepsModals },
+  data() {
+    return {
+      stepsDeleting: false
+    }
+  },
   props: {
     protocol: {
       type: Object,
       required: true,
     },
+    canDeleteSteps: {
+      type: Boolean,
+      required: true
+    }
   },
   mounted() {
     // Legacy global functions from app/assets/javascripts/my_modules/protocols.js
@@ -82,6 +109,12 @@ export default {
     initImport();
   },
   methods: {
+    openStepsDeletingModal() {
+      this.stepsDeleting = true;
+    },
+    closeStartStepsDeletingModal() {
+      this.stepsDeleting = false;
+    },
     loadProtocol() {
       $.get(
         this.protocol.attributes.urls.load_from_repo_url + "?type=recent"
@@ -93,6 +126,9 @@ export default {
       $.get(this.protocol.attributes.urls.save_to_repo_url).success((data) => {
         $(this.$refs.saveProtocol).trigger("ajax:success", data);
       });
+    },
+    deleteSteps() {
+      this.$emit('protocol:delete_steps')
     }
   },
 };

app/serializers/protocol_serializer.rb

@@ -56,7 +56,8 @@ class ProtocolSerializer < ActiveModel::Serializer
       update_protocol_name_url: update_protocol_name_url,
       update_protocol_description_url: update_protocol_description_url,
       update_protocol_authors_url: update_protocol_authors_url,
-      update_protocol_keywords_url: update_protocol_keywords_url
+      update_protocol_keywords_url: update_protocol_keywords_url,
+      delete_steps_url: delete_steps_url
     }
   end
 
@@ -131,4 +132,10 @@ class ProtocolSerializer < ActiveModel::Serializer
   def update_protocol_keywords_url
     keywords_protocol_path(object) if in_repository && can_manage_protocol_in_repository?(object)
   end
+
+  def delete_steps_url
+    return unless can_manage_protocol_in_module?(object) || can_manage_protocol_in_repository?(object)
+
+    delete_steps_protocol_path(object)
+  end
 end

config/locales/en.yml

@@ -840,6 +840,7 @@ en:
         import: "Import protocol"
         export: "Export protocol"
         save_to_repo: "Save to repository"
+        delete_steps: "Delete all steps"
     description:
       title: "Edit task %{module} description"
       label: "Description"
@@ -2552,6 +2553,11 @@ en:
           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'
+        delete_steps:
+          title: 'Delete all protocol steps'
+          description_1: 'You’re about to delete all protocol steps 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 them?'
+          confirm: 'Delete forever'
         reorder_elements:
           title: 'Rearrange %{step_name} content'
       options:

config/routes.rb

@@ -547,6 +547,7 @@ Rails.application.routes.draw do
         get 'edit_keywords_modal', to: 'protocols#edit_keywords_modal'
         get 'edit_authors_modal', to: 'protocols#edit_authors_modal'
         get 'edit_description_modal', to: 'protocols#edit_description_modal'
+        post 'delete_steps'
       end
       collection do
         post 'datatable', to: 'protocols#datatable'