Fixed bug #708: Now backlog progress bar works, and all progress bar use the same directive

app/coffee/modules/backlog/main.coffee

@@ -83,11 +83,10 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F
             @scope.stats = stats
 
             if stats.total_points
-                completedPercentage = Math.round(100 * stats.closed_points / stats.total_points)
+                @scope.stats.completedPercentage = Math.round(100 * stats.closed_points / stats.total_points)
             else
-                completedPercentage = 0
+                @scope.stats.completedPercentage = 0
 
-            @scope.stats.completedPercentage = "#{completedPercentage}%"
             return stats
 
     refreshTagsColors: ->
@@ -880,6 +879,7 @@ tgBacklogGraphDirective = ->
 
     return {link: link}
 
+
 module.directive("tgBacklog", ["$tgRepo", "$rootScope", BacklogDirective])
 module.directive("tgUsPoints", ["$tgRepo", UsPointsDirective])
 module.directive("tgUsRolePointsSelector", ["$rootScope", UsRolePointsSelectorDirective])

app/coffee/modules/common/components.coffee

@@ -46,34 +46,6 @@ DateRangeDirective = ->
 module.directive("tgDateRange", DateRangeDirective)
 
 
-#############################################################################
-## Sprint Progress Bar Directive
-#############################################################################
-
-SprintProgressBarDirective = ->
-    renderProgress = ($el, percentage, visual_percentage) ->
-        if $el.is(".current-progress")
-            $el.css("width", "#{percentage}%")
-        else
-            $el.find(".current-progress").css("width", "#{visual_percentage}%")
-            $el.find(".number").html("#{percentage} %")
-
-    link = ($scope, $el, $attrs) ->
-        bindOnce $scope, $attrs.tgSprintProgressbar, (sprint) ->
-            closedPoints = sprint.closed_points
-            totalPoints = sprint.total_points
-            percentage = 0
-            percentage = Math.round(100 * (closedPoints/totalPoints)) if totalPoints != 0
-            visual_percentage = 0
-            #Visual hack for .current-progress bar
-            visual_percentage = Math.round(98 * (closedPoints/totalPoints)) if totalPoints != 0
-            renderProgress($el, percentage, visual_percentage)
-
-    return {link: link}
-
-module.directive("tgSprintProgressbar", SprintProgressBarDirective)
-
-
 #############################################################################
 ## Date Selector Directive (using pikaday)
 #############################################################################
@@ -422,6 +394,30 @@ ListItemTypeDirective = ->
     }
 
 
+#############################################################################
+## Progress bar directive
+#############################################################################
+
+TgProgressBarDirective = ->
+    template = _.template("""
+        <div class="current-progress" style="width: calc(<%- percentage %>% - 4px)"></div>
+    """)
+
+    render = (el, percentage) ->
+        el.html(template({percentage: percentage}))
+
+    link = ($scope, $el, $attrs) ->
+        element = angular.element($el)
+
+        $scope.$watch $attrs.tgProgressBar, (percentage) ->
+            render($el, percentage)
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+    return {link: link}
+
+
 module.directive("tgListitemType", ListItemTypeDirective)
 module.directive("tgListitemIssueStatus", ListItemIssueStatusDirective)
 module.directive("tgListitemAssignedto", ListItemAssignedtoDirective)
@@ -429,3 +425,4 @@ module.directive("tgListitemPriority", ListItemPriorityDirective)
 module.directive("tgListitemSeverity", ListItemSeverityDirective)
 module.directive("tgListitemTaskStatus", ListItemTaskStatusDirective)
 module.directive("tgListitemUsStatus", ListItemUsStatusDirective)
+module.directive("tgProgressBar", TgProgressBarDirective)

app/coffee/modules/taskboard/main.coffee

@@ -83,6 +83,10 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin)
             @scope.stats.completedPointsSum = completedPointsSum
             @scope.stats.remainingPointsSum = remainingPointsSum
             @scope.stats.remainingTasks = remainingTasks
+            if stats.totalPointsSum
+                @scope.stats.completedPercentage = Math.round(100 * stats.completedPointsSum / stats.totalPointsSum)
+            else
+                @scope.stats.completedPercentage = 0
             return stats
 
     refreshTagsColors: ->

app/partials/views/components/sprint-summary.jade

@@ -1,9 +1,8 @@
 div.summary.large-summary
-    div(tg-sprint-progressbar="sprint")
+    div
-        div.summary-progress-bar
+        div.summary-progress-bar(tg-progress-bar="stats.completedPercentage")
-            div.current-progress
         div.data
-            span.number -- %
+            span.number(tg-bind-html="stats.completedPercentage + '%'")
 
     ul
         li

app/partials/views/components/summary.jade

@@ -1,8 +1,7 @@
 div.summary
-    div.summary-progress-bar
+    div.summary-progress-bar(tg-progress-bar="stats.completedPercentage")
-        div.current-progress
     div.data
-        span.number(tg-bind-html="stats.completedPercentage")
+        span.number(tg-bind-html="stats.completedPercentage + '%'")
     ul
         li
             span.number(tg-bind-html="stats.total_points") --

app/partials/views/modules/sprints.jade

@@ -26,8 +26,7 @@ section.sprints
                     li
                         span.number(ng-bind="sprint.total_points|default:''")
                         span.description total
-        div.sprint-progress-bar
+        div.sprint-progress-bar(tg-progress-bar="100 * sprint.closed_points / total_points")
-            div.current-progress(tg-sprint-progressbar="sprint")
         div.sprint-table(tg-sprint-sortable)
             div.row.milestone-us-item-row(ng-repeat="us in sprint.user_stories|orderBy:order track by us.id")
                 div.column-us.width-8