prevent to duplicate new step [fixes SCI-1280]

app/assets/javascripts/protocols/steps.js.erb

@@ -4,6 +4,9 @@
 //= require assets
 //= require comments
 
+(function(global) {
+  'use strict';
+
   // Sets callbacks for toggling checkboxes
   function applyCheckboxCallBack()  {
     $("[data-action='check-item']").on('click', function(e){
@@ -418,9 +421,15 @@ function initEditableHandsOnTable(root) {
   }
 
   function applyCancelOnNew() {
-  $("[data-action='cancel-new']").click(function() {
+    $("[data-action='cancel-new']").click(function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+
       var $form = $(this).closest("form");
-    $form.parent().remove();
+      $form.parent().remove().promise().done(function() {
+        newStepHandler();
+      });
       toggleButtons(true);
     });
   }
@@ -532,30 +541,54 @@ function initializeCheckboxSorting() {
   }
 
   // New step AJAX
-$("[data-action='new-step']").on("ajax:success", function(e, data) {
-  var $form = $(data.html);
-  $("#steps").append($form);
+  function newStepHandler() {
+    $("[data-action='new-step']").off().on('click', function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      var $btn = $(this);
+      $btn.off();
+      animateSpinner(null, true);
 
+      $.ajax({
+        url: $btn.data('href'),
+        method: 'GET',
+        success: function(data) {
+          var $form = $(data.html);
+          $('#steps').append($form).promise().done(function() {
+            animateSpinner(null, false);
             // Scroll to bottom
-  $("html, body").animate({ scrollTop: $(document).height()-$(window).height() });
+            $('html, body').animate({
+              scrollTop: $(document).height() - $(window).height()
+            });
             formCallback($form);
             formNewAjax($form);
             applyCancelOnNew();
             toggleButtons(false);
             initializeCheckboxSorting();
 
-  $("#step_name").focus();
-  $("#new-step-main-tab a").on("shown.bs.tab", function() {
-    $("#step_name").focus();
+            $('#step_name').focus();
+            $('#new-step-main-tab a').on('shown.bs.tab', function() {
+              $('#step_name').focus();
             });
 
             TinyMCE.refresh();
           });
 
+        },
+        error: function() {
+          newStepHandler();
+        }
+      })
+    });
+  }
+
   // Needed because server-side validation failure clears locations of
   // files to be uploaded and checklist's items etc. Also user
   // experience is improved
-function processStep(ev, editMode) {
+  global.processStep = function processStep(ev, editMode) {
+    ev.stopPropagation();
+
     var $form = $(ev.target.form);
     $form.clearFormErrors();
     $form.removeBlankFileForms();
@@ -574,6 +607,7 @@ function processStep(ev, editMode) {
     if (filesValid && checklistsValid && nameValid && descriptionValid) {
       // Local file uploading
       animateSpinner();
+      newStepHandler();
     }
   }
 
@@ -624,7 +658,7 @@ $(document).ready(function() {
     initPreviewModal();
     TinyMCE.highlight();
     SmartAnnotation.preventPropagation('.atwho-user-popover');
-
+    newStepHandler();
     $(function () {
 
       $("[data-action='collapse-steps']").click(function () {
@@ -638,3 +672,5 @@ $(document).ready(function() {
       $("[data-action='expand-steps']").click(expandAllSteps);
     });
   })
+
+})(window);

app/views/protocols/_steps.html.erb

@@ -1,7 +1,10 @@
 <div class="row">
   <div class="pull-right" style="margin: 20px 15px 0 0;">
     <% if can_create_step_in_protocol(@protocol) %>
-      <a class="btn btn-primary" data-action="new-step" href="<%= new_protocol_step_path(protocol_id: @protocol.id, format: :json) %>" data-remote="true">
+      <a href="#"
+         class="btn btn-primary"
+         data-action="new-step"
+         data-href="<%= new_protocol_step_path(protocol_id: @protocol.id, format: :json) %>">
         <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
         <span class="hidden-xs"><%=t "protocols.steps.new_step" %></span>
       </a>