Initial version of filters on backlog.

app/coffee/modules/backlog/main.coffee

@@ -39,6 +39,9 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin)
     loadUserstories: ->
         return @rs.userstories.listUnassigned(@scope.projectId).then (userstories) =>
             @scope.userstories = userstories
+            @scope.filters = @.generateFilters()
+
+            @.filterVisibleUserstories()
             return userstories
 
     loadBacklog: ->
@@ -64,6 +67,27 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin)
                       .then(=> @.loadUsersAndRoles())
                       .then(=> @.loadBacklog())
 
+    filterVisibleUserstories: ->
+        selectedTags = _.filter(@scope.filters.tags, "selected")
+        selectedTags = _.map(selectedTags, "name")
+
+        @scope.visibleUserstories = []
+
+        if selectedTags.length == 0
+            @scope.visibleUserstories = _.clone(@scope.userstories, false)
+        else
+            @scope.visibleUserstories = _.reject @scope.userstories, (us) =>
+                if _.intersection(selectedTags, us.tags).length == 0
+                    return true
+                else
+                    return false
+
+    generateFilters: ->
+        filters = {}
+        plainTags = _.flatten(_.map(@scope.userstories, "tags"))
+        filters.tags = _.map(_.countBy(plainTags), (v, k) -> {name: k, count:v})
+        return filters
+
     ## Template actions
 
     deleteUserStory: (us) ->
@@ -84,7 +108,6 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin)
 #############################################################################
 
 BacklogDirective = ($repo) ->
-
     #########################
     ## Drag & Drop Link
     #########################
@@ -158,13 +181,28 @@ BacklogDirective = ($repo) ->
     #########################
 
     linkFilters = ($scope, $el, $attrs, $ctrl) ->
-        console.log "TODO"
+        $scope.filtersSearch = {}
+        $el.on "click", "#show-filters-button", (event) ->
+            event.preventDefault()
+            $el.find("sidebar.filters-bar").toggle()
+
+        $el.on "click", "section.filters a.single-filter", (event) ->
+            event.preventDefault()
+            target = angular.element(event.currentTarget)
+            targetScope = target.scope()
+
+            $scope.$apply ->
+                targetScope.tag.selected = not (targetScope.tag.selected or false)
+                $ctrl.filterVisibleUserstories()
 
     link = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
         linkSortable($scope, $el, $attrs, $ctrl)
         linkFilters($scope, $el, $attrs, $ctrl)
 
+        $scope.$on "$destroy", ->
+            $el.off()
+
     return {link: link}
 
 #############################################################################

app/partials/backlog.jade

@@ -15,7 +15,7 @@ block content
                 a.trans-button(href="", title="Move to Current Sprint")
                     span.icon.icon-move
                     span.text Move to current Sprint
-                a.trans-button(href="", title="Show Filters")
+                a.trans-button(href="", title="Show Filters", id="show-filters-button")
                     span.icon.icon-filter
                     span.text Show Filters
                 a.trans-button(href="", title="Show Tags")

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

@@ -1,4 +1,4 @@
-div.row.us-item-row(ng-repeat="us in userstories track by us.id")
+div.row.us-item-row(ng-repeat="us in visibleUserstories track by us.id")
     div.user-stories
         div.user-story-name
             input(type="checkbox", name="")

app/partials/views/components/filter.jade

@@ -1,3 +1,5 @@
+// Depreacted, should be removed when any
+// other static template not need it.
 a.single-filter(href="", title="filter")
     span.name filter
     span.number 23

app/partials/views/modules/filters.jade

@@ -3,8 +3,10 @@ section.filters
         h1 filters
         form
             fieldset
-                input(type="text", placeholder="Filter Filters")
+                input(type="text", placeholder="Filter Filters", ng-model="filtersSearch.$")
                 a.icon.icon-search(href="", title="search")
         div.filter-list
-            - for (var x = 0; x < 10; x++)
-                include ../components/filter
+            a.single-filter(ng-repeat="tag in filters.tags|filter:filtersSearch:strict"
+                            ng-class="{selected: tag.selected}")
+                span.name(tg-bo-html="tag.name")
+                span.number(tg-bo-html="tag.count")

app/styles/components/filter.scss

@@ -12,6 +12,11 @@
         color: $grayer;
         opacity: 1;
     }
+    &.selected {
+        @include transition (opacity .2s linear);
+        color: $grayer;
+        opacity: 1;
+    }
     .name,
     .number {
         padding: 8px 10px;