Add edit/delete result comment functionality

Lessons learned during this fix:
Don't use dependant: :destroy on both ends of association
between 2 ActiveRecords, or you will run into stack overflow.

app/assets/javascripts/my_modules/results.js

@@ -1,42 +1,4 @@
-function results_comment_edit(id) {
-  document.getElementById('edit_comment_'+id).type='text';
-  $('#span_comment_'+id).hide();
-  return false;
-}
-
-function results_update_comment(id) {
-  if (document.getElementById('edit_comment_'+id).type=='text') {
-    var txt = document.getElementById('edit_comment_'+id).value;
-    $.ajax({
-        type:   "POST",
-        url:    '/projects/update_comment_results',
-        dataType:   'json',
-        data:     {id: id, msg: txt},
-        success:  function (data) {
-          document.getElementById('edit_comment_'+id).type='hidden';
-          var txt = document.getElementById('edit_comment_'+id).value;
-          $('#span_comment_'+id).text(txt);
-          $('#span_comment_'+id).show();
-      }
-    });
-  }
-}
-
-function results_comment_delete(id) {
-  if (confirm('Are you sure you want to delete this comment?')) {
-    $.ajax({
-        type:   "POST",
-        url:    '/projects/delete_comment_results',
-        dataType:   'json',
-        data:     {id: id},
-        success:  function (data) {
-          $('.content-comments').find('#'+id).remove();  
-      }
-    });
-  }
-
-  return false;
-}
+//= require comments
 
 function initHandsOnTables(root) {
   root.find("div.hot-table").each(function()  {
@@ -81,15 +43,13 @@ function initResultCommentForm($el) {
   .on("ajax:success", function (e, data) {
     if (data.html) {
       var list = $form.parents("ul");
-      var s1 = data.html
-      var id = s1.substring(s1.lastIndexOf("delete(")+7,s1.lastIndexOf(")'"))
 
       // Remove potential "no comments" element
       list.parent().find(".content-comments")
         .find("li.no-comments").remove();
 
       list.parent().find(".content-comments")
-        .prepend("<li class='comment' id='"+id+"'>" + data.html + "</li>")
+        .prepend("<li class='comment'>" + data.html + "</li>")
         .scrollTop(0);
       list.parents("ul").find("> li.comment:gt(8)").remove();
       $("#comment_message", $form).val("");
@@ -98,6 +58,9 @@ function initResultCommentForm($el) {
       $(".help-block", $form)
           .html("")
           .addClass("hide");
+      scrollCommentOptions(
+        list.parent().find(".content-comments .dropdown-comment")
+      );
     }
   })
   .on("ajax:error", function (ev, xhr) {
@@ -131,10 +94,13 @@ function initResultCommentsLink($el) {
       var listItem = moreBtn.parents('li');
       $(data.html).insertBefore(listItem);
       if (data.results_number < data.per_page) {
-	moreBtn.remove();
+        moreBtn.remove();
       } else {
-	moreBtn.attr("href", data.more_url);
+        moreBtn.attr("href", data.more_url);
       }
+
+      // Reposition dropdown comment options
+      scrollCommentOptions(listItem.closest(".content-comments").find(".dropdown-comment"));
     }
   });
 }
@@ -228,6 +194,10 @@ expandAllResults();
 initTutorial();
 applyCollapseLinkCallBack();
 
+initCommentOptions("ul.content-comments");
+initEditComments(".panel .tab-content");
+initDeleteComments(".panel .tab-content");
+
 $(function () {
   $("#results-collapse-btn").click(function () {
     $('.result .panel-collapse').collapse('hide');

app/controllers/result_comments_controller.rb

@@ -3,6 +3,8 @@ class ResultCommentsController < ApplicationController
 
   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]
 
   def index
     @comments = @result.last_comments(@last_comment_id, @per_page)
@@ -54,7 +56,7 @@ class ResultCommentsController < ApplicationController
         Activity.create(
           type_of: :add_comment_to_result,
           user: current_user,
-          project: @result.my_module.project,
+          project: @result.my_module.experiment.project,
           my_module: @result.my_module,
           message: t(
             "activities.add_comment_to_result",
@@ -91,6 +93,47 @@ class ResultCommentsController < ApplicationController
     end
   end
 
+  def edit
+    @update_url =
+      result_result_comment_path(@result, @comment, format: :json)
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: '/comments/edit.html.erb'
+          )
+        }
+      end
+    end
+  end
+
+  def update
+    @comment.message = comment_params[:message]
+    respond_to do |format|
+      format.json do
+        if @comment.save
+          render json: {}, status: :ok
+        else
+          render json: { errors: @comment.errors.to_hash(true) },
+                 status: :unprocessable_entity
+        end
+      end
+    end
+  end
+
+  def destroy
+    respond_to do |format|
+      format.json do
+        if @comment.destroy
+          render json: {}, status: :ok
+        else
+          render json: { message: I18n.t('comments.delete_error') },
+                 status: :unprocessable_entity
+        end
+      end
+    end
+  end
+
   private
 
   def load_vars
@@ -116,6 +159,19 @@ class ResultCommentsController < ApplicationController
     end
   end
 
+  def check_edit_permissions
+    @comment = Comment.find_by_id(params[:id])
+    render_403 unless @comment.present? &&
+                      can_edit_result_comment_in_module(@comment)
+  end
+
+  def check_destroy_permissions
+    @comment = Comment.find_by_id(params[:id])
+    render_403 unless @comment.present? &&
+                      can_delete_result_comment_in_module(@comment)
+  end
+
+
   def comment_params
     params.require(:comment).permit(:message)
   end

app/helpers/permission_helper.rb

@@ -931,14 +931,13 @@ module PermissionHelper
   end
 
   def can_edit_step_comment_in_protocol(comment)
+    return false if comment.step_comment.blank?
+
     protocol = comment.step_comment.step.protocol
     if protocol.in_module?
-      comment.step_comment.present? &&
-        (
-          comment.user == current_user ||
-          is_owner_of_project(
-            protocol.my_module.experiment.project
-          )
+      comment.user == current_user ||
+        is_owner_of_project(
+          protocol.my_module.experiment.project
         )
     else
       false
@@ -946,14 +945,13 @@ module PermissionHelper
   end
 
   def can_delete_step_comment_in_protocol(comment)
+    return false if comment.step_comment.blank?
+
     protocol = comment.step_comment.step.protocol
     if protocol.in_module?
-      comment.step_comment.present? &&
-        (
-          comment.user == current_user ||
-          is_owner_of_project(
-            protocol.my_module.experiment.project
-          )
+      comment.user == current_user ||
+        is_owner_of_project(
+          protocol.my_module.experiment.project
         )
     else
       false

app/models/result_comment.rb

@@ -4,6 +4,5 @@ class ResultComment < ActiveRecord::Base
 
   belongs_to :result, inverse_of: :result_comments
   belongs_to :comment,
-    inverse_of: :result_comment,
-    dependent: :destroy
+    inverse_of: :result_comment
 end

app/views/result_comments/_comment.html.erb

@@ -1,12 +1,40 @@
-<strong><%=t "my_modules.results.comment_title", user: comment.user.full_name, time: l(comment.created_at, format: :time) %></strong>
-<span class="input-group">
-  <input type="hidden" class="form-control" id="edit_comment_<%= comment.id %>" value="<%= comment.message %>" onkeydown="if (event.keyCode==13) results_update_comment(<%= comment.id %>)" >
-  <span id="span_comment_<%= comment.id %>"><%= comment.message %></span>
-  <div class="input-group-btn">
-    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>
-      <ul class="dropdown-menu pull-right">
-        <li><a href="#" onclick='return results_comment_edit(<%= comment.id %>)'>Edit</a></li>
-        <li><a href="#" onclick='return results_comment_delete(<%= comment.id %>)'>Delete</a></li>
+<div>
+  <strong>
+    <%=t "my_modules.results.comment_title", user: comment.user.full_name, time: l(comment.created_at, format: :time) %>
+  </strong>
+  <% if can_edit_result_comment_in_module(comment) || can_delete_result_comment_in_module(comment) %>
+    <div class="dropdown dropdown-comment">
+      <a href="#"
+         class="dropdown-toggle"
+         data-role="comment-options"
+         type="button"
+         id="comment-<%= comment.id %>-dropdown"
+         data-toggle="dropdown"
+         aria-haspopup="true"
+         aria-expanded="true">
+        <span class="caret"></span>
+      </a>
+      <ul class="dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
+        <li class="dropdown-header"><%= I18n.t('comments.options_dropdown.header') %></li>
+        <li>
+          <a href="#"
+             data-action="edit-comment"
+             data-url="<%= edit_result_result_comment_path(comment.result_comment.result, comment, format: :json) %>">
+            <%= t('comments.options_dropdown.edit') %>
+          </a>
+          </li>
+        <li>
+          <a href="#"
+             data-action="delete-comment"
+             data-url="<%= result_result_comment_path(comment.result_comment.result, comment, format: :json) %>"
+             data-confirm-message="<%= t('comments.delete_confirm') %>">
+            <%= t('comments.options_dropdown.delete') %>
+          </a>
+        </li>
       </ul>
     </div>
-</span>
+  <% end %>
+</div>
+<div data-role="comment-message-container">
+  <p data-role="comment-message"><%= comment.message %></p>
+</div>

app/views/result_comments/_index.html.erb

@@ -7,7 +7,7 @@
     <%= render 'result_comments/list.html.erb', comments: @comments %>
   <% end %>
   <% if @comments.length == @per_page %>
-    <li class="text-center">
+    <li class="comment-more text-center">
       <a class="btn btn-default btn-more-comments" href="<%= more_comments_url %>" data-remote="true">
         <%=t "general.more_comments" %>
       </a>

app/views/result_comments/_list.html.erb

@@ -2,11 +2,14 @@
 <% current_day = DateTime.current.strftime('%j').to_i %>
 
 <% comments.each do |comment| %>
-  <li class="comment" id="<%= comment.id %>" >
   <% comment_day = comment.created_at.strftime('%j').to_i %>
   <% if comment_day < current_day and comment_day < day %>
     <% day = comment.created_at.strftime('%j').to_i %>
-    <p class="text-center"><%= comment.created_at.strftime('%d.%m.%Y') %></p>
+    <li class="comment-date-separator">
+      <p class="text-center"><%= comment.created_at.strftime('%d.%m.%Y') %></p>
+    </li>
   <% end %>
-  <%= render 'result_comments/comment.html.erb', comment: comment %></li>
+  <li class="comment">
+    <%= render 'result_comments/comment.html.erb', comment: comment %>
+  </li>
 <% end %>