From d1bf0102c24da0482730237eb88c8ea41a937dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Tue, 5 Aug 2014 18:53:24 +0200 Subject: [PATCH] Adding wip limit to kanban --- app/coffee/modules/kanban/main.coffee | 33 ++++++++++-- .../admin-project-values-us-status.jade | 2 +- .../modules/admin/project-us-status.jade | 54 +++++++++++++++++++ app/partials/views/modules/kanban-table.jade | 2 +- app/styles/modules/common/colors-table.scss | 8 ++- app/styles/modules/kanban/kanban-table.scss | 12 +++++ 6 files changed, 105 insertions(+), 6 deletions(-) create mode 100644 app/partials/views/modules/admin/project-us-status.jade diff --git a/app/coffee/modules/kanban/main.coffee b/app/coffee/modules/kanban/main.coffee index 975e1def..f6241abb 100644 --- a/app/coffee/modules/kanban/main.coffee +++ b/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("
") + + $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 ############################################################################# diff --git a/app/partials/admin-project-values-us-status.jade b/app/partials/admin-project-values-us-status.jade index dc4944a7..375b7162 100644 --- a/app/partials/admin-project-values-us-status.jade +++ b/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 diff --git a/app/partials/views/modules/admin/project-us-status.jade b/app/partials/views/modules/admin/project-us-status.jade new file mode 100644 index 00000000..804c51eb --- /dev/null +++ b/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") diff --git a/app/partials/views/modules/kanban-table.jade b/app/partials/views/modules/kanban-table.jade index ed8341fb..d6a4014b 100644 --- a/app/partials/views/modules/kanban-table.jade +++ b/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") diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss index ad55b3d3..d3033992 100644 --- a/app/styles/modules/common/colors-table.scss +++ b/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 { diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index 10028710..11388ad4 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/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;