Add in the UI for comment editing (#1102)

* Right now everything returns false in mustache so no one will see it... until those identifiers match true in dev * Using some different colors... those are handled by the pre-fab `btn-` classes. * Utilize the *bootstrap* `hidden-xs` class to only show *font-awesome* in small viewports * ~~One warning added of possible duplicate code added... when more solid on this it will get removed... one way or the other.~~ removed entire code content within `WARNING` blocks in b9e37b4 * Approximated the `editLib` usage between a combination of the other two existing... this could probably use some tuning. * Added a field to the Comment model to handle `edited` based off naming in other models **NOTES** Quoting here from the mastah *(@sizzlemctwizzle)*... > I'd be much more happy to do the backend changes for #601 if I knew the frontend UI was just waiting for me. It's awaiting... I'd like to see how this goes backend wise... if it doesn't eventually somewhere down the line I'll probably move from synchronous to asynchronous to get this flowing better... very lengthy process. <img src="https://cloud.githubusercontent.com/assets/114709/25701290/fc326056-3088-11e7-8f32-42c4edd5ac12.png" alt="logged-out" title="Click to enlarge" width="109" height="86" /> <img src="https://cloud.githubusercontent.com/assets/114709/25701299/07443bae-3089-11e7-9cd5-51a888fe2387.png" alt="logged-in" title="Click to enlarge" width="109" height="86" /> <img src="https://cloud.githubusercontent.com/assets/114709/25701307/0ec79920-3089-11e7-9f7f-20fb833134c9.png" alt="logged-in-forceshow" title="Click to enlarge" width="109" height="86" /> <img src="https://cloud.githubusercontent.com/assets/114709/25701593/4ee900ce-308a-11e7-941e-a241c2dfbc4b.png" alt="logged-in-forceshow-fluid" title="Click to enlarge" width="38" height="86" /> Auto-merge for UI approved changes and bug fix/symmetry... need rewiring in the backend.
OpenUserJS · May 4, 2017 · e48997e · e48997e
1 parent 703df10
commit e48997e
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 22 deletions.
diff --git a/controllers/discussion.js b/controllers/discussion.js
@@ -20,6 +20,10 @@ var Discussion = require('../models/discussion').Discussion;
 //--- Library inclusions
 // var discussionLib = require('../libs/discussion');
 
+var editLib = require('../libs/edit');
+var flagLib = require('../libs/flag');
+var removeLib = require('../libs/remove');
+
 var modelParser = require('../libs/modelParser');
 var modelQuery = require('../libs/modelQuery');
 

diff --git a/controllers/script.js b/controllers/script.js
@@ -30,8 +30,8 @@ var getFlaggedListForContent = require('./flag').getFlaggedListForContent;
 var flagLib = require('../libs/flag');
 var removeLib = require('../libs/remove');
 
-var modelQuery = require('../libs/modelQuery');
 var modelParser = require('../libs/modelParser');
+var modelQuery = require('../libs/modelQuery');
 
 var decode = require('../libs/helpers').decode;
 var countTask = require('../libs/tasks').countTask;
@@ -246,12 +246,6 @@ var getScriptPageTasks = function (aOptions) {
 
   // Setup the flagging UI
   tasks.push(function (aCallback) {
-    // Can't flag when not logged in or when user owns the script.
-    if (!authedUser || aOptions.isOwner) {
-      aCallback();
-      return;
-    }
-
     flagLib.flaggable(Script, script, authedUser,
       function (aCanFlag, aAuthor, aFlag) {
         if (aFlag) {
@@ -267,12 +261,6 @@ var getScriptPageTasks = function (aOptions) {
 
   // Set up the removal UI
   tasks.push(function (aCallback) {
-    // Can't remove when not logged in or when user owns the script.
-    if (!authedUser || aOptions.isOwner) {
-      aCallback();
-      return;
-    }
-
     removeLib.removeable(Script, script, authedUser, function (aCanRemove, aAuthor) {
       aOptions.canRemove = aCanRemove;
       aOptions.flags = (script.flags ? script.flags.critical : null) || 0;

diff --git a/controllers/user.js b/controllers/user.js
@@ -73,11 +73,6 @@ var setupUserModerationUITask = function (aOptions) {
   aOptions.flags = '\u2013';
 
   return (function (aCallback) {
-    // Can't flag when not logged in or when is authedUser.
-    if (!authedUser || aOptions.isYou) {
-      aCallback();
-      return;
-    }
     flagLib.flaggable(User, user, authedUser, function (aCanFlag, aAuthor, aFlag) {
       if (aFlag) {
         aOptions.flagged = true;

diff --git a/libs/edit.js b/libs/edit.js
@@ -0,0 +1,35 @@
+'use strict';
+
+// Define some pseudo module globals
+var isPro = require('../libs/debug').isPro;
+var isDev = require('../libs/debug').isDev;
+var isDbg = require('../libs/debug').isDbg;
+
+//
+var User = require('../models/user').User;
+
+// Determine whether content can be edited by a user.
+function editable(aModel, aContent, aUser, aCallback) {
+  // The user must be logged in
+  if (!aUser) {
+    return aCallback(false);
+  }
+
+  // You can't edit yourself #233
+  if (aModel.modelName === 'User') {
+    return aCallback(false);
+  }
+
+  User.findOne({
+    _id: aContent._authorId
+  }, function (aErr, aAuthor) {
+    // Content without an author shouldn't exist
+    if (aErr || !aAuthor) {
+      return aCallback(false);
+    }
+
+    // You can only edit content by yourself
+    aCallback(aAuthor._id == aUser._id);
+  });
+}
+exports.editable = editable;
diff --git a/libs/modelParser.js b/libs/modelParser.js
@@ -670,6 +670,9 @@ var parseComment = function (aComment) {
 
   // Dates
   parseDateProperty(comment, 'created');
+  parseDateProperty(comment, 'updated');
+
+  comment.isUpdated = comment.updated ? comment.created !== comment.updated : null;
 
   return comment;
 };

diff --git a/models/comment.js b/models/comment.js
@@ -15,6 +15,7 @@ var commentSchema = new Schema({
   author: String,
   created: Date,
   rating: Number,
+  updated: Date,
 
   // Moderation
   creator: Boolean,

diff --git a/views/includes/comment.html b/views/includes/comment.html
@@ -14,6 +14,9 @@
             </span>
           </div>
           <div class="post-info pull-right">
+            {{#isUpdated}}
+              <time datetime="{{updatedISOFormat}}" title="{{updated}}">edited &bull; </time>
+            {{/isUpdated}}
             <a href="#comment-{{id}}" class="post-date">
               <time datetime="{{createdISOFormat}}" title="{{created}}">{{createdHumanized}}</time>
             </a>
@@ -26,10 +29,34 @@
           {{^isUserCommentListPage}}
           <section class="post-menu-area">
             <nav class="post-controls text-right">
-              <div class="pull-right" {{^authedUser}} data-toggle="tooltip" data-placement="left" title="You need to be logged in to post!" {{/authedUser}}>
-                <button class="btn btn-sm btn-info btn-comment-reply{{^authedUser}} disabled{{/authedUser}}"{{#authedUser}} title="Begin composing a reply to this post."{{/authedUser}}>
-                  <i class="fa fa-fw fa-reply"></i> Reply
-                </button>
+              <div class="pull-right">
+                {{#authedUser}}
+                  <div class="btn-group" role="administrate">
+                    {{#canRemove}}
+                      <button type="button" class="btn btn-sm btn-danger btn-comment-remove disabled" title="Remove this reply.">
+                        <i class="fa fa-ban"></i><span class="hidden-xs"> Remove</span>
+                      </button>
+                    {{/canRemove}}
+                    {{#canFlag}}
+                      <button type="button" class="btn btn-sm btn-warning btn-comment-flag disabled" title="Flag this reply.">
+                        <i class="fa fa-flag-o"></i><span class="hidden-xs"> Flag</span>
+                      </button>
+                    {{/canFlag}}
+                  </div>
+                  {{#canEdit}}
+                    <div class="btn-group" role="owner">
+                      <button type="button" class="btn btn-sm btn-danger btn-comment-delete disabled" title="Delete this reply.">
+                        <i class="fa fa-remove"></i><span class="hidden-xs"> Delete</span>
+                      </button>
+                      <button type="button" class="btn btn-sm btn-default btn-comment-edit disabled" title="Begin editing this reply.">
+                        <i class="fa fa-edit"></i><span class="hidden-xs"> Edit</span>
+                      </button>
+                    </div>
+                  {{/canEdit}}
+                  <button class="btn btn-sm btn-info btn-comment-reply" title="Begin composing a reply to this post.">
+                    <i class="fa fa-reply"></i><span class="hidden-xs"> Reply</span>
+                  </button>
+                {{/authedUser}}
               </div>
              </nav>
           </section>