Repainting tags on add us

app/coffee/modules/backlog/main.coffee

@@ -87,6 +87,10 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F
             @scope.stats.completedPercentage = "#{completedPercentage}%"
             return stats
 
+    refreshTagsColors: ->
+        return @rs.projects.tagsColors(@scope.projectId).then (tags_colors) =>
+            @scope.project.tags_colors = tags_colors
+
     loadSprints: ->
         return @rs.sprints.list(@scope.projectId).then (sprints) =>
             @scope.sprints = sprints
@@ -103,19 +107,20 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F
 
         @rs.userstories.storeQueryParams(@scope.projectId, @scope.httpParams)
 
-        return @rs.userstories.listUnassigned(@scope.projectId, @scope.httpParams).then (userstories) =>
-            @scope.userstories = userstories
+        @.refreshTagsColors().then =>
+            @rs.userstories.listUnassigned(@scope.projectId, @scope.httpParams).then (userstories) =>
+                @scope.userstories = userstories
 
-            @.generateFilters()
-            @.filterVisibleUserstories()
+                @.generateFilters()
+                @.filterVisibleUserstories()
 
-            @rootscope.$broadcast("filters:loaded", @scope.filters)
-            # The broadcast must be executed when the DOM has been fully reloaded.
-            # We can't assure when this exactly happens so we need a defer
-            scopeDefer @scope, =>
-                @scope.$broadcast("userstories:loaded")
+                @rootscope.$broadcast("filters:loaded", @scope.filters)
+                # The broadcast must be executed when the DOM has been fully reloaded.
+                # We can't assure when this exactly happens so we need a defer
+                scopeDefer @scope, =>
+                    @scope.$broadcast("userstories:loaded")
 
-            return userstories
+                return userstories
 
     loadBacklog: ->
         return @q.all([

app/coffee/modules/base/tags.coffee

@@ -61,12 +61,27 @@ ColorizeTagBackgroundDirective = ->
 module.directive("tgColorizeTagBackground", ColorizeTagBackgroundDirective)
 
 
-ColorizeTagBorderLeftDirective = ->
+ColorizeTagsBorderLeftDirective = ->
+    template = _.template("""
+        <% _.each(tags, function(tag) { %>
+            <span class="tag" style="border-left: 5px solid <%- tag.color %>"><%- tag.name %></span>
+        <% }) %>
+    """)
     link = ($scope, $el, $attrs, $ctrl) ->
-        text = $scope.$eval($attrs.tgColorizeTagBorderLeft)
-        color = $scope.project.tags_colors[text]
-        $el.css("border-left", "5px solid #{color}")
+        render = (srcTags) ->
+            tags = []
+            for tag in srcTags
+                color = $scope.project.tags_colors[tag]
+                tags.push({name: tag, color: color})
+            $el.html template({tags: tags})
+
+        $scope.$watch $attrs.tgColorizeTagsBorderLeft, ->
+            tags = $scope.$eval($attrs.tgColorizeTagsBorderLeft)
+            render(tags)
+
+        tags = $scope.$eval($attrs.tgColorizeTagsBorderLeft)
+        render(tags)
 
     return {link: link}
 
-module.directive("tgColorizeTagBorderLeft", ColorizeTagBorderLeftDirective)
+module.directive("tgColorizeTagsBorderLeft", ColorizeTagsBorderLeftDirective)

app/coffee/modules/resources/projects.coffee

@@ -45,6 +45,9 @@ resourceProvider = ($repo) ->
     service.stats = (projectId) ->
         return $repo.queryOneRaw("projects", "#{projectId}/stats")
 
+    service.tagsColors = (id) ->
+        return $repo.queryOne("projects", "#{id}/tags_colors")
+
     return (instance) ->
         instance.projects = service
 

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

@@ -1,7 +1,6 @@
 div.row.us-item-row(ng-repeat="us in visibleUserstories|orderBy:order track by us.id", tg-draggable, ng-class="{blocked: us.is_blocked}")
     div.user-stories
-        div.user-story-tags
-            span.tag(ng-repeat="tag in us.tags", tg-bind-html="tag", tg-colorize-tag-border-left="tag")
+        div.user-story-tags(tg-colorize-tags-border-left="us.tags")
         div.user-story-name
             input(tg-check-permission, permission="modify_us", type="checkbox", name="")
             a.clickable(tg-nav="project-userstories-detail:project=project.slug,ref=us.ref",