Adding status color to backlog

app/coffee/modules/backlog/main.coffee

@@ -67,6 +67,10 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin)
             for p in @scope.points
                 @scope.pointsById[p.id] = p
 
+            @scope.usStatusById = {}
+            for s in project.us_statuses
+                @scope.usStatusById[s.id] = s
+
             @scope.statusList = _.sortBy(project.us_statuses, "id")
             return project
 
@@ -524,11 +528,68 @@ UsPointsDirective = ($repo) ->
     return {link: link}
 
 
+#############################################################################
+## User story status directive
+#############################################################################
+
+UsStatusDirective = ($repo) ->
+    selectionTemplate = _.template("""
+      <ul class="popover pop-status">
+          <% _.forEach(statuses, function(status) { %>
+          <li>
+              <a href="" class="status" title="<%- status.name %>" data-status-id="<%- status.id %>">
+                  <%- status.name %>
+              </a>
+          </li>
+          <% }); %>
+      </ul>
+    """)
+
+    updateUsStatus = ($el, us, usStatusById) ->
+        $el.find(".us-status").text(usStatusById[us.status].name).css('color', usStatusById[us.status].color)
+
+    link = ($scope, $el, $attrs) ->
+        $ctrl = $el.controller()
+        us = $scope.$eval($attrs.tgUsStatus)
+        $el.find(".us-status").text(us.status)
+
+        taiga.bindOnce $scope, "project", (project) ->
+            $el.append(selectionTemplate({ 'statuses':  project.us_statuses }))
+            updateUsStatus($el, us, $scope.usStatusById)
+
+        $el.on "click", ".us-status", (event) ->
+            event.preventDefault()
+            event.stopPropagation()
+            $el.find(".pop-status").show()
+
+            body = angular.element("body")
+            body.one "click", (event) ->
+                $el.find(".popover").hide()
+
+        $el.on "click", ".status", (event) ->
+            event.preventDefault()
+            event.stopPropagation()
+            target = angular.element(event.currentTarget)
+            us.status = target.data("status-id")
+            $el.find(".pop-status").hide()
+            updateUsStatus($el, us, $scope.usStatusById)
+
+            $scope.$apply () ->
+                $repo.save(us).then ->
+                    $ctrl.loadProjectStats()
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+    return {link: link}
+
+
 module = angular.module("taigaBacklog")
 module.directive("tgBacklog", ["$tgRepo", BacklogDirective])
 module.directive("tgBacklogSprint", ["$tgRepo", BacklogSprintDirective])
 module.directive("tgUsPoints", ["$tgRepo", UsPointsDirective])
 module.directive("tgUsRolePointsSelector", ["$rootScope", UsRolePointsSelectorDirective])
+module.directive("tgUsStatus", ["$tgRepo", UsStatusDirective])
 
 module.controller("BacklogController", [
     "$scope",

app/partials/views/components/backlog-row.jade

@@ -9,15 +9,8 @@ div.row.us-item-row(ng-repeat="us in visibleUserstories track by us.id")
         div.user-story-tags
             span.tag(ng-repeat="tag in us.tags") {{ tag }}
 
-    div.status.width-2
-       a(href="", title="Status Name") Status Name
-       ul.popover.pop-status
-           li
-               a(href="", title="Status 1") Status 1
-           li
-               a(href="", title="Status 2") Status 2
-           li
-               a(href="", title="Status 3") Status 3
+    div.status.width-2(tg-us-status="us")
+       a.us-status(href="", title="Status Name")
 
     div.points(tg-us-points="us")
         a.us-points(href="", title="Points") 0