From e3ae22763e62f3cbf4613c47213a10db03120a3f Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Thu, 15 Sep 2016 08:46:14 +0200
Subject: [PATCH 01/12] removed comments tab in protocol step

---
 app/assets/javascripts/step_comments.js | 54 +++++++++++++++++++++++++
 app/views/my_modules/protocols.html.erb |  1 +
 app/views/step_comments/_index.html.erb |  6 ++-
 app/views/steps/_step.html.erb          | 19 +++++----
 config/initializers/assets.rb           |  1 +
 5 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index dee720fac..f9715dd40 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/app/assets/javascripts/step_comments.js
@@ -1,2 +1,56 @@
 // 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(){
+    var steps = $(".step-comment");
+    $.each(steps, function(){
+      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);
+          animateSpinner(that, false);
+        },
+        complete: animateSpinner(that, false)
+      });
+    });
+  }
+
+  function refreshComments(child){
+    var parent = chils.closest(".step-comment");
+    var link = parent.attr("data-href");
+
+    $.ajax({
+      method: 'GET',
+      url: link,
+      beforeSend: animateSpinner(parent, true),
+      success: function(data){
+        $(parent.children()[0]).html(data.html);
+        animateSpinner(parent, false);
+      },
+      complete: animateSpinner(parent, false)
+    });
+  }
+
+  function commentFormOnSubmitAction(){
+    $(".comment-form")
+      .each(function() {
+        var obj = $(this);
+        debugger;
+        obj
+          .on('submit', function(){
+            refreshComments(obj);
+          });
+      });
+  }
+
+  initializeComments();
+  commentFormOnSubmitAction();
+})();
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index aed62bfba..cf95a38ef 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -44,3 +44,4 @@
 
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag("my_modules/protocols") %>
+<%= javascript_include_tag("step_comments") %>
diff --git a/app/views/step_comments/_index.html.erb b/app/views/step_comments/_index.html.erb
index e8ae8b27d..b78a306d5 100644
--- a/app/views/step_comments/_index.html.erb
+++ b/app/views/step_comments/_index.html.erb
@@ -1,4 +1,6 @@
-<h5 class="text-center"><%= t('protocols.steps.comments_tab') %></h5>
+<h5 class="text-center">
+  <span class="glyphicon glyphicon-comment"></span>
+  <%= t('protocols.steps.comments_tab') %></h5>
 <hr>
 <ul class="no-style double-line content-comments">
   <% if @comments.size == 0 then %>
@@ -18,7 +20,7 @@
   <ul class="no-style double-line">
     <li>
       <hr>
-      <%= bootstrap_form_for :comment, url: { format: :json }, method: :post, remote: true do |f| %>
+      <%= bootstrap_form_for :comment, url: { format: :json }, html: { class: 'comment-form' }, method: :post, remote: true do |f| %>
         <%= f.text_field :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %>
       <% end %>
     </li>
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index 587908867..4413d387b 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -31,23 +31,17 @@
     </div>
     <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
       <div class="panel-body">
-<% if @protocol.in_module? %>
+      <% if @protocol.in_module? %>
         <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>
-          <% if can_view_step_comments(@protocol) %>
-          <li role="presentation">
-            <a class="comment-tab-link" href="<%= url_for step_step_comments_path(step_id: step.id, format: :json) %>" aria-controls="step-comments-<%= step.id %>" data-remote="true">
-              <span class="glyphicon glyphicon-comment"></span>
-              <%= t("protocols.steps.comments_tab") %></a>
-          </li>
-          <% end %>
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" role="tabpanel" id="step-info-<%= step.id %>">
-<% end %>
+            <div class="col-md-9">
+      <% end %>
         <% if step.description.blank? %>
           <em><%= t("protocols.steps.no_description") %></em>
         <% else %>
@@ -132,8 +126,13 @@
         <% end %>
 <% if @protocol.in_module? %>
           </div>
-          <div class="tab-pane" role="tabpanel" id="step-comments-<%= step.id %>"></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 %>
         </div>
+      </div>
 <% end %>
       </div>
     </div>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index d2e4fef14..224a5edc3 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -59,3 +59,4 @@ Rails.application.config.assets.precompile += %w( assets.js )
 Rails.application.config.assets.precompile += %w( comments.js )
 Rails.application.config.assets.precompile += %w( projects/show.js )
 Rails.application.config.assets.precompile += %w( projects/introdutory_popup.js )
+Rails.application.config.assets.precompile += %w( step_comments.js )

From 0a2ab57e284120aad93a70d54f95170f9f5e3120 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Thu, 15 Sep 2016 11:45:51 +0200
Subject: [PATCH 02/12] styled new comments layout

---
 app/assets/javascripts/step_comments.js | 27 ++++++++++++++++---------
 app/assets/stylesheets/my_modules.scss  | 19 ++++++++++++++++-
 app/views/steps/_step.html.erb          | 14 ++++++-------
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index f9715dd40..4260a274f 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/app/assets/javascripts/step_comments.js
@@ -16,6 +16,7 @@
         beforeSend: animateSpinner(that, true),
         success: function(data){
           $(that.children()[0]).html(data.html);
+          commentFormOnSubmitAction();
           animateSpinner(that, false);
         },
         complete: animateSpinner(that, false)
@@ -24,15 +25,14 @@
   }
 
   function refreshComments(child){
-    var parent = chils.closest(".step-comment");
+    var parent = child.closest(".step-comment");
     var link = parent.attr("data-href");
-
     $.ajax({
       method: 'GET',
       url: link,
       beforeSend: animateSpinner(parent, true),
       success: function(data){
-        $(parent.children()[0]).html(data.html);
+        updateCommentHTML(parent, data);
         animateSpinner(parent, false);
       },
       complete: animateSpinner(parent, false)
@@ -42,15 +42,22 @@
   function commentFormOnSubmitAction(){
     $(".comment-form")
       .each(function() {
-        var obj = $(this);
-        debugger;
-        obj
-          .on('submit', function(){
-            refreshComments(obj);
-          });
+        bindCommentAjax($(this));
       });
   }
 
+  function bindCommentAjax(form){
+    form
+      .ajaxSuccess( function(){
+        refreshComments(form);
+      });
+  }
+
+  function updateCommentHTML(parent, data) {
+    var comment_form = $(parent.find(".comment-form"));
+    $(parent.children()[0]).html(data.html);
+    bindCommentAjax(comment_form);
+  }
+
   initializeComments();
-  commentFormOnSubmitAction();
 })();
diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss
index 07dd950b8..89909c313 100644
--- a/app/assets/stylesheets/my_modules.scss
+++ b/app/assets/stylesheets/my_modules.scss
@@ -2,6 +2,8 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+@import "colors";
+
 .description-label {
   word-wrap: break-word;
 }
@@ -14,4 +16,19 @@
 
 .btn-colorselector{
 	background-color: transparent !important;
-}
\ No newline at end of file
+}
+
+.step-comment {
+  border: 1px solid $color-gallery;
+}
+
+.equal {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  & > div[class*='col-'] {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index 4413d387b..a66d4a1dd 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -30,8 +30,9 @@
       </a>
     </div>
     <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
-      <div class="panel-body">
+      <div class="panel-body equal">
       <% 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>
@@ -40,7 +41,6 @@
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" role="tabpanel" id="step-info-<%= step.id %>">
-            <div class="col-md-9">
       <% end %>
         <% if step.description.blank? %>
           <em><%= t("protocols.steps.no_description") %></em>
@@ -126,13 +126,13 @@
         <% end %>
 <% if @protocol.in_module? %>
           </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 %>
         </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>

From e90f0bd3d544a4ce4291315ddf764dd400c3ce14 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Fri, 16 Sep 2016 09:04:21 +0200
Subject: [PATCH 03/12] refactor step view

---
 .../experiments/dropdown_actions.js           | 38 +------------
 app/assets/javascripts/step_comments.js       | 56 +++++++++----------
 app/assets/stylesheets/my_modules.scss        | 16 +-----
 app/views/step_comments/_index.html.erb       |  6 +-
 app/views/steps/_step.html.erb                | 18 +++---
 5 files changed, 45 insertions(+), 89 deletions(-)

diff --git a/app/assets/javascripts/experiments/dropdown_actions.js b/app/assets/javascripts/experiments/dropdown_actions.js
index f6956737e..29a3f4990 100644
--- a/app/assets/javascripts/experiments/dropdown_actions.js
+++ b/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-";
diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index 4260a274f..f29dbaaf7 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/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();
diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss
index 89909c313..b4bcb3395 100644
--- a/app/assets/stylesheets/my_modules.scss
+++ b/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;
 }
diff --git a/app/views/step_comments/_index.html.erb b/app/views/step_comments/_index.html.erb
index b78a306d5..1b8dc1397 100644
--- a/app/views/step_comments/_index.html.erb
+++ b/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>
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index a66d4a1dd..7396dda17 100644
--- a/app/views/steps/_step.html.erb
+++ b/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>

From 635f6b92d6fc5148da917518ed9abc16fedf1dfe Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Fri, 16 Sep 2016 11:55:10 +0200
Subject: [PATCH 04/12] fixed comments display

---
 app/assets/javascripts/step_comments.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index f29dbaaf7..3a03cdca3 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/app/assets/javascripts/step_comments.js
@@ -10,8 +10,6 @@
                url: link,
                beforeSend: animateSpinner(that, true) })
         .done(function(data){
-          // $(that.children()[0]).html(data.html);
-          debugger;
           updateCommentHTML(that, data);
           animateSpinner(that, false);
         })
@@ -34,18 +32,15 @@
   }
 
   function commentFormOnSubmitAction(){
-    debugger;
     $(".comment-form")
       .each(function() {
-        bindCommentAjax($(this).attr("id"));
+        bindCommentAjax("#" + $(this).attr("id"));
       });
   }
 
   function bindCommentAjax(form){
-    debugger;
     $(document)
       .on('ajax:success', function () {
-        debugger
          refreshComments($(form));
       })
       .on('ajax:error', function () {
@@ -55,7 +50,7 @@
 
   function updateCommentHTML(parent, data) {
     $(parent.children()[0]).html(data.html);
-    var id = $(parent.find(".comment-form")).attr("id")
+    var id = "#" + $(parent.find(".comment-form")).attr("id");
     bindCommentAjax(id);
   }
 

From 938aa32190422ee5e94377e05e6cf8a094aea2b8 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Fri, 16 Sep 2016 15:22:24 +0200
Subject: [PATCH 05/12] js tweaks

---
 app/assets/javascripts/protocols/steps.js | 111 ------------------
 app/assets/javascripts/step_comments.js   | 137 +++++++++++++++++++++-
 app/models/step.rb                        |   2 +-
 app/views/step_comments/_index.html.erb   |  10 +-
 4 files changed, 138 insertions(+), 122 deletions(-)

diff --git a/app/assets/javascripts/protocols/steps.js b/app/assets/javascripts/protocols/steps.js
index 2158edf50..0ef69f70f 100644
--- a/app/assets/javascripts/protocols/steps.js
+++ b/app/assets/javascripts/protocols/steps.js
@@ -354,116 +354,6 @@ function initEditableHandsOnTable(root) {
   });
 }
 
-// Initialize comment form.
-function initStepCommentForm(ev, $el) {
-  var $form = $el.find("ul form");
-
-  var $commentInput = $form.find("#comment_message");
-
-  $(".help-block", $form).addClass("hide");
-
-  $form
-  .on("ajax:send", function (data) {
-    $("#comment_message", $form).attr("readonly", true);
-  })
-  .on("ajax:success", function (e, data) {
-    if (data.html) {
-      var list = $form.parents("ul");
-
-      // Remove potential "no comments" element
-      list.parent().find(".content-comments")
-        .find("li.no-comments").remove();
-
-      list.parent().find(".content-comments")
-        .prepend("<li class='comment'>" + data.html + "</li>")
-        .scrollTop(0);
-      list.parents("ul").find("> li.comment:gt(8)").remove();
-      $("#comment_message", $form).val("");
-      $(".form-group", $form)
-        .removeClass("has-error");
-      $(".help-block", $form)
-          .html("")
-          .addClass("hide");
-      scrollCommentOptions(
-        list.parent().find(".content-comments .dropdown-comment")
-      );
-    }
-  })
-  .on("ajax:error", function (ev, xhr) {
-    if (xhr.status === 400) {
-      var messageError = xhr.responseJSON.errors.message;
-
-      if (messageError) {
-        $(".form-group", $form)
-          .addClass("has-error");
-        $(".help-block", $form)
-            .html(messageError[0])
-            .removeClass("hide");
-      }
-    }
-  })
-  .on("ajax:complete", function () {
-    $("#comment_message", $form)
-      .attr("readonly", false)
-      .focus();
-  });
-}
-
-// Initialize show more comments link.
-function initStepCommentsLink($el) {
-  $el.find(".btn-more-comments")
-  .on("ajax:success", function (e, data) {
-    if (data.html) {
-      var list = $(this).parents("ul");
-      var moreBtn = list.find(".btn-more-comments");
-      var listItem = moreBtn.parents('li');
-      $(data.html).insertBefore(listItem);
-      if (data.results_number < data.per_page) {
-        moreBtn.remove();
-      } else {
-        moreBtn.attr("href", data.more_url);
-        moreBtn.trigger("blur");
-      }
-
-      // Reposition dropdown comment options
-      scrollCommentOptions(listItem.closest(".content-comments")
-      .find(".dropdown-comment"));
-    }
-  });
-}
-
-function initStepCommentTabAjax() {
-  $(".comment-tab-link")
-  .on("ajax:before", function (e) {
-    var $this = $(this);
-    var parentNode = $this.parents("li");
-    var targetId = $this.attr("aria-controls");
-
-    if (parentNode.hasClass("active")) {
-      return false;
-    }
-  })
-  .on("ajax:success", function (e, data) {
-    if (data.html) {
-      var $this = $(this);
-      var targetId = $this.attr("aria-controls");
-      var target = $("#" + targetId);
-      var parentNode = $this.parents("ul").parent();
-
-      target.html(data.html);
-      initStepCommentForm(e, parentNode);
-      initStepCommentsLink(parentNode);
-
-      parentNode.find(".active").removeClass("active");
-      $this.parents("li").addClass("active");
-      target.addClass("active");
-    }
-  })
-  .on("ajax:error", function(e, xhr, status, error) {
-    // TODO
-  });
-}
-
 function applyCancelOnNew() {
   $("[data-action='cancel-new']").click(function() {
     var $form = $(this).closest("form");
@@ -486,7 +376,6 @@ function initCallBacks() {
   applyEditCallBack();
   applyMoveStepCallBack();
   applyCollapseLinkCallBack();
-  initStepCommentTabAjax();
   initDeleteStep();
 }
 
diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index 3a03cdca3..e0d81aa37 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/app/assets/javascripts/step_comments.js
@@ -1,19 +1,135 @@
 (function(){
+  "use strict";
+
+  // // Initialize comment form.
+  // function initStepCommentForm(ev, $el) {
+  //   var $form = $el.find("ul form");
+  //
+  //   var $commentInput = $form.find("#comment_message");
+  //
+  //   $(".help-block", $form).addClass("hide");
+  //
+  //   $form
+  //   .on("ajax:send", function (data) {
+  //     $("#comment_message", $form).attr("readonly", true);
+  //   })
+  //   .on("ajax:success", function (e, data) {
+  //     if (data.html) {
+  //       var list = $form.parents("ul");
+  //
+  //       // Remove potential "no comments" element
+  //       list.parent().find(".content-comments")
+  //         .find("li.no-comments").remove();
+  //
+  //       list.parent().find(".content-comments")
+  //         .prepend("<li class='comment'>" + data.html + "</li>")
+  //         .scrollTop(0);
+  //       list.parents("ul").find("> li.comment:gt(8)").remove();
+  //       $("#comment_message", $form).val("");
+  //       $(".form-group", $form)
+  //         .removeClass("has-error");
+  //       $(".help-block", $form)
+  //           .html("")
+  //           .addClass("hide");
+  //       scrollCommentOptions(
+  //         list.parent().find(".content-comments .dropdown-comment")
+  //       );
+  //     }
+  //   })
+  //   .on("ajax:error", function (ev, xhr) {
+  //     if (xhr.status === 400) {
+  //       var messageError = xhr.responseJSON.errors.message;
+  //
+  //       if (messageError) {
+  //         $(".form-group", $form)
+  //           .addClass("has-error");
+  //         $(".help-block", $form)
+  //             .html(messageError[0])
+  //             .removeClass("hide");
+  //       }
+  //     }
+  //   })
+  //   .on("ajax:complete", function () {
+  //     $("#comment_message", $form)
+  //       .attr("readonly", false)
+  //       .focus();
+  //   });
+  // }
+  //
+  // // Initialize show more comments link.
+  // function initStepCommentsLink($el) {
+  //   $el.find(".btn-more-comments")
+  //   .on("ajax:success", function (e, data) {
+  //     if (data.html) {
+  //       var list = $(this).parents("ul");
+  //       var moreBtn = list.find(".btn-more-comments");
+  //       var listItem = moreBtn.parents('li');
+  //       $(data.html).insertBefore(listItem);
+  //       if (data.results_number < data.per_page) {
+  //         moreBtn.remove();
+  //       } else {
+  //         moreBtn.attr("href", data.more_url);
+  //         moreBtn.trigger("blur");
+  //       }
+  //
+  //       // Reposition dropdown comment options
+  //       scrollCommentOptions(listItem.closest(".content-comments")
+  //       .find(".dropdown-comment"));
+  //     }
+  //   });
+  // }
+  //
+  // function initStepCommentTabAjax() {
+  //   $(".comment-tab-link")
+  //   .on("ajax:before", function (e) {
+  //     var $this = $(this);
+  //     var parentNode = $this.parents("li");
+  //     var targetId = $this.attr("aria-controls");
+  //
+  //     if (parentNode.hasClass("active")) {
+  //       return false;
+  //     }
+  //   })
+  //   .on("ajax:success", function (e, data) {
+  //     if (data.html) {
+  //       var $this = $(this);
+  //       var targetId = $this.attr("aria-controls");
+  //       var target = $("#" + targetId);
+  //       var parentNode = $this.parents("ul").parent();
+  //
+  //       target.html(data.html);
+  //       initStepCommentForm(e, parentNode);
+  //       initStepCommentsLink(parentNode);
+  //
+  //       parentNode.find(".active").removeClass("active");
+  //       $this.parents("li").addClass("active");
+  //       target.addClass("active");
+  //     }
+  //   })
+  //   .on("ajax:error", function(e, xhr, status, error) {
+  //     // TODO
+  //   });
+  // }
 
   function initializeComments(){
     var steps = $(".step-comment");
     $.each(steps, function(){
       var that = $(this);
       var link = that.attr("data-href");
-
+      var parentNode = that.parents("ul").parent();
+      debugger;
       $.ajax({ method: 'GET',
                url: link,
                beforeSend: animateSpinner(that, true) })
         .done(function(data){
+          debugger;
           updateCommentHTML(that, data);
           animateSpinner(that, false);
         })
-        .always(animateSpinner(that, false));
+        .always(function(data){
+          debugger;
+          animateSpinner(that, false)
+        });
     });
   }
 
@@ -24,6 +140,7 @@
              url: link,
              beforeSend: animateSpinner(parent, true) })
       .done(function(data){
+        debugger;
         updateCommentHTML(parent, data);
         animateSpinner(parent, false);
       })
@@ -34,23 +151,33 @@
   function commentFormOnSubmitAction(){
     $(".comment-form")
       .each(function() {
+        debigger;
         bindCommentAjax("#" + $(this).attr("id"));
       });
   }
 
+  // function bindMoreCommentButton(){
+  //   $(".btn-more-comments")
+  //     .each(function(){
+  //       bindCommentAjax($(this));
+  //     });
+  // }
+
   function bindCommentAjax(form){
     $(document)
       .on('ajax:success', function () {
-         refreshComments($(form));
+        debugger;
+        refreshComments($(form));
       })
       .on('ajax:error', function () {
-         refreshComments(form);
+        refreshComments(form);
       });
   }
 
   function updateCommentHTML(parent, data) {
-    $(parent.children()[0]).html(data.html);
     var id = "#" + $(parent.find(".comment-form")).attr("id");
+    debugger;
+    $(parent.children()[0]).html(data.html);
     bindCommentAjax(id);
   }
 
diff --git a/app/models/step.rb b/app/models/step.rb
index 37c75e8b7..bb1d169ef 100644
--- a/app/models/step.rb
+++ b/app/models/step.rb
@@ -92,7 +92,7 @@ class Step < ActiveRecord::Base
     Comment.joins(:step_comment)
     .where(step_comments: {step_id: id})
     .where('comments.id <  ?', last_id)
-    .order(created_at: :desc)
+    .order(created_at: :asc)
     .limit(per_page)
   end
 
diff --git a/app/views/step_comments/_index.html.erb b/app/views/step_comments/_index.html.erb
index 1b8dc1397..70b0b9570 100644
--- a/app/views/step_comments/_index.html.erb
+++ b/app/views/step_comments/_index.html.erb
@@ -1,11 +1,6 @@
 <h5 class="text-center"><%= t('protocols.steps.comments_tab') %></h5>
 <hr>
 <ul class="no-style double-line content-comments">
-  <% if @comments.size == 0 then %>
-    <li class="no-comments"><em><%= t 'general.no_comments' %></em></li>
-  <% else %>
-    <%= render 'step_comments/list.html.erb', comments: @comments %>
-  <% end %>
   <% if @comments.length == @per_page %>
   <li class="comment-more text-center">
     <a class="btn btn-default btn-more-comments" href="<%= more_comments_url %>" data-remote="true">
@@ -13,6 +8,11 @@
     </a>
   </li>
   <% end %>
+  <% if @comments.size == 0 then %>
+    <li class="no-comments"><em><%= t 'general.no_comments' %></em></li>
+  <% else %>
+    <%= render 'step_comments/list.html.erb', comments: @comments %>
+  <% end %>
 </ul>
 <% if can_add_step_comment_in_protocol(@protocol) %>
   <ul class="no-style double-line">

From f48553e807d2c344de2a753cbf6eddce851f6d9b Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Mon, 19 Sep 2016 16:12:07 +0200
Subject: [PATCH 06/12] fixed ajax call

---
 app/assets/javascripts/step_comments.js | 105 ++++++++++++------------
 app/models/experiment.rb                |  19 ++++-
 app/models/step.rb                      |   8 +-
 app/views/steps/_step.html.erb          |   3 +-
 4 files changed, 77 insertions(+), 58 deletions(-)

diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index e0d81aa37..c4b654672 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/app/assets/javascripts/step_comments.js
@@ -57,27 +57,27 @@
   // }
   //
   // // Initialize show more comments link.
-  // function initStepCommentsLink($el) {
-  //   $el.find(".btn-more-comments")
-  //   .on("ajax:success", function (e, data) {
-  //     if (data.html) {
-  //       var list = $(this).parents("ul");
-  //       var moreBtn = list.find(".btn-more-comments");
-  //       var listItem = moreBtn.parents('li');
-  //       $(data.html).insertBefore(listItem);
-  //       if (data.results_number < data.per_page) {
-  //         moreBtn.remove();
-  //       } else {
-  //         moreBtn.attr("href", data.more_url);
-  //         moreBtn.trigger("blur");
-  //       }
-  //
-  //       // Reposition dropdown comment options
-  //       scrollCommentOptions(listItem.closest(".content-comments")
-  //       .find(".dropdown-comment"));
-  //     }
-  //   });
-  // }
+  function initStepCommentsLink($el) {
+    $el.find(".btn-more-comments")
+    .on("ajax:success", function (e, data) {
+      if (data.html) {
+        var list = $(this).parents("ul");
+        var moreBtn = list.find(".btn-more-comments");
+        var listItem = moreBtn.parents('li');
+        $(data.html).insertBefore(listItem);
+        if (data.results_number < data.per_page) {
+          moreBtn.remove();
+        } else {
+          moreBtn.attr("href", data.more_url);
+          moreBtn.trigger("blur");
+        }
+
+        // Reposition dropdown comment options
+        scrollCommentOptions(listItem.closest(".content-comments")
+        .find(".dropdown-comment"));
+      }
+    });
+  }
   //
   // function initStepCommentTabAjax() {
   //   $(".comment-tab-link")
@@ -116,69 +116,70 @@
     $.each(steps, function(){
       var that = $(this);
       var link = that.attr("data-href");
-      var parentNode = that.parents("ul").parent();
-      debugger;
       $.ajax({ method: 'GET',
                url: link,
                beforeSend: animateSpinner(that, true) })
         .done(function(data){
-          debugger;
           updateCommentHTML(that, data);
+          bindCommentButton();
+          initStepCommentsLink(that);
           animateSpinner(that, false);
         })
         .always(function(data){
-          debugger;
-          animateSpinner(that, false)
+          animateSpinner(that, false);
         });
     });
   }
 
-  function refreshComments(child){
+  function refreshComments(child) {
     var parent = child.closest(".step-comment");
     var link = parent.attr("data-href");
     $.ajax({ method: 'GET',
              url: link,
              beforeSend: animateSpinner(parent, true) })
       .done(function(data){
-        debugger;
         updateCommentHTML(parent, data);
+        bindCommentButton();
+        initStepCommentsLink(parent);
         animateSpinner(parent, false);
       })
       .always(animateSpinner(parent, false));
-
   }
 
-  function commentFormOnSubmitAction(){
-    $(".comment-form")
-      .each(function() {
-        debigger;
-        bindCommentAjax("#" + $(this).attr("id"));
-      });
+  function scrollBottom(id) {
+    var list = id.find(".content-comments");
+    if ( list && list.length > 0) {
+      list.scrollTop($(list)[0].scrollHeight);
+    }
   }
 
-  // function bindMoreCommentButton(){
-  //   $(".btn-more-comments")
-  //     .each(function(){
-  //       bindCommentAjax($(this));
-  //     });
-  // }
+  function bindCommentButton(){
+    $.each($(".comment-form"), function() {
+      $(this)
+        .on("submit", function() {
+          bindCommentAjax($(this));
+        });
+    });
+  }
 
-  function bindCommentAjax(form){
+  function bindCommentAjax(id){
     $(document)
-      .on('ajax:success', function () {
-        debugger;
-        refreshComments($(form));
-      })
-      .on('ajax:error', function () {
-        refreshComments(form);
+      .on( 'ajax:success', function() {
+        refreshComments($(id));
       });
   }
 
+
   function updateCommentHTML(parent, data) {
-    var id = "#" + $(parent.find(".comment-form")).attr("id");
-    debugger;
-    $(parent.children()[0]).html(data.html);
-    bindCommentAjax(id);
+    var id;
+    if ( $(parent.find(".comment-form")).attr("id") !== undefined ) {
+      id = "#" + $(parent.find(".comment-form")).attr("id")
+      $(parent.children()[0]).html(data.html);
+    } else {
+      id = "#" + $( $.parseHTML(data.html) ).find(".comment-form").attr("id");
+      $(parent.children()[1]).html(data.html);
+    }
+    scrollBottom(parent);
   }
 
   initializeComments();
diff --git a/app/models/experiment.rb b/app/models/experiment.rb
index 5723fdea1..a90a5a6ac 100644
--- a/app/models/experiment.rb
+++ b/app/models/experiment.rb
@@ -377,6 +377,7 @@ class Experiment < ActiveRecord::Base
     end
 
     save
+    touch(:workflowimg_updated_at)
   end
 
   # Get projects where user is either owner or user in the same organization
@@ -498,8 +499,11 @@ class Experiment < ActiveRecord::Base
         raise ActiveRecord::ActiveRecordError
       end
 
-      my_module.save!
+      my_module.save
     end
+
+    # Generate workflow image for the experiment in which we moved the task
+    generate_workflow_img_for_moved_modules(to_move)
   end
 
   # Move module groups; this method accepts a map where keys
@@ -543,6 +547,19 @@ class Experiment < ActiveRecord::Base
         group.save!
       end
     end
+
+    # Generate workflow image for the experiment in which we moved the workflow
+    generate_workflow_img_for_moved_modules(to_move)
+  end
+
+  # Generates workflow img when the workflow or module is moved
+  # to other experiment
+  def generate_workflow_img_for_moved_modules(to_move)
+    to_move.values.uniq.each do |id|
+      experiment = Experiment.find_by_id(id)
+      next unless experiment
+      experiment.delay.generate_workflow_img
+    end
   end
 
   # Update connections for all modules in this project.
diff --git a/app/models/step.rb b/app/models/step.rb
index bb1d169ef..2b59b1907 100644
--- a/app/models/step.rb
+++ b/app/models/step.rb
@@ -90,10 +90,10 @@ class Step < ActiveRecord::Base
   def last_comments(last_id = 1, per_page = 20)
     last_id = 9999999999999 if last_id <= 1
     Comment.joins(:step_comment)
-    .where(step_comments: {step_id: id})
-    .where('comments.id <  ?', last_id)
-    .order(created_at: :asc)
-    .limit(per_page)
+           .where(step_comments: { step_id: id })
+           .where('comments.id <  ?', last_id)
+           .order(created_at: :asc)
+           .limit(per_page)
   end
 
   def save(current_user=nil)
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index 7396dda17..a4e8c943c 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -129,7 +129,8 @@
           <% 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 id="step-comments-<%= step.id %>">
+              </div>
             </div>
           </div>
           <% end %>

From cd64e035c0c1ab3abcba7db89f6ecc19042226b0 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Tue, 20 Sep 2016 09:50:03 +0200
Subject: [PATCH 07/12] set form validations

---
 app/assets/javascripts/step_comments.js | 34 +++++++++++++++++--------
 app/views/steps/_step.html.erb          |  2 +-
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index c4b654672..90974db89 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/app/assets/javascripts/step_comments.js
@@ -119,31 +119,33 @@
       $.ajax({ method: 'GET',
                url: link,
                beforeSend: animateSpinner(that, true) })
-        .done(function(data){
+        .done(function(data) {
           updateCommentHTML(that, data);
           bindCommentButton();
           initStepCommentsLink(that);
           animateSpinner(that, false);
         })
-        .always(function(data){
+        .always(function(data) {
           animateSpinner(that, false);
         });
     });
   }
 
-  function refreshComments(child) {
+  function refreshComment(child) {
     var parent = child.closest(".step-comment");
     var link = parent.attr("data-href");
     $.ajax({ method: 'GET',
              url: link,
              beforeSend: animateSpinner(parent, true) })
-      .done(function(data){
+      .done(function(data) {
         updateCommentHTML(parent, data);
         bindCommentButton();
         initStepCommentsLink(parent);
         animateSpinner(parent, false);
       })
-      .always(animateSpinner(parent, false));
+      .always(function() {
+        animateSpinner(parent, false);
+      });
   }
 
   function scrollBottom(id) {
@@ -163,9 +165,19 @@
   }
 
   function bindCommentAjax(id){
-    $(document)
-      .on( 'ajax:success', function() {
-        refreshComments($(id));
+    $(id)
+      .on('ajax:success', function() {
+        refreshComment($(id));
+      })
+      .on('ajax:error', function(request, status, error) {
+        var messageError = status.responseJSON.errors.message.toString();
+        if (messageError) {
+          $(request.target)
+            .addClass("has-error");
+          $(".help-block", request.target)
+            .html(messageError)
+            .removeClass("hide");
+        }
       });
   }
 
@@ -173,11 +185,11 @@
   function updateCommentHTML(parent, data) {
     var id;
     if ( $(parent.find(".comment-form")).attr("id") !== undefined ) {
-      id = "#" + $(parent.find(".comment-form")).attr("id")
-      $(parent.children()[0]).html(data.html);
+      id = "#" + $(parent.find(".comment-form")).attr("id");
+      $(parent.find('[data-info="step-comment"]')).html(data.html);
     } else {
       id = "#" + $( $.parseHTML(data.html) ).find(".comment-form").attr("id");
-      $(parent.children()[1]).html(data.html);
+      $(parent.find('[data-info="step-comment"]')).html(data.html);
     }
     scrollBottom(parent);
   }
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index a4e8c943c..ff4e9c7b9 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -129,7 +129,7 @@
           <% 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 id="step-comments-<%= step.id %>" data-info="step-comment">
               </div>
             </div>
           </div>

From 0ca65aeca569b150dca70cd2072efd329c1c32c6 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Tue, 20 Sep 2016 13:31:50 +0200
Subject: [PATCH 08/12] fixed step comment sorting

---
 app/assets/javascripts/step_comments.js     | 12 ++++++++++--
 app/controllers/step_comments_controller.rb |  2 +-
 app/models/step.rb                          | 13 +++++++------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
index 90974db89..a3f5cf240 100644
--- a/app/assets/javascripts/step_comments.js
+++ b/app/assets/javascripts/step_comments.js
@@ -64,7 +64,7 @@
         var list = $(this).parents("ul");
         var moreBtn = list.find(".btn-more-comments");
         var listItem = moreBtn.parents('li');
-        $(data.html).insertBefore(listItem);
+        $(data.html).insertAfter(listItem);
         if (data.results_number < data.per_page) {
           moreBtn.remove();
         } else {
@@ -111,6 +111,10 @@
   //   });
   // }
 
+  /**
+    * Initializes the steps comments
+    *
+    */
   function initializeComments(){
     var steps = $(".step-comment");
     $.each(steps, function(){
@@ -164,6 +168,10 @@
     });
   }
 
+  /**
+    * Listen for ajax POST request and trigger the
+    * refreshComment when the comment is successfully posted
+    */
   function bindCommentAjax(id){
     $(id)
       .on('ajax:success', function() {
@@ -181,7 +189,7 @@
       });
   }
 
-
+  // Updates the comments when new comment is created
   function updateCommentHTML(parent, data) {
     var id;
     if ( $(parent.find(".comment-form")).attr("id") !== undefined ) {
diff --git a/app/controllers/step_comments_controller.rb b/app/controllers/step_comments_controller.rb
index fad1c454d..db22d4753 100644
--- a/app/controllers/step_comments_controller.rb
+++ b/app/controllers/step_comments_controller.rb
@@ -20,7 +20,7 @@ class StepCommentsController < ApplicationController
         if @comments.count > 0
           more_url = url_for(step_step_comments_path(@step,
                                                      format: :json,
-                                                     from: @comments.last.id))
+                                                     from: @comments.first.id))
         end
         render :json => {
           per_page: @per_page,
diff --git a/app/models/step.rb b/app/models/step.rb
index 2b59b1907..28393d221 100644
--- a/app/models/step.rb
+++ b/app/models/step.rb
@@ -88,12 +88,13 @@ class Step < ActiveRecord::Base
   end
 
   def last_comments(last_id = 1, per_page = 20)
-    last_id = 9999999999999 if last_id <= 1
-    Comment.joins(:step_comment)
-           .where(step_comments: { step_id: id })
-           .where('comments.id <  ?', last_id)
-           .order(created_at: :asc)
-           .limit(per_page)
+    last_id = 9999999999 if last_id <= 1
+    comments = Comment.joins(:step_comment)
+                      .where(step_comments: { step_id: id })
+                      .where('comments.id <  ?', last_id)
+                      .order(created_at: :desc)
+                      .limit(per_page)
+    comments.reverse
   end
 
   def save(current_user=nil)

From da86208441fe4b1b70965f23141455f790382bd8 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Tue, 20 Sep 2016 14:13:40 +0200
Subject: [PATCH 09/12] styled step comments

---
 app/assets/stylesheets/themes/scinote.scss  |  1 +
 app/controllers/step_comments_controller.rb | 26 +++++++++------------
 app/views/step_comments/_index.html.erb     |  1 +
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 43dd3c168..39bef0b34 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -946,6 +946,7 @@ ul.content-module-activities {
   .content-comments {
     max-height: 250px;
     overflow: auto;
+    padding: 0 15px;
   }
 }
 
diff --git a/app/controllers/step_comments_controller.rb b/app/controllers/step_comments_controller.rb
index db22d4753..9c68770e3 100644
--- a/app/controllers/step_comments_controller.rb
+++ b/app/controllers/step_comments_controller.rb
@@ -1,8 +1,8 @@
 class StepCommentsController < ApplicationController
   before_action :load_vars
 
-  before_action :check_view_permissions, only: [ :index ]
-  before_action :check_add_permissions, only: [ :new, :create ]
+  before_action :check_view_permissions, only: [:index]
+  before_action :check_add_permissions, only: [:new, :create]
   before_action :check_edit_permissions, only: [:edit, :update]
   before_action :check_destroy_permissions, only: [:destroy]
 
@@ -10,31 +10,27 @@ class StepCommentsController < ApplicationController
     @comments = @step.last_comments(@last_comment_id, @per_page)
 
     respond_to do |format|
-      format.json {
+      format.json do
         # 'index' partial includes header and form for adding new
         # messages. 'list' partial is used for showing more
         # comments.
-        partial = "index.html.erb"
-        partial = "list.html.erb" if @last_comment_id > 0
-        more_url = ""
+        partial = 'index.html.erb'
+        partial = 'list.html.erb' if @last_comment_id > 0
+        more_url = ''
         if @comments.count > 0
           more_url = url_for(step_step_comments_path(@step,
                                                      format: :json,
                                                      from: @comments.first.id))
         end
-        render :json => {
+        render json: {
           per_page: @per_page,
           results_number: @comments.length,
           more_url: more_url,
-          html: render_to_string({
-            partial: partial,
-            locals: {
-              comments: @comments,
-              more_comments_url: more_url
-            }
-          })
+          html: render_to_string(partial: partial,
+                                 locals: { comments: @comments,
+                                           more_comments_url: more_url })
         }
-      }
+      end
     end
   end
 
diff --git a/app/views/step_comments/_index.html.erb b/app/views/step_comments/_index.html.erb
index 70b0b9570..de39b3560 100644
--- a/app/views/step_comments/_index.html.erb
+++ b/app/views/step_comments/_index.html.erb
@@ -1,3 +1,4 @@
+<hr>
 <h5 class="text-center"><%= t('protocols.steps.comments_tab') %></h5>
 <hr>
 <ul class="no-style double-line content-comments">

From 42bbc47f5fb4279dde665d5fd4d108fb78199687 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Tue, 20 Sep 2016 17:06:07 +0200
Subject: [PATCH 10/12] first working version

---
 app/assets/javascripts/my_modules/results.js  | 103 ++++++++++++------
 app/assets/stylesheets/themes/scinote.scss    |   7 ++
 app/controllers/result_comments_controller.rb |  31 +++---
 app/models/result.rb                          |  11 +-
 app/models/step.rb                            |   2 +-
 app/views/my_modules/_result.html.erb         |  16 ++-
 app/views/result_comments/_index.html.erb     |  11 +-
 7 files changed, 115 insertions(+), 66 deletions(-)

diff --git a/app/assets/javascripts/my_modules/results.js b/app/assets/javascripts/my_modules/results.js
index 8853fc3ce..61246ecbf 100644
--- a/app/assets/javascripts/my_modules/results.js
+++ b/app/assets/javascripts/my_modules/results.js
@@ -1,5 +1,4 @@
 //= require comments
-
 function initHandsOnTables(root) {
   root.find("div.hot-table").each(function()  {
     var $container = $(this).find(".step-result-hot-table");
@@ -49,7 +48,7 @@ function initResultCommentForm($el) {
         .find("li.no-comments").remove();
 
       list.parent().find(".content-comments")
-        .prepend("<li class='comment'>" + data.html + "</li>")
+        .append("<li class='comment'>" + data.html + "</li>")
         .scrollTop(0);
       list.parents("ul").find("> li.comment:gt(8)").remove();
       $("#comment_message", $form).val("");
@@ -58,9 +57,7 @@ function initResultCommentForm($el) {
       $(".help-block", $form)
           .html("")
           .addClass("hide");
-      scrollCommentOptions(
-        list.parent().find(".content-comments .dropdown-comment")
-      );
+      scrollBottom($el);
     }
   })
   .on("ajax:error", function (ev, xhr) {
@@ -77,6 +74,7 @@ function initResultCommentForm($el) {
     }
   })
   .on("ajax:complete", function () {
+    scrollBottom($("#comment_message", $form));
     $("#comment_message", $form)
       .attr("readonly", false)
       .focus();
@@ -92,7 +90,7 @@ function initResultCommentsLink($el) {
       var list = $(this).parents("ul");
       var moreBtn = list.find(".btn-more-comments");
       var listItem = moreBtn.parents('li');
-      $(data.html).insertBefore(listItem);
+      $(data.html).insertAfter(listItem);
       if (data.results_number < data.per_page) {
         moreBtn.remove();
       } else {
@@ -106,38 +104,72 @@ function initResultCommentsLink($el) {
   });
 }
 
-function initResultCommentTabAjax() {
-  $(".comment-tab-link")
-  .on("ajax:before", function (e) {
-    var $this = $(this);
-    var parentNode = $this.parents("li");
-    var targetId = $this.attr("aria-controls");
+// function initResultCommentTabAjax(element) {
+//   debugger;
+//   $(element)
+//   .on("ajax:before", function (e) {
+//     debugger;
+//     var $this = $(this);
+//     var parentNode = $this.parents("li");
+//     var targetId = $this.attr("aria-controls");
+//
+//     if (parentNode.hasClass("active")) {
+//       return false;
+//     }
+//   })
+//   .on("ajax:success", function (e, data) {
+//     if (data.html) {
+//       var $this = $(this);
+//       var targetId = $this.attr("aria-controls");
+//       var target = $("#" + targetId);
+//       var parentNode = $this.parents("ul").parent();
+//
+//       target.html(data.html);
+//       initResultCommentForm(parentNode);
+//       initResultCommentsLink(parentNode);
+//
+//       parentNode.find(".active").removeClass("active");
+//       $this.parents("li").addClass("active");
+//       target.addClass("active");
+//     }
+//   })
+//   .on("ajax:error", function(e, xhr, status, error) {
+//     // TODO
+//   });
+// }
 
-    if (parentNode.hasClass("active")) {
-      return false;
-    }
-  })
-  .on("ajax:success", function (e, data) {
-    if (data.html) {
-      var $this = $(this);
-      var targetId = $this.attr("aria-controls");
-      var target = $("#" + targetId);
-      var parentNode = $this.parents("ul").parent();
-
-      target.html(data.html);
-      initResultCommentForm(parentNode);
-      initResultCommentsLink(parentNode);
-
-      parentNode.find(".active").removeClass("active");
-      $this.parents("li").addClass("active");
-      target.addClass("active");
-    }
-  })
-  .on("ajax:error", function(e, xhr, status, error) {
-    // TODO
+function loadCommentsIn() {
+  $.each($(".result-comment"), function() {
+    var that = $(this);
+    var link = that.attr("data-href");
+    $.ajax({ method: 'GET',
+             url: link,
+             beforeSend: animateSpinner(that, true) })
+      .done(function(data) {
+        that.html(data.html);
+        initResultCommentForm(that);
+        initResultCommentsLink(that);
+        scrollBottom(that.find(".content-comments"));
+        animateSpinner(that, false);
+      })
+      .always(function(data) {
+        animateSpinner(that, false);
+      });
   });
 }
 
+function scrollBottom(id) {
+  var list;
+  if ( id.hasClass("content-comments")) {
+    list = id;
+  } else {
+    list = id.find(".content-comments");
+  }
+  if ( list && list.length > 0) {
+    list.scrollTop($(list)[0].scrollHeight);
+  }
+}
+
 function applyCollapseLinkCallBack() {
   $(".result-panel-collapse-link")
     .on("ajax:success", function() {
@@ -183,8 +215,9 @@ function expandResult(result) {
 
 
 initHandsOnTables($(document));
-initResultCommentTabAjax();
+//initResultCommentTabAjax();
 expandAllResults();
+loadCommentsIn();
 initTutorial();
 applyCollapseLinkCallBack();
 
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 39bef0b34..6c3a428d8 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -911,6 +911,10 @@ ul.content-module-activities {
     margin-left: 38px;
   }
 
+  .row {
+    padding: 0 20px;
+  }
+
   .badge-num {
     position: absolute;
 
@@ -1178,6 +1182,9 @@ html.turbolinks-progress-bar::before {
 
 // Comments
 
+.comment-more {
+  margin-left: 15px;
+}
 .dropdown.dropdown-comment {
   display: inline-block;
 
diff --git a/app/controllers/result_comments_controller.rb b/app/controllers/result_comments_controller.rb
index 9ab162fe3..e0b2e8088 100644
--- a/app/controllers/result_comments_controller.rb
+++ b/app/controllers/result_comments_controller.rb
@@ -1,8 +1,8 @@
 class ResultCommentsController < ApplicationController
   before_action :load_vars
 
-  before_action :check_view_permissions, only: [ :index ]
-  before_action :check_add_permissions, only: [ :new, :create ]
+  before_action :check_view_permissions, only: [:index]
+  before_action :check_add_permissions, only: [:new, :create]
   before_action :check_edit_permissions, only: [:edit, :update]
   before_action :check_destroy_permissions, only: [:destroy]
 
@@ -10,31 +10,28 @@ class ResultCommentsController < ApplicationController
     @comments = @result.last_comments(@last_comment_id, @per_page)
 
     respond_to do |format|
-      format.json {
+      format.json do
         # 'index' partial includes header and form for adding new
         # messages. 'list' partial is used for showing more
         # comments.
-        partial = "index.html.erb"
-        partial = "list.html.erb" if @last_comment_id > 0
-        more_url = ""
+        partial = 'index.html.erb'
+        partial = 'list.html.erb' if @last_comment_id > 0
+        more_url = ''
         if @comments.count > 0
           more_url = url_for(result_result_comments_path(@result,
-                                                     format: :json,
-                                                     from: @comments.last.id))
+                                                         format: :json,
+                                                         from: @comments
+                                                                 .first.id))
         end
-        render :json => {
+        render json: {
           per_page: @per_page,
           results_number: @comments.length,
           more_url: more_url,
-          html: render_to_string({
-            partial: partial,
-            locals: {
-              comments: @comments,
-              more_comments_url: more_url
-            }
-          })
+          html: render_to_string(partial: partial,
+                                 locals: { comments: @comments,
+                                           more_comments_url: more_url })
         }
-      }
+      end
     end
   end
 
diff --git a/app/models/result.rb b/app/models/result.rb
index ab60b05db..a940acfd2 100644
--- a/app/models/result.rb
+++ b/app/models/result.rb
@@ -74,11 +74,12 @@ class Result < ActiveRecord::Base
 
   def last_comments(last_id = 1, per_page = 20)
     last_id = 9999999999999 if last_id <= 1
-    Comment.joins(:result_comment)
-    .where(result_comments: {result_id: id})
-    .where('comments.id <  ?', last_id)
-    .order(created_at: :desc)
-    .limit(per_page)
+    comments = Comment.joins(:result_comment)
+                      .where(result_comments: { result_id: id })
+                      .where('comments.id <  ?', last_id)
+                      .order(created_at: :desc)
+                      .limit(per_page)
+    comments.reverse
   end
 
   def is_text
diff --git a/app/models/step.rb b/app/models/step.rb
index 28393d221..f54792177 100644
--- a/app/models/step.rb
+++ b/app/models/step.rb
@@ -88,7 +88,7 @@ class Step < ActiveRecord::Base
   end
 
   def last_comments(last_id = 1, per_page = 20)
-    last_id = 9999999999 if last_id <= 1
+    last_id = 9999999999999 if last_id <= 1
     comments = Comment.joins(:step_comment)
                       .where(step_comments: { step_id: id })
                       .where('comments.id <  ?', last_id)
diff --git a/app/views/my_modules/_result.html.erb b/app/views/my_modules/_result.html.erb
index 1daf0b471..6bb0e7ecb 100644
--- a/app/views/my_modules/_result.html.erb
+++ b/app/views/my_modules/_result.html.erb
@@ -41,7 +41,7 @@
             <a href="#result-info-<%= result.id %>" data-toggle="tab"><span class="glyphicon glyphicon-info-sign"></span>
               <%= t'my_modules.results.info_tab' %></a>
           </li>
-          <% if can_view_result_comments(@my_module) %>
+          <% if false %>
           <li role="presentation">
             <a class="comment-tab-link" href="<%= url_for result_result_comments_path(result_id: result.id, format: :json) %>" aria-controls="result-comments-<%= result.id %>" data-remote="true">
               <span class="glyphicon glyphicon-comment"></span>
@@ -51,9 +51,19 @@
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" role="tabpanel" id="result-info-<%= result.id %>">
-            <%= render partial: 'my_modules/result_user_generated.html.erb', locals: { result: result, markdown: markdown } %>
+            <div class="row">
+              <%= render partial: 'my_modules/result_user_generated.html.erb',
+                         locals: { result: result, markdown: markdown } %>
+            </div>
+            <% if can_view_result_comments(@my_module) %>
+            <div class="row">
+              <div class="result-comment"
+                   role="tabpanel"
+                   id="result-comments-<%= result.id %>"
+                   data-href="<%= result_result_comments_url(result) %>"></div>
+            </div>
+            <% end %>
           </div>
-          <div class="tab-pane" role="tabpanel" id="result-comments-<%= result.id %>"></div>
         </div>
       </div>
     </div>
diff --git a/app/views/result_comments/_index.html.erb b/app/views/result_comments/_index.html.erb
index c10e46e5d..00bf407dd 100644
--- a/app/views/result_comments/_index.html.erb
+++ b/app/views/result_comments/_index.html.erb
@@ -1,11 +1,7 @@
+<hr>
 <h5 class="text-center"><%= t('my_modules.results.comments_tab') %></h5>
 <hr>
 <ul class="no-style double-line content-comments">
-  <% if @comments.size == 0 then %>
-    <li class="no-comments"><em><%= t 'general.no_comments' %></em></li>
-  <% else %>
-    <%= render 'result_comments/list.html.erb', comments: @comments %>
-  <% end %>
   <% if @comments.length == @per_page %>
     <li class="comment-more text-center">
       <a class="btn btn-default btn-more-comments" href="<%= more_comments_url %>" data-remote="true">
@@ -13,6 +9,11 @@
       </a>
     </li>
   <% end %>
+  <% if @comments.size == 0 then %>
+    <li class="no-comments"><em><%= t 'general.no_comments' %></em></li>
+  <% else %>
+    <%= render 'result_comments/list.html.erb', comments: @comments %>
+  <% end %>
 </ul>
 <% if can_add_result_comment_in_module(@my_module) then %>
   <ul class="no-style double-line">

From 9f56df02d2508099cc3577eb61f2552a3557da03 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Tue, 20 Sep 2016 18:53:51 +0200
Subject: [PATCH 11/12] removes comment tab and add comment in the info tab
 [fixes SCI-436]

---
 app/assets/javascripts/my_modules/results.js  | 153 ++-----------
 app/assets/javascripts/step_comments.js       | 206 ------------------
 .../javascripts/step_result_comments.js       | 153 +++++++++++++
 app/views/my_modules/_result.html.erb         |   1 -
 app/views/my_modules/protocols.html.erb       |   2 +-
 app/views/my_modules/results.html.erb         |   1 +
 app/views/result_assets/_edit.html.erb        |   2 +-
 app/views/result_assets/_new.html.erb         |   2 +-
 app/views/result_tables/_edit.html.erb        |   2 +-
 app/views/result_tables/_new.html.erb         |   2 +-
 app/views/result_texts/_edit.html.erb         |   2 +-
 app/views/result_texts/_new.html.erb          |   2 +-
 app/views/steps/_edit.html.erb                |   2 +-
 app/views/steps/_new.html.erb                 |   2 +-
 app/views/steps/_step.html.erb                |   6 +-
 config/initializers/assets.rb                 |   2 +-
 16 files changed, 188 insertions(+), 352 deletions(-)
 delete mode 100644 app/assets/javascripts/step_comments.js
 create mode 100644 app/assets/javascripts/step_result_comments.js

diff --git a/app/assets/javascripts/my_modules/results.js b/app/assets/javascripts/my_modules/results.js
index 61246ecbf..822e71252 100644
--- a/app/assets/javascripts/my_modules/results.js
+++ b/app/assets/javascripts/my_modules/results.js
@@ -29,147 +29,38 @@ function initHandsOnTables(root) {
   });
 }
 
-// Initialize comment form.
-function initResultCommentForm($el) {
+function initResultCommentTabAjax() {
+  $(".comment-tab-link")
+  .on("ajax:before", function (e) {
+    var $this = $(this);
+    var parentNode = $this.parents("li");
+    var targetId = $this.attr("aria-controls");
 
-  var $form = $el.find("ul form");
-
-  $(".help-block", $form).addClass("hide");
-
-  $form.on("ajax:send", function (data) {
-    $("#comment_message", $form).attr("readonly", true);
+    if (parentNode.hasClass("active")) {
+      return false;
+    }
   })
   .on("ajax:success", function (e, data) {
     if (data.html) {
-      var list = $form.parents("ul");
+      var $this = $(this);
+      var targetId = $this.attr("aria-controls");
+      var target = $("#" + targetId);
+      var parentNode = $this.parents("ul").parent();
 
-      // Remove potential "no comments" element
-      list.parent().find(".content-comments")
-        .find("li.no-comments").remove();
+      target.html(data.html);
+      initCommentForm(parentNode);
+      initCommentsLink(parentNode);
 
-      list.parent().find(".content-comments")
-        .append("<li class='comment'>" + data.html + "</li>")
-        .scrollTop(0);
-      list.parents("ul").find("> li.comment:gt(8)").remove();
-      $("#comment_message", $form).val("");
-      $(".form-group", $form)
-        .removeClass("has-error");
-      $(".help-block", $form)
-          .html("")
-          .addClass("hide");
-      scrollBottom($el);
+      parentNode.find(".active").removeClass("active");
+      $this.parents("li").addClass("active");
+      target.addClass("active");
     }
   })
-  .on("ajax:error", function (ev, xhr) {
-    if (xhr.status === 400) {
-      var messageError = xhr.responseJSON.errors.message;
-
-      if (messageError) {
-        $(".form-group", $form)
-          .addClass("has-error");
-        $(".help-block", $form)
-            .html(messageError[0])
-            .removeClass("hide");
-      }
-    }
-  })
-  .on("ajax:complete", function () {
-    scrollBottom($("#comment_message", $form));
-    $("#comment_message", $form)
-      .attr("readonly", false)
-      .focus();
+  .on("ajax:error", function(e, xhr, status, error) {
+    // TODO
   });
 }
 
-// Initialize show more comments link.
-function initResultCommentsLink($el) {
-
-  $el.find(".btn-more-comments")
-  .on("ajax:success", function (e, data) {
-    if (data.html) {
-      var list = $(this).parents("ul");
-      var moreBtn = list.find(".btn-more-comments");
-      var listItem = moreBtn.parents('li');
-      $(data.html).insertAfter(listItem);
-      if (data.results_number < data.per_page) {
-        moreBtn.remove();
-      } else {
-        moreBtn.attr("href", data.more_url);
-        moreBtn.trigger("blur");
-      }
-
-      // Reposition dropdown comment options
-      scrollCommentOptions(listItem.closest(".content-comments").find(".dropdown-comment"));
-    }
-  });
-}
-
-// function initResultCommentTabAjax(element) {
-//   debugger;
-//   $(element)
-//   .on("ajax:before", function (e) {
-//     debugger;
-//     var $this = $(this);
-//     var parentNode = $this.parents("li");
-//     var targetId = $this.attr("aria-controls");
-//
-//     if (parentNode.hasClass("active")) {
-//       return false;
-//     }
-//   })
-//   .on("ajax:success", function (e, data) {
-//     if (data.html) {
-//       var $this = $(this);
-//       var targetId = $this.attr("aria-controls");
-//       var target = $("#" + targetId);
-//       var parentNode = $this.parents("ul").parent();
-//
-//       target.html(data.html);
-//       initResultCommentForm(parentNode);
-//       initResultCommentsLink(parentNode);
-//
-//       parentNode.find(".active").removeClass("active");
-//       $this.parents("li").addClass("active");
-//       target.addClass("active");
-//     }
-//   })
-//   .on("ajax:error", function(e, xhr, status, error) {
-//     // TODO
-//   });
-// }
-
-function loadCommentsIn() {
-  $.each($(".result-comment"), function() {
-    var that = $(this);
-    var link = that.attr("data-href");
-    $.ajax({ method: 'GET',
-             url: link,
-             beforeSend: animateSpinner(that, true) })
-      .done(function(data) {
-        that.html(data.html);
-        initResultCommentForm(that);
-        initResultCommentsLink(that);
-        scrollBottom(that.find(".content-comments"));
-        animateSpinner(that, false);
-      })
-      .always(function(data) {
-        animateSpinner(that, false);
-      });
-  });
-}
-
-function scrollBottom(id) {
-  var list;
-  if ( id.hasClass("content-comments")) {
-    list = id;
-  } else {
-    list = id.find(".content-comments");
-  }
-  if ( list && list.length > 0) {
-    list.scrollTop($(list)[0].scrollHeight);
-  }
-}
-
 function applyCollapseLinkCallBack() {
   $(".result-panel-collapse-link")
     .on("ajax:success", function() {
@@ -215,9 +106,7 @@ function expandResult(result) {
 
 
 initHandsOnTables($(document));
-//initResultCommentTabAjax();
 expandAllResults();
-loadCommentsIn();
 initTutorial();
 applyCollapseLinkCallBack();
 
diff --git a/app/assets/javascripts/step_comments.js b/app/assets/javascripts/step_comments.js
deleted file mode 100644
index a3f5cf240..000000000
--- a/app/assets/javascripts/step_comments.js
+++ /dev/null
@@ -1,206 +0,0 @@
-(function(){
-  "use strict";
-
-  // // Initialize comment form.
-  // function initStepCommentForm(ev, $el) {
-  //   var $form = $el.find("ul form");
-  //
-  //   var $commentInput = $form.find("#comment_message");
-  //
-  //   $(".help-block", $form).addClass("hide");
-  //
-  //   $form
-  //   .on("ajax:send", function (data) {
-  //     $("#comment_message", $form).attr("readonly", true);
-  //   })
-  //   .on("ajax:success", function (e, data) {
-  //     if (data.html) {
-  //       var list = $form.parents("ul");
-  //
-  //       // Remove potential "no comments" element
-  //       list.parent().find(".content-comments")
-  //         .find("li.no-comments").remove();
-  //
-  //       list.parent().find(".content-comments")
-  //         .prepend("<li class='comment'>" + data.html + "</li>")
-  //         .scrollTop(0);
-  //       list.parents("ul").find("> li.comment:gt(8)").remove();
-  //       $("#comment_message", $form).val("");
-  //       $(".form-group", $form)
-  //         .removeClass("has-error");
-  //       $(".help-block", $form)
-  //           .html("")
-  //           .addClass("hide");
-  //       scrollCommentOptions(
-  //         list.parent().find(".content-comments .dropdown-comment")
-  //       );
-  //     }
-  //   })
-  //   .on("ajax:error", function (ev, xhr) {
-  //     if (xhr.status === 400) {
-  //       var messageError = xhr.responseJSON.errors.message;
-  //
-  //       if (messageError) {
-  //         $(".form-group", $form)
-  //           .addClass("has-error");
-  //         $(".help-block", $form)
-  //             .html(messageError[0])
-  //             .removeClass("hide");
-  //       }
-  //     }
-  //   })
-  //   .on("ajax:complete", function () {
-  //     $("#comment_message", $form)
-  //       .attr("readonly", false)
-  //       .focus();
-  //   });
-  // }
-  //
-  // // Initialize show more comments link.
-  function initStepCommentsLink($el) {
-    $el.find(".btn-more-comments")
-    .on("ajax:success", function (e, data) {
-      if (data.html) {
-        var list = $(this).parents("ul");
-        var moreBtn = list.find(".btn-more-comments");
-        var listItem = moreBtn.parents('li');
-        $(data.html).insertAfter(listItem);
-        if (data.results_number < data.per_page) {
-          moreBtn.remove();
-        } else {
-          moreBtn.attr("href", data.more_url);
-          moreBtn.trigger("blur");
-        }
-
-        // Reposition dropdown comment options
-        scrollCommentOptions(listItem.closest(".content-comments")
-        .find(".dropdown-comment"));
-      }
-    });
-  }
-  //
-  // function initStepCommentTabAjax() {
-  //   $(".comment-tab-link")
-  //   .on("ajax:before", function (e) {
-  //     var $this = $(this);
-  //     var parentNode = $this.parents("li");
-  //     var targetId = $this.attr("aria-controls");
-  //
-  //     if (parentNode.hasClass("active")) {
-  //       return false;
-  //     }
-  //   })
-  //   .on("ajax:success", function (e, data) {
-  //     if (data.html) {
-  //       var $this = $(this);
-  //       var targetId = $this.attr("aria-controls");
-  //       var target = $("#" + targetId);
-  //       var parentNode = $this.parents("ul").parent();
-  //
-  //       target.html(data.html);
-  //       initStepCommentForm(e, parentNode);
-  //       initStepCommentsLink(parentNode);
-  //
-  //       parentNode.find(".active").removeClass("active");
-  //       $this.parents("li").addClass("active");
-  //       target.addClass("active");
-  //     }
-  //   })
-  //   .on("ajax:error", function(e, xhr, status, error) {
-  //     // TODO
-  //   });
-  // }
-
-  /**
-    * Initializes the steps comments
-    *
-    */
-  function initializeComments(){
-    var steps = $(".step-comment");
-    $.each(steps, function(){
-      var that = $(this);
-      var link = that.attr("data-href");
-      $.ajax({ method: 'GET',
-               url: link,
-               beforeSend: animateSpinner(that, true) })
-        .done(function(data) {
-          updateCommentHTML(that, data);
-          bindCommentButton();
-          initStepCommentsLink(that);
-          animateSpinner(that, false);
-        })
-        .always(function(data) {
-          animateSpinner(that, false);
-        });
-    });
-  }
-
-  function refreshComment(child) {
-    var parent = child.closest(".step-comment");
-    var link = parent.attr("data-href");
-    $.ajax({ method: 'GET',
-             url: link,
-             beforeSend: animateSpinner(parent, true) })
-      .done(function(data) {
-        updateCommentHTML(parent, data);
-        bindCommentButton();
-        initStepCommentsLink(parent);
-        animateSpinner(parent, false);
-      })
-      .always(function() {
-        animateSpinner(parent, false);
-      });
-  }
-
-  function scrollBottom(id) {
-    var list = id.find(".content-comments");
-    if ( list && list.length > 0) {
-      list.scrollTop($(list)[0].scrollHeight);
-    }
-  }
-
-  function bindCommentButton(){
-    $.each($(".comment-form"), function() {
-      $(this)
-        .on("submit", function() {
-          bindCommentAjax($(this));
-        });
-    });
-  }
-
-  /**
-    * Listen for ajax POST request and trigger the
-    * refreshComment when the comment is successfully posted
-    */
-  function bindCommentAjax(id){
-    $(id)
-      .on('ajax:success', function() {
-        refreshComment($(id));
-      })
-      .on('ajax:error', function(request, status, error) {
-        var messageError = status.responseJSON.errors.message.toString();
-        if (messageError) {
-          $(request.target)
-            .addClass("has-error");
-          $(".help-block", request.target)
-            .html(messageError)
-            .removeClass("hide");
-        }
-      });
-  }
-
-  // Updates the comments when new comment is created
-  function updateCommentHTML(parent, data) {
-    var id;
-    if ( $(parent.find(".comment-form")).attr("id") !== undefined ) {
-      id = "#" + $(parent.find(".comment-form")).attr("id");
-      $(parent.find('[data-info="step-comment"]')).html(data.html);
-    } else {
-      id = "#" + $( $.parseHTML(data.html) ).find(".comment-form").attr("id");
-      $(parent.find('[data-info="step-comment"]')).html(data.html);
-    }
-    scrollBottom(parent);
-  }
-
-  initializeComments();
-})();
diff --git a/app/assets/javascripts/step_result_comments.js b/app/assets/javascripts/step_result_comments.js
new file mode 100644
index 000000000..015110a87
--- /dev/null
+++ b/app/assets/javascripts/step_result_comments.js
@@ -0,0 +1,153 @@
+(function(){
+  "use strict";
+
+  /**
+    * Initializes the comments
+    *
+    */
+  function initializeComments(){
+    var comments;
+    if ( $(".step-comment") && $(".step-comment").length > 0 ) {
+      comments = $(".step-comment");
+    } else if ( $(".result-comment") && $(".result-comment").length > 0 ) {
+      comments = $(".result-comment");
+    }
+    $.each(comments, function(){
+      var that = $(this);
+      var link = that.attr("data-href");
+      $.ajax({ method: 'GET',
+               url: link,
+               beforeSend: animateSpinner(that, true) })
+        .done(function(data) {
+          that.html(data.html);
+          initCommentForm(that);
+          initCommentsLink(that);
+          scrollBottom(that.find(".content-comments"));
+          animateSpinner(that, false);
+        })
+        .always(function(data) {
+          animateSpinner(that, false);
+        });
+    });
+  }
+
+  // scroll to the botttom
+  function scrollBottom(id) {
+    var list;
+    if ( id.hasClass("content-comments")) {
+      list = id;
+    } else {
+      list = id.find(".content-comments");
+    }
+    if ( list && list.length > 0) {
+      list.scrollTop($(list)[0].scrollHeight);
+    }
+  }
+
+  // Initialize show more comments link.
+  function initCommentsLink($el) {
+
+    $el.find(".btn-more-comments")
+    .on("ajax:success", function (e, data) {
+      if (data.html) {
+        var list = $(this).parents("ul");
+        var moreBtn = list.find(".btn-more-comments");
+        var listItem = moreBtn.parents('li');
+        $(data.html).insertAfter(listItem);
+        if (data.results_number < data.per_page) {
+          moreBtn.remove();
+        } else {
+          moreBtn.attr("href", data.more_url);
+          moreBtn.trigger("blur");
+        }
+
+        // Reposition dropdown comment options
+        scrollCommentOptions(listItem.closest(".content-comments").find(".dropdown-comment"));
+      }
+    });
+  }
+
+  // Initialize comment form.
+  function initCommentForm($el) {
+
+    var $form = $el.find("ul form");
+
+    $(".help-block", $form).addClass("hide");
+
+    $form.on("ajax:send", function (data) {
+      $("#comment_message", $form).attr("readonly", true);
+    })
+    .on("ajax:success", function (e, data) {
+      if (data.html) {
+        var list = $form.parents("ul");
+
+        // Remove potential "no comments" element
+        list.parent().find(".content-comments")
+          .find("li.no-comments").remove();
+
+        list.parent().find(".content-comments")
+          .append("<li class='comment'>" + data.html + "</li>")
+          .scrollTop(0);
+        list.parents("ul").find("> li.comment:gt(8)").remove();
+        $("#comment_message", $form).val("");
+        $(".form-group", $form)
+          .removeClass("has-error");
+        $(".help-block", $form)
+            .html("")
+            .addClass("hide");
+        scrollBottom($el);
+      }
+    })
+    .on("ajax:error", function (ev, xhr) {
+      if (xhr.status === 400) {
+        var messageError = xhr.responseJSON.errors.message;
+
+        if (messageError) {
+          $(".form-group", $form)
+            .addClass("has-error");
+          $(".help-block", $form)
+              .html(messageError[0])
+              .removeClass("hide");
+        }
+      }
+    })
+    .on("ajax:complete", function () {
+      scrollBottom($("#comment_message", $form));
+      $("#comment_message", $form)
+        .attr("readonly", false)
+        .focus();
+    });
+  }
+
+  // restore comments after update or when new element is created
+  function bindCommentInitializerToNewElement() {
+    $(document)
+      .ready(function() {
+        if( document.getElementById("steps") !== null ) {
+          $("#steps")
+            .change(function() {
+              $('.step-save')
+                .on('click', function() {
+                  setTimeout(function() {
+                    initializeComments();
+                  }, 500);
+                });
+            });
+        } else if ( document.getElementById("results") !== null ) {
+          $("#results")
+            .change(function() {
+              $('.save-result')
+                .on('click', function() {
+                  setTimeout(function() {
+                    initializeComments();
+                  }, 500);
+                });
+            });
+          }
+    });
+  }
+
+  bindCommentInitializerToNewElement();
+  initializeComments();
+
+})();
diff --git a/app/views/my_modules/_result.html.erb b/app/views/my_modules/_result.html.erb
index 6bb0e7ecb..29da2a114 100644
--- a/app/views/my_modules/_result.html.erb
+++ b/app/views/my_modules/_result.html.erb
@@ -58,7 +58,6 @@
             <% if can_view_result_comments(@my_module) %>
             <div class="row">
               <div class="result-comment"
-                   role="tabpanel"
                    id="result-comments-<%= result.id %>"
                    data-href="<%= result_result_comments_url(result) %>"></div>
             </div>
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index cf95a38ef..d083f2321 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -44,4 +44,4 @@
 
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag("my_modules/protocols") %>
-<%= javascript_include_tag("step_comments") %>
+<%= javascript_include_tag("step_result_comments") %>
diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb
index 07e5e48a6..48cab070c 100644
--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@@ -50,6 +50,7 @@
 <%= javascript_include_tag "handsontable.full.min" %>
 <%= javascript_include_tag("canvas-to-blob.min") %>
 <%= javascript_include_tag("direct-upload") %>
+<%= javascript_include_tag("step_result_comments") %>
 <%= javascript_include_tag "my_modules/results" %>
 <%= javascript_include_tag "results/result_texts" %>
 <%= javascript_include_tag "results/result_tables" %>
diff --git a/app/views/result_assets/_edit.html.erb b/app/views/result_assets/_edit.html.erb
index f6960a6f7..b1bf833fd 100644
--- a/app/views/result_assets/_edit.html.erb
+++ b/app/views/result_assets/_edit.html.erb
@@ -7,7 +7,7 @@
       <%= ff.file_field :file %>
     <% end %>
     <hr>
-    <%= f.submit t("result_assets.edit.update"), class: 'btn btn-primary', onclick: "processResult(event, ResultTypeEnum.FILE, true, #{direct_upload});" %>
+    <%= f.submit t("result_assets.edit.update"), class: 'btn btn-primary save-result', onclick: "processResult(event, ResultTypeEnum.FILE, true, #{direct_upload});" %>
     <button type="button" class="btn btn-default cancel-edit">
       <%= t("general.cancel")%>
     </button>
diff --git a/app/views/result_assets/_new.html.erb b/app/views/result_assets/_new.html.erb
index 370f07d6b..e96a8190f 100644
--- a/app/views/result_assets/_new.html.erb
+++ b/app/views/result_assets/_new.html.erb
@@ -4,7 +4,7 @@
     <%= f.fields_for :asset do |ff| %>
       <%= ff.file_field :file %>
     <% end %>
-    <%= f.submit t("result_assets.new.create"), class: 'btn btn-primary', onclick: "processResult(event, ResultTypeEnum.FILE, false, #{direct_upload});" %>
+    <%= f.submit t("result_assets.new.create"), class: 'btn btn-primary save-result', onclick: "processResult(event, ResultTypeEnum.FILE, false, #{direct_upload});" %>
     <button type="button" class="btn btn-default cancel-new">
       <%= t("general.cancel")%>
     </button>
diff --git a/app/views/result_tables/_edit.html.erb b/app/views/result_tables/_edit.html.erb
index 36545173e..03d3897b0 100644
--- a/app/views/result_tables/_edit.html.erb
+++ b/app/views/result_tables/_edit.html.erb
@@ -9,7 +9,7 @@
 			<% end %>
 		</div>
     <hr>
-		<%= f.submit t("result_tables.edit.update"), class: 'btn btn-primary', onclick: "processResult(event, ResultTypeEnum.TABLE, true);" %>
+		<%= f.submit t("result_tables.edit.update"), class: 'btn btn-primary save-result', onclick: "processResult(event, ResultTypeEnum.TABLE, true);" %>
 		<button type="button" class="btn btn-default cancel-edit">
 			<%= t("general.cancel")%>
 		</button>
diff --git a/app/views/result_tables/_new.html.erb b/app/views/result_tables/_new.html.erb
index 45fc84e8d..60037e93e 100644
--- a/app/views/result_tables/_new.html.erb
+++ b/app/views/result_tables/_new.html.erb
@@ -8,7 +8,7 @@
 				</div>
 			<% end %>
 		</div>
-		<%= f.submit t("result_tables.new.create"), class: 'btn btn-primary', onclick: "processResult(event, ResultTypeEnum.TABLE, false);" %>
+		<%= f.submit t("result_tables.new.create"), class: 'btn btn-primary save-result', onclick: "processResult(event, ResultTypeEnum.TABLE, false);" %>
 		<button type="button" class="btn btn-default cancel-new">
 			<%= t("general.cancel")%>
 		</button>
diff --git a/app/views/result_texts/_edit.html.erb b/app/views/result_texts/_edit.html.erb
index 8c1f48481..f3f08448e 100644
--- a/app/views/result_texts/_edit.html.erb
+++ b/app/views/result_texts/_edit.html.erb
@@ -5,7 +5,7 @@
       <%= ff.text_area :text, style: "margin-top: 10px;" %><br />
     <% end %>
     <hr>
-    <%= f.submit t("result_texts.edit.update"), class: 'btn btn-primary', onclick: "processResult(event, ResultTypeEnum.TEXT, true);" %>
+    <%= f.submit t("result_texts.edit.update"), class: 'btn btn-primary save-result', onclick: "processResult(event, ResultTypeEnum.TEXT, true);" %>
     <button type="button" class="btn btn-default cancel-edit">
       <%= t("general.cancel")%>
     </button>
diff --git a/app/views/result_texts/_new.html.erb b/app/views/result_texts/_new.html.erb
index aec9a9329..c41b89285 100644
--- a/app/views/result_texts/_new.html.erb
+++ b/app/views/result_texts/_new.html.erb
@@ -4,7 +4,7 @@
     <%= f.fields_for :result_text do |ff| %>
       <%= ff.text_area :text, style: "margin-top: 10px;" %><br />
     <% end %>
-    <%= f.submit t("result_texts.new.create"), class: 'btn btn-primary', onclick: "processResult(event, ResultTypeEnum.TEXT, false);" %>
+    <%= f.submit t("result_texts.new.create"), class: 'btn btn-primary save-result', onclick: "processResult(event, ResultTypeEnum.TEXT, false);" %>
     <button type="button" class="btn btn-default cancel-new">
       <%= t("general.cancel")%>
     </button>
diff --git a/app/views/steps/_edit.html.erb b/app/views/steps/_edit.html.erb
index 96a5295b2..e84b24b04 100644
--- a/app/views/steps/_edit.html.erb
+++ b/app/views/steps/_edit.html.erb
@@ -4,7 +4,7 @@
     <hr>
     <%= render partial: "empty_step.html.erb", locals: {step: @step, f: f} %>
     <hr>
-    <%= f.submit t("protocols.steps.edit.edit_step"), class: 'btn btn-primary', onclick: "processStep(event, true, #{direct_upload});" %>
+    <%= f.submit t("protocols.steps.edit.edit_step"), class: 'btn btn-primary step-save', onclick: "processStep(event, true, #{direct_upload});" %>
     <a type="button" data-action="cancel-edit" class="btn btn-default" href="<%= step_path(id: @step, format: :json) %>"  data-remote="true">
       <%= t("general.cancel")%>
     </a>
diff --git a/app/views/steps/_new.html.erb b/app/views/steps/_new.html.erb
index d095a632d..5b88dc305 100644
--- a/app/views/steps/_new.html.erb
+++ b/app/views/steps/_new.html.erb
@@ -4,7 +4,7 @@
     <hr>
     <%= render partial: "empty_step.html.erb", locals: {step: @step, f: f} %>
     <hr>
-    <%= f.submit t("protocols.steps.new.add_step"), class: 'btn btn-primary', onclick: "processStep(event, false, #{direct_upload});" %>
+    <%= f.submit t("protocols.steps.new.add_step"), class: 'btn btn-primary step-save', onclick: "processStep(event, false, #{direct_upload});" %>
     <button type="button" data-action="cancel-new" class="btn btn-default">
       <%= t("general.cancel")%>
     </button>
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index ff4e9c7b9..b360b722b 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -128,9 +128,9 @@
           </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 %>" data-info="step-comment">
-              </div>
+            <div class="step-comment"
+                 id="step-comments-<%= step.id %>"
+                 data-href="<%= url_for step_step_comments_path(step_id: step.id, format: :json) %>">
             </div>
           </div>
           <% end %>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 224a5edc3..ad40df62b 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -59,4 +59,4 @@ Rails.application.config.assets.precompile += %w( assets.js )
 Rails.application.config.assets.precompile += %w( comments.js )
 Rails.application.config.assets.precompile += %w( projects/show.js )
 Rails.application.config.assets.precompile += %w( projects/introdutory_popup.js )
-Rails.application.config.assets.precompile += %w( step_comments.js )
+Rails.application.config.assets.precompile += %w(step_result_comments.js)

From 2bfe8f063633ea75a5a5f99594a71268ca5b41b6 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Wed, 21 Sep 2016 08:16:23 +0200
Subject: [PATCH 12/12] fixing hound

---
 app/assets/javascripts/step_result_comments.js | 18 ++++++++++--------
 app/assets/stylesheets/themes/scinote.scss     |  1 +
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/step_result_comments.js b/app/assets/javascripts/step_result_comments.js
index 015110a87..7b07b4dcd 100644
--- a/app/assets/javascripts/step_result_comments.js
+++ b/app/assets/javascripts/step_result_comments.js
@@ -25,7 +25,7 @@
           scrollBottom(that.find(".content-comments"));
           animateSpinner(that, false);
         })
-        .always(function(data) {
+        .always(function() {
           animateSpinner(that, false);
         });
     });
@@ -52,7 +52,7 @@
       if (data.html) {
         var list = $(this).parents("ul");
         var moreBtn = list.find(".btn-more-comments");
-        var listItem = moreBtn.parents('li');
+        var listItem = moreBtn.parents("li");
         $(data.html).insertAfter(listItem);
         if (data.results_number < data.per_page) {
           moreBtn.remove();
@@ -62,7 +62,9 @@
         }
 
         // Reposition dropdown comment options
-        scrollCommentOptions(listItem.closest(".content-comments").find(".dropdown-comment"));
+        scrollCommentOptions(listItem
+                              .closest(".content-comments")
+                              .find(".dropdown-comment"));
       }
     });
   }
@@ -74,7 +76,7 @@
 
     $(".help-block", $form).addClass("hide");
 
-    $form.on("ajax:send", function (data) {
+    $form.on("ajax:send", function () {
       $("#comment_message", $form).attr("readonly", true);
     })
     .on("ajax:success", function (e, data) {
@@ -126,8 +128,8 @@
         if( document.getElementById("steps") !== null ) {
           $("#steps")
             .change(function() {
-              $('.step-save')
-                .on('click', function() {
+              $(".step-save")
+                .on("click", function() {
                   setTimeout(function() {
                     initializeComments();
                   }, 500);
@@ -136,8 +138,8 @@
         } else if ( document.getElementById("results") !== null ) {
           $("#results")
             .change(function() {
-              $('.save-result')
-                .on('click', function() {
+              $(".save-result")
+                .on("click", function() {
                   setTimeout(function() {
                     initializeComments();
                   }, 500);
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 6c3a428d8..ccc724392 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1185,6 +1185,7 @@ html.turbolinks-progress-bar::before {
 .comment-more {
   margin-left: 15px;
 }
+
 .dropdown.dropdown-comment {
   display: inline-block;