Add edit project comments functionality

app/assets/javascripts/comments.js

@@ -15,7 +15,7 @@ function scrollCommentOptions(selector) {
   });
 }
 
-function initDeleteComment(parent) {
+function initDeleteComments(parent) {
   $(parent).on("click", "[data-action=delete-comment]", function(e) {
     var $this = $(this);
     if (confirm($this.attr("data-confirm-message"))) {
@@ -23,7 +23,7 @@ function initDeleteComment(parent) {
         url: $this.attr("data-url"),
         type: "DELETE",
         dataType: "json",
-        success: function (data) {
+        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)
@@ -38,11 +38,88 @@ function initDeleteComment(parent) {
 
           scrollCommentOptions($(parent).find(".dropdown-comment"));
         },
-        error: function (data) {
+        error: function(data) {
           // Display alert
           alert(data.responseJSON.message);
         }
       });
     }
   });
+}
+
+function initEditComments(parent) {
+  $(parent).on("click", "[data-action=edit-comment]", function(e) {
+    var $this = $(this);
+    $.ajax({
+        url: $this.attr("data-url"),
+        type: "GET",
+        dataType: "json",
+        success: function(data) {
+          var commentEl = $this.closest(".comment");
+          var container = commentEl.find("[data-role=comment-message-container]");
+          var oldMessage = container.find("[data-role=comment-message]");
+          var optionsBtn = commentEl.find("[data-role=comment-options]");
+
+          // Hide old message, append new HTML
+          oldMessage.hide();
+          optionsBtn.hide();
+          container.append(data.html);
+
+          var form = container.find("[data-role=edit-comment-message-form]");
+          var input = form.find("input[data-role=message-input]");
+          var submitBtn = form.find("[data-action=save]");
+          var cancelBtn = form.find("[data-action=cancel]");
+
+          input.focus();
+
+          form
+          .on("ajax:send", function() {
+            input.attr("readonly", true);
+          })
+          .on("ajax:success", function(e, data) {
+            var newMessage = input.val();
+            oldMessage.html(newMessage);
+
+            form.off("ajax:send ajax:success ajax:error ajax:complete");
+            submitBtn.off("click");
+            cancelBtn.off("click");
+            form.remove();
+            oldMessage.show();
+            optionsBtn.show();
+          })
+          .on("ajax:error", function(ev, xhr) {
+            if (xhr.status === 422) {
+              var messageError = xhr.responseJSON.errors.message;
+              if (messageError) {
+                $(".form-group", form)
+                .addClass("has-error");
+                $(".help-block", form)
+                .html(messageError[0])
+                .removeClass("hide")
+                .after(" |");
+              }
+            }
+          })
+          .on("ajax:complete", function() {
+            input.attr("readonly", false).focus();
+          });
+
+          submitBtn.on("click", function() {
+            form.submit();
+          });
+
+          cancelBtn.on("click", function() {
+            form.off("ajax:send ajax:success ajax:error ajax:complete");
+            submitBtn.off("click");
+            cancelBtn.off("click");
+            form.remove();
+            oldMessage.show();
+            optionsBtn.show();
+          });
+        },
+        error: function(data) {
+          // TODO
+        }
+      });
+  });
 }

app/assets/javascripts/projects/index.js

@@ -356,7 +356,8 @@
     initEditProjectModal();
     initManageUsersModal();
     initCommentOptions("ul.content-comments");
-    initDeleteComment(".panel-project .tab-content");
+    initEditComments(".panel-project .tab-content");
+    initDeleteComments(".panel-project .tab-content");
 
     // initialize project tab remote loading
     $(".panel-project .panel-footer [role=tab]")

app/assets/stylesheets/themes/scinote.scss

@@ -1190,3 +1190,8 @@ ul.dropdown-menu.dropdown-menu-fixed {
   }
 }
 
+form.edit-comment-form {
+  span.help-block {
+    display: inline;
+  }
+}

app/controllers/project_comments_controller.rb

@@ -79,14 +79,12 @@ class ProjectCommentsController < ApplicationController
   end
 
   def edit
+    @update_url = project_project_comment_path(@project, @comment, format: :json)
     respond_to do |format|
       format.json do
         render json: {
           html: render_to_string(
-            partial: 'edit.html.erb',
-            locals: {
-              comment: @comment
-            }
+            partial: '/comments/edit.html.erb'
           )
         }
       end
@@ -100,7 +98,8 @@ class ProjectCommentsController < ApplicationController
         if @comment.save
           render json: {}, status: :ok
         else
-          render json: @comment.errors, status: :unprocessable_entity
+          render json: { errors: @comment.errors.to_hash(true) },
+                 status: :unprocessable_entity
         end
       end
     end

app/views/comments/_edit.html.erb

@@ -0,0 +1,14 @@
+<%= bootstrap_form_for(@comment, url: @update_url, remote: true, html: { method: :put, class: 'edit-comment-form' }, data: { role: 'edit-comment-message-form' }) do |f| %>
+  <div class="form-group">
+    <div class="input-group">
+      <%= f.text_field :message, autofocus: true, hide_label: true, data: { role: 'message-input' }, value: @comment.message %>
+      <span class="input-group-btn">
+        <a class="btn btn-default" data-action="save">
+          <span class="glyphicon glyphicon-ok"></span>
+        </a>
+      </span>
+    </div>
+    <span class="help-block hide"></span>
+    <a data-action="cancel" href="#"><%= t('general.cancel') %></a>
+  </div>
+<% end %>

app/views/project_comments/_comment.html.erb

@@ -34,4 +34,6 @@
   <% end %>
 </div>
 <strong><%= comment.user.full_name %>:</strong>
-<p><span><%= comment.message %></p>
+<div data-role="comment-message-container">
+  <p data-role="comment-message"><%= comment.message %></p>
+</div>