diff --git a/app/coffee/modules/taskboard.coffee b/app/coffee/modules/taskboard.coffee
index 422b2953..0c020f1b 100644
--- a/app/coffee/modules/taskboard.coffee
+++ b/app/coffee/modules/taskboard.coffee
@@ -21,6 +21,7 @@
taiga = @.taiga
mixOf = @.taiga.mixOf
+groupBy = @.taiga.groupBy
module = angular.module("taigaTaskboard", [])
@@ -76,6 +77,8 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin)
@scope.points = _.sortBy(project.points, "order")
@scope.taskStatusList = _.sortBy(project.task_statuses, "order")
@scope.usStatusList = _.sortBy(project.us_statuses, "order")
+ @scope.usStatusById = groupBy(project.us_statuses, (e) -> e.id)
+
return project
loadTaskboard: ->
@@ -96,6 +99,7 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin)
module.controller("TaskboardController", TaskboardController)
+
#############################################################################
## TaskboardDirective
#############################################################################
@@ -119,9 +123,11 @@ TaskboardDirective = ->
return {link: link}
-# TODO: the name of this directive should be changet
-# to more apropiate, like: TaskboardRowsizeFixer
-TaskboardTaskrowDirective = ->
+#############################################################################
+## Task Row Size Fixer Directive
+#############################################################################
+
+TaskboardRowSizeFixer = ->
link = ($scope, $el, $attrs) ->
taiga.bindOnce $scope, "taskStatusList", (statuses) ->
itemSize = 300 + (10 * statuses.length)
@@ -131,16 +137,71 @@ TaskboardTaskrowDirective = ->
return {link: link}
-UsStatusDirective = ->
- link = ($scope, $el, $attrs) ->
- $scope.$watch "#{$attrs.tgTaskboardUsStatus}.status", (status_id) ->
- if status_id is undefined
- return
- status_name = $scope.usStatusList[status_id].name
- $el.html(status_name)
+#############################################################################
+## User story status directive
+#############################################################################
+
+TaskboardUsStatusDirective = ($repo) ->
+ # NOTE: This directive is similar to backlog.main.UsStatusDirective
+ selectionTemplate = _.template("""
+
+ """)
+
+ updateUsStatus = ($el, us, usStatusById) ->
+ usStatusDom = $el.find(".us-status")
+ usStatusDom.text(usStatusById[us.status].name)
+ usStatusDom.css('color', usStatusById[us.status].color)
+
+ link = ($scope, $el, $attrs) ->
+ $ctrl = $el.controller()
+ us = $scope.$eval($attrs.tgTaskboardUsStatus)
+
+ 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.loadSprintStats()
+
+ $scope.$on "$destroy", ->
+ $el.off()
+
+ return {link: link}
+
+
+#############################################################################
+## User story status directive
+#############################################################################
+
+TaskboardUsPointsDirective = ($repo) ->
- return {link:link}
module.directive("tgTaskboard", TaskboardDirective)
-module.directive("tgTaskboardTaskrow", TaskboardTaskrowDirective)
-module.directive("tgTaskboardUsStatus", UsStatusDirective)
+module.directive("tgTaskboardRowSizeFixer", TaskboardRowSizeFixer)
+module.directive("tgTaskboardUsStatus", ["$tgRepo", TaskboardUsStatusDirective])
diff --git a/app/partials/views/modules/taskboard-table.jade b/app/partials/views/modules/taskboard-table.jade
index 13cbcbbe..9c37622f 100644
--- a/app/partials/views/modules/taskboard-table.jade
+++ b/app/partials/views/modules/taskboard-table.jade
@@ -1,6 +1,6 @@
div.taskboard-table
div.taskboard-table-header
- div.taskboard-table-inner(tg-taskboard-taskrow)
+ div.taskboard-table-inner(tg-taskboard-row-size-fixer)
h2.task-colum_name "User story"
h2.task-colum_name(ng-repeat="s in taskStatusList track by s.id", tg-bo-html="s.name")
div.taskboard-table-body
@@ -12,7 +12,8 @@ div.taskboard-table
h3.us-title
span.us-ref(tg-bo-ref="us.ref")
span(ng-bind="us.subject")
- div.us-status(tg-taskboard-us-status="us")
+ div.status(tg-taskboard-us-status="us")
+ a.us-status(href="", title="Status Name")
ul.points-list
li UX
span 4.5
diff --git a/app/styles/modules/taskboard-table.scss b/app/styles/modules/taskboard-table.scss
index 9c3be1d6..b5771a3c 100644
--- a/app/styles/modules/taskboard-table.scss
+++ b/app/styles/modules/taskboard-table.scss
@@ -70,9 +70,13 @@ $column-margin: 0 10px 0 0;
color: $gray;
margin-right: .5rem;
}
- .us-status {
+ .status {
color: $green-taiga;
margin-bottom: .5rem;
+ position: relative;
+ }
+ .pop-status {
+ @include popover(150px, 20px, 30px, '', '');
}
.points-list {
span {