Ask user for confirmation when changing states

[ci skip]

frontend/app/templates/work_packages.list.html

@@ -110,7 +110,8 @@
 <back-url></back-url>
 
 
-<div class="work-packages--split-view" cg-busy="[settingUpPage,refreshWorkPackages]">
+<div class="work-packages--split-view" cg-busy="[settingUpPage,refreshWorkPackages]"
+     ng-class="{'edit-all-mode': editAll.state}">
   <div class="work-packages--list">
     <div class="work-packages--list-table-area">
       <work-packages-table ng-if="rows && columns"

frontend/app/templates/work_packages.show.html

@@ -14,11 +14,12 @@
           </button>
         </li>
         <li class="toolbar-item">
-          <button class="button button--icon icon-edit"
+          <button class="button edit-all-button"
                   ng-hide="editAll.state"
                   ng-click="editAll.start()"
                   ng-disabled="!editAll.allowed"
                   title="{{I18n.t('js.button_edit')}}">
+            <i class="button--icon icon-edit"></i>
           </button>
         </li>
         <li class="toolbar-item" ng-if="isWatched && displayWatchButton">

frontend/app/templates/work_packages/work_package_edit_actions.html

@@ -1,11 +1,14 @@
 <div class="work-packages--edit-actions" ng-show="efs.editAll.state && efs.editAll.allowed">
-  <button class="button button--icon icon-yes -alt-highlight" accesskey="3" ng-click="efs.save(false)">
+  <button class="button -alt-highlight" accesskey="3" ng-click="efs.save(false)">
+    <i class="button--icon icon-yes"></i>
     <span class="button--text" ng-bind="::I18n.t('js.button_save')"></span>
   </button>
-  <button class="button button--icon icon-send-mail" accesskey="3" ng-click="efs.save(true)">
+  <button class="button" accesskey="3" ng-click="efs.save(true)">
+    <i class="button--icon icon-send-mail"></i>
     <span class="button--text" ng-bind="::I18n.t('js.inplace.button_save_and_send_all')"></span>
   </button>
-  <button class="button button--icon icon-close" accesskey="7" ng-click="efs.editAll.cancel()">
+  <button class="button" accesskey="7" ng-click="efs.editAll.cancel()">
+    <i class="button--icon icon-close"></i>
     <span class="button--text" ng-bind="::I18n.t('js.button_cancel')"></span>
   </button>
 </div>

frontend/app/work_packages/directives/work-package-edit-actions-directive.js

@@ -29,13 +29,28 @@
 module.exports = function () {
   return {
     restrict: 'E',
+    replace: true,
     templateUrl: '/templates/work_packages/work_package_edit_actions.html',
+    scope: {},
 
-    controller: ['$scope', 'I18n', 'EditableFieldsState', function ($scope, I18n,
-                                                                    EditableFieldsState) {
+    controller: ['$scope', 'I18n', 'EditableFieldsState', '$window', function ($scope, I18n,
+                                                                    EditableFieldsState, $window) {
       angular.extend($scope, {
         I18n: I18n,
         efs: EditableFieldsState
+      });
+
+      $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
+        if (EditableFieldsState.editAll.state
+          && toParams.workPackageId !== fromParams.workPackageId) {
+
+          if (!$window.confirm(I18n.t('js.text_are_you_sure'))) {
+            event.preventDefault();
+
+          } else {
+            EditableFieldsState.editAll.cancel();
+          }
+        }
       })
     }]
   };

frontend/tests/integration/mocks/work-packages-exp.js

@@ -30,10 +30,12 @@ module.exports = function(app) {
   var fs = require('fs');
   var express = require('express');
   var workPackagesRouter = express.Router();
+
   workPackagesRouter.get('/', function(req, res) {
     fs.readFile(__dirname + '/work-packages.json', 'utf8', function(err, text) {
       res.send(text);
     });
   });
-  app.use('/api/experimental/work_packages', workPackagesRouter);
+
+  app.use(/\/api\/experimental\/(projects\/.*\/)?work_packages/, workPackagesRouter);
 };

frontend/tests/integration/mocks/work-packages.json

@@ -394,6 +394,50 @@
             },
             "updated_at": "2014-10-22T13:25:56Z"
         },
+        {
+            "_actions": [
+                "edit",
+                "move",
+                "copy",
+                "duplicate",
+                "delete"
+            ],
+            "_links": {
+                "copy": "/work_packages/move/new?copy=true&ids%5B%5D=16923",
+                "delete": "/work_packages/bulk?ids%5B%5D=16923&method=delete",
+                "duplicate": "/projects/openproject/work_packages/new?copy_from=16923",
+                "edit": "/work_packages/16923/edit",
+                "move": "/work_packages/move/new?ids%5B%5D=16923"
+            },
+            "assigned_to": {
+                "firstname": "Karol",
+                "id": 9248,
+                "name": "Karol Skolar"
+            },
+            "created_at": "2014-10-22T13:25:56Z",
+            "custom_values": [],
+            "id": 820,
+            "parent_id": null,
+            "status": {
+                "id": 1,
+                "name": "new"
+            },
+            "subject": "The other work package (820.json)",
+            "type": {
+                "color_id": 8,
+                "created_at": "11/13/2013/ 13:11 PM",
+                "id": 4,
+                "in_aggregation": true,
+                "is_default": false,
+                "is_in_roadmap": false,
+                "is_milestone": false,
+                "is_standard": false,
+                "name": "Task",
+                "position": 2,
+                "updated_at": "05/13/2014/ 12:10 PM"
+            },
+            "updated_at": "2014-10-22T13:25:56Z"
+        },
         {
             "_actions": [
                 "edit",

frontend/tests/integration/pages/work-package-show-page.js

@@ -41,7 +41,7 @@ WorkPackageShowPage.prototype = {
   },
 
   toolBar: {
-    edit: $('.button.icon-edit'),
+    edit: $('.edit-all-button'),
     overview: $('#work-packages-details-view-button'),
     watch: $('[id*="watch"]'),
     dropDown: $('#action-show-more-dropdown-menu > button'),
@@ -51,6 +51,8 @@ WorkPackageShowPage.prototype = {
     listView: $('#work-packages-list-view-button')
   },
 
+  listViewWorkPackage: $('#work-package-820 .subject a'),
+
   get: function() {
     browser.get('/work_packages/' + this.wpId + '/activity');
   }

frontend/tests/integration/specs/work-packages/work-package-edit-spec.js

@@ -101,6 +101,41 @@ describe('Work package edit', function() {
       });
 
       expectBetweenViews();
+
+      describe('when clicking on a work package in the list view', function () {
+        var confirm, url;
+
+        beforeEach(function () {
+          browser.getCurrentUrl().then(function (currentUrl) {
+            url = currentUrl;
+          });
+
+          page.listViewWorkPackage.click().then(function () {
+            confirm = browser.switchTo().alert();
+          });
+        });
+
+        it('should show a confirmation dialog', function () {
+          expect(protractor.ExpectedConditions.alertIsPresent()()).to.eventually.be.true;
+          confirm.dismiss();
+        });
+
+        it('should change the route when the confirmation is accepted', function () {
+          confirm.accept().then(function () {
+            browser.getCurrentUrl().then(function (newUrl) {
+              expect(newUrl).to.not.equal(url);
+            })
+          });
+        });
+
+        it('should change nothing when the confirmation is dismissed', function () {
+          confirm.dismiss().then(function () {
+            browser.getCurrentUrl().then(function (newUrl) {
+              expect(newUrl).to.equal(url);
+            })
+          });
+        });
+      });
     });
 
     describe('when triggering the cancel action', function () {