From 1b00a67988244aa56b7bd3c11d72829a1304e7cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Wed, 14 Feb 2018 07:48:05 +0100 Subject: [PATCH] Convert wp list component --- frontend/app/angular4-modules.ts | 14 ++++- frontend/app/angular4-transition-utils.ts | 1 + .../routing/wp-list/wp-list.component.ts | 45 ++++++--------- .../wp-list/wp-list.router.directive.ts | 56 +++++++++++++++++++ .../app/components/wp-list/wp-list.service.ts | 19 ++++++- .../wp-states-initialization.service.ts | 7 ++- 6 files changed, 108 insertions(+), 34 deletions(-) create mode 100644 frontend/app/components/routing/wp-list/wp-list.router.directive.ts diff --git a/frontend/app/angular4-modules.ts b/frontend/app/angular4-modules.ts index 31472d61a8..dc6887eb77 100644 --- a/frontend/app/angular4-modules.ts +++ b/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), diff --git a/frontend/app/angular4-transition-utils.ts b/frontend/app/angular4-transition-utils.ts index 406e6d5b32..0f451fcfa6 100644 --- a/frontend/app/angular4-transition-utils.ts +++ b/frontend/app/angular4-transition-utils.ts @@ -36,6 +36,7 @@ export const $timeoutToken = new InjectionToken('$timeout'); export const $stateToken = new InjectionToken('$state'); export const I18nToken = new InjectionToken('I18n'); +export const StateToken = new InjectionToken('$state'); export const columnsModalToken = new InjectionToken('columnsModal'); export const FocusHelperToken = new InjectionToken('FocusHelper'); export const NotificationsServiceToken = new InjectionToken('NotificationsService'); diff --git a/frontend/app/components/routing/wp-list/wp-list.component.ts b/frontend/app/components/routing/wp-list/wp-list.component.ts index 881e87c598..b140d3bbeb 100644 --- a/frontend/app/components/routing/wp-list/wp-list.component.ts +++ b/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})); diff --git a/frontend/app/components/routing/wp-list/wp-list.router.directive.ts b/frontend/app/components/routing/wp-list/wp-list.router.directive.ts new file mode 100644 index 0000000000..e5d5402999 --- /dev/null +++ b/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); diff --git a/frontend/app/components/wp-list/wp-list.service.ts b/frontend/app/components/wp-list/wp-list.service.ts index 290a7f79b3..ded8ce0d18 100644 --- a/frontend/app/components/wp-list/wp-list.service.ts +++ b/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 { return this.QueryFormDm.load(query).then((form:QueryFormResource) => { this.wpStatesInitialization.updateStatesFromForm(query, form); diff --git a/frontend/app/components/wp-list/wp-states-initialization.service.ts b/frontend/app/components/wp-list/wp-states-initialization.service.ts index f812d7e869..8175c80816 100644 --- a/frontend/app/components/wp-list/wp-states-initialization.service.ts +++ b/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() {