Add delete project comment functionality

This commit also removes the old code from @bberic.

app/assets/javascripts/comments.js

@@ -0,0 +1,48 @@
+function initCommentOptions(scrollableContainer) {
+  document.addEventListener('scroll', function (event) {
+    var $target = $(event.target);
+
+    if ($target.length && $target.is(scrollableContainer)) {
+      scrollCommentOptions($target.find(".dropdown-comment"));
+    }
+  }, true);
+}
+
+function scrollCommentOptions(selector) {
+  _.each(selector, function(el) {
+    var $el = $(el);
+    $el.find(".dropdown-menu-fixed").css("top", $el.offset().top + 20);
+  });
+}
+
+function initDeleteComment(parent) {
+  $(parent).on("click", "[data-action=delete-comment]", function(e) {
+    var $this = $(this);
+    if (confirm($this.attr("data-confirm-message"))) {
+      $.ajax({
+        url: $this.attr("data-url"),
+        type: "DELETE",
+        dataType: "json",
+        success: function (data) {
+          // There are 3 possible actions:
+          // - (A) comment is the last comment in project (not handled differently)
+          // - (B) comment is the last comment inside specific date (remove the date separator)
+          // - (C) comment is a usual comment
+          var commentEl = $this.closest(".comment");
+          var otherComments = commentEl.siblings(".comment");
+          if (commentEl.prev(".comment-date-separator").length > 0 && commentEl.next(".comment").length == 0) {
+            // Case B
+            commentEl.prev(".comment-date-separator").remove();
+          }
+          commentEl.remove();
+
+          scrollCommentOptions($(parent).find(".dropdown-comment"));
+        },
+        error: function (data) {
+          // Display alert
+          alert(data.responseJSON.message);
+        }
+      });
+    }
+  });
+}

app/assets/javascripts/projects/index.js

@@ -7,46 +7,7 @@
 // - refresh project users tab after manage user modal is closed
 // - refactor view handling using library, ex. backbone.js
 
-function project_comment_edit(id) {
-  document.getElementById('edit_comment_'+id).type='text';
-  $('#span_comment_'+id).hide();
-  return false;
-}
-
-function project_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_projects',
-        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 project_comment_delete(id) {
-  if (confirm('Are you sure you want to delete this comment?')) {
-    $.ajax({
-        type:   "POST",
-        url:    '/projects/delete_comment_projects',
-        dataType:   'json',
-        data:     {id: id},
-        success:  function (data) {
-          $('.content-comments').find('#'+id).remove();  
-      }
-    });
-  }
-
-  return false;
-}
-
+//= require comments
 (function () {
 
   var newProjectModal = null;
@@ -255,15 +216,13 @@ function project_comment_delete(id) {
     .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("");
@@ -309,6 +268,9 @@ function project_comment_delete(id) {
           } else {
             moreBtn.attr("href", data.more_url);
           }
+
+          // Reposition dropdown comment options
+          scrollCommentOptions(listItem.closest(".content-comments").find(".dropdown-comment"));
         }
       });
   }
@@ -374,7 +336,6 @@ function project_comment_delete(id) {
     initUserRoleForms();
   }
 
-
   function init() {
 
     newProjectModal = $("#new-project-modal");
@@ -394,6 +355,8 @@ function project_comment_delete(id) {
     initNewProjectModal();
     initEditProjectModal();
     initManageUsersModal();
+    initCommentOptions("ul.content-comments");
+    initDeleteComment(".panel-project .tab-content");
 
     // initialize project tab remote loading
     $(".panel-project .panel-footer [role=tab]")

app/assets/stylesheets/colors.scss

@@ -6,6 +6,7 @@ $color-theme-dark: #6d6e71;
 // Grayscales
 $color-white: #fff;
 $color-alabaster: #fcfcfc;
+$color-wild-sand: #f5f5f5;
 $color-concrete: #f2f2f2;
 $color-gallery: #EEE;
 $color-alto: #d2d2d2;

app/assets/stylesheets/themes/scinote.scss

@@ -1168,4 +1168,25 @@ html.turbolinks-progress-bar::before {
   height: 20px;
   display: inline-block;
   margin-right: 5px;
-}
+}
+
+/* Comments */
+
+.dropdown.dropdown-comment {
+  display: inline-block;
+
+  a[data-role="comment-options"] {
+    color: $color-emperor;
+  }
+}
+
+ul.dropdown-menu.dropdown-menu-fixed {
+  position: fixed;
+  left: auto;
+  top: auto;
+
+  & > li:not(.dropdown-header):hover {
+    background-color: $color-wild-sand;
+  }
+}
+

app/controllers/project_comments_controller.rb

@@ -2,6 +2,8 @@ class ProjectCommentsController < ApplicationController
   before_action :load_vars
   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 = @project.last_comments(@last_comment_id, @per_page)
@@ -76,6 +78,47 @@ class ProjectCommentsController < ApplicationController
     end
   end
 
+  def edit
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: 'edit.html.erb',
+            locals: {
+              comment: @comment
+            }
+          )
+        }
+      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: @comment.errors, 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
@@ -100,6 +143,16 @@ class ProjectCommentsController < ApplicationController
     end
   end
 
+  def check_edit_permissions
+    @comment = Comment.find_by_id(params[:id])
+    render_403 unless @comment.present? && can_edit_project_comment(@comment)
+  end
+
+  def check_destroy_permissions
+    @comment = Comment.find_by_id(params[:id])
+    render_403 unless @comment.present? && can_delete_project_comment(@comment)
+  end
+
   def comment_params
     params.require(:comment).permit(:message)
   end

app/views/project_comments/_comment.html.erb

@@ -1,13 +1,37 @@
-<span class="text-muted pull-right"><%= l comment.created_at, format: '%H:%M' %></span>
-<strong><%= comment.user.full_name %>:</strong>
-<span class="input-group">
-  <input type="hidden" class="form-control" id="edit_comment_<%= comment.id %>" value="<%= comment.message %>" onkeydown="if (event.keyCode==13) project_update_comment(<%= comment.id %>)" >
-  <span id="span_comment_<%= comment.id %>" style="display:block;width:200px;word-wrap:break-word;"><%= 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 project_comment_edit(<%= comment.id %>)'>Edit</a></li>
-        <li><a href="#" onclick='return project_comment_delete(<%= comment.id %>)'>Delete</a></li>
+<div class="pull-right">
+  <span class="text-muted"><%= l comment.created_at, format: '%H:%M' %></span>
+  <% if can_edit_project_comment(comment) || can_delete_project_comment(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_project_project_comment_path(comment.project_comment.project, comment, format: :json) %>">
+            <%= t('comments.options_dropdown.edit') %>
+          </a>
+          </li>
+        <li>
+          <a href="#"
+             data-action="delete-comment"
+             data-url="<%= project_project_comment_path(comment.project_comment.project, comment, format: :json) %>"
+             data-confirm-message="<%= t('comments.delete_confirm') %>">
+            <%= t('comments.options_dropdown.delete') %>
+          </a>
+        </li>
       </ul>
     </div>
-</span>
+  <% end %>
+</div>
+<strong><%= comment.user.full_name %>:</strong>
+<p><span><%= comment.message %></p>

app/views/project_comments/_index.html.erb

@@ -7,7 +7,7 @@
   <%= render 'project_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'projects.index.more_comments' %></a>
   </li>

app/views/project_comments/_list.html.erb

@@ -3,14 +3,17 @@
   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 then 
+    if comment_day < current_day and comment_day < day then
     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 'project_comments/comment.html.erb', comment: comment %></li>
+  <li class="comment">
+    <%= render 'project_comments/comment.html.erb', comment: comment %>
+  </li>
 <% end %>

config/initializers/assets.rb

@@ -56,4 +56,5 @@ Rails.application.config.assets.precompile += %w( Sortable.min.js )
 Rails.application.config.assets.precompile += %w( reports_pdf.css )
 Rails.application.config.assets.precompile += %w( jszip.min.js )
 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 )

config/locales/en.yml

@@ -139,6 +139,14 @@ en:
         step: "Step comment"
         result: "Result comment"
 
+  comments:
+    options_dropdown:
+      header: "Comment options"
+      edit: "Edit"
+      delete: "Delete"
+    delete_confirm: "Are you sure you wish to delete this comment?"
+    delete_error: "Error occured while deleting comment."
+
   projects:
     index:
       head_title: "Home"