Convert wp list component

frontend/app/angular4-modules.ts

@@ -75,7 +75,7 @@ import {
   halRequestToken,
   I18nToken,
   NotificationsServiceToken,
-  PathHelperToken,
+  PathHelperToken, StateToken,
   upgradeService,
   upgradeServiceWithToken
 } from './angular4-transition-utils';
@@ -88,6 +88,11 @@ import {AddSectionDropdownComponent} from 'core-components/common/hide-section/a
 import {HideSectionLinkComponent} from 'core-components/common/hide-section/hide-section-link/hide-section-link.component';
 import {GonRef} from 'core-components/common/gon-ref/gon-ref';
 import {AuthorisationService} from 'core-components/common/model-auth/model-auth.service';
+import {WorkPackageTableFiltersService} from 'core-components/wp-fast-table/state/wp-table-filters.service';
+import {WorkPackageTableSumService} from 'core-components/wp-fast-table/state/wp-table-sum.service';
+import {WorkPackagesListService} from 'core-components/wp-list/wp-list.service';
+import {WorkPackagesListChecksumService} from 'core-components/wp-list/wp-list-checksum.service';
+import {LoadingIndicatorService} from 'core-components/common/loading-indicator/loading-indicator.service';
 
 @NgModule({
   imports: [
@@ -100,9 +105,9 @@ import {AuthorisationService} from 'core-components/common/model-auth/model-auth
     HideSectionService,
     upgradeServiceWithToken('$rootScope', $rootScopeToken),
     upgradeServiceWithToken('I18n', I18nToken),
+    upgradeServiceWithToken('$state', StateToken),
     upgradeServiceWithToken('$q', $qToken),
     upgradeServiceWithToken('$timeout', $timeoutToken),
-    upgradeServiceWithToken('$state', $stateToken),
     upgradeServiceWithToken('NotificationsService', NotificationsServiceToken),
     upgradeServiceWithToken('columnsModal', columnsModalToken),
     upgradeServiceWithToken('FocusHelper', FocusHelperToken),
@@ -124,6 +129,11 @@ import {AuthorisationService} from 'core-components/common/model-auth/model-auth
     upgradeService('wpNotificationsService', WorkPackageNotificationService),
     upgradeService('wpTableHierarchies', WorkPackageTableHierarchiesService),
     upgradeService('wpTableSortBy', WorkPackageTableSortByService),
+    upgradeService('wpTableFilters', WorkPackageTableFiltersService),
+    upgradeService('wpTableSum', WorkPackageTableSumService),
+    upgradeService('wpListService', WorkPackagesListService),
+    upgradeService('wpListChecksumService', WorkPackagesListChecksumService),
+    upgradeService('loadingIndicator', LoadingIndicatorService),
     upgradeService('wpTableRelationColumns', WorkPackageTableRelationColumnsService),
     upgradeService('wpTableGroupBy', WorkPackageTableGroupByService),
     upgradeService('wpTableColumns', WorkPackageTableColumnsService),

frontend/app/angular4-transition-utils.ts

@@ -36,6 +36,7 @@ export const $timeoutToken = new InjectionToken<ITimeoutService>('$timeout');
 export const $stateToken = new InjectionToken<StateService>('$state');
 
 export const I18nToken = new InjectionToken<op.I18n>('I18n');
+export const StateToken = new InjectionToken<StateService>('$state');
 export const columnsModalToken = new InjectionToken<any>('columnsModal');
 export const FocusHelperToken = new InjectionToken<any>('FocusHelper');
 export const NotificationsServiceToken = new InjectionToken<any>('NotificationsService');

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

@@ -47,9 +47,10 @@ import {WorkPackagesListChecksumService} from '../../wp-list/wp-list-checksum.se
 import {WorkPackagesListService} from '../../wp-list/wp-list.service';
 import {WorkPackageTableRefreshService} from '../../wp-table/wp-table-refresh-request.service';
 import {WorkPackageTableHierarchiesService} from './../../wp-fast-table/state/wp-table-hierarchy.service';
-import {TransitionService} from '@uirouter/core';
-import {I18nToken} from 'core-app/angular4-transition-utils';
-
+import {I18nToken, StateToken} from 'core-app/angular4-transition-utils';
+import {AuthorisationService} from 'core-components/common/model-auth/model-auth.service';
+import {downgradeComponent} from '@angular/upgrade/static';
+import {TableState} from 'core-components/wp-table/table-state/table-state';
 
 @Component({
   selector: 'wp-list',
@@ -68,6 +69,7 @@ export class WorkPackagesListComponent implements OnInit, OnDestroy {
   tableInformationLoaded = false;
 
   selectedTitle?:string;
+  tableState:TableState;
 
   readonly setAnchorToNextElement = () => {
     // Skip to next when visible, otherwise skip to previous
@@ -83,13 +85,11 @@ export class WorkPackagesListComponent implements OnInit, OnDestroy {
 
   readonly allowed = (model:string, permission:string) => {
     // TODO
-    return true || this.AuthorisationService.can(model, permission);
+    return true || this.authorisationService.can(model, permission);
   };
 
-  constructor(readonly $state:StateService,
-              readonly $transitions:TransitionService,
-              readonly states:States,
-              readonly AuthorisationService:any,
+  constructor(readonly states:States,
+              readonly authorisationService:AuthorisationService,
               readonly wpTableRefresh:WorkPackageTableRefreshService,
               readonly wpTableColumns:WorkPackageTableColumnsService,
               readonly wpTableSortBy:WorkPackageTableSortByService,
@@ -103,7 +103,10 @@ export class WorkPackagesListComponent implements OnInit, OnDestroy {
               readonly wpListService:WorkPackagesListService,
               readonly wpListChecksumService:WorkPackagesListChecksumService,
               readonly loadingIndicator:LoadingIndicatorService,
+              @Inject(StateToken) readonly $state:StateService,
               @Inject(I18nToken) readonly I18n:op.I18n) {
+
+    this.tableState = this.states.globalTable;
   }
 
   ngOnInit() {
@@ -115,22 +118,11 @@ export class WorkPackagesListComponent implements OnInit, OnDestroy {
     //  Require initial loading of the list if not yet done
     if (loadingRequired) {
       this.wpTableRefresh.clear('Impending query loading.');
-      this.loadQuery();
+      this.wpListService.loadCurrentQueryFromParams(this.projectIdentifier);
     }
 
     // Listen for refresh changes
     this.setupRefreshObserver();
-
-    this.$transitions.onSuccess({}, (transition) => {
-      console.log('Updating params!' + transition.to().name);
-
-      const params = transition.params('to');
-      let newChecksum = params.query_props;
-      let newId = params.query_id && parseInt(params.query_id);
-
-      this.wpListChecksumService
-        .executeIfOutdated(newId, newChecksum, this.loadQuery.bind(this));
-    });
   }
 
   ngOnDestroy():void {
@@ -217,14 +209,6 @@ export class WorkPackagesListComponent implements OnInit, OnDestroy {
     });
   }
 
-  loadQuery() {
-    this.wpListChecksumService.clear();
-    this.loadingIndicator.table.promise =
-      this.wpListService.fromQueryParams(this.$state.params, this.projectIdentifier).then(() => {
-        return this.states.globalTable.rendered.valuesPromise();
-      });
-  }
-
   updateResults() {
     return this.wpListService.reloadCurrentResultsList();
   }
@@ -251,3 +235,8 @@ export class WorkPackagesListComponent implements OnInit, OnDestroy {
   }
 
 }
+
+angular
+  .module('openproject.workPackages.directives')
+  .directive('wpList',
+    downgradeComponent({component: WorkPackagesListComponent}));

frontend/app/components/routing/wp-list/wp-list.router.directive.ts

@@ -0,0 +1,56 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+// ++
+
+import {WorkPackagesListService} from 'core-components/wp-list/wp-list.service';
+import {WorkPackagesListChecksumService} from 'core-components/wp-list/wp-list-checksum.service';
+import {StateParams} from '@uirouter/core';
+
+function WorkPackagesListRouterController($scope:any,
+                                          $stateParams:StateParams,
+                                          wpListChecksumService:WorkPackagesListChecksumService,
+                                          wpListService:WorkPackagesListService) {
+  $scope.$watchCollection(
+    () => {
+      return {
+        query_id: $stateParams['query_id'],
+        query_props: $stateParams['query_props']
+      };
+    },
+    (params:{ query_id:any, query_props:any }) => {
+      let newChecksum = params.query_props;
+      let newId = params.query_id && parseInt(params.query_id);
+
+      wpListChecksumService.executeIfOutdated(newId, newChecksum, function() {
+        wpListService.loadCurrentQueryFromParams($stateParams['projectPath']);
+      });
+    });
+}
+
+angular
+  .module('openproject.workPackages.controllers')
+  .controller('WorkPackagesListRouter', WorkPackagesListRouterController);

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

@@ -38,18 +38,23 @@ import {WorkPackagesListInvalidQueryService} from './wp-list-invalid-query.servi
 import {WorkPackageStatesInitializationService} from './wp-states-initialization.service';
 import {QueryMenuService} from 'core-components/wp-query-menu/wp-query-menu.service';
 import {AuthorisationService} from 'core-components/common/model-auth/model-auth.service';
+import {StateParams, StateService} from '@uirouter/core';
+import {WorkPackagesListChecksumService} from 'core-components/wp-list/wp-list-checksum.service';
+import {LoadingIndicatorService} from 'core-components/common/loading-indicator/loading-indicator.service';
 
 export class WorkPackagesListService {
   constructor(protected NotificationsService:any,
               protected UrlParamsHelper:any,
               protected authorisationService:AuthorisationService,
               protected $q:ng.IQService,
-              protected $state:any,
+              protected $state:StateService,
               protected QueryDm:QueryDmService,
               protected QueryFormDm:QueryFormDmService,
               protected states:States,
               protected wpTablePagination:WorkPackageTablePaginationService,
+              protected wpListChecksumService:WorkPackagesListChecksumService,
               protected wpStatesInitialization:WorkPackageStatesInitializationService,
+              protected loadingIndicator:LoadingIndicatorService,
               protected wpListInvalidQueryService:WorkPackagesListInvalidQueryService,
               protected I18n:op.I18n,
               protected queryMenu:QueryMenuService) {
@@ -133,6 +138,18 @@ export class WorkPackagesListService {
     return this.loadResultsList(query, pagination);
   }
 
+  /**
+   * Load the query from the given state params
+   * @param stateParams
+   */
+  public loadCurrentQueryFromParams(projectIdentifier?:string) {
+    this.wpListChecksumService.clear();
+    this.loadingIndicator.table.promise =
+      this.fromQueryParams(this.$state.params, projectIdentifier).then(() => {
+        return this.states.globalTable.rendered.valuesPromise();
+      });
+  }
+
   public loadForm(query:QueryResource):ng.IPromise<QueryFormResource> {
     return this.QueryFormDm.load(query).then((form:QueryFormResource) => {
       this.wpStatesInitialization.updateStatesFromForm(query, form);

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

@@ -17,6 +17,7 @@ import {WorkPackageTableRelationColumnsService} from '../wp-fast-table/state/wp-
 import {WorkPackagesListChecksumService} from './wp-list-checksum.service';
 import {WorkPackageTableSortByService} from '../wp-fast-table/state/wp-table-sort-by.service';
 import {WorkPackageTableAdditionalElementsService} from '../wp-fast-table/state/wp-table-additional-elements.service';
+import {AuthorisationService} from 'core-components/common/model-auth/model-auth.service';
 
 export class WorkPackageStatesInitializationService {
   constructor(protected states:States,
@@ -32,7 +33,7 @@ export class WorkPackageStatesInitializationService {
               protected wpTableAdditionalElements:WorkPackageTableAdditionalElementsService,
               protected wpCacheService:WorkPackageCacheService,
               protected wpListChecksumService:WorkPackagesListChecksumService,
-              protected AuthorisationService:any) {
+              protected authorisationService:AuthorisationService) {
   }
 
   /**
@@ -97,7 +98,7 @@ export class WorkPackageStatesInitializationService {
 
     this.wpTableAdditionalElements.initialize(results.elements);
 
-    this.AuthorisationService.initModelAuth('work_packages', results.$links);
+    this.authorisationService.initModelAuth('work_packages', results.$links);
   }
 
   private initializeFromQuery(query:QueryResource, results:WorkPackageCollectionResource) {
@@ -110,7 +111,7 @@ export class WorkPackageStatesInitializationService {
     this.wpTableTimeline.initialize(query, results);
     this.wpTableHierarchies.initialize(query, results);
 
-    this.AuthorisationService.initModelAuth('query', query.$links);
+    this.authorisationService.initModelAuth('query', query.$links);
   }
 
   private clearStates() {