From 17fb22b9dfa29b37d8def4882ee606c699e67e00 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Thu, 31 Aug 2017 17:06:40 +0200
Subject: [PATCH] Add basic edit button functionality

---
 .../stylesheets/request-for-comments.css.scss |  2 +-
 app/views/request_for_comments/show.html.erb  | 49 ++++++++++++++-----
 config/locales/de.yml                         |  1 +
 config/locales/en.yml                         |  1 +
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index 5c1d9227..e7ae7806 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -58,10 +58,10 @@
   }
 
   .comment-editor {
+    display: none;
     width: 100%;
     height: auto;
     background-color: inherit;
-    border-style: hidden;
   }
 
   .comment-actions {
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index c064695f..e8d91b1d 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -184,7 +184,7 @@ also, all settings from the rails model needed for the editor configuration in t
       if (index !== 0) {
         htmlContent += '<div class="comment-divider"></div>'
       }
-      htmlContent += '<div class="comment">';
+      htmlContent += '<div class="comment" data-comment-id=' + comment.id + '>';
       htmlContent += '<div class="comment-header">' +
         '<div class="comment-username">' + preprocess(comment.username) + '</div>' +
         '<div class="comment-date">' + comment.date + '</div>';
@@ -196,11 +196,11 @@ also, all settings from the rails model needed for the editor configuration in t
       }
       htmlContent += '</div>' +
           '<div class="comment-content">' + commentText + '</div>' +
-          '<textarea class="hidden comment-editor">' + commentText + '</textarea>';
+          '<textarea class="comment-editor">' + commentText + '</textarea>';
       if (comment.editable) {
         htmlContent += '<div class="comment-actions">' +
-            '<button class="action-edit btn btn-xs btn-warning" data-comment-id=' + comment.id + '><%= t('shared.edit') %></button>' +
-            '<button class="action-delete btn btn-xs btn-danger" data-comment-id=' + comment.id + '><%= t('shared.destroy') %></button>' +
+            '<button class="action-edit btn btn-xs btn-warning"><%= t('shared.edit') %></button>' +
+            '<button class="action-delete btn btn-xs btn-danger"><%= t('shared.destroy') %></button>' +
           '</div>';
       }
       htmlContent += '</div>';
@@ -302,16 +302,43 @@ also, all settings from the rails model needed for the editor configuration in t
       otherComments.show();
       var container = otherComments.find('.container');
       container.html(htmlContent);
+
       var deleteButtons = container.find('.action-delete');
-      deleteButtons.each(function(index, button) {
-        $(button).on('click', function (event) {
-          var commentId = $(event.target).data('comment-id');
-          deleteComment(commentId, editor, fileid, function () {
-            var parent = $(button).parent().parent();
-            parent.html('<div class="comment-removed"><%= t('comments.deleted') %></div>');
-          });
+      deleteButtons.on('click', function (event) {
+        var button = $(event.target);
+        var parent = $(button).parent().parent();
+        var commentId = parent.data('comment-id');
+
+        deleteComment(commentId, editor, fileid, function () {
+          parent.html('<div class="comment-removed"><%= t('comments.deleted') %></div>');
         });
       });
+
+      var editButtons = container.find('.action-edit');
+      editButtons.on('click', function (event) {
+        var button = $(event.target);
+        var parent = $(button).parent().parent();
+        var commentId = parent.data('comment-id');
+        var currentlyEditing = button.data('editing');
+
+        var deleteButton = parent.find('.action-delete');
+        var commentContent = parent.find('.comment-content');
+        var commentEditor = parent.find('textarea.comment-editor');
+
+        if (currentlyEditing) {
+          button.text('<%= t('shared.edit') %>');
+          button.data('editing', false);
+          deleteButton.show();
+          commentContent.show();
+          commentEditor.hide();
+        } else {
+          button.text('<%= t('comments.save_update') %>');
+          button.data('editing', true);
+          deleteButton.hide();
+          commentContent.hide();
+          commentEditor.show();
+        }
+      });
     } else {
       otherComments.hide();
     }
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 295941a6..82bd67b0 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -589,4 +589,5 @@ de:
     working_time: "Geschätze Bearbeitungszeit für diese Aufgabe:"
   comments:
     deleted: "Gelöscht"
+    save_update: "Speichern"
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 50a15db4..27fee7c7 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -610,3 +610,4 @@ en:
     working_time: "Estimated time working on this exercise:"
   comments:
     deleted: "Deleted"
+    save_update: "Save"