Don't cache group values in group-header directive

This maps values for group headers once during initialization, and uses
that value in the header directive.

frontend/app/components/routing/wp-list/wp-list.controller.ts

@@ -151,6 +151,7 @@ function WorkPackagesListController($scope,
     $scope.groupableColumns = WorkPackagesTableService.getGroupableColumns();
     $scope.totalEntries = QueryService.getTotalEntries();
     $scope.resource = json.resource;
+    $scope.groupHeaders = WorkPackagesTableService.buildGroupHeaders(json.resource);
 
     // Authorisation
     AuthorisationService.initModelAuth('work_package', meta._links);

frontend/app/components/routing/wp-list/wp.list.html

@@ -80,6 +80,7 @@
                 rows="rows"
                 query="query"
                 group-by="query.groupBy"
+                group-headers="groupHeaders"
                 display-sums="query.displaySums"
                 resource="resource"
                 activation-callback="openWorkPackageInFullView(id, force)">

frontend/app/components/wp-table/wp-group-header/wp-group-header.directive.test.js

@@ -71,7 +71,7 @@ describe('workPackageGroupHeader Directive', function() {
         });
 
         it('should toggle current group expansion to be false', function() {
-          scope.toggleCurrentGroup();
+          scope.$ctrl.toggleCurrentGroup();
           expect(scope.groupExpanded['llama']).to.be.false;
         });
       });

frontend/app/components/wp-table/wp-group-header/wp-group-header.directive.ts

@@ -26,37 +26,57 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-angular
-  .module('openproject.workPackages.directives')
-  .directive('wpGroupHeader', wpGroupHeader);
+import {wpDirectivesModule} from '../../../angular-modules';
 
-function wpGroupHeader() {
-  return {
-    restrict: 'A',
-    link: function(scope) {
+export class WorkPackageGroupHeaderController {
+  constructor(public $scope, public I18n) {
+    this.pushGroup(this.currentGroup);
+  }
 
-      scope.currentGroup = scope.row.groupName;
+  public get resource() {
+    return this.$scope.resource;
+  }
 
-      scope.currentGroupObject = _.find(scope.resource.groups, function(o) {
-        var value = o.value == null ? '' : o.value;
-        return value === scope.row.groupName;
-      });
+  public get currentGroup() {
+    return this.$scope.row.groupName;
+  }
 
-      if (scope.currentGroupObject && scope.currentGroupObject.value === null) {
-        scope.currentGroupObject.value = I18n.t('js.placeholders.default');
-      }
+  public get currentGroupObject() {
+    return this.$scope.groupHeaders[this.currentGroup];
+  }
+
+  /**
+   * Return the group name. As the internal value may be emtpy (''),
+   * we return the default placeholder in that case.
+   */
+  public get currentGroupName() {
+    const value = this.currentGroupObject.value;
+
+    if (value === '') {
+      return this.I18n.t('js.placeholders.default');
+    }
 
-      pushGroup(scope.currentGroup);
+    return value;
+  }
 
-      scope.toggleCurrentGroup = function() {
-        scope.groupExpanded[scope.currentGroup] = !scope.groupExpanded[scope.currentGroup];
-      };
+  public toggleCurrentGroup() {
+    this.$scope.groupExpanded[this.currentGroup] = !this.$scope.groupExpanded[this.currentGroup];
+  }
 
-      function pushGroup(group) {
-        if (scope.groupExpanded[group] === undefined) {
-          scope.groupExpanded[group] = true;
-        }
-      }
+  public pushGroup(group) {
+    if (this.$scope.groupExpanded[group] === undefined) {
+      this.$scope.groupExpanded[group] = true;
     }
+  }
+}
+
+function wpGroupHeader() {
+  return {
+    restrict: 'A',
+    controller: WorkPackageGroupHeaderController,
+    controllerAs: '$ctrl',
+    bindToController: true,
   };
 }
+
+wpDirectivesModule.directive('wpGroupHeader', wpGroupHeader);

frontend/app/components/wp-table/wp-table.directive.html

@@ -59,14 +59,14 @@
         <!-- Group headers -->
 
         <tr wp-group-header
-            ng-repeat-start="row in rows track by row.object.id+row.groupName"
+            ng-repeat-start="row in rows track by row.object.id"
             ng-if="!!groupByColumn &&
                    ($first || row.groupName !== rows[$index-1].groupName)"
             ng-show="row.groupName != undefined"
             ng-class="{
               group: true,
-              open: groupExpanded[currentGroup],
-              closed: !groupExpanded[currentGroup],
+              open: groupExpanded[$ctrl.currentGroup],
+              closed: !groupExpanded[$ctrl.currentGroup],
               keyboard_hover: true
             }"
             id="group-header-{{ row.groupName }}">
@@ -74,23 +74,23 @@
             <div ng-class="[
                     'expander',
                     'icon-context',
-                    'icon-' + (groupExpanded[currentGroup] && 'minus2' || 'plus')
+                    'icon-' + (groupExpanded[$ctrl.currentGroup] && 'minus2' || 'plus')
                   ]"
-                  ng-click="toggleCurrentGroup()">
+                  ng-click="$ctrl.toggleCurrentGroup()">
               <span ng-class="{
                 'hidden-for-sighted': true,
-                expand: !groupExpanded[currentGroup],
-                collapse: groupExpanded[currentGroup]
+                expand: !groupExpanded[$ctrl.currentGroup],
+                collapse: groupExpanded[$ctrl.currentGroup]
               }">
-                {{ groupExpanded[currentGroup] && text.collapse || text.expand }}
+                {{ groupExpanded[$ctrl.currentGroup] && text.collapse || text.expand }}
               </span>
               <span class="hidden-for-sighted collapse">{{ text.collapse }}</span>
             </div>
 
             <div>
-              {{ currentGroupObject.value }}
+              {{ $ctrl.currentGroupName }}
               <span class="count">
-                ({{ currentGroupObject.count }})
+                ({{ $ctrl.currentGroupObject.count }})
               </span>
             </div>
 

frontend/app/components/wp-table/wp-table.directive.ts

@@ -53,6 +53,7 @@ function wpTable(
       rows: '=',
       query: '=',
       groupBy: '=',
+      groupHeaders: '=',
       displaySums: '=',
       isSmaller: '=',
       resource: '=',

frontend/app/components/wp-table/wp-table.service.js

@@ -86,6 +86,19 @@ function WorkPackagesTableService($filter, QueryService, WorkPackagesTableHelper
       this.setRows(WorkPackagesTableHelper.buildRows(workPackages, groupBy, splitViewWorkPackageId));
     },
 
+    buildGroupHeaders: function(resource) {
+      var groups = {};
+
+      if (resource.groups) {
+        resource.groups.forEach(function(group) {
+          group.value = group.value || '';
+          groups[group.value] = group;
+        });
+      }
+
+      return groups;
+    },
+
     setRows: function(rows) {
       workPackagesTableData.rows = rows;
     },