Merge pull request #4643 from oliverguenther/fix/20417/current-tab-label

[20417] Remove code duplication in details,show and fix tab switching
pull/4653/merge
ulferts 8 years ago committed by GitHub
commit 3a789189cf
  1. 13
      frontend/app/components/routing/ui-router.config.ts
  2. 163
      frontend/app/components/routing/wp-details/wp-details.controller.test.js
  3. 5
      frontend/app/components/routing/wp-details/wp-details.controller.test.ts
  4. 67
      frontend/app/components/routing/wp-details/wp-details.controller.ts
  5. 29
      frontend/app/components/routing/wp-details/wp.list.details.html
  6. 199
      frontend/app/components/routing/wp-show/wp-show.controller.ts
  7. 46
      frontend/app/components/routing/wp-show/wp.show.html
  8. 137
      frontend/app/components/routing/wp-view-base/wp-view-base.controller.ts
  9. 2
      frontend/app/components/wp-panels/keep-tab/keep-tab.service.test.ts
  10. 28
      frontend/app/components/wp-panels/keep-tab/keep-tab.service.ts
  11. 4
      frontend/app/components/wp-panels/overview-panel/overview-panel.directive.html

@ -34,7 +34,7 @@ const panels = {
return {
url: '/overview',
reloadOnSearch: false,
template: '<overview-panel work-package="workPackage"></overview-panel>'
template: '<overview-panel work-package="$ctrl.workPackage"></overview-panel>'
};
},
@ -42,7 +42,7 @@ const panels = {
return {
url: '/watchers',
reloadOnSearch: false,
template: '<watchers-panel ng-if="workPackage" work-package="workPackage"></watchers-panel>'
template: '<watchers-panel ng-if="$ctrl.workPackage" work-package="$ctrl.workPackage"></watchers-panel>'
};
},
@ -50,7 +50,7 @@ const panels = {
return {
url: '/activity',
reloadOnSearch: false,
template: '<activity-panel ng-if="workPackage" work-package="workPackage"></activity-panel>'
template: '<activity-panel ng-if="$ctrl.workPackage" work-package="$ctrl.workPackage"></activity-panel>'
};
},
@ -66,8 +66,8 @@ const panels = {
url: '/relations',
reloadOnSearch: false,
template: ` <relations-panel
ng-if="workPackage"
work-package="workPackage"
ng-if="$ctrl.workPackage"
work-package="$ctrl.workPackage"
></relations-panel>`
};
}
@ -135,7 +135,7 @@ openprojectModule
url: '/work_packages/{workPackageId:[0-9]+}?query_id&query_props',
templateUrl: '/components/routing/wp-show/wp.show.html',
controller: 'WorkPackageShowController',
controllerAs: 'vm',
controllerAs: '$ctrl',
onEnter: () => angular.element('body').addClass('action-show'),
onExit: () => angular.element('body').removeClass('action-show')
})
@ -184,6 +184,7 @@ openprojectModule
url: '/details/{workPackageId:[0-9]+}',
templateUrl: '/components/routing/wp-details/wp.list.details.html',
controller: 'WorkPackageDetailsController',
controllerAs: '$ctrl',
reloadOnSearch: false,
onEnter: () => angular.element('body').addClass('action-details'),
onExit: () => angular.element('body').removeClass('action-details')

@ -1,163 +0,0 @@
// -- 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.
// ++
describe('WorkPackageDetailsController', function() {
var scope;
var promise;
var buildController, ctrl;
var stateParams = {};
var I18n = { t: angular.identity },
workPackage = {
author: {
props: {
id: 1,
status: 'active'
}
},
id: 99,
project: {
props: {
id: 1
}
},
type: {
name: 'Milestone'
},
href: "it's a me, it's... you know..."
};
beforeEach(angular.mock.module('openproject.api', 'openproject.layout', 'openproject.services',
'openproject.workPackages.controllers', 'openproject.services', 'openproject'));
beforeEach(angular.mock.module('openproject.templates', function($provide) {
var configurationService = {};
configurationService.isTimezoneSet = sinon.stub().returns(false);
$provide.constant('ConfigurationService', configurationService);
}));
beforeEach(angular.mock.module('openproject.templates', function($provide) {
var state = { go: function() { return false; } };
$provide.value('$state', state);
$provide.constant('$stateParams', stateParams);
}));
beforeEach(inject(function($rootScope, $controller, $timeout, $httpBackend, WorkPackageService, $q) {
$httpBackend.when('GET', '/api/v3/work_packages/99').respond(workPackage);
WorkPackageService.getWorkPackage = function() { return $q.when(workPackage) };
buildController = function(done) {
var testState = {
params: { workPackageId: 99 },
current: { url: '/activity' }
};
scope = $rootScope.$new();
ctrl = $controller("WorkPackageDetailsController", {
$scope: scope,
$state: testState,
I18n: I18n,
ConfigurationService: {
commentsSortedInDescendingOrder: function() {
return false;
}
},
workPackage: workPackage
});
$timeout.flush();
promise = scope.initializedWorkPackage;
};
}));
describe('initialisation', function() {
it('should initialise', function() {
return buildController();
});
});
describe('#scope.canViewWorkPackageWatchers', function() {
describe('when the work package does not contain the embedded watchers property', function() {
beforeEach(function() {
workPackage.watchers = null;
buildController();
});
it('returns false', function() {
expect(promise).to.eventually.be.fulfilled.then(function() {
expect(scope.canViewWorkPackageWatchers()).to.be.false;
});
});
});
describe('when the work package contains the embedded watchers property', function() {
beforeEach(function() {
workPackage.watchers = [];
return buildController();
});
it('returns true', function() {
expect(promise).to.eventually.be.fulfilled.then(function() {
expect(scope.canViewWorkPackageWatchers()).to.be.true;
});
});
});
});
describe('work package properties', function() {
describe('relations', function() {
beforeEach(function() {
return buildController();
});
it('Relation::Relates', function() {
expect(promise).to.eventually.be.fulfilled.then(function() {
expect(scope.relatedTo).to.be.ok;
});
});
it('is the embedded type', function() {
expect(promise).to.eventually.be.fulfilled.then(function() {
expect(scope.type.props.name).to.eql('Milestone');
});
});
});
});
describe('showStaticPagePath', function() {
it('points to old show page', function() {
expect(promise).to.eventually.be.fulfilled.then(function() {
expect(scope.showStaticPagePath).to.eql('/work_packages/99');
});
});
});
});

@ -127,16 +127,17 @@ describe('WorkPackageDetailsController', () => {
isTimezoneSet: sinon.stub().returns(false)
});
$provide.value('$state', {go: () => false});
$provide.constant('$stateParams', stateParams);
}));
beforeEach(angular.mock.inject(($rootScope,
$controller,
$state,
$timeout,
$q,
$httpBackend,
WorkPackageService) => {
$state.params = stateParams;
$httpBackend.when('GET', '/api/v3/work_packages/99').respond(workPackage);
WorkPackageService.getWorkPackage = () => {
@ -163,8 +164,8 @@ describe('WorkPackageDetailsController', () => {
});
$timeout.flush();
promise = ctrl.initialized.promise;
promise = scope.initializedWorkPackage;
};
}));

@ -26,62 +26,21 @@
// See doc/COPYRIGHT.rdoc for more details.
// ++
import {scopedObservable} from "../../../helpers/angular-rx-utils";
import {WorkPackageResource} from "../../api/api-v3/hal-resources/work-package-resource.service";
import {WorkPackageEditModeStateService} from "../../wp-edit/wp-edit-mode-state.service";
import {wpControllersModule} from '../../../angular-modules';
import {WorkPackageViewController} from '../wp-view-base/wp-view-base.controller';
angular
.module('openproject.workPackages.controllers')
.controller('WorkPackageDetailsController', WorkPackageDetailsController);
export class WorkPackageDetailsController extends WorkPackageViewController {
function WorkPackageDetailsController($scope,
$state,
$rootScope,
$q,
I18n,
PathHelper,
WorkPackageService,
NotificationsService,
wpEditModeState:WorkPackageEditModeStateService,
wpCacheService) {
$scope.wpEditModeState = wpEditModeState;
$scope.I18n = I18n;
var deferred = $q.defer();
$scope.initializedWorkPackage = deferred.promise;
scopedObservable($scope, wpCacheService.loadWorkPackage($state.params.workPackageId))
.subscribe((wp:WorkPackageResource) => {
$scope.workPackage = wp;
wp.schema.$load();
WorkPackageService.cache().put('preselectedWorkPackageId', wp.id);
$scope.focusAnchorLabel = getFocusAnchorLabel(
$state.current.url.replace(/\//, ''),
wp
);
$scope.showStaticPagePath = PathHelper.workPackagePath(wp);
deferred.resolve();
});
$scope.onWorkPackageSave = function () {
$rootScope.$emit('workPackagesRefreshInBackground');
};
constructor(public $injector,
public $scope,
public $state) {
super($injector, $scope, $state.params['workPackageId']);
this.observeWorkPackage();
}
$scope.canViewWorkPackageWatchers = function() {
return !!($scope.workPackage && $scope.workPackage.watchers !== undefined);
public onWorkPackageSave() {
this.$rootScope.$emit('workPackagesRefreshInBackground');
};
function getFocusAnchorLabel(tab, workPackage) {
var tabLabel = I18n.t('js.work_packages.tabs.' + tab),
params = {
tab: tabLabel,
type: workPackage.type.name,
subject: workPackage.subject
};
return I18n.t('js.label_work_package_details_you_are_here', params);
}
}
wpControllersModule.controller('WorkPackageDetailsController', WorkPackageDetailsController);

@ -1,47 +1,46 @@
<div class="work-packages--details">
<div wp-edit-form="workPackage"
wp-edit-form-on-save="onWorkPackageSave()"
<div wp-edit-form="$ctrl.workPackage"
wp-edit-form-on-save="$ctrl.onWorkPackageSave()"
has-edit-mode="true"
ng-if="workPackage">
ng-if="$ctrl.workPackage">
<div id="tabs">
<ul class="tabrow">
<!-- The hrefs with empty URLs are necessary for IE10 to focus these links
properly. Thus, don't remove the hrefs or the empty URLs! -->
<li ui-sref="work-packages.list.details.overview({})"
ui-sref-active="selected">
<a href="" ng-bind="I18n.t('js.work_packages.tabs.overview')"/>
<a href="" ng-bind="::$ctrl.text.tabs.overview"/>
</li>
<li ui-sref="work-packages.list.details.activity({})"
ui-sref-active="selected">
<a href="" ng-bind="I18n.t('js.work_packages.tabs.activity')"/>
<a href="" ng-bind="::$ctrl.text.tabs.activity"/>
</li>
<li ui-sref="work-packages.list.details.relations({})"
ui-sref-active="selected">
<a href="" ng-bind="I18n.t('js.work_packages.tabs.relations')"/>
<a href="" ng-bind="::$ctrl.text.tabs.relations"/>
</li>
<li ng-if="canViewWorkPackageWatchers()"
<li ng-if="$ctrl.canViewWorkPackageWatchers()"
ui-sref="work-packages.list.details.watchers({})"
ui-sref-active="selected">
<a href="" ng-bind="I18n.t('js.work_packages.tabs.watchers')"/>
<a href="" ng-bind="::$ctrl.text.tabs.watchers"/>
</li>
</ul>
</div>
<div class="work-packages--details-content">
<span class="hidden-for-sighted" tabindex="-1" focus ng-bind="focusAnchorLabel">
<span class="hidden-for-sighted" tabindex="-1" focus ng-bind="$ctrl.focusAnchorLabel">
</span>
<wp-subject></wp-subject>
<div class="work-package-details-tab" ui-view></div>
</div>
<div class="bottom-toolbar" ng-if="workPackage">
<wp-details-toolbar work-package='workPackage'></wp-details-toolbar>
<div class="bottom-toolbar" ng-if="$ctrl.workPackage">
<wp-details-toolbar work-package='$ctrl.workPackage'></wp-details-toolbar>
<edit-actions-bar
ng-show="wpEditModeState.active"
on-save="wpEditModeState.save()"
on-cancel="wpEditModeState.cancel()"
ng-show="$ctrl.wpEditModeState.active"
on-save="$ctrl.wpEditModeState.save()"
on-cancel="$ctrl.wpEditModeState.cancel()"
></edit-actions-bar>
</div>
</div>

@ -26,52 +26,77 @@
// See doc/COPYRIGHT.rdoc for more details.
// ++
import {scopedObservable} from "../../../helpers/angular-rx-utils";
import {WorkPackageResource} from "../../api/api-v3/hal-resources/work-package-resource.service";
function WorkPackageShowController($scope,
$rootScope,
$state,
$window,
PERMITTED_MORE_MENU_ACTIONS,
I18n,
PathHelper,
WorkPackageService,
WorkPackageAuthorization,
HookService,
AuthorisationService,
wpCacheService,
wpEditModeState) {
$scope.wpEditModeState = wpEditModeState;
scopedObservable($scope, wpCacheService.loadWorkPackage($state.params.workPackageId))
.subscribe((wp: WorkPackageResource) => {
$scope.workPackage = wp;
wp.schema.$load();
AuthorisationService.initModelAuth('work_package', $scope.workPackage);
var authorization = new WorkPackageAuthorization($scope.workPackage);
$scope.permittedActions = angular.extend(getPermittedActions(authorization, PERMITTED_MORE_MENU_ACTIONS),
getPermittedPluginActions(authorization));
$scope.actionsAvailable = Object.keys($scope.permittedActions).length > 0;
// END stuff copied from details toolbar directive...
$scope.I18n = I18n;
$scope.$parent.preselectedWorkPackageId = $scope.workPackage.id;
$scope.maxDescriptionLength = 800;
$scope.projectIdentifier = $scope.workPackage.project.identifier;
// initialization
setWorkPackageScopeProperties($scope.workPackage);
import {wpControllersModule} from '../../../angular-modules';
import {WorkPackageViewController} from '../wp-view-base/wp-view-base.controller';
import {WorkPackageResourceInterface} from '../../api/api-v3/hal-resources/work-package-resource.service';
import {UserResource} from '../../api/api-v3/hal-resources/user-resource.service';
import {HalResource} from '../../api/api-v3/hal-resources/hal-resource.service';
export class WorkPackageShowController extends WorkPackageViewController {
// Permitted actions for WP toolbar
public permittedActions:any;
public actionsAvailable:boolean;
// Watcher properties
public isWatched:boolean;
public displayWatchButton:boolean;
public watchers:any;
// Properties
public type:HalResource;
public author:UserResource;
public authorPath:string;
public authorActive:boolean;
public attachments:any;
constructor(public $injector,
public $scope,
public $state,
public $window,
public HookService,
public AuthorisationService,
public WorkPackageAuthorization,
public PERMITTED_MORE_MENU_ACTIONS) {
super($injector, $scope, $state.params['workPackageId']);
this.observeWorkPackage();
}
protected init() {
super.init();
this.AuthorisationService.initModelAuth('work_package', this.workPackage);
var authorization = new this.WorkPackageAuthorization(this.workPackage);
this.$scope.permittedActions = angular.extend(this.getPermittedActions(authorization, this.PERMITTED_MORE_MENU_ACTIONS),
this.getPermittedPluginActions(authorization));
this.$scope.actionsAvailable = Object.keys(this.$scope.permittedActions).length > 0;
this.$scope.triggerMoreMenuAction = this.triggerMoreMenuAction.bind(this);
// initialization
this.setWorkPackageScopeProperties(this.workPackage);
}
public deleteSelectedWorkPackage() {
var promise = this.WorkPackageService.performBulkDelete([this.workPackage.id], true);
promise.success(function () {
this.$state.go('work-packages.list', { projectPath: this.projectIdentifier });
});
}
public triggerMoreMenuAction(action, link) {
switch (action) {
case 'delete':
this.deleteSelectedWorkPackage();
break;
default:
this.$window.location.href = link;
break;
}
};
// stuff copied from details toolbar directive...
function getPermittedActions(authorization, permittedMoreMenuActions) {
private getPermittedActions(authorization, permittedMoreMenuActions) {
var permittedActions = authorization.permittedActionsWithLinks(permittedMoreMenuActions);
var augmentedActions = { };
@ -84,9 +109,9 @@ function WorkPackageShowController($scope,
return augmentedActions;
}
function getPermittedPluginActions(authorization) {
private getPermittedPluginActions(authorization) {
var pluginActions = [];
angular.forEach(HookService.call('workPackageDetailsMoreMenu'), function(action) {
angular.forEach(this.HookService.call('workPackageDetailsMoreMenu'), function(action) {
pluginActions = pluginActions.concat(action);
});
@ -105,91 +130,27 @@ function WorkPackageShowController($scope,
return augmentedPluginActions;
}
function deleteSelectedWorkPackage() {
var promise = WorkPackageService.performBulkDelete([$scope.workPackage.id], true);
promise.success(function() {
$state.go('work-packages.list', {projectPath: $scope.projectIdentifier});
});
}
$scope.triggerMoreMenuAction = function(action, link) {
switch (action) {
case 'delete':
deleteSelectedWorkPackage();
break;
default:
$window.location.href = link;
break;
}
};
function outputMessage(message, isError) {
$scope.$emit('flashMessage', {
isError: !!isError,
text: message
});
}
function outputError(error) {
outputMessage(error.message || I18n.t('js.work_packages.error.general'), true);
}
$scope.outputMessage = outputMessage; // expose to child controllers
$scope.outputError = outputError; // expose to child controllers
function setWorkPackageScopeProperties(workPackage){
$scope.isWatched = workPackage.hasOwnProperty('unwatch');
$scope.displayWatchButton = workPackage.hasOwnProperty('unwatch') ||
workPackage.hasOwnProperty('watch');
private setWorkPackageScopeProperties(wp:WorkPackageResourceInterface) {
this.isWatched = wp.hasOwnProperty('unwatch');
this.displayWatchButton = wp.hasOwnProperty('unwatch') || wp.hasOwnProperty('watch');
// watchers
if(workPackage.watchers) {
$scope.watchers = workPackage.watchers.elements;
if (wp.watchers) {
this.watchers = (wp.watchers as any).elements;
}
$scope.showStaticPagePath = PathHelper.workPackagePath($scope.workPackage.id);
// Type
$scope.type = workPackage.type;
this.type = wp.type;
// Author
$scope.author = workPackage.author;
$scope.authorPath = $scope.author.showUserPath;
$scope.authorActive = $scope.author.isActive;
this.author = wp.author;
this.authorPath = this.author.showUserPath;
this.authorActive = this.author.isActive;
// Attachments
$scope.attachments = workPackage.attachments.elements;
$scope.focusAnchorLabel = getFocusAnchorLabel(
$state.current.url.replace(/\//, ''),
$scope.workPackage
);
}
$scope.canViewWorkPackageWatchers = function() {
return !!($scope.workPackage && $scope.workPackage.watchers !== undefined);
};
// toggles
$scope.toggleStates = {
hideFullDescription: true,
hideAllAttributes: true
};
function getFocusAnchorLabel(tab, workPackage) {
var tabLabel = I18n.t('js.work_packages.tabs.' + tab),
params = {
tab: tabLabel,
type: workPackage.type.name,
subject: workPackage.subject
};
return I18n.t('js.label_work_package_details_you_are_here', params);
this.attachments = wp.attachments.elements;
}
}
angular
.module('openproject.workPackages.controllers')
.controller('WorkPackageShowController', WorkPackageShowController);
wpControllersModule.controller('WorkPackageShowController', WorkPackageShowController);

@ -1,46 +1,46 @@
<div class="work-packages--show-view"
ng-class="{'edit-all-mode': wpEditModeState.active}"
wp-edit-form="workPackage"
ng-class="{'edit-all-mode': $ctrl.wpEditModeState.active}"
wp-edit-form="$ctrl.workPackage"
has-edit-mode="true"
ng-if="workPackage">
ng-if="$ctrl.workPackage">
<div class="toolbar-container">
<div wp-toolbar id="toolbar">
<ul id="toolbar-items" class="toolbar-items">
<li class="toolbar-item">
<wp-create-button project-identifier="projectIdentifier"
allowed="!!workPackage.$links.addChild"
ng-hide="wpEditModeState.active"
<wp-create-button project-identifier="$ctrl.projectIdentifier"
allowed="!!$ctrl.workPackage.addChild"
ng-hide="$ctrl.wpEditModeState.active"
state-name="work-packages.new"></wp-create-button>
</li>
<li class="toolbar-item">
<button class="button edit-all-button"
ng-disabled="wpEditModeState.active"
ng-click="wpEditModeState.start()"
ng-disabled="!wpEditModeState.form.isEditable"
ng-disabled="$ctrl.wpEditModeState.active"
ng-click="$ctrl.wpEditModeState.start()"
ng-disabled="!$ctrl.wpEditModeState.form.isEditable"
title="{{I18n.t('js.button_edit')}}">
<i class="button--icon icon-edit"></i>
</button>
</li>
<li class="toolbar-item" ng-if="displayWatchButton">
<wp-watcher-button work-package="workPackage" disabled="editAll.state"></wp-watcher-button>
<li class="toolbar-item" ng-if="$ctrl.displayWatchButton">
<wp-watcher-button work-package="$ctrl.workPackage" disabled="$ctrl.wpEditModeState.active"></wp-watcher-button>
</li>
<li class="toolbar-item hidden-for-mobile">
<ul id="work-packages-view-mode-selection" class="toolbar-button-group">
<li>
<wp-list-view-button edit-all="editAll"
project-identifier="projectIdentifier"></wp-list-view-button>
project-identifier="$ctrl.projectIdentifier"></wp-list-view-button>
</li>
<li>
<wp-details-view-button project-identifier="projectIdentifier"></wp-details-view-button>
<wp-details-view-button project-identifier="$ctrl.projectIdentifier"></wp-details-view-button>
</li>
<li>
<wp-view-button work-package-id="preselectedWorkPackageId"></wp-view-button>
<wp-view-button work-package-id="$ctrl.workPackage.id"></wp-view-button>
</li>
</ul>
</li>
<li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
<button class="button dropdown-relative"
ng-disabled="!actionsAvailable || wpEditModeState.active"
ng-disabled="!actionsAvailable || $ctrl.wpEditModeState.active"
has-dropdown-menu
target="ShowMoreDropdownMenu"
locals="permittedActions,actionsAvailable,triggerMoreMenuAction"
@ -64,31 +64,31 @@
<div class="work-packages--panel-inner">
<wp-single-view></wp-single-view>
<edit-actions-bar
ng-show="wpEditModeState.active"
on-save="wpEditModeState.save()"
on-cancel="wpEditModeState.cancel()"
ng-show="$ctrl.wpEditModeState.active"
on-save="$ctrl.wpEditModeState.save()"
on-cancel="$ctrl.wpEditModeState.cancel()"
></edit-actions-bar>
</div>
</div>
<div class="work-packages--right-panel">
<div class="work-packages--panel-inner">
<span class="hidden-for-sighted" tabindex="-1" focus ng-bind="focusAnchorLabel"></span>
<span class="hidden-for-sighted" tabindex="-1" focus ng-bind="$ctrl.focusAnchorLabel"></span>
<div id="tabs">
<ul class="tabrow">
<!-- The hrefs with empty URLs are necessary for IE10 to focus these links
properly. Thus, don't remove the hrefs or the empty URLs! -->
<li ui-sref="work-packages.show.activity({})"
ui-sref-active="selected">
<a href="" ng-bind="I18n.t('js.work_packages.tabs.activity')"/>
<a href="" ng-bind="::$ctrl.text.tabs.activity"/>
</li>
<li ui-sref="work-packages.show.relations({})"
ui-sref-active="selected">
<a href="" ng-bind="I18n.t('js.work_packages.tabs.relations')"/>
<a href="" ng-bind="::$ctrl.text.tabs.relations"/>
</li>
<li ng-if="canViewWorkPackageWatchers()"
<li ng-if="$ctrl.canViewWorkPackageWatchers()"
ui-sref="work-packages.show.watchers({})"
ui-sref-active="selected">
<a href="" ng-bind="I18n.t('js.work_packages.tabs.watchers')"/>
<a href="" ng-bind="::$ctrl.text.tabs.watchers"/>
</li>
</ul>
</div>

@ -0,0 +1,137 @@
//-- 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 {WorkPackageResourceInterface} from '../../api/api-v3/hal-resources/work-package-resource.service';
import {scopedObservable} from '../../../helpers/angular-rx-utils';
import {WorkPackageCacheService} from '../../work-packages/work-package-cache.service';
import {KeepTabService} from '../../wp-panels/keep-tab/keep-tab.service';
import {wpControllersModule} from '../../../angular-modules';
import {WorkPackageEditModeStateService} from '../../wp-edit/wp-edit-mode-state.service';
export class WorkPackageViewController {
protected $q:ng.IQService;
protected $state:ng.ui.IStateService;
protected $rootScope:ng.IRootScopeService;
protected keepTab:KeepTabService;
protected wpCacheService:WorkPackageCacheService;
protected wpEditModeState:WorkPackageEditModeStateService;
protected WorkPackageService;
protected PathHelper:op.PathHelper;
protected I18n:op.I18n;
// Helper promise to detect when the controller has been initialized
// (when a WP has loaded).
public initialized:ng.IDeferred<any>;
// Static texts
public text:any = {};
// Work package resource to be loaded from the cache
public workPackage:WorkPackageResourceInterface;
public projectIdentifier:string;
protected focusAnchorLabel:string;
public showStaticPagePath:string;
constructor(public $injector, public $scope, protected workPackageId) {
this.$inject('$q', '$state', 'keepTab', 'wpCacheService', 'WorkPackageService',
'wpEditModeState', 'PathHelper', 'I18n');
this.initialized = this.$q.defer();
this.initializeTexts();
}
/**
* Observe changes of work package and re-run initialization.
* Needs to be run explicitly by descendants.
*/
protected observeWorkPackage() {
scopedObservable(this.$scope, this.wpCacheService.loadWorkPackage(this.workPackageId))
.subscribe((wp:WorkPackageResourceInterface) => {
this.workPackage = wp;
this.init();
this.initialized.resolve();
});
}
protected $inject(...args:string[]) {
args.forEach(field => {
this[field] = this.$injector.get(field);
});
}
/**
* Provide static translations
*/
protected initializeTexts() {
this.text.tabs = {};
['overview', 'activity', 'relations', 'watchers'].forEach(tab => {
this.text.tabs[tab] = this.I18n.t('js.work_packages.tabs.' + tab);
});
}
/**
* Initialize controller after workPackage resource has been loaded.
*/
protected init() {
// Ensure the schema is being loaded as soon as possible
this.workPackage.schema.$load();
// Set elements
this.projectIdentifier = this.workPackage.project.identifier;
// Preselect this work package for future list operations
this.showStaticPagePath = this.PathHelper.workPackagePath(this.workPackage);
this.WorkPackageService.cache().put('preselectedWorkPackageId', this.workPackage.id);
// Listen to tab changes to update the tab label
scopedObservable(this.$scope, this.keepTab.observable).subscribe((tabs:any) => {
this.updateFocusAnchorLabel(tabs.active);
});
}
/**
* Recompute the current tab focus label
*/
public updateFocusAnchorLabel(tabName:string):string {
const tabLabel = this.I18n.t('js.label_work_package_details_you_are_here', {
tab: this.I18n.t('js.work_packages.tabs.' + tabName),
type: this.workPackage.type.name,
subject: this.workPackage.subject
});
return this.focusAnchorLabel = tabLabel;
}
public canViewWorkPackageWatchers() {
return !!(this.workPackage && this.workPackage.watchers);
}
}
wpControllersModule.controller('WorkPackageViewController', WorkPackageViewController);

@ -84,6 +84,7 @@ describe('keepTab service', () => {
var cb = sinon.spy();
var expected = {
active: 'relations',
show: 'work-packages.show.relations',
details: 'work-packages.list.details.relations'
}
@ -146,6 +147,7 @@ describe('keepTab service', () => {
var cb = sinon.spy();
var expected = {
active: 'activity',
details: 'work-packages.list.details.activity',
show: 'work-packages.show.activity'
};

@ -44,6 +44,17 @@ export class KeepTabService {
return this.subject;
}
/**
* Return the last active tab.
*/
public get lastActiveTab():string {
if (this.isCurrentState('show')) {
return this.currentShowTab;
}
return this.currentDetailsTab;
}
public get currentShowState():string {
return 'work-packages.show.' + this.currentShowTab;
}
@ -69,13 +80,14 @@ export class KeepTabService {
protected notify() {
// Notify when updated
this.subject.onNext({
active: this.lastActiveTab,
show: this.currentShowState,
details: this.currentDetailsState
});
}
protected updateTab(stateName:string) {
if (this.$state.includes(stateName)) {
if (this.isCurrentState(stateName)) {
const current = this.$state.current.name;
this.currentTab = current.split('.').pop();
@ -83,6 +95,16 @@ export class KeepTabService {
}
}
protected isCurrentState(stateName:string) {
if (stateName === 'show') {
return this.$state.includes('work-packages.show.*');
}
if (stateName === 'details') {
return this.$state.includes('work-packages.list.details.*');
}
}
protected updateTabs(toState?:any) {
// Ignore the switch from show#activity to details#activity
@ -93,8 +115,8 @@ export class KeepTabService {
return this.notify();
}
this.updateTab('work-packages.show.*');
this.updateTab('work-packages.list.details.*');
this.updateTab('show');
this.updateTab('details');
}
}

@ -1,11 +1,11 @@
<wp-single-view></wp-single-view>
<div class="attributes-group" ng-if="workPackage">
<div class="attributes-group" ng-if="$ctrl.workPackage">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">{{ vm.I18n.t('js.label_latest_activity') }}</h3>
</div>
</div>
<activity-panel template="overview" work-package="workPackage"></activity-panel>
<activity-panel template="overview" work-package="$ctrl.workPackage"></activity-panel>
</div>

Loading…
Cancel
Save