Basic comments integration

app/coffee/modules/issues/detail.coffee

@@ -93,6 +93,20 @@ class IssueDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
                       .then(=> @.loadIssue())
                       .then(=> @.loadHistory())
 
+    getUserFullName: (userId) ->
+        return @scope.usersById[userId]?.full_name_display
+
+    getUserAvatar: (userId) ->
+        return @scope.usersById[userId]?.photo
+
+    buildChangesText: (comment) ->
+        size = Object.keys(comment.diff).length
+        #TODO: i18n
+        if size == 1
+            return "Made #{size} change"
+
+        return "Made #{size} changes"
+
     block: ->
         @rootscope.$broadcast("block", @scope.issue)
 
@@ -479,3 +493,22 @@ IssueStatusDirective = () ->
     return {link:link, require:"ngModel"}
 
 module.directive("tgIssueStatus", IssueStatusDirective)
+
+#############################################################################
+## Comment directive
+#############################################################################
+
+CommentDirective = () ->
+    link = ($scope, $el, $attrs, $model) ->
+        $el.on "click", ".activity-title", (event) ->
+            event.preventDefault()
+            $el.find(".activity-inner").toggle()
+            $el.find(".activity-inner").toggleClass("active")
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+    return {link:link}
+
+
+module.directive("tgComment", CommentDirective)

app/partials/views/modules/comment-activity.jade

@@ -1,15 +1,13 @@
 div.us-activity
     a.activity-title(href="", title="Show activity")
-        span made {{ comment.diff }} changes
+        span(tg-bo-html="ctrl.buildChangesText(comment)")
         span.icon.icon-arrow-up
-    - for(var y = 0; y < 2; y++)
-        div.activity-inner
-            div.activity-changed
-                span US status
-            div.activity-fromto
-                p
-                    strong from <br />
-                    Este es el título que tenía la historia
-                p
-                    strong to <br />
-                    Este es el título que tenía la historia modificado
+
+    div.activity-inner(ng-repeat="(key, change) in comment.diff")
+        div.activity-changed
+            span(tg-bo-html="key")
+        div.activity-fromto
+            p
+                strong from <br /> {{ change[0] }}
+            p
+                strong to <br /> {{ change[1] }}

app/partials/views/modules/comments.jade

@@ -3,16 +3,16 @@ section.us-comments
         textarea(placeholder="Write here a new commet")
         a.button.button-green(href="", title="Comment") Comment
     div.comment-list
-        div.comment-single(ng-repeat="comment in comments")
+        div.comment-single(tg-comment, ng-repeat="comment in comments")
             div.comment-user
-                a.avatar(href="", title="User preferences")
-                    img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+                a.avatar(href="", tg-bo-title="ctrl.getUserFullName(comment.user.pk)")
+                    img(tg-bo-src="ctrl.getUserAvatar(comment.user.pk)", tg-bo-alt="ctrl.getUserFullName(comment.user.pk)")
             div.comment-content
-                a.username(href="", title="User name") User Name
+                a.username(href="TODO", tg-bo-title="ctrl.getUserFullName(comment.user.pk)" tg-bo-html="ctrl.getUserFullName(comment.user.pk)")
                 //- includes module activity
                 include comment-activity
                 p.comment {{ comment.comment }}
-                p.date 15 junio 2014 15:30h
+                p.date {{ comment.created_at | date:'yyyy-MM-dd HH:mm' }}
                 a.delete-comment.icon.icon-delete(href="", title="delete comment")
 
          //a.more-comments(href="", title="show more comments")