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.
pull/4655/head
Oliver Günther 8 years ago
parent a362a83c90
commit b278564f28
  1. 1
      frontend/app/components/routing/wp-list/wp-list.controller.ts
  2. 1
      frontend/app/components/routing/wp-list/wp.list.html
  3. 2
      frontend/app/components/wp-table/wp-group-header/wp-group-header.directive.test.js
  4. 68
      frontend/app/components/wp-table/wp-group-header/wp-group-header.directive.ts
  5. 20
      frontend/app/components/wp-table/wp-table.directive.html
  6. 1
      frontend/app/components/wp-table/wp-table.directive.ts
  7. 13
      frontend/app/components/wp-table/wp-table.service.js

@ -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);

@ -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)">

@ -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;
});
});

@ -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);

@ -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>

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

@ -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;
},

Loading…
Cancel
Save