Nested comment

app/client/common/comment.html

@@ -0,0 +1,52 @@
+<template name="comment">
+
+
+{{#with comment}}
+    <li class="comment"> 
+      <div class="editable" data-field="body" data-plain="true" data-content="{{body}}">
+        <span class="user">
+          <img src="{{avatarUrl user_id}}" height="18">
+          <a href="#">{{username user_id}}</a>
+        </span>
+
+        <p class="body">{{nl2br body}}</p>
+        <div class="comment_actions">
+          <span class=""><a href="#" class="reply">reply</a></span>
+          <span class=""><a href="#" class="edit_trigger">edit</a></span>
+          <span class=""><a href="#" class="delete_comment">delete</a></span>
+        </div>
+
+
+
+        {{#each attachmentsForComment _id}}
+        <div class="attachment">
+          {{#if fileIsImage file}}
+          <img src="/data/{{file}}">
+          {{else}}
+          <img src="{{fileIconPath file}}"> <a href="/data/{{file}}">{{file}}</a>
+          {{/if}}
+        </div>
+        {{/each}}
+
+
+        <form class="reply comment" name="comment">
+          <div class="form-group">
+            <textarea name="comment_body" class="form-control" placeholder="Write a comment."></textarea>
+          </div>
+          <div class="form-group text-right buttons">
+            <button class="ct btn reply btn-sm">Comment</button>
+            <button class="ct btn cancel_reply btn-sm">&times;</button>
+          </div>
+        </form>
+
+      </div>
+
+      {{#each childComments _id}}
+      <ul class="comments">
+        {{> comment comment=.}}
+      </ul>
+      {{/each}}
+    </li>
+{{/with}}
+
+</template>

app/client/common/comment.js

@@ -0,0 +1,47 @@
+Template.comment.helpers({
+  'childComments': function(id){
+    return Cento.Comments.find({parent_id: id});
+  }
+
+});
+Template.comment.events({
+
+  'click a.reply': function(e){
+    var $wrap = $(e.target).closest('.comment');
+    var $f = $wrap.find('form.reply:eq(0)');
+    $f.show();
+    $f.addClass('focus');
+    return false;
+  },
+  'click button.cancel_reply': function(e){
+    var $f = $(e.target).closest('form');
+    $f.hide();
+    $f.addClass('focus');
+    $f[0].reset();
+    return false;
+  },
+
+  'click button.reply': function(e){
+    var $f = $(e.target).closest('form');
+    var body = $f.find('textarea').val();
+
+    var parent = this;
+    var data = {body: body, parent_item_id: parent.parent_item_id, parent_id: parent._id,  created:new Date(), user_id: Meteor.userId()};
+    Cento.Comments.insert(data);
+    Cento.WorkItems.update({_id: parent.parent_item_id}, {$inc: {comments_count: 1}});
+
+
+    $f[0].reset();
+    $f.hide();
+    return false;
+
+  },
+  'click .delete_comment': function(e, tpl){
+    var cid = this._id;
+    Cento.Comments.remove({_id:cid});
+    console.log("comment deleted : ", cid, pid);
+
+    return false;
+  },
+
+});

app/client/common/modal_comment.html

@@ -23,33 +23,8 @@
       </div>
     </form>
     <ul class="comments list-unstyled">
-      {{#each comments}} 
-      <li class="comment"> 
-      <div class="editable" data-field="body" data-plain="true" data-content="{{body}}">
-        <span class="user">
-          <img src="{{avatarUrl user_id}}" height="18">
-          <a href="#">{{username user_id}}</a>
-        </span>
-
-        <p class="body">{{nl2br body}}</p>
-        <div class="comment_actions">
-          <span class=""><a href="#" class="edit_trigger">edit</a></span>
-          <span class=""><a href="#" class="delete_comment">delete</a></span>
-        </div>
-
-
-
-        {{#each attachmentsForComment _id}}
-        <div class="attachment">
-          {{#if fileIsImage file}}
-          <img src="/data/{{file}}">
-          {{else}}
-          <img src="{{fileIconPath file}}"> <a href="/data/{{file}}">{{file}}</a>
-          {{/if}}
-        </div>
-        {{/each}}
-      </div>
-      </li>
+      {{#each commentsForItem _id}} 
+         {{> comment comment=. depth=123}}
 
       {{/each}} 
     </ul>

app/client/common/modal_comment.js

@@ -4,6 +4,9 @@ Template.modal_comment.helpers({
   },
   'commentFiles': function(){
     return Session.get('currentCommentFiles');
+  },
+  'commentsForItem': function(id){
+    return Cento.Comments.find({parent_item_id: id, parent_id: {$exists: false}});
   }
 
 });
@@ -61,13 +64,15 @@ Template.modal_comment.events({
 
 
     if(this.type != null && this.type != ''){
-      var cid = Random.id();
-      Cento.WorkItems.update({_id: id},
-          {$inc: {comments_count: 1}, $push: {comments:{_id: cid, body: txt, 'created':new Date(), user_id: Meteor.userId()}}});
+
+      var data = {body: txt, parent_type: 'work_item', parent_item_id: id,  created:new Date(), user_id: Meteor.userId()};
+      var newComment = Cento.Comments.insert(data);
+      Cento.WorkItems.update({_id: id}, {$inc: {comments_count: 1}});
+
       attachments.forEach(function(a){
         var data = {
           work_item_id: id,
-          comment_id: cid,
+          comment_id: newComment._id,
           file: a,
           created: new Date(),
           user_id: Meteor.userId()
@@ -80,23 +85,15 @@ Template.modal_comment.events({
 
 
     }else{
-      Cento.Artifacts.update({_id: id},
-          {$push: {comments:{_id: Random.id(), body: txt, 'created':new Date(), user_id: Meteor.userId()}}});
+      var data = {body: txt, parent_type: 'artifact', parent_item_id: id,  created:new Date(), user_id: Meteor.userId()};
+      var newComment = Cento.Comments.insert(data);
     }
-    Cento.createAction(Cento.ActionTypes.COMMENT_ON_USERNEEDS, id, {body: txt});
+    // Cento.createAction(Cento.ActionTypes.COMMENT_ON_USERNEEDS, id, {body: txt});
     f[0].reset();
     Session.set('currentCommentFiles', null);
     return false;
   },
 
-  'click .delete_comment': function(e, tpl){
-    var pid = tpl.data._id;
-    var cid = this._id;
-    Cento.WorkItems.update({_id:pid}, {$pull:{comments:{_id: cid}}});
-    console.log("comment deleted : ", cid, pid);
-
-    return false;
-  },
   'done .editable': function(e){
     var $editable = $(e.target);
     var $f = $editable.prev('form[name=edit]');

app/client/styles/global.less

@@ -893,3 +893,106 @@ form.ct {
   }
 
 }
+
+
+
+
+/* comments */
+.comment_wrap {
+  margin-top: 10px;
+
+  form {
+
+  }
+
+  form.comment {
+    textarea {
+      height: 30px;
+      overflow-y: hidden;
+      -webkit-transition: height ease-in-out 85ms;
+
+    }
+    .buttons {
+      display: none;
+
+    }
+
+    &.focus {
+      textarea {
+        height: 90px;
+
+      }
+      .buttons {
+        display: block;
+
+      }
+
+    }
+
+  }
+  .files_to_upload {
+    font-size: 12px;
+
+  }
+  .buttons {
+    a, button {
+      display: inline-block;
+      margin-left: 10px;
+
+    }
+    a {
+      font-size: 12px;
+      color: @blue-color;
+    }
+
+  }
+}
+.comments {
+  position: relative;
+  list-style-type: none;
+
+
+  .comments {
+    background-color: @row-alt-bg-color;
+    padding: 0;
+    margin-left: 20px;
+  }
+  img {
+    max-width: 400px;
+  }
+  .comment {
+
+    form.reply {
+      display: none;
+
+    }
+
+    .attachment {
+      margin-bottom: 10px;
+
+    }
+    padding: 10px 5px;
+
+    /* &:nth-child(odd) { */
+      /* background-color: @row-alt-bg-color; */
+    /* } */
+    font-size: 12px;
+    span {
+      display: block;
+    }
+    span.user a {
+      color: @blue-color;
+    }
+    p.body {
+      color: @gray-color;
+      padding: 15px 5px;
+    }
+    .comment_actions { 
+      text-align: right;
+      span {
+        display: inline;
+      }
+    }
+
+  }
+}

app/client/styles/modal.less

@@ -88,92 +88,6 @@
     }
   }
 
-  .comment_wrap {
-    margin-top: 10px;
-
-    form {
-
-    }
-  }
-  .comment_wrap {
-    form.comment {
-      textarea {
-        height: 30px;
-        overflow-y: hidden;
-        -webkit-transition: height ease-in-out 85ms;
-
-      }
-      .buttons {
-        display: none;
-
-      }
-
-      &.focus {
-        textarea {
-          height: 90px;
-
-        }
-        .buttons {
-          display: block;
-
-        }
-
-      }
-
-    }
-    .files_to_upload {
-      font-size: 12px;
-
-    }
-    .buttons {
-      a, button {
-        display: inline-block;
-        margin-left: 10px;
-
-      }
-      a {
-        font-size: 12px;
-        color: @blue-color;
-      }
-
-    }
-  }
-  .comments {
-    margin-top: 20px;
-    position: relative;
-    img {
-      max-width: 400px;
-    }
-    .comment {
-
-      .attachment {
-        margin-bottom: 10px;
-
-      }
-      padding: 5px;
-      &:nth-child(odd) {
-      background-color: @row-alt-bg-color;
-      }
-      font-size: 12px;
-      span {
-        display: block;
-      }
-      span.user a {
-        color: @blue-color;
-      }
-      p.body {
-        color: @gray-color;
-        padding: 15px 5px;
-      }
-      .comment_actions { 
-        text-align: right;
-        span {
-          display: inline;
-        }
-      }
-
-    }
-  }
 
 }