Fix error: Extrange behavior of tg-us-estimation in lightboxes
David Barragán Merino
parent
7248d7e02f
commit
7167769a86
|
|
@ -0,0 +1,318 @@
|
|||
###
|
||||
# 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/common/estimation.coffee
|
||||
###
|
||||
|
||||
taiga = @.taiga
|
||||
|
||||
module = angular.module("taigaCommon")
|
||||
|
||||
#############################################################################
|
||||
## User story estimation directive (for Lightboxes)
|
||||
#############################################################################
|
||||
|
||||
LbUsEstimationDirective = ($rootScope, $repo, $confirm) ->
|
||||
# Display the points of a US and you can edit it.
|
||||
#
|
||||
# Example:
|
||||
# tg-us-estimation-progress-bar(ng-model="us")
|
||||
#
|
||||
# Requirements:
|
||||
# - Us object (ng-model)
|
||||
# - scope.project object
|
||||
|
||||
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, $model) ->
|
||||
render = (points) ->
|
||||
totalPoints = calculateTotalPoints(points) or 0
|
||||
computableRoles = _.filter($scope.project.roles, "computable")
|
||||
|
||||
roles = _.map computableRoles, (role) ->
|
||||
pointId = points[role.id]
|
||||
pointObj = $scope.pointsById[pointId]
|
||||
|
||||
role = _.clone(role, true)
|
||||
role.points = if pointObj? and pointObj.name? then pointObj.name else "?"
|
||||
return role
|
||||
|
||||
ctx = {
|
||||
totalPoints: totalPoints
|
||||
roles: roles
|
||||
}
|
||||
html = mainTemplate(ctx)
|
||||
$el.html(html)
|
||||
|
||||
renderPoints = (target, usPoints, roleId) ->
|
||||
points = _.map $scope.project.points, (point) ->
|
||||
point = _.clone(point, true)
|
||||
point.selected = if usPoints[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 = (points) ->
|
||||
values = _.map(points, (v, k) -> $scope.pointsById[v]?.value or 0)
|
||||
if values.length == 0
|
||||
return "0"
|
||||
return _.reduce(values, (acc, num) -> acc + num)
|
||||
|
||||
$el.on "click", ".total.clickable", (event) ->
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
target = angular.element(event.currentTarget)
|
||||
roleId = target.data("role-id")
|
||||
|
||||
points = $model.$modelValue
|
||||
renderPoints(target, points, roleId)
|
||||
|
||||
target.siblings().removeClass('active')
|
||||
target.addClass('active')
|
||||
|
||||
$el.on "click", ".point", (event) ->
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
target = angular.element(event.currentTarget)
|
||||
roleId = target.data("role-id")
|
||||
pointId = target.data("point-id")
|
||||
|
||||
$el.find(".popover").popover().close()
|
||||
|
||||
points = _.clone($model.$modelValue, true)
|
||||
points[roleId] = pointId
|
||||
|
||||
$scope.$apply ->
|
||||
$model.$setViewValue(points)
|
||||
|
||||
$scope.$watch $attrs.ngModel, (points) ->
|
||||
render(points) if points
|
||||
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {
|
||||
link: link
|
||||
restrict: "EA"
|
||||
require: "ngModel"
|
||||
}
|
||||
|
||||
module.directive("tgLbUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", LbUsEstimationDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## User story estimation directive
|
||||
#############################################################################
|
||||
|
||||
UsEstimationDirective = ($rootScope, $repo, $confirm) ->
|
||||
# Display the points of a US and you can edit it.
|
||||
#
|
||||
# Example:
|
||||
# tg-us-estimation-progress-bar(ng-model="us")
|
||||
#
|
||||
# Requirements:
|
||||
# - Us object (ng-model)
|
||||
# - scope.project object
|
||||
|
||||
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 <% if(editable){ %>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, $model) ->
|
||||
isEditable = ->
|
||||
return $scope.project.my_permissions.indexOf("modify_us") != -1
|
||||
|
||||
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
|
||||
|
||||
ctx = {
|
||||
totalPoints: totalPoints
|
||||
roles: roles
|
||||
editable: isEditable()
|
||||
}
|
||||
html = mainTemplate(ctx)
|
||||
$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)
|
||||
|
||||
$el.on "click", ".total.clickable", (event) ->
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
return if not isEditable()
|
||||
|
||||
target = angular.element(event.currentTarget)
|
||||
roleId = target.data("role-id")
|
||||
|
||||
us = $model.$modelValue
|
||||
renderPoints(target, us, roleId)
|
||||
|
||||
target.siblings().removeClass('active')
|
||||
target.addClass('active')
|
||||
|
||||
$el.on "click", ".point", (event) ->
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
return if not isEditable()
|
||||
|
||||
target = angular.element(event.currentTarget)
|
||||
roleId = target.data("role-id")
|
||||
pointId = target.data("point-id")
|
||||
|
||||
$el.find(".popover").popover().close()
|
||||
|
||||
# Hell starts here
|
||||
us = angular.copy($model.$modelValue)
|
||||
points = _.clone($model.$modelValue.points, true)
|
||||
points[roleId] = pointId
|
||||
us.setAttr('points', points)
|
||||
us.points = points
|
||||
us.total_points = calculateTotalPoints(us)
|
||||
$model.$setViewValue(us)
|
||||
# Hell ends here
|
||||
|
||||
onSuccess = ->
|
||||
$confirm.notify("success")
|
||||
$rootScope.$broadcast("history:reload")
|
||||
onError = ->
|
||||
$confirm.notify("error")
|
||||
us.revert()
|
||||
$model.$setViewValue(us)
|
||||
$repo.save($model.$modelValue).then(onSuccess, onError)
|
||||
|
||||
$scope.$watch $attrs.ngModel, (us) ->
|
||||
render(us) if us
|
||||
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {
|
||||
link: link
|
||||
restrict: "EA"
|
||||
require: "ngModel"
|
||||
}
|
||||
|
||||
module.directive("tgUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", UsEstimationDirective])
|
||||
|
|
@ -255,175 +255,6 @@ UsTasksProgressDisplayDirective = ->
|
|||
module.directive("tgUsTasksProgressDisplay", UsTasksProgressDisplayDirective)
|
||||
|
||||
|
||||
#############################################################################
|
||||
## User story estimation directive
|
||||
#############################################################################
|
||||
|
||||
UsEstimationDirective = ($rootScope, $repo, $confirm) ->
|
||||
# Display the points of a US and you can edit it.
|
||||
#
|
||||
# Example:
|
||||
# tg-us-estimation-progress-bar(ng-model="us")
|
||||
#
|
||||
# Requirements:
|
||||
# - Us object (ng-model)
|
||||
# - scope.project object
|
||||
# Optionals:
|
||||
# - save-after-modify (boolean): save object after modify
|
||||
|
||||
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 <% if(editable){ %>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, $model) ->
|
||||
saveAfterModify = $attrs.saveAfterModify or false
|
||||
|
||||
isEditable = ->
|
||||
if $model.$modelValue.id
|
||||
return $scope.project.my_permissions.indexOf("modify_us") != -1
|
||||
return $scope.project.my_permissions.indexOf("add_us") != -1
|
||||
|
||||
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
|
||||
|
||||
ctx = {
|
||||
totalPoints: totalPoints
|
||||
roles: roles
|
||||
editable: isEditable()
|
||||
}
|
||||
html = mainTemplate(ctx)
|
||||
$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)
|
||||
|
||||
$el.on "click", ".total.clickable", (event) ->
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
return if not isEditable()
|
||||
|
||||
target = angular.element(event.currentTarget)
|
||||
roleId = target.data("role-id")
|
||||
|
||||
us = $model.$modelValue
|
||||
renderPoints(target, us, roleId)
|
||||
|
||||
target.siblings().removeClass('active')
|
||||
target.addClass('active')
|
||||
|
||||
$el.on "click", ".point", (event) ->
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
return if not isEditable()
|
||||
|
||||
target = angular.element(event.currentTarget)
|
||||
roleId = target.data("role-id")
|
||||
pointId = target.data("point-id")
|
||||
|
||||
$el.find(".popover").popover().close()
|
||||
|
||||
# NOTE: This block of code is strange and, sometimes, repetitive
|
||||
# but is the only solution I find to update the object
|
||||
# corectly
|
||||
us = angular.copy($model.$modelValue)
|
||||
points = _.clone($model.$modelValue.points, true)
|
||||
points[roleId] = pointId
|
||||
us.setAttr('points', points) if us.setAttr?
|
||||
us.points = points
|
||||
us.total_points = calculateTotalPoints(us)
|
||||
$model.$setViewValue(us)
|
||||
|
||||
if saveAfterModify
|
||||
# Edit in the detail page
|
||||
onSuccess = ->
|
||||
$confirm.notify("success")
|
||||
$rootScope.$broadcast("history:reload")
|
||||
onError = ->
|
||||
us.revert()
|
||||
$model.$setViewValue(us)
|
||||
$confirm.notify("error")
|
||||
$repo.save($model.$modelValue).then(onSuccess, onError)
|
||||
else
|
||||
# Create or eedit in the lightbox
|
||||
render($model.$modelValue)
|
||||
|
||||
$scope.$watch $attrs.ngModel, (us) ->
|
||||
render(us) if us
|
||||
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {
|
||||
link: link
|
||||
restrict: "EA"
|
||||
require: "ngModel"
|
||||
}
|
||||
|
||||
module.directive("tgUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", UsEstimationDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## User story status button directive
|
||||
#############################################################################
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ block content
|
|||
h1(tg-us-status-display, ng-model="us")
|
||||
div.us-detail-progress-bar(tg-us-tasks-progress-display, ng-model="tasks")
|
||||
tg-created-by-display.us-created-by(ng-model="us")
|
||||
tg-us-estimation(ng-model="us", save-after-modify="true")
|
||||
tg-us-estimation(ng-model="us")
|
||||
div.duty-data-container
|
||||
div.duty-data(tg-us-status-button, ng-model="us")
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ form
|
|||
data-required="true", data-maxlength="500")
|
||||
|
||||
fieldset.estimation
|
||||
tg-us-estimation(ng-model="us")
|
||||
tg-lb-us-estimation(ng-model="us.points")
|
||||
|
||||
fieldset
|
||||
select(name="status", ng-model="us.status", ng-options="s.id as s.name for s in usStatusList",
|
||||
|
|
|
|||
Loading…
Reference in New Issue