Make a refactor of taskboard-task

app/coffee/modules/taskboard/main.coffee

@@ -222,3 +222,56 @@ TaskboardRowSizeFixer = ->
     return {link: link}
 
 module.directive("tgTaskboardRowSizeFixer", TaskboardRowSizeFixer)
+
+#############################################################################
+## Taskboard User Directive
+#############################################################################
+
+TaskboardUserDirective = ($log) ->
+    template = _.template("""
+    <figure class="avatar">
+        <a href="#" title="<%- name %>">
+            <img src="<%= imgurl %>" alt="<%- name %>">
+            <figcaption><%- name %></figcaption>
+        </a>
+    </figure>
+    """)
+
+    uniqueId = _.uniqueId("user_photo")
+
+    link = ($scope, $el, $attrs) ->
+        if not $attrs.model?
+            return $log.error "TaskboardUserDirective: no model attr is defined"
+
+        wtid = $scope.$watch $attrs.model, (v) ->
+            if not $scope.usersById?
+                $log.error "TaskboardUserDirective requires userById set in scope."
+                wtid()
+            else
+                user = $scope.usersById[v]
+                render(user)
+
+        render = (user) ->
+            if user is undefined
+                ctx = {name: "Unassigned", imgurl: "/images/unnamed.png"}
+            else
+                ctx = {name: user.full_name_display, imgurl: user.photo}
+
+            html = template(ctx)
+            $el.off(".#{uniqueId}")
+            $el.html(html)
+
+            $el.on "click.#{uniqueId}", "figure.avatar > a", (event) ->
+                if not $attrs.click?
+                    return $log.error "TaskboardUserDirective: No click attr is defined."
+
+                $scope.$apply ->
+                    $scope.$eval($attrs.click)
+
+    return {
+        link: link
+        restrict: "AE"
+    }
+
+
+module.directive("tgTaskboardUserAvatar", ["$log", TaskboardUserDirective])

app/partials/views/components/taskboard-task.jade

@@ -1,13 +1,10 @@
 div.taskboard-tagline
-    a.taskboard-tag(ng-repeat="tag in task.tags" href="" title="{{ tag }}")
+    a.taskboard-tag(ng-repeat="tag in task.tags", href="", tg-bo-title="tag")
 div.taskboard-task-inner
-    figure.avatar
-        a(ng-click="ctrl.editTaskAssignedTo(task)", href="", title="See {{ usersById[task.assigned_to].username }}'s profile")
-            img.avatar(src="{{ usersById[task.assigned_to].photo }}",
-                       alt="{{ usersById[task.assigned_to].username }}'s avatar")
-            figcaption {{ usersById[task.assigned_to].full_name_display }}
+    tg-taskboard-user-avatar(model="task.assigned_to", click="ctrl.editTaskAssignedTo(task)")
     p.taskboard-text
-        span.task-num(ng-bind="task.ref")
-        a.task-name(tg-nav="project-tasks-detail:project=project.slug,ref=task.ref" href="", title="See task details", ng-bind="task.subject")
+        span.task-num(tg-bo-ref="task.ref")
+        a.task-name(href="", title="See task details", tg-bind-html="task.subject",
+                    tg-nav="project-tasks-detail:project=project.slug,ref=task.ref")
     a.icon.icon-edit(href="", title="Edit task", ng-click="ctrl.editTask(task)")
     a.icon.icon-drag-h(href="", title="Drag&Drop")