Refactor wp services to access global state through injection

frontend/app/components/context-menus/settings-menu/settings-menu.controller.test.ts

@@ -28,25 +28,27 @@
 
 /*jshint expr: true*/
 
+import {TableState} from '../../../../../../app/components/wp-table/table-state/table-state';
+
 var reactivestates = require("reactivestates");
 
 describe('optionsDropdown Directive', function() {
-  var compile,
-      element,
-      rootScope,
-      scope,
-      I18n,
-      AuthorisationService,
-      wpTableSum,
-      wpTableGroupBy,
-      columnsModal,
-      sortByModal,
-      groupByModal,
-      exportModal,
-      wpTableHierarchies,
-      states,
-      query,
-      form;
+  var compile:any,
+      element:any,
+      rootScope:any,
+      scope:any,
+      I18n:any,
+      AuthorisationService:any,
+      wpTableSum:any,
+      wpTableGroupBy:any,
+      columnsModal:any,
+      sortByModal:any,
+      groupByModal:any,
+      exportModal:any,
+      wpTableHierarchies:any,
+      states:any,
+      query:any,
+      form:any;
 
   beforeEach(angular.mock.module('openproject.models',
                     'openproject.workPackages',
@@ -54,7 +56,7 @@ describe('optionsDropdown Directive', function() {
                     'openproject.layout',
                     'openproject.services'));
 
-  beforeEach(angular.mock.module('openproject.templates', function($provide) {
+  beforeEach(angular.mock.module('openproject.templates', function($provide:any) {
     wpTableSum = {
       isEnabled: false
     };
@@ -77,9 +79,9 @@ describe('optionsDropdown Directive', function() {
     };
 
     var queryValues = {
-      takeUntil: function(condition) {
+      takeUntil: function(condition:any) {
         return {
-          subscribe: function(func) {
+          subscribe: function(func:any) {
             func(query);
           }
         }
@@ -89,9 +91,9 @@ describe('optionsDropdown Directive', function() {
     form = {}
 
     var formValues = {
-      takeUntil: function(condition) {
+      takeUntil: function(condition:any) {
         return {
-          subscribe: function(func) {
+          subscribe: function(func:any) {
             func(form);
           }
         }
@@ -99,6 +101,7 @@ describe('optionsDropdown Directive', function() {
     };
 
     states = {
+      globalTable: new TableState(),
       query: {
         resource: {
           values$: function() {
@@ -130,7 +133,7 @@ describe('optionsDropdown Directive', function() {
     $provide.constant('states', states);
   }));
 
-  beforeEach(inject(function($rootScope, $compile) {
+  beforeEach(inject(function($rootScope:any, $compile:any) {
     var optionsDropdownHtml;
     optionsDropdownHtml = '<div class="toolbar"><button has-dropdown-menu="" target="SettingsDropdownMenu" locals="query"></button></div>';
 
@@ -145,7 +148,7 @@ describe('optionsDropdown Directive', function() {
     };
   }));
 
-  beforeEach(inject(function(_AuthorisationService_, _I18n_){
+  beforeEach(inject(function(_AuthorisationService_:any, _I18n_:any){
     AuthorisationService = _AuthorisationService_;
 
     I18n = _I18n_;
@@ -364,7 +367,7 @@ describe('optionsDropdown Directive', function() {
         return getMenuItem(I18n.t('js.toolbar.settings.export'));
       }
 
-      var authorisation;
+      var authorisation:any;
 
       beforeEach(function() {
         authorisation = sinon.stub(AuthorisationService, 'can');

frontend/app/components/states.service.ts

@@ -1,5 +1,5 @@
 import {WPFocusState} from 'core-components/wp-fast-table/state/wp-table-focus.service';
-import {TableState} from 'core-components/wp-table/TableState';
+import {TableState} from 'core-components/wp-table/table-state/table-state';
 import {combine, createNewContext, derive, input, multiInput, StatesGroup} from 'reactivestates';
 import {opServicesModule} from '../angular-modules';
 import {QueryFormResource} from './api/api-v3/hal-resources/query-form-resource.service';

frontend/app/components/wp-fast-table/builders/modes/grouped/grouped-rows-builder.ts

@@ -1,6 +1,6 @@
 import {Injector} from '@angular/core';
 import {I18nToken} from 'core-app/angular4-transition-utils';
-import {TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import {GroupObject} from '../../../../api/api-v3/hal-resources/wp-collection-resource.service';
 import {States} from '../../../../states.service';
 import {WorkPackageTableColumnsService} from '../../../state/wp-table-columns.service';

frontend/app/components/wp-fast-table/builders/modes/hierarchy/hierarchy-render-pass.ts

@@ -1,6 +1,6 @@
 import {Injector} from '@angular/core';
 import {WorkPackageCacheService} from 'core-components/work-packages/work-package-cache.service';
-import {TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import {WorkPackageResourceInterface} from '../../../../api/api-v3/hal-resources/work-package-resource.service';
 import {States} from '../../../../states.service';
 import {

frontend/app/components/wp-fast-table/state/wp-table-additional-elements.service.ts

@@ -28,18 +28,9 @@
 
 import {opServicesModule} from '../../../angular-modules';
 import {States} from '../../states.service';
-import {WorkPackageTableRelationColumns} from '../wp-table-relation-columns';
 import {WorkPackageResourceInterface} from '../../api/api-v3/hal-resources/work-package-resource.service';
 import {WorkPackageTableColumnsService} from './wp-table-columns.service';
-import {TableStateStates, WorkPackageTableBaseService} from './wp-table-base.service';
-import {
-  RelationResource,
-  RelationResourceInterface
-} from '../../api/api-v3/hal-resources/relation-resource.service';
-import {
-  QueryColumn, queryColumnTypes, RelationQueryColumn,
-  TypeRelationQueryColumn
-} from '../../wp-query/query-column';
+import {RelationResourceInterface} from '../../api/api-v3/hal-resources/relation-resource.service';
 import {IQService} from 'angular';
 import {HalRequestService} from '../../api/api-v3/hal-request/hal-request.service';
 import {WorkPackageCacheService} from '../../work-packages/work-package-cache.service';
@@ -48,7 +39,7 @@ import {
   WorkPackageRelationsService
 } from '../../wp-relations/wp-relations.service';
 import {WorkPackageTableHierarchiesService} from './wp-table-hierarchy.service';
-import { WorkPackageNotificationService } from 'core-components/wp-edit/wp-notification.service';
+import {WorkPackageNotificationService} from 'core-components/wp-edit/wp-notification.service';
 
 export class WorkPackageTableAdditionalElementsService {
 

frontend/app/components/wp-fast-table/state/wp-table-base.service.ts

@@ -26,31 +26,46 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {InputState, State} from "reactivestates";
-import {States} from "../../states.service";
-import {WorkPackageTableBaseState} from "../wp-table-base";
-import {scopedObservable} from "../../../helpers/angular-rx-utils";
+import {InputState, State} from 'reactivestates';
+import {scopedObservable} from '../../../helpers/angular-rx-utils';
 import {Observable} from 'rxjs';
 import {QueryResource} from '../../api/api-v3/hal-resources/query-resource.service';
+import {TableState} from 'core-components/wp-table/table-state/table-state';
+import {QuerySchemaResourceInterface} from 'core-components/api/api-v3/hal-resources/query-schema-resource.service';
+import {States} from 'core-components/states.service';
+import {WorkPackageCollectionResource} from 'core-components/api/api-v3/hal-resources/wp-collection-resource.service';
 
-export type TableStateStates =
-  'columns' |
-  'groupBy' |
-  'filters' |
-  'sum' |
-  'sortBy' |
-  'timelineVisible' |
-  'relationColumns' |
-  'pagination';
-
-export abstract class WorkPackageTableBaseService {
-  protected abstract stateName:TableStateStates;
+export abstract class WorkPackageTableBaseService<T> {
+  protected tableState:TableState;
 
   constructor(protected states:States) {
+    // TODO Remove global references
+    this.tableState = states.globalTable;
   }
 
-  public get state():InputState<any> {
-    return this.states.globalTable[this.stateName];
+  /**
+   * Return the state this service cares for from the table state.
+   * @returns {InputState<T>}
+   */
+  public abstract get state():InputState<T>;
+
+  /**
+   * Get the state value from the current query.
+   *
+   * @param {QueryResource} query
+   * @returns {T} Instance of the state value for this type.
+   */
+  public abstract valueFromQuery(query:QueryResource, results:WorkPackageCollectionResource):T|undefined;
+
+  /**
+   * Initialize this table state from the given query resource,
+   * and possibly the associated schema.
+   *
+   * @param {QueryResource} query
+   * @param {QuerySchemaResourceInterface} schema
+   */
+  public initialize(query:QueryResource, results:WorkPackageCollectionResource, schema?:QuerySchemaResourceInterface) {
+    this.state.putValue(this.valueFromQuery(query, results)!);
   }
 
   public clear(reason:string) {

frontend/app/components/wp-fast-table/state/wp-table-columns.service.ts

@@ -26,39 +26,26 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {
-  TableStateStates,
-  WorkPackageQueryStateService,
-  WorkPackageTableBaseService
-} from './wp-table-base.service';
-import {States} from '../../states.service';
+import {WorkPackageQueryStateService, WorkPackageTableBaseService} from './wp-table-base.service';
 import {opServicesModule} from '../../../angular-modules';
 import {QueryResource} from '../../api/api-v3/hal-resources/query-resource.service';
 import {WorkPackageTableColumns} from '../wp-table-columns';
-import {QuerySchemaResourceInterface} from '../../api/api-v3/hal-resources/query-schema-resource.service';
 import {QueryColumn, queryColumnTypes} from '../../wp-query/query-column';
+import {InputState} from 'reactivestates';
+import {States} from 'core-components/states.service';
 
-export class WorkPackageTableColumnsService extends WorkPackageTableBaseService implements WorkPackageQueryStateService {
-  protected stateName = 'columns' as TableStateStates;
+export class WorkPackageTableColumnsService extends WorkPackageTableBaseService<WorkPackageTableColumns> implements WorkPackageQueryStateService {
 
-  constructor(protected states: States) {
+  public constructor(states:States) {
     super(states);
   }
 
-  public initialize(query:QueryResource, schema?:QuerySchemaResourceInterface) {
-    let state = new WorkPackageTableColumns(query);
-    this.state.putValue(state);
+  public get state():InputState<WorkPackageTableColumns> {
+    return this.tableState.columns;
   }
 
-  public update(query:QueryResource, schema?:QuerySchemaResourceInterface) {
-    let currentState = this.currentState;
-
-    if (currentState) {
-      currentState.update(query, schema);
-      this.state.putValue(currentState);
-    } else {
-      this.initialize(query, schema);
-    }
+  public valueFromQuery(query:QueryResource):WorkPackageTableColumns {
+    return new WorkPackageTableColumns(query);
   }
 
   public hasChanged(query:QueryResource) {

frontend/app/components/wp-fast-table/state/wp-table-filters.service.ts

@@ -27,7 +27,6 @@
 // ++
 
 import {
-  TableStateStates,
   WorkPackageQueryStateService,
   WorkPackageTableBaseService
 } from './wp-table-base.service';
@@ -38,17 +37,26 @@ import {CollectionResource} from '../../api/api-v3/hal-resources/collection-reso
 import {opServicesModule} from '../../../angular-modules';
 import {States} from '../../states.service';
 import {WorkPackageTableFilters} from '../wp-table-filters';
-import {HalResource} from '../../api/api-v3/hal-resources/hal-resource.service';
+import {TableState} from 'core-components/wp-table/table-state/table-state';
+import {InputState} from 'reactivestates';
+import {WorkPackageCollectionResource} from 'core-components/api/api-v3/hal-resources/wp-collection-resource.service';
 
-export class WorkPackageTableFiltersService extends WorkPackageTableBaseService implements WorkPackageQueryStateService {
-  protected stateName = 'filters' as TableStateStates;
+export class WorkPackageTableFiltersService extends WorkPackageTableBaseService<WorkPackageTableFilters> implements WorkPackageQueryStateService {
 
-  constructor(public states: States,
-              private $q: ng.IQService) {
+  constructor(public states:States,
+              private $q:ng.IQService) {
     super(states);
   }
 
-  public initialize(query:QueryResource, schema:QuerySchemaResourceInterface) {
+  public get state():InputState<WorkPackageTableFilters> {
+    return this.tableState.filters;
+  }
+
+  public valueFromQuery(query:QueryResource):WorkPackageTableFilters|undefined {
+    return undefined;
+  }
+
+  public initializeFilters(query:QueryResource, schema:QuerySchemaResourceInterface) {
     let filters = _.map(query.filters, filter => filter.$copy());
 
     this.loadCurrentFiltersSchemas(filters).then(() => {

frontend/app/components/wp-fast-table/state/wp-table-group-by.service.ts

@@ -27,38 +27,27 @@
 // ++
 
 import {QueryResource} from '../../api/api-v3/hal-resources/query-resource.service';
-import {QuerySchemaResourceInterface} from '../../api/api-v3/hal-resources/query-schema-resource.service';
 import {QueryGroupByResource} from '../../api/api-v3/hal-resources/query-group-by-resource.service';
 import {opServicesModule} from '../../../angular-modules';
-import {States} from '../../states.service';
 import {WorkPackageTableGroupBy} from '../wp-table-group-by';
-import {
-  TableStateStates,
-  WorkPackageQueryStateService,
-  WorkPackageTableBaseService
-} from './wp-table-base.service';
+import {WorkPackageQueryStateService, WorkPackageTableBaseService} from './wp-table-base.service';
 import {QueryColumn} from '../../wp-query/query-column';
+import {InputState} from 'reactivestates';
+import {WorkPackageCollectionResource} from 'core-components/api/api-v3/hal-resources/wp-collection-resource.service';
+import {States} from 'core-components/states.service';
 
-export class WorkPackageTableGroupByService extends WorkPackageTableBaseService implements WorkPackageQueryStateService {
-  protected stateName = 'groupBy' as TableStateStates;
-
-  constructor(protected states:States) {
+export class WorkPackageTableGroupByService extends WorkPackageTableBaseService<WorkPackageTableGroupBy> implements WorkPackageQueryStateService {
+  public constructor(states:States) {
     super(states);
   }
 
-  public initialize(query:QueryResource) {
-    this.state.putValue(new WorkPackageTableGroupBy(query));
-  }
 
-  public update(query:QueryResource) {
-    let currentState = this.currentState;
+  public get state():InputState<WorkPackageTableGroupBy> {
+    return this.tableState.groupBy;
+  }
 
-    if (currentState) {
-      currentState.update(query);
-      this.state.putValue(currentState);
-    } else {
-      this.initialize(query);
-    }
+  valueFromQuery(query:QueryResource) {
+    return new WorkPackageTableGroupBy(query);
   }
 
   public hasChanged(query:QueryResource) {

frontend/app/components/wp-fast-table/state/wp-table-hierarchy.service.ts

@@ -1,25 +1,22 @@
 import {QueryResource} from '../../api/api-v3/hal-resources/query-resource.service';
 import {opServicesModule} from '../../../angular-modules';
 import {States} from '../../states.service';
-import {
-  TableStateStates,
-  WorkPackageQueryStateService,
-  WorkPackageTableBaseService
-} from './wp-table-base.service';
+import {WorkPackageQueryStateService, WorkPackageTableBaseService} from './wp-table-base.service';
 import {WorkPackageTableHierarchies} from '../wp-table-hierarchies';
 import {WorkPackageCacheService} from '../../work-packages/work-package-cache.service';
 
-export class WorkPackageTableHierarchiesService extends WorkPackageTableBaseService implements WorkPackageQueryStateService {
-  protected stateName = 'hierarchies' as TableStateStates;
-
+export class WorkPackageTableHierarchiesService extends WorkPackageTableBaseService<WorkPackageTableHierarchies> implements WorkPackageQueryStateService {
   constructor(public states:States,
               public wpCacheService:WorkPackageCacheService) {
     super(states);
   }
 
-  public initialize(query:QueryResource) {
-    let current = new WorkPackageTableHierarchies(query.showHierarchies);
-    this.state.putValue(current);
+  public get state() {
+    return this.tableState.hierarchies;
+  }
+
+  public valueFromQuery(query:QueryResource):WorkPackageTableHierarchies|undefined {
+    return new WorkPackageTableHierarchies(query.showHierarchies);
   }
 
   public hasChanged(query:QueryResource) {

frontend/app/components/wp-fast-table/state/wp-table-pagination.service.ts

@@ -27,20 +27,12 @@
 //++
 
 import {Injectable} from '@angular/core';
-import {
-  WorkPackageTableBaseService,
-  TableStateStates
-} from './wp-table-base.service';
-import {States} from '../../states.service';
+import {WorkPackageTableBaseService,} from './wp-table-base.service';
 import {opServicesModule} from '../../../angular-modules';
 import {WorkPackageCollectionResource} from '../../api/api-v3/hal-resources/wp-collection-resource.service'
-import {
-  QueryResource
-} from '../../api/api-v3/hal-resources/query-resource.service';
+import {QueryResource} from '../../api/api-v3/hal-resources/query-resource.service';
 import {WorkPackageTablePagination} from '../wp-table-pagination';
-import {
-  WorkPackageTableBaseState,
-} from '../wp-table-base';
+import {States} from 'core-components/states.service';
 
 interface PaginationUpdateObject {
   page?:number;
@@ -50,17 +42,17 @@ interface PaginationUpdateObject {
 }
 
 @Injectable()
-export class WorkPackageTablePaginationService extends WorkPackageTableBaseService {
-  protected stateName = 'pagination' as TableStateStates;
-
-  constructor(public states: States) {
+export class WorkPackageTablePaginationService extends WorkPackageTableBaseService<WorkPackageTablePagination> {
+  public constructor(states:States) {
     super(states);
   }
 
-  public initialize(results:WorkPackageCollectionResource) {
-    let state = new WorkPackageTablePagination(results);
+  public get state() {
+    return this.tableState.pagination;
+  }
 
-    this.state.putValue(state);
+  public valueFromQuery(query:QueryResource, results:WorkPackageCollectionResource) {
+    return new WorkPackageTablePagination(results);
   }
 
   public updateFromObject(object:PaginationUpdateObject) {

frontend/app/components/wp-fast-table/state/wp-table-relation-columns.service.ts

@@ -31,13 +31,15 @@ import {States} from '../../states.service';
 import {WorkPackageTableRelationColumns} from '../wp-table-relation-columns';
 import {WorkPackageResourceInterface} from '../../api/api-v3/hal-resources/work-package-resource.service';
 import {WorkPackageTableColumnsService} from './wp-table-columns.service';
-import {TableStateStates, WorkPackageTableBaseService} from './wp-table-base.service';
+import {WorkPackageTableBaseService} from './wp-table-base.service';
 import {
   RelationResource,
   RelationResourceInterface
 } from '../../api/api-v3/hal-resources/relation-resource.service';
 import {
-  QueryColumn, queryColumnTypes, RelationQueryColumn,
+  QueryColumn,
+  queryColumnTypes,
+  RelationQueryColumn,
   TypeRelationQueryColumn
 } from '../../wp-query/query-column';
 import {IQService} from 'angular';
@@ -47,12 +49,12 @@ import {
   RelationsStateValue,
   WorkPackageRelationsService
 } from '../../wp-relations/wp-relations.service';
+import {TableState} from 'core-components/wp-table/table-state/table-state';
+import {QueryResource} from 'core-components/api/api-v3/hal-resources/query-resource.service';
 
 export type RelationColumnType = 'toType' | 'ofType';
 
-export class WorkPackageTableRelationColumnsService extends WorkPackageTableBaseService {
-  protected stateName = 'relationColumns' as TableStateStates;
-
+export class WorkPackageTableRelationColumnsService extends WorkPackageTableBaseService<WorkPackageTableRelationColumns> {
   constructor(public states:States,
               public wpTableColumns:WorkPackageTableColumnsService,
               public $q:IQService,
@@ -62,7 +64,15 @@ export class WorkPackageTableRelationColumnsService extends WorkPackageTableBase
     super(states);
   }
 
-  public initialize(workPackages:WorkPackageResourceInterface[]) {
+  public get state() {
+    return this.tableState.relationColumns;
+  }
+
+  public valueFromQuery(query:QueryResource) {
+    return undefined;
+  }
+
+  public initialize() {
     this.initializeState();
   }
 

frontend/app/components/wp-fast-table/state/wp-table-sort-by.service.ts

@@ -26,36 +26,33 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {
-  TableStateStates,
-  WorkPackageQueryStateService,
-  WorkPackageTableBaseService
-} from './wp-table-base.service';
+import {WorkPackageQueryStateService, WorkPackageTableBaseService} from './wp-table-base.service';
 import {QueryResource} from '../../api/api-v3/hal-resources/query-resource.service';
-import {QuerySchemaResourceInterface} from '../../api/api-v3/hal-resources/query-schema-resource.service';
 import {
   QUERY_SORT_BY_ASC,
   QUERY_SORT_BY_DESC,
   QuerySortByResource
 } from '../../api/api-v3/hal-resources/query-sort-by-resource.service';
 import {opServicesModule} from '../../../angular-modules';
-import {States} from '../../states.service';
 import {WorkPackageTableSortBy} from '../wp-table-sort-by';
 import {QueryColumn} from '../../wp-query/query-column';
 import {combine} from 'reactivestates';
 import {Observable} from 'rxjs';
+import {States} from 'core-components/states.service';
 
-export class WorkPackageTableSortByService extends WorkPackageTableBaseService implements WorkPackageQueryStateService {
-  protected stateName = 'sortBy' as TableStateStates;
+export class WorkPackageTableSortByService extends WorkPackageTableBaseService<WorkPackageTableSortBy> implements WorkPackageQueryStateService {
 
-  constructor(public states: States) {
+  public constructor(states:States) {
     super(states);
   }
 
-  public initialize(query:QueryResource) {
-    let sortBy = new WorkPackageTableSortBy(query);
 
-    this.state.putValue(sortBy);
+  public get state() {
+    return this.tableState.sortBy;
+  }
+
+  public valueFromQuery(query:QueryResource) {
+    return new WorkPackageTableSortBy(query);
   }
 
   public onReadyWithAvailable():Observable<null> {

frontend/app/components/wp-fast-table/state/wp-table-sum.service.ts

@@ -26,23 +26,27 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {
-  TableStateStates,
-  WorkPackageQueryStateService,
-  WorkPackageTableBaseService
-} from './wp-table-base.service';
+import {WorkPackageQueryStateService, WorkPackageTableBaseService} from './wp-table-base.service';
 import {QueryResource} from '../../api/api-v3/hal-resources/query-resource.service';
 import {opServicesModule} from '../../../angular-modules';
-import {States} from '../../states.service';
 import {WorkPackageTableSum} from '../wp-table-sum';
+import {States} from 'core-components/states.service';
 
-export class WorkPackageTableSumService extends WorkPackageTableBaseService implements WorkPackageQueryStateService {
-  protected stateName = 'sum' as TableStateStates;
+export class WorkPackageTableSumService extends WorkPackageTableBaseService<WorkPackageTableSum> implements WorkPackageQueryStateService {
 
-  constructor(public states: States) {
+  public constructor(states:States) {
     super(states);
   }
 
+
+  public get state() {
+    return this.tableState.sum;
+  }
+
+  public valueFromQuery(query:QueryResource) {
+    return new WorkPackageTableSum(query.sums);
+  }
+
   public initialize(query:QueryResource) {
     let sum = new WorkPackageTableSum(query.sums);
 

frontend/app/components/wp-fast-table/state/wp-table-timeline.service.ts

@@ -27,27 +27,31 @@
 // ++
 
 import {opServicesModule} from '../../../angular-modules';
-import {QueryResource, TimelineLabels, TimelineZoomLevel} from '../../api/api-v3/hal-resources/query-resource.service';
+import {
+  QueryResource,
+  TimelineLabels,
+  TimelineZoomLevel
+} from '../../api/api-v3/hal-resources/query-resource.service';
 import {WorkPackageResourceInterface} from '../../api/api-v3/hal-resources/work-package-resource.service';
-import {States} from '../../states.service';
 import {zoomLevelOrder} from '../../wp-table/timeline/wp-timeline';
 import {WorkPackageTableTimelineState} from './../wp-table-timeline';
-import {TableStateStates, WorkPackageQueryStateService, WorkPackageTableBaseService} from './wp-table-base.service';
+import {WorkPackageQueryStateService, WorkPackageTableBaseService} from './wp-table-base.service';
+import {States} from 'core-components/states.service';
 
-export class WorkPackageTableTimelineService extends WorkPackageTableBaseService implements WorkPackageQueryStateService {
+export class WorkPackageTableTimelineService extends WorkPackageTableBaseService<WorkPackageTableTimelineState> implements WorkPackageQueryStateService {
 
-  protected stateName = 'timelineVisible' as TableStateStates;
-
-  constructor(public states:States) {
+  public constructor(states:States) {
     super(states);
   }
 
-  public initialize(query:QueryResource) {
-    let current = new WorkPackageTableTimelineState(query);
 
-    this.state.putValue(current);
+  public get state() {
+    return this.tableState.timelineVisible;
   }
 
+  public valueFromQuery(query:QueryResource) {
+    return new WorkPackageTableTimelineState(query);
+  }
   public hasChanged(query:QueryResource) {
     const visibilityChanged = this.isVisible !== query.timelineVisible;
     const zoomLevelChanged = this.zoomLevel !== query.timelineZoomLevel;

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

@@ -1,11 +1,8 @@
 import {Injector} from '@angular/core';
 import {I18nToken} from 'core-app/angular4-transition-utils';
-import {TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import {debugLog} from '../../helpers/debug_output';
-import {
-  WorkPackageResource,
-  WorkPackageResourceInterface
-} from '../api/api-v3/hal-resources/work-package-resource.service';
+import {WorkPackageResourceInterface} from '../api/api-v3/hal-resources/work-package-resource.service';
 
 import {States} from '../states.service';
 import {WorkPackageCacheService} from '../work-packages/work-package-cache.service';
@@ -15,7 +12,6 @@ import {HierarchyRowsBuilder} from './builders/modes/hierarchy/hierarchy-rows-bu
 import {PlainRowsBuilder} from './builders/modes/plain/plain-rows-builder';
 import {RowsBuilder} from './builders/modes/rows-builder';
 import {PrimaryRenderPass, RenderedRow} from './builders/primary-render-pass';
-import {TableHandlerRegistry} from './handlers/table-handler-registry';
 import {WorkPackageTableEditingContext} from './wp-table-editing';
 
 import {WorkPackageTableRow} from './wp-table.interfaces';
@@ -52,8 +48,6 @@ export class WorkPackageTable {
               public timelineBody:HTMLElement,
               public timelineController:WorkPackageTimelineTableController) {
 
-    new TableHandlerRegistry(this.injector).attachTo(this);
-    // TableHandlerRegistry.attachTo(this);
   }
 
   public get renderedRows() {

frontend/app/components/wp-list/wp-list.service.ts

@@ -268,7 +268,7 @@ export class WorkPackagesListService {
   private updateStatesFromWPListOnPromise(query:QueryResource, promise:ng.IPromise<WorkPackageCollectionResource>):ng.IPromise<WorkPackageCollectionResource> {
     return promise.then((results) => {
       this.states.query.context.doAndTransition('Query loaded', () => {
-        this.wpStatesInitialization.updateFromResults(results);
+        this.wpStatesInitialization.updateFromResults(query, results);
         return this.states.tableRendering.onQueryUpdated.valuesPromise();
       });
 

frontend/app/components/wp-list/wp-states-initialization.service.ts

@@ -45,9 +45,9 @@ export class WorkPackageStatesInitializationService {
   public initialize(query:QueryResource, results:WorkPackageCollectionResource) {
     this.clearStates();
 
-    this.initializeFromQuery(query);
+    this.initializeFromQuery(query, results);
 
-    this.updateFromResults(results);
+    this.updateFromResults(query, results);
   }
 
   /**
@@ -63,7 +63,7 @@ export class WorkPackageStatesInitializationService {
       this.states.schemas.get(schema.href as string).putValue(schema);
     });
 
-    this.wpTableFilters.initialize(query, schema);
+    this.wpTableFilters.initializeFilters(query, schema);
     this.states.query.form.putValue(form);
 
     this.states.query.available.columns.putValue(schema.columns.allowedValues);
@@ -71,7 +71,7 @@ export class WorkPackageStatesInitializationService {
     this.states.query.available.groupBy.putValue(schema.groupBy.allowedValues);
   }
 
-  public updateFromResults(results:WorkPackageCollectionResource) {
+  public updateFromResults(query:QueryResource, results:WorkPackageCollectionResource) {
     // Clear table required data states
     this.states.globalTable.additionalRequiredWorkPackages.clear('Clearing additional WPs before updating rows');
 
@@ -89,26 +89,26 @@ export class WorkPackageStatesInitializationService {
 
     this.states.globalTable.groups.putValue(angular.copy(results.groups));
 
-    this.wpTablePagination.initialize(results);
+    this.wpTablePagination.initialize(query, results);
 
     this.wpListChecksumService.updateIfDifferent(this.states.query.resource.value!, this.wpTablePagination.current);
 
-    this.wpTableRelationColumns.initialize(results.elements);
+    this.wpTableRelationColumns.initialize();
 
     this.wpTableAdditionalElements.initialize(results.elements);
 
     this.AuthorisationService.initModelAuth('work_packages', results.$links);
   }
 
-  private initializeFromQuery(query:QueryResource) {
+  private initializeFromQuery(query:QueryResource, results:WorkPackageCollectionResource) {
     this.states.query.resource.putValue(query);
 
     this.wpTableSum.initialize(query);
-    this.wpTableColumns.initialize(query);
-    this.wpTableSortBy.initialize(query);
-    this.wpTableGroupBy.initialize(query);
-    this.wpTableTimeline.initialize(query);
-    this.wpTableHierarchies.initialize(query);
+    this.wpTableColumns.initialize(query, results);
+    this.wpTableSortBy.initialize(query, results);
+    this.wpTableGroupBy.initialize(query, results);
+    this.wpTableTimeline.initialize(query, results);
+    this.wpTableHierarchies.initialize(query, results);
 
     this.AuthorisationService.initModelAuth('query', query.$links);
   }

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

@@ -1,19 +1,19 @@
-import {WorkPackageResourceInterface} from 'core-components/api/api-v3/hal-resources/work-package-resource.service';
+import {WorkPackageResourceInterface} from 'app/components/api/api-v3/hal-resources/work-package-resource.service';
 import {
   GroupObject,
   WorkPackageCollectionResource
-} from 'core-components/api/api-v3/hal-resources/wp-collection-resource.service';
-import {RenderedRow} from 'core-components/wp-fast-table/builders/primary-render-pass';
-import {WorkPackageTableColumns} from 'core-components/wp-fast-table/wp-table-columns';
-import {WorkPackageTableFilters} from 'core-components/wp-fast-table/wp-table-filters';
-import {WorkPackageTableGroupBy} from 'core-components/wp-fast-table/wp-table-group-by';
-import {WorkPackageTableHierarchies} from 'core-components/wp-fast-table/wp-table-hierarchies';
-import {WorkPackageTablePagination} from 'core-components/wp-fast-table/wp-table-pagination';
-import {WorkPackageTableRelationColumns} from 'core-components/wp-fast-table/wp-table-relation-columns';
-import {WorkPackageTableSortBy} from 'core-components/wp-fast-table/wp-table-sort-by';
-import {WorkPackageTableSum} from 'core-components/wp-fast-table/wp-table-sum';
-import {WorkPackageTableTimelineState} from 'core-components/wp-fast-table/wp-table-timeline';
-import {WPTableRowSelectionState} from 'core-components/wp-fast-table/wp-table.interfaces';
+} from 'app/components/api/api-v3/hal-resources/wp-collection-resource.service';
+import {RenderedRow} from 'app/components/wp-fast-table/builders/primary-render-pass';
+import {WorkPackageTableColumns} from 'app/components/wp-fast-table/wp-table-columns';
+import {WorkPackageTableFilters} from 'app/components/wp-fast-table/wp-table-filters';
+import {WorkPackageTableGroupBy} from 'app/components/wp-fast-table/wp-table-group-by';
+import {WorkPackageTableHierarchies} from 'app/components/wp-fast-table/wp-table-hierarchies';
+import {WorkPackageTablePagination} from 'app/components/wp-fast-table/wp-table-pagination';
+import {WorkPackageTableRelationColumns} from 'app/components/wp-fast-table/wp-table-relation-columns';
+import {WorkPackageTableSortBy} from 'app/components/wp-fast-table/wp-table-sort-by';
+import {WorkPackageTableSum} from 'app/components/wp-fast-table/wp-table-sum';
+import {WorkPackageTableTimelineState} from 'app/components/wp-fast-table/wp-table-timeline';
+import {WPTableRowSelectionState} from 'app/components/wp-fast-table/wp-table.interfaces';
 import {derive, input, State, StatesGroup} from 'reactivestates';
 import {Subject} from 'rxjs/Rx';
 

frontend/app/components/wp-table/timeline/cells/wp-timeline-cell-mouse-handler.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {Injector} from '@angular/core';
-import {TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import * as moment from 'moment';
 import {$injectNow} from '../../../angular/angular-injector-bridge.functions';
 import {QueryDmService} from '../../../api/api-v3/hal-resource-dms/query-dm.service';

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

@@ -27,7 +27,7 @@
 // ++
 
 import {AfterViewInit, Component, ElementRef, Inject, Injector, OnDestroy} from '@angular/core';
-import {TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import {Moment} from 'moment';
 import {componentDestroyed} from 'ng2-rx-componentdestroyed';
 import {I18nToken, NotificationsServiceToken} from '../../../../angular4-transition-utils';

frontend/app/components/wp-table/timeline/global-elements/wp-timeline-relations.directive.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {Component, ElementRef, Injector, OnDestroy, OnInit} from '@angular/core';
-import {TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import {componentDestroyed} from 'ng2-rx-componentdestroyed';
 import {State} from 'reactivestates';
 import {Observable} from 'rxjs/Observable';

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

@@ -27,7 +27,7 @@
 // ++
 
 import {AfterViewInit, Directive, ElementRef, Inject, Injector} from '@angular/core';
-import {TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import {combine} from 'reactivestates';
 import {I18nToken} from '../../../angular4-transition-utils';
 import {SchemaResource} from '../../api/api-v3/hal-resources/schema-resource.service';
@@ -36,7 +36,6 @@ import {States} from '../../states.service';
 import {DisplayField} from '../../wp-display/wp-display-field/wp-display-field.module';
 import {WorkPackageDisplayFieldService} from '../../wp-display/wp-display-field/wp-display-field.service';
 import {WorkPackageTableColumns} from '../../wp-fast-table/wp-table-columns';
-import {HalResource} from "core-components/api/api-v3/hal-resources/hal-resource.service";
 
 @Directive({
   selector: '[wpTableSumsRow]'

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

@@ -31,7 +31,7 @@ import {downgradeComponent} from '@angular/upgrade/static';
 import {columnsModalToken, I18nToken} from 'core-app/angular4-transition-utils';
 import {QueryResource} from 'core-components/api/api-v3/hal-resources/query-resource.service';
 import {GroupObject} from 'core-components/api/api-v3/hal-resources/wp-collection-resource.service';
-import {TableState, TableStateHolder} from 'core-components/wp-table/TableState';
+import {TableState, TableStateHolder} from 'core-components/wp-table/table-state/table-state';
 import {componentDestroyed} from 'ng2-rx-componentdestroyed';
 import {Observable} from 'rxjs/Observable';
 import {debugLog} from '../../helpers/debug_output';
@@ -44,7 +44,8 @@ import {WorkPackageTable} from '../wp-fast-table/wp-fast-table';
 import {WorkPackageTimelineTableController} from './timeline/container/wp-timeline-container.directive';
 import {WpTableHoverSync} from './wp-table-hover-sync';
 import {createScrollSync} from './wp-table-scroll-sync';
-
+import {TableHandlerRegistry} from 'core-components/wp-fast-table/handlers/table-handler-registry';
+import {QueryGroupByResource} from 'core-components/api/api-v3/hal-resources/query-group-by-resource.service';
 
 @Component({
   template: require('!!raw-loader!./wp-table.directive.html'),
@@ -78,7 +79,7 @@ export class WorkPackagesTableController implements OnInit, OnDestroy {
 
   public rowcount:number;
 
-  public groupBy:GroupObject[];
+  public groupBy:QueryGroupByResource|undefined;
 
   public columns:any;
 
@@ -171,6 +172,7 @@ export class WorkPackagesTableController implements OnInit, OnDestroy {
     this.workPackageTable = new WorkPackageTable(this.injector, this.$element[0], tbody[0], body, controller);
     this.tbody = tbody;
     controller.workPackageTable = this.workPackageTable;
+    new TableHandlerRegistry(this.injector).attachTo(this.workPackageTable);
 
     let t1 = performance.now();
     debugLog('Render took ' + (t1 - t0) + ' milliseconds.');