refactor step view

app/assets/javascripts/experiments/dropdown_actions.js

@@ -3,8 +3,6 @@
   // Create ajax hook on given 'element', which should return modal with 'id' =>
   // show that modal
   function initializeModal(element, id){
-
-    // Initializev new experiment modal listner
     $(element)
     .on("ajax:beforeSend", function(){
       animateSpinner();
@@ -16,7 +14,6 @@
         keyboard: false,
       });
       validateMoveModal(id);
-      validateExperimentForm($(id));
     })
     .on("ajax:error", function() {
       animateSpinner(null, false);
@@ -61,42 +58,11 @@
         var msg = JSON.parse(error.responseText);
         renderFormError(e,
                         form.find("#experiment_project_id"),
-                        msg.message.toString(),
-                        true);
+                        msg.message.toString());
       })
+      .clearFormErrors();
     }
   }
-  // Setup front-end validations for experiment form
-  function validateExperimentForm(element){
-    if ( element ) {
-      var form = element.find("form");
-      form
-      .on('ajax:success' , function(){
-        animateSpinner(form, true);
-        location.reload();
-      })
-      .on('ajax:error', function(e, error){
-        var msg = JSON.parse(error.responseText);
-        if ( 'name' in msg ) {
-          renderFormError(e,
-                          element.find("#experiment-name"),
-                          msg.name.toString(),
-                          true);
-        } else if ( 'description' in msg ) {
-          renderFormError(e,
-                          element.find("#experiment-description"),
-                          msg.description.toString(),
-                          true);
-        } else {
-          renderFormError(e,
-                          element.find("#experiment-name"),
-                          error.statusText,
-                          true);
-        }
-      })
-    }
-  }
-
   // Initialize no description edit link
   function initEditNoDescription(){
     var modal = "#edit-experiment-modal-";

app/assets/javascripts/step_comments.js

@@ -1,7 +1,3 @@
-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.
-
-
 (function(){
 
   function initializeComments(){
@@ -10,53 +6,57 @@
       var that = $(this);
       var link = that.attr("data-href");
 
-      $.ajax({
-        method: 'GET',
-        url: link,
-        beforeSend: animateSpinner(that, true),
-        success: function(data){
-          $(that.children()[0]).html(data.html);
-          commentFormOnSubmitAction();
+      $.ajax({ method: 'GET',
+               url: link,
+               beforeSend: animateSpinner(that, true) })
+        .done(function(data){
+          // $(that.children()[0]).html(data.html);
+          debugger;
+          updateCommentHTML(that, data);
           animateSpinner(that, false);
-        },
-        complete: animateSpinner(that, false)
-      });
+        })
+        .always(animateSpinner(that, false));
     });
   }
 
   function refreshComments(child){
     var parent = child.closest(".step-comment");
     var link = parent.attr("data-href");
-    $.ajax({
-      method: 'GET',
-      url: link,
-      beforeSend: animateSpinner(parent, true),
-      success: function(data){
+    $.ajax({ method: 'GET',
+             url: link,
+             beforeSend: animateSpinner(parent, true) })
+      .done(function(data){
         updateCommentHTML(parent, data);
         animateSpinner(parent, false);
-      },
-      complete: animateSpinner(parent, false)
-    });
+      })
+      .always(animateSpinner(parent, false));
+
   }
 
   function commentFormOnSubmitAction(){
+    debugger;
     $(".comment-form")
       .each(function() {
-        bindCommentAjax($(this));
+        bindCommentAjax($(this).attr("id"));
       });
   }
 
   function bindCommentAjax(form){
-    form
-      .ajaxSuccess( function(){
-        refreshComments(form);
+    debugger;
+    $(document)
+      .on('ajax:success', function () {
+        debugger
+         refreshComments($(form));
+      })
+      .on('ajax:error', function () {
+         refreshComments(form);
       });
   }
 
   function updateCommentHTML(parent, data) {
-    var comment_form = $(parent.find(".comment-form"));
     $(parent.children()[0]).html(data.html);
-    bindCommentAjax(comment_form);
+    var id = $(parent.find(".comment-form")).attr("id")
+    bindCommentAjax(id);
   }
 
   initializeComments();

app/assets/stylesheets/my_modules.scss

@@ -18,17 +18,7 @@
 	background-color: transparent !important;
 }
 
-.step-comment {
-  border: 1px solid $color-gallery;
-}
-
-.equal {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-
-  & > div[class*='col-'] {
-    display: flex;
-    flex-direction: column;
-  }
+.step-container .row {
+  margin-left: 0;
+  margin-right: 0;
 }

app/views/step_comments/_index.html.erb

@@ -1,6 +1,4 @@
-<h5 class="text-center">
-  <span class="glyphicon glyphicon-comment"></span>
-  <%= t('protocols.steps.comments_tab') %></h5>
+<h5 class="text-center"><%= t('protocols.steps.comments_tab') %></h5>
 <hr>
 <ul class="no-style double-line content-comments">
   <% if @comments.size == 0 then %>
@@ -20,7 +18,7 @@
   <ul class="no-style double-line">
     <li>
       <hr>
-      <%= bootstrap_form_for :comment, url: { format: :json }, html: { class: 'comment-form' }, method: :post, remote: true do |f| %>
+      <%= bootstrap_form_for :comment, url: { format: :json }, html: { class: 'comment-form', id: "step-comment-#{@step.id}" }, method: :post, remote: true do |f| %>
         <%= f.text_field :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %>
       <% end %>
     </li>

app/views/steps/_step.html.erb

@@ -30,17 +30,17 @@
       </a>
     </div>
     <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
-      <div class="panel-body equal">
+      <div class="panel-body">
       <% if @protocol.in_module? %>
-      <div class="col-md-9">
         <ul class="nav nav-tabs">
           <li role="presentation" class="active">
             <a class="step-info-tab" href="#step-info-<%= step.id %>" data-toggle="tab"><span class="glyphicon glyphicon-info-sign"></span>
               <%= t("protocols.steps.info_tab") %></a>
           </li>
         </ul>
-        <div class="tab-content">
+        <div class="tab-content step-container">
           <div class="tab-pane active" role="tabpanel" id="step-info-<%= step.id %>">
+            <div class="row">
       <% end %>
         <% if step.description.blank? %>
           <em><%= t("protocols.steps.no_description") %></em>
@@ -126,13 +126,15 @@
         <% end %>
 <% if @protocol.in_module? %>
           </div>
+          <% if can_view_step_comments(@protocol) %>
+          <div class="row">
+            <div class="step-comment" data-href="<%= url_for step_step_comments_path(step_id: step.id, format: :json) %>">
+              <div id="step-comments-<%= step.id %>"></div>
+            </div>
+          </div>
+          <% end %>
         </div>
       </div>
-      <% if can_view_step_comments(@protocol) %>
-      <div class="col-md-3 step-comment" data-href="<%= url_for step_step_comments_path(step_id: step.id, format: :json) %>">
-        <div id="step-comments-<%= step.id %>"></div>
-      </div>
-      <% end %>
 <% end %>
       </div>
     </div>