Add wpEditModeState service to register form

frontend/app/components/routing/wp-show/wp-show.controller.ts

@@ -26,6 +26,8 @@
 // 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,
@@ -43,23 +45,18 @@ function WorkPackageShowController($scope,
                                    CommonRelationsHandler,
                                    ChildrenRelationsHandler,
                                    ParentRelationsHandler,
-                                   EditableFieldsState,
                                    WorkPackageAuthorization,
                                    HookService,
                                    AuthorisationService,
-                                   inplaceEditAll) {
+                                   wpCacheService,
+                                   wpEditModeState) {
 
-  $scope.editAll = inplaceEditAll;
+  $scope.wpEditModeState = wpEditModeState;
-  $scope.canEdit = EditableFieldsState.canEdit;
 
-  //Show all attributes in Edit-Mode
+  scopedObservable($scope, wpCacheService.loadWorkPackage(workPackage.props.id))
-  $scope.$watch(function(){
+    .subscribe((wp: WorkPackageResource) => {
-    return inplaceEditAll.state;
+      $scope.workPackageResource = wp;
-  },function(newState, oldState){
+    });
-    if(newState !== oldState){
-      vm.hideEmptyFields = !newState;
-    }
-  });
 
   // Listen to the event globally, as listeners are not necessarily
   // in the child scope

frontend/app/components/routing/wp-show/wp.show.html

@@ -1,17 +1,21 @@
-<div class="work-packages--show-view" ng-class="{'edit-all-mode': editAll.state}">
+<div class="work-packages--show-view"
+     ng-class="{'edit-all-mode': wpEditMode.active}"
+     wp-edit-form="workPackageResource"
+     has-edit-mode="true"
+     ng-if="workPackageResource">
   <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"
-                            ng-hide="editAll.state"
+                            ng-hide="wpEditModeState.active"
                             state-name="work-packages.new"></wp-create-button>
         </li>
         <li class="toolbar-item">
           <button class="button edit-all-button"
-                  ng-hide="editAll.state"
+                  ng-hide="wpEditModeState.active"
-                  ng-click="editAll.start()"
+                  ng-click="wpEditModeState.start()"
-                  ng-disabled="!canEdit"
+                  ng-disabled="!wpEditModeState.form.isEditable"
                   title="{{I18n.t('js.button_edit')}}">
             <i class="button--icon icon-edit"></i>
           </button>
@@ -35,7 +39,7 @@
         </li>
         <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
           <button class="button dropdown-relative"
-                  ng-disabled="!actionsAvailable || editAll.state"
+                  ng-disabled="!actionsAvailable || wpEditModeState.active"
                   has-dropdown-menu
                   target="ShowMoreDropdownMenu"
                   locals="permittedActions,actionsAvailable,triggerMoreMenuAction"

frontend/app/components/wp-edit/wp-edit-form.directive.ts

@@ -27,9 +27,11 @@
 // ++
 
 import {ErrorResource} from "../api/api-v3/hal-resources/error-resource.service";
+import {WorkPackageEditModeStateService} from "./wp-edit-mode-state.service";
 
 export class WorkPackageEditFormController {
   public workPackage;
+  public hasEditMode:boolean;
   public errorHandler:Function;
   public successHandler:Function;
   public fields = {};
@@ -48,7 +50,12 @@ export class WorkPackageEditFormController {
     protected I18n,
     protected NotificationsService,
     protected QueryService,
+    protected wpEditModeState:WorkPackageEditModeStateService,
     protected loadingIndicator) {
+
+    if(this.hasEditMode) {
+      wpEditModeState.register(this);
+    }
   }
 
   public isFieldRequired(fieldName) {
@@ -174,6 +181,7 @@ function wpEditForm() {
 
     scope: {
       workPackage: '=wpEditForm',
+      hasEditMode: '=hasEditMode',
       errorHandler: '&wpEditFormOnError',
       successHandler: '&wpEditFormOnSave'
     },

frontend/app/components/wp-edit/wp-edit-mode-state.service.ts

@@ -0,0 +1,68 @@
+// -- 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 {openprojectModule} from "../../angular-modules";
+import {WorkPackageEditFormController} from "./wp-edit-form.directive";
+
+export class WorkPackageEditModeStateService {
+  public form: WorkPackageEditFormController;
+
+  constructor(protected $rootScope, protected $window, protected I18n) {
+
+    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
+      if (this.form && fromParams.workPackageId
+        && toParams.workPackageId !== fromParams.workPackageId) {
+
+        if (!$window.confirm(I18n.t('js.text_are_you_sure'))) {
+          return event.preventDefault();
+        }
+
+        this.cancel();
+      }
+    });
+  }
+
+  public start() {
+    this.form.toggleEditMode(true);
+  }
+
+  public cancel() {
+    this.form.toggleEditMode(false);
+  }
+
+  public register(form: WorkPackageEditFormController) {
+    this.form = form;
+  }
+
+  public get active() {
+    return this.form.inEditMode
+  }
+}
+
+
+openprojectModule.service('wpEditModeState', WorkPackageEditModeStateService)