taiga-front/app/coffee/modules/userstories/detail.coffee

499 lines
18 KiB
CoffeeScript

###
# Copyright (C) 2014 Andrey Antukh <niwi@niwi.be>
# Copyright (C) 2014 Jesús Espino Garcia <jespinog@gmail.com>
# Copyright (C) 2014 David Barragán Merino <bameda@dbarragan.com>
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#
# File: modules/userstories/detail.coffee
###
taiga = @.taiga
mixOf = @.taiga.mixOf
groupBy = @.taiga.groupBy
bindOnce = @.taiga.bindOnce
module = angular.module("taigaUserStories")
#############################################################################
## User story Detail Controller
#############################################################################
class UserStoryDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
@.$inject = [
"$scope",
"$rootScope",
"$tgRepo",
"$tgConfirm",
"$tgResources",
"$routeParams",
"$q",
"$tgLocation",
"$log",
"$appTitle",
"$tgNavUrls",
"tgLoader"
]
constructor: (@scope, @rootscope, @repo, @confirm, @rs, @params, @q, @location, @log, @appTitle, @navUrls, tgLoader) ->
@scope.issueRef = @params.issueref
@scope.sectionName = "User Story Details"
promise = @.loadInitialData()
# On Success
promise.then =>
@appTitle.set(@scope.us.subject + " - " + @scope.project.name)
tgLoader.pageLoaded()
# On Error
promise.then null, (xhr) =>
if xhr and xhr.status == 404
@location.path(@navUrls.resolve("not-found"))
@location.replace()
return @q.reject(xhr)
@scope.$on("attachment:create", => @rootscope.$broadcast("history:reload"))
@scope.$on("attachment:edit", => @rootscope.$broadcast("history:reload"))
@scope.$on("attachment:delete", => @rootscope.$broadcast("history:reload"))
loadProject: ->
return @rs.projects.get(@scope.projectId).then (project) =>
@scope.project = project
@scope.$emit('project:loaded', project)
@scope.statusList = project.us_statuses
@scope.statusById = groupBy(project.us_statuses, (x) -> x.id)
@scope.taskStatusById = groupBy(project.task_statuses, (x) -> x.id)
@scope.membersById = groupBy(project.memberships, (x) -> x.user)
@scope.pointsList = _.sortBy(project.points, "order")
@scope.pointsById = groupBy(@scope.pointsList, (e) -> e.id)
return project
loadUs: ->
return @rs.userstories.get(@scope.projectId, @scope.usId).then (us) =>
@scope.us = us
@scope.commentModel = us
if @scope.us.neighbors.previous.ref?
ctx = {
project: @scope.project.slug
ref: @scope.us.neighbors.previous.ref
}
@scope.previousUrl = @navUrls.resolve("project-userstories-detail", ctx)
if @scope.us.neighbors.next.ref?
ctx = {
project: @scope.project.slug
ref: @scope.us.neighbors.next.ref
}
@scope.nextUrl = @navUrls.resolve("project-userstories-detail", ctx)
if us.milestone
@rs.sprints.get(us.project, us.milestone).then (sprint) =>
@scope.sprint = sprint
return us
loadTasks: ->
return @rs.tasks.list(@scope.projectId, null, @scope.usId).then (tasks) =>
@scope.tasks = tasks
return tasks
loadInitialData: ->
params = {
pslug: @params.pslug
usref: @params.usref
}
promise = @repo.resolve(params).then (data) =>
@scope.projectId = data.project
@scope.usId = data.us
return data
return promise.then(=> @.loadProject())
.then(=> @.loadUsersAndRoles())
.then(=> @q.all([@.loadUs(),
@.loadTasks()]))
block: ->
@rootscope.$broadcast("block", @scope.us)
unblock: ->
@rootscope.$broadcast("unblock", @scope.us)
delete: ->
#TODO: i18n
title = "Delete User Story"
subtitle = @scope.us.subject
@confirm.ask(title, subtitle).then (finish) =>
promise = @.repo.remove(@scope.us)
promise.then =>
finish()
@location.path(@navUrls.resolve("project-backlog", {project: @scope.project.slug}))
promise.then null, =>
finish(false)
$confirm.notify("error")
module.controller("UserStoryDetailController", UserStoryDetailController)
#############################################################################
## User story Main Directive
#############################################################################
UsDirective = ($tgrepo, $log, $location, $confirm, $navUrls, $loading) ->
linkSidebar = ($scope, $el, $attrs, $ctrl) ->
link = ($scope, $el, $attrs) ->
$ctrl = $el.controller()
linkSidebar($scope, $el, $attrs, $ctrl)
if $el.is("form")
form = $el.checksley()
$el.on "click", ".save-us", (event) ->
if not form.validate()
return
onSuccess = ->
$loading.finish(target)
$confirm.notify("success")
ctx = {
project: $scope.project.slug
ref: $scope.us.ref
}
$location.path($navUrls.resolve("project-userstories-detail", ctx))
onError = ->
$loading.finish(target)
$confirm.notify("error")
target = angular.element(event.currentTarget)
$loading.start(target)
$tgrepo.save($scope.us).then(onSuccess, onError)
return {link:link}
module.directive("tgUsDetail", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm",
"$tgNavUrls", "$tgLoading", UsDirective])
#############################################################################
## User story status directive
#############################################################################
UsStatusDetailDirective = () ->
#TODO: i18n
template = _.template("""
<h1>
<span>
<% if (is_closed) { %>
Closed
<% } else { %>
Open
<% } %>
<span class="us-detail-status" style="color:<%= status.color %>"><%= status.name %></span>
</h1>
<div class="us-detail-progress-bar">
<div class="current-progress" style="width:<%- usProgress %>%"/>
<span clasS="tasks-completed">
<%- totalClosedTasks %>/<%- totalTasks %> tasks completed
</span>
</div>
<div class="us-created-by">
<div class="user-avatar">
<img src="<%= owner.photo %>" alt="<%- owner.full_name_display %>" />
</div>
<div class="created-by">
<span class="created-title">Created by <%- owner.full_name_display %></span>
<span class="created-date"><%- date %></span>
</div>
</div>
<ul class="points-per-role">
<li class="total">
<span class="points"><%- totalPoints %></span>
<span class="role">total</span>
</li>
<% _.each(rolePoints, function(rolePoint) { %>
<li class="total <% if (editable) { %>clickable<% } %>" data-role-id="<%- rolePoint.id %>">
<span class="points"><%- rolePoint.points %></span>
<span class="role"><%- rolePoint.name %></span></li>
<% }); %>
</ul>
<div class="issue-data">
<div class="status-data <% if (editable) { %>clickable<% } %>">
<span class="level" style="background-color:<%= status.color %>"></span>
<span class="status-status"><%= status.name %></span>
<% if (editable) { %>
<span class="icon icon-arrow-bottom"></span>
<% } %>
<span class="level-name">status</span>
</div>
</div>
""")
selectionStatusTemplate = _.template("""
<ul class="popover pop-status">
<% _.each(statuses, function(status) { %>
<li><a href="" class="status" title="<%- status.name %>"
data-status-id="<%- status.id %>"><%- status.name %></a></li>
<% }); %>
</ul>
""")
selectionPointsTemplate = _.template("""
<ul class="popover pop-points-open">
<% _.each(points, function(point) { %>
<li><a href="" class="point" title="<%- point.name %>"
data-point-id="<%- point.id %>"><%- point.name %></a>
</li>
<% }); %>
</ul>
""")
link = ($scope, $el, $attrs, $model) ->
editable = $attrs.editable?
updatingSelectedRoleId = null
$ctrl = $el.controller()
showSelectPoints = (target) ->
us = $model.$modelValue
$el.find(".pop-points-open").remove()
$el.find(target).append(selectionPointsTemplate({ "points": $scope.project.points }))
target.removeClass('active')
$el.find(".pop-points-open a[data-point-id='#{us.points[updatingSelectedRoleId]}']").addClass("active")
# If not showing role selection let's move to the left
$el.find(".pop-points-open").popover().open()
calculateTotalPoints = (us)->
values = _.map(us.points, (v, k) -> $scope.pointsById[v].value)
values = _.filter(values, (num) -> num?)
if values.length == 0
return "?"
return _.reduce(values, (acc, num) -> acc + num)
renderUsstatus = (us) ->
owner = $scope.usersById?[us.owner]
date = moment(us.created_date).format("DD MMM YYYY HH:mm")
status = $scope.statusById[us.status]
rolePoints = _.clone(_.filter($scope.project.roles, "computable"), true)
_.map rolePoints, (v, k) ->
name = $scope.pointsById[us.points[v.id]].name
name = "?" if not name?
v.points = name
totalTasks = $scope.tasks.length
totalClosedTasks = _.filter($scope.tasks, (task) => $scope.taskStatusById[task.status].is_closed).length
usProgress = 0
usProgress = 100 * totalClosedTasks / totalTasks if totalTasks > 0
html = template({
owner: owner
date: date
editable: editable
is_closed: us.is_closed
status: status
totalPoints: us.total_points
rolePoints: rolePoints
totalTasks: totalTasks
totalClosedTasks: totalClosedTasks
usProgress: usProgress
})
$el.html(html)
$el.find(".status-data").append(selectionStatusTemplate({statuses:$scope.statusList}))
bindOnce $scope, "tasks", (tasks) ->
$scope.$watch $attrs.ngModel, (us) ->
if us?
renderUsstatus(us)
$scope.$on "related-tasks:update", ->
us = $scope.$eval $attrs.ngModel
if us?
# Reload the us because the status could have changed
$ctrl.loadUs()
renderUsstatus(us)
if editable
$el.on "click", ".status-data", (event) ->
event.preventDefault()
event.stopPropagation()
$el.find(".pop-status").popover().open()
$el.on "click", ".status", (event) ->
event.preventDefault()
event.stopPropagation()
target = angular.element(event.currentTarget)
$model.$modelValue.status = target.data("status-id")
renderUsstatus($model.$modelValue)
$.fn.popover().closeAll()
$el.on "click", ".total.clickable", (event) ->
event.preventDefault()
event.stopPropagation()
target = angular.element(event.currentTarget)
updatingSelectedRoleId = target.data("role-id")
target.siblings().removeClass('active')
target.addClass('active')
showSelectPoints(target)
$el.on "click", ".point", (event) ->
event.preventDefault()
event.stopPropagation()
target = angular.element(event.currentTarget)
$.fn.popover().closeAll()
$scope.$apply () ->
us = $model.$modelValue
usPoints = _.clone(us.points, true)
usPoints[updatingSelectedRoleId] = target.data("point-id")
us.points = usPoints
us.total_points = calculateTotalPoints(us)
renderUsstatus(us)
return {link:link, require:"ngModel"}
module.directive("tgUsStatusDetail", UsStatusDetailDirective)
#############################################################################
## User story estimation directive
#############################################################################
UsEstimationDirective = ($log) ->
mainTemplate = _.template("""
<ul class="points-per-role">
<li class="total">
<span class="points"><%- totalPoints %></span>
<span class="role">total</span>
</li>
<% _.each(roles, function(role) { %>
<li class="total clickable" data-role-id="<%- role.id %>">
<span class="points"><%- role.points %></span>
<span class="role"><%- role.name %></span></li>
<% }); %>
</ul>
""")
pointsTemplate = _.template("""
<ul class="popover pop-points-open">
<% _.each(points, function(point) { %>
<li>
<% if (point.selected) { %>
<a href="" class="point" title="<%- point.name %>"
data-point-id="<%- point.id %>" data-role-id="<%- roleId %>"><%- point.name %></a>
<% } else { %>
<a href="" class="point active" title="<%- point.name %>"
data-point-id="<%- point.id %>" data-role-id="<%- roleId %>"><%- point.name %></a>
<% } %>
</li>
<% }); %>
</ul>
""")
link = ($scope, $el, $attrs) ->
render = (us) ->
totalPoints = us.total_points or 0
computableRoles = _.filter($scope.project.roles, "computable")
roles = _.map computableRoles, (role) ->
pointId = us.points[role.id]
pointObj = $scope.pointsById[pointId]
role = _.clone(role, true)
role.points = if pointObj? and pointObj.name? then pointObj.name else "?"
return role
html = mainTemplate({totalPoints: totalPoints, roles: roles})
$el.html(html)
renderPoints = (target, us, roleId) ->
points = _.map $scope.project.points, (point) ->
point = _.clone(point, true)
point.selected = if us.points[roleId] == point.id then false else true
return point
html = pointsTemplate({"points": points, roleId: roleId})
# Remove any prevous state
$el.find(".popover").popover().close()
$el.find(".pop-points-open").remove()
# If not showing role selection let's move to the left
if not $el.find(".pop-role:visible").css("left")?
$el.find(".pop-points-open").css("left", "110px")
$el.find(".pop-points-open").remove()
# Render into DOM and show the new created element
$el.find(target).append(html)
$el.find(".pop-points-open").popover().open(-> $(this).removeClass("active"))
$el.find(".pop-points-open").show()
calculateTotalPoints = (us) ->
values = _.map(us.points, (v, k) -> $scope.pointsById[v]?.value or 0)
if values.length == 0
return "0"
return _.reduce(values, (acc, num) -> acc + num)
$scope.$watch $attrs.ngModel, (us) ->
render(us) if us
$scope.$on "$destroy", ->
$el.off()
$el.on "click", ".total.clickable", (event) ->
event.preventDefault()
event.stopPropagation()
target = angular.element(event.currentTarget)
roleId = target.data("role-id")
us = $scope.$eval($attrs.ngModel)
renderPoints(target, us, roleId)
target.siblings().removeClass('active')
target.addClass('active')
$el.on "click", ".point", (event) ->
event.preventDefault()
event.stopPropagation()
us = $scope.$eval($attrs.ngModel)
target = angular.element(event.currentTarget)
roleId = target.data("role-id")
pointId = target.data("point-id")
$el.find(".popover").popover().close()
points = _.clone(us.points, true)
points[roleId] = pointId
$scope.$apply ->
us.points = points
us.total_points = calculateTotalPoints(us)
render(us)
return {
link: link
restrict: "EA"
}
module.directive("tgUsEstimation", UsEstimationDirective)