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 {