taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

US #903: Task #1034: Refactorized tgUsPoints directive

stable
Andrey Antukh 2014-09-18 00:00:56 +02:00
parent 4a68f728f6
commit 1e19ddd485
2 changed files with 102 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
app/coffee/modules/backlog/main.coffee
View File

@ -593,6 +593,9 @@ BacklogDirective = ($repo, $rootscope) ->
return {link: link} return {link: link}
module.directive("tgBacklog", ["$tgRepo", "$rootScope", BacklogDirective])
############################################################################# #############################################################################
## User story points directive ## User story points directive
############################################################################# #############################################################################
@ -603,8 +606,10 @@ UsRolePointsSelectorDirective = ($rootscope) ->
<ul class="popover pop-role"> <ul class="popover pop-role">
<li><a class="clear-selection" href="" title="All">All</a></li> <li><a class="clear-selection" href="" title="All">All</a></li>
<% _.each(roles, function(role) { %> <% _.each(roles, function(role) { %>
<li><a href="" class="role" title="<%- role.name %>" <li>
data-role-id="<%- role.id %>"><%- role.name %></a></li> <a href="" class="role" title="<%- role.name %>"
data-role-id="<%- role.id %>"><%- role.name %></a>
</li>
<% }); %> <% }); %>
</ul> </ul>
""") """)
@ -616,7 +621,7 @@ UsRolePointsSelectorDirective = ($rootscope) ->
numberOfRoles = _.size(roles) numberOfRoles = _.size(roles)
if numberOfRoles > 1 if numberOfRoles > 1
$el.append(selectionTemplate({ 'roles': roles })) $el.append(selectionTemplate({"roles":roles}))
else else
$el.find(".icon-arrow-bottom").remove() $el.find(".icon-arrow-bottom").remove()
@ -655,15 +660,18 @@ UsRolePointsSelectorDirective = ($rootscope) ->
return {link: link} return {link: link}
module.directive("tgUsRolePointsSelector", ["$rootScope", UsRolePointsSelectorDirective])
UsPointsDirective = ($repo) -> UsPointsDirective = ($repo) ->
selectionTemplate = _.template(""" rolesTemplate = _.template("""
<ul class="popover pop-role"> <ul class="popover pop-role">
<% _.each(rolePoints, function(rolePointsElement) { %> <% _.each(roles, function(role) { %>
<li><a href="" class="role" title="<%- rolePointsElement.name %>" <li>
data-role-id="<%- rolePointsElement.id %>"> <a href="" class="role" title="<%- role.name %>"
<%- rolePointsElement.name %> data-role-id="<%- role.id %>">
(<%- rolePointsElement.points %>) <%- role.name %>
(<%- role.points %>)
</a> </a>
</li> </li>
<% }); %> <% }); %>
@ -673,8 +681,14 @@ UsPointsDirective = ($repo) ->
pointsTemplate = _.template(""" pointsTemplate = _.template("""
<ul class="popover pop-points-open"> <ul class="popover pop-points-open">
<% _.each(points, function(point) { %> <% _.each(points, function(point) { %>
<li><a href="" class="point" title="<%- point.name %>" <li>
<% if (point.selected) { %>
<a href="" class="point" title="<%- point.name %>"
data-point-id="<%- point.id %>"><%- point.name %></a> data-point-id="<%- point.id %>"><%- point.name %></a>
<% } else { %>
<a href="" class="point active" title="<%- point.name %>"
data-point-id="<%- point.id %>"><%- point.name %></a>
<% } %>
</li> </li>
<% }); %> <% }); %>
</ul> </ul>
@ -682,95 +696,116 @@ UsPointsDirective = ($repo) ->
link = ($scope, $el, $attrs) -> link = ($scope, $el, $attrs) ->
$ctrl = $el.controller() $ctrl = $el.controller()
us = $scope.$eval($attrs.tgUsPoints)
us = $scope.$eval($attrs.tgBacklogUsPoints)
updatingSelectedRoleId = null updatingSelectedRoleId = null
selectedRoleId = null selectedRoleId = null
numberOfRoles = _.size(us.points) numberOfRoles = _.size(us.points)
# Preselect the rol if we have only one # Preselect the role if we have only one
if numberOfRoles == 1 if numberOfRoles == 1
selectedRoleId = _.keys(us.points)[0] selectedRoleId = _.keys(us.points)[0]
showPopPoints = () -> renderPointsSelector = (us, roleId) ->
$(".popover").popover().close() # Prepare data for rendering
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})
# Remove any prevous state
$el.find(".popover").popover().close()
$el.find(".pop-points-open").remove() $el.find(".pop-points-open").remove()
$el.append(pointsTemplate({ "points": $scope.project.points }))
dataPointId = us.points[updatingSelectedRoleId] # Render into DOM and show the new created element
$el.find(".pop-points-open a[data-point-id='#{dataPointId}']").addClass("active") $el.append(html)
# If not showing role selection let's move to the left # If not showing role selection let's move to the left
if not $el.find(".pop-role:visible").css('left')? if not $el.find(".pop-role:visible").css("left")?
$el.find(".pop-points-open").css('left', '110px') $el.find(".pop-points-open").css("left", "110px")
$el.find(".pop-points-open").show() $el.find(".pop-points-open").show()
showPopRoles = () -> renderRolesSelector = (us) ->
$el.find(".pop-role").remove() # Prepare data for rendering
rolePoints = _.clone(_.filter($scope.project.roles, "computable"), true) computableRoles = _.filter($scope.project.roles, "computable")
undefinedToQuestion = (val) -> roles = _.map computableRoles, (role) ->
return "?" if not val? pointId = us.points[role.id]
return val pointObj = $scope.pointsById[pointId]
_.map rolePoints, (v, k) -> role = _.clone(role, true)
v.points = undefinedToQuestion($scope.pointsById[us.points[v.id]]?.value) role.points = if pointObj.value? then pointObj.value else "?"
$el.append(selectionTemplate({ "rolePoints": rolePoints })) return role
html = rolesTemplate({"roles": roles})
# Render into DOM and show the new created element
$el.append(html)
$el.find(".pop-role").popover().open(() -> $(this).remove()) $el.find(".pop-role").popover().open(() -> $(this).remove())
updatePoints = (roleId) -> renderPoints = (us, roleId) ->
# Update the dom with the points dom = $el.find("a > span.points-value")
pointsDom = $el.find("a > span.points-value")
usTotalPoints = calculateTotalPoints(us) totalPoints = calculateTotalPoints(us)
us.total_points = usTotalPoints if roleId == null or numberOfRoles == 1
if not roleId? or numberOfRoles == 1 dom.text(us.total_points)
pointsDom.text(us.total_points)
else else
pointId = us.points[roleId] pointId = us.points[roleId]
points = $scope.pointsById[pointId] pointObj = $scope.pointsById[pointId]
pointsDom.html("#{points.name} / <span>#{us.total_points}</span>") dom.html("#{pointObj.name} / <span>#{us.total_points}</span>")
calculateTotalPoints = -> calculateTotalPoints = ->
values = _.map(us.points, (v, k) -> $scope.pointsById[v].value) values = _.map(us.points, (v, k) -> $scope.pointsById[v].value)
values = _.filter(values, (num) -> num?) values = _.filter(values, (num) -> num?)
if values.length == 0 if values.length == 0
return "?" return "?"
return _.reduce(values, (acc, num) -> acc + num) return _.reduce(values, (acc, num) -> acc + num)
updatePoints(null) $scope.$watch $attrs.tgBacklogUsPoints, (us) ->
renderPoints(us, selectedRoleId) if us
$scope.$on "uspoints:select", (ctx, roleId, roleName) -> $scope.$on "uspoints:select", (ctx, roleId, roleName) ->
updatePoints(roleId) us = $scope.$eval($attrs.tgBacklogUsPoints)
renderPoints(us, roleId)
selectedRoleId = roleId selectedRoleId = roleId
$scope.$on "uspoints:clear-selection", (ctx) -> $scope.$on "uspoints:clear-selection", (ctx) ->
updatePoints(null) us = $scope.$eval($attrs.tgBacklogUsPoints)
renderPoints(us, null)
selectedRoleId = null selectedRoleId = null
$el.on "click", "a.us-points span", (event) -> $el.on "click", "a.us-points span", (event) ->
event.preventDefault() event.preventDefault()
target = angular.element(event.target)
event.stopPropagation() event.stopPropagation()
if selectedRoleId? us = $scope.$eval($attrs.tgBacklogUsPoints)
updatingSelectedRoleId = selectedRoleId updatingSelectedRoleId = selectedRoleId
showPopPoints()
if selectedRoleId?
renderPointsSelector(us, selectedRoleId)
else else
showPopRoles() renderRolesSelector(us)
$el.on "click", ".role", (event) -> $el.on "click", ".role", (event) ->
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
target = angular.element(event.currentTarget) target = angular.element(event.currentTarget)
us = $scope.$eval($attrs.tgBacklogUsPoints)
updatingSelectedRoleId = target.data("role-id") updatingSelectedRoleId = target.data("role-id")
popRolesDom = $el.find(".pop-role") popRolesDom = $el.find(".pop-role")
popRolesDom.find("a").removeClass("active") popRolesDom.find("a").removeClass("active")
popRolesDom.find("a[data-role-id='#{updatingSelectedRoleId}']").addClass("active") popRolesDom.find("a[data-role-id='#{updatingSelectedRoleId}']").addClass("active")
showPopPoints()
renderPointsSelector(us, updatingSelectedRoleId)
$el.on "click", ".point", (event) -> $el.on "click", ".point", (event) ->
event.preventDefault() event.preventDefault()
@ -780,15 +815,16 @@ UsPointsDirective = ($repo) ->
$el.find(".pop-points-open").hide() $el.find(".pop-points-open").hide()
$el.find(".pop-role").hide() $el.find(".pop-role").hide()
$scope.$apply () -> us = $scope.$eval($attrs.tgBacklogUsPoints)
usPoints = _.clone(us.points, true)
usPoints[updatingSelectedRoleId] = target.data("point-id")
us.points = usPoints
usTotalPoints = calculateTotalPoints(us) points = _.clone(us.points, true)
us.total_points = usTotalPoints points[updatingSelectedRoleId] = target.data("point-id")
updatePoints(selectedRoleId) $scope.$apply ->
us.points = points
us.total_points = calculateTotalPoints(us)
renderPoints(us, selectedRoleId)
$repo.save(us).then -> $repo.save(us).then ->
# Little Hack for refresh. # Little Hack for refresh.
@ -806,6 +842,7 @@ UsPointsDirective = ($repo) ->
return {link: link} return {link: link}
module.directive("tgBacklogUsPoints", ["$tgRepo", UsPointsDirective])
############################################################################# #############################################################################
## Burndown graph directive ## Burndown graph directive
@ -837,14 +874,14 @@ tgBacklogGraphDirective = ->
lines: lines:
fillColor : "rgba(102,153,51,0.3)" fillColor : "rgba(102,153,51,0.3)"
}) })
team_increment_line = _.map(dataToDraw.milestones, (ml) -> -ml['team-increment']) team_increment_line = _.map(dataToDraw.milestones, (ml) -> -ml["team-increment"])
data.push({ data.push({
data: _.zip(milestonesRange, team_increment_line) data: _.zip(milestonesRange, team_increment_line)
lines: lines:
fillColor : "rgba(153,51,51,0.3)" fillColor : "rgba(153,51,51,0.3)"
}) })
client_increment_line = _.map dataToDraw.milestones, (ml) -> client_increment_line = _.map dataToDraw.milestones, (ml) ->
-ml['team-increment'] - ml['client-increment'] -ml["team-increment"] - ml["client-increment"]
data.push({ data.push({
data: _.zip(milestonesRange, client_increment_line) data: _.zip(milestonesRange, client_increment_line)
lines: lines:
@ -862,14 +899,14 @@ tgBacklogGraphDirective = ->
options = { options = {
grid: { grid: {
borderWidth: { top: 0, right: 1, left:0, bottom: 0 } borderWidth: { top: 0, right: 1, left:0, bottom: 0 }
borderColor: '#ccc' borderColor: "#ccc"
} }
xaxis: { xaxis: {
ticks: dataToDraw.milestones.length ticks: dataToDraw.milestones.length
axisLabel: "Sprints" axisLabel: "Sprints"
axisLabelUseCanvas: true axisLabelUseCanvas: true
axisLabelFontSizePixels: 14 axisLabelFontSizePixels: 14
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif' axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif"
axisLabelPadding: 15 axisLabelPadding: 15
tickFormatter: (val, axis) -> "" tickFormatter: (val, axis) -> ""
} }
@ -895,7 +932,7 @@ tgBacklogGraphDirective = ->
link = ($scope, $el, $attrs) -> link = ($scope, $el, $attrs) ->
element = angular.element($el) element = angular.element($el)
$scope.$watch 'stats', (value) -> $scope.$watch "stats", (value) ->
if $scope.stats? if $scope.stats?
redrawChart(element, $scope.stats) redrawChart(element, $scope.stats)
@ -908,7 +945,4 @@ tgBacklogGraphDirective = ->
return {link: link} return {link: link}
module.directive("tgBacklog", ["$tgRepo", "$rootScope", BacklogDirective])
module.directive("tgUsPoints", ["$tgRepo", UsPointsDirective])
module.directive("tgUsRolePointsSelector", ["$rootScope", UsRolePointsSelectorDirective])
module.directive("tgGmBacklogGraph", tgBacklogGraphDirective) module.directive("tgGmBacklogGraph", tgBacklogGraphDirective)

2
app/partials/views/components/backlog-row.jade
View File

@ -18,7 +18,7 @@ div.row.us-item-row(ng-repeat="us in visibleUserstories|orderBy:order track by u
span.us-status-bind span.us-status-bind
span.icon.icon-arrow-bottom(tg-check-permission="modify_us") span.icon.icon-arrow-bottom(tg-check-permission="modify_us")
div.points(tg-us-points="us") div.points(tg-backlog-us-points="us")
a.us-points(href="", title="Points") a.us-points(href="", title="Points")
span.points-value 0 span.points-value 0
span.icon.icon-arrow-bottom(tg-check-permission="modify_us") span.icon.icon-arrow-bottom(tg-check-permission="modify_us")