Adding wip limit to kanban

app/coffee/modules/kanban/main.coffee

@@ -26,6 +26,7 @@ toggleText = @.taiga.toggleText
 scopeDefer = @.taiga.scopeDefer
 bindOnce = @.taiga.bindOnce
 groupBy = @.taiga.groupBy
+timeout = @.taiga.timeout
 
 module = angular.module("taigaKanban")
 
@@ -149,6 +150,7 @@ class KanbanController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fi
         return promise.then(=> @.loadProject())
                       .then(=> @.loadUsersAndRoles())
                       .then(=> @.loadKanban())
+                      .then(=> @scope.$broadcast("redraw:wip"))
 
     prepareBulkUpdateData: (uses) ->
          return _.map(uses, (x) -> [x.id, x.order])
@@ -230,16 +232,16 @@ module.directive("tgKanbanRowSizeFixer", KanbanRowSizeFixer)
 
 
 #############################################################################
-## Taskboard Task Directive
+## Kaban User Story Directive
 #############################################################################
 
 KanbanUserstoryDirective = ->
-    link = ($scope, $el, $attrs, $model) ->
+    link = ($scope, $el, $attrs) ->
         $el.disableSelection()
 
     return {
         templateUrl: "/partials/views/components/kanban-task.html"
-        link:link
+        link: link
         require: "ngModel"
     }
 
@@ -247,6 +249,31 @@ KanbanUserstoryDirective = ->
 module.directive("tgKanbanUserstory", KanbanUserstoryDirective)
 
 
+#############################################################################
+## Kaban WIP Limit Directive
+#############################################################################
+
+KanbanWipLimitDirective = ->
+    link = ($scope, $el, $attrs) ->
+        $el.disableSelection()
+
+        redrawWipLimit = ->
+            $el.find('.kanban-wip-limit').remove()
+            timeout 200, ->
+                element = $el.find('.kanban-task')[$scope.status.wip_limit]
+                if element
+                        angular.element(element).before("<div class='kanban-wip-limit'></div>")
+
+        $scope.$on "redraw:wip", redrawWipLimit
+        $scope.$on "kanban:us:move", redrawWipLimit
+        $scope.$on "usform:new:success", redrawWipLimit
+        $scope.$on "usform:bulk:success", redrawWipLimit
+
+    return {link: link}
+
+module.directive("tgKanbanWipLimit", KanbanWipLimitDirective)
+
+
 #############################################################################
 ## Kanban User Directive
 #############################################################################

app/partials/admin-project-values-us-status.jade

@@ -21,4 +21,4 @@ block content
                 a.button.button-green.show-add-new(href="", title="Add New")
                     span Add new status
 
-            include views/modules/admin/project-status
+            include views/modules/admin/project-us-status

app/partials/views/modules/admin/project-us-status.jade

@@ -0,0 +1,54 @@
+section.colors-table
+    div.table-header
+        div.row
+            div.color-column Color
+            div.status-name Name
+            div.is-closed-column Is closed?
+            div.status-wip-limit WIP Limit
+            div.options-column
+
+    div.table-main
+        form.sortable
+            div(ng-repeat="value in values")
+                div.row.table-main.visualization
+                    span.icon.icon-drag-v
+                    div.color-column
+                        div.current-color(style="background: {{ value.color }}")
+                    div.status-name
+                        span {{ value.name }}
+                    div.is-closed-column
+                        div.icon.icon-check-square(ng-show="value.is_closed")
+                    div.status-wip-limit
+                        span {{ value.wip_limit }}
+                    div.options-column
+                        a.edit-value.icon.icon-edit(href="", title="Edit value")
+                        a.delete-value.icon.icon-delete(href="", title="Delete value")
+
+                div.row.table-main.edition.hidden
+                    div.color-column(tg-color-selection, ng-model="value")
+                        div.current-color(style="background: {{ value.color }}")
+                        include ../../components/select-color
+
+                    div.status-name
+                        input(name="name", type="text", placeholder="Write a name for the new status", ng-model="value.name", data-required="true", data-maxlength="255")
+                    div.is-closed-column
+                        select(name="is_closed", ng-model="value.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
+                    div.status-wip-limit
+                        input(name="wip_limit", type="text", placeholder="WIP Limit", ng-model="value.wip_limit")
+                    div.options-column
+                        a.save.icon.icon-floppy(href="", title="Add")
+                        a.cancel.icon.icon-delete(href="", title="Delete")
+
+        form
+            div.row.table-main.new-value.hidden
+                div.color-column(tg-color-selection, ng-model="newValue")
+                    div.current-color(style="background: {{ newValue.color }}")
+                    include ../../components/select-color
+
+                div.status-name
+                    input(name="name", type="text", placeholder="Write a name for the new status", ng-model="newValue.name", data-required="true", data-maxlength="255")
+                div.is-closed-column
+                    select(name="is_closed", ng-model="newValue.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
+                div.options-column
+                    a.add-new.icon.icon-floppy(href="", title="Add")
+                    a.delete-new.icon.icon-delete(href="", title="Delete")

app/partials/views/modules/kanban-table.jade

@@ -10,6 +10,6 @@ div.kanban-table
     div.kanban-table-body
         div.kanban-table-inner(tg-kanban-row-size-fixer)
             div.kanban-uses-box.task-column(ng-repeat="status in usStatusList track by status.id",
-                                                      tg-kanban-sortable)
+                                                      tg-kanban-sortable, tg-kanban-wip-limit)
                 div.kanban-task(ng-repeat="us in usByStatus[status.id] track by us.id",
                                 tg-kanban-userstory, ng-model="us")

app/styles/modules/common/colors-table.scss

@@ -33,7 +33,8 @@
         }
         .color-column,
         .is-closed-column,
-        .options-column {
+        .options-column,
+        .status-wip-limit {
             @include table-flex-child(1, 100px, 0);
         }
         .color-column {
@@ -53,6 +54,11 @@
             max-width: 130px;
             text-align: center;
         }
+        .status-wip-limit {
+            max-width: 130px;
+            text-align: center;
+            padding: 0 0 0 10px;
+        }
     }
     .row-edit {
         .options-column {

app/styles/modules/kanban/kanban-table.scss

@@ -63,6 +63,18 @@ $column-margin: 0 10px 0 0;
         &:last-child {
             margin-right: 0;
         }
+        .kanban-wip-limit {
+            @extend %xsmall;
+            @include table-flex();
+            background: $red;
+            border-radius: 2px;
+            bottom: 8px;
+            height: 4px;
+            margin: 0;
+            padding: 0;
+            position: relative;
+            width: 100%;
+        }
     }
     .kanban-uses-box {
         background: $whitish;