Isolate scope of WP create button

frontend/app/components/routes/controllers/work-package-show.controller.js

@@ -32,15 +32,11 @@ angular
 
 function WorkPackageShowController($scope, $rootScope, $state, latestTab, workPackage, I18n,
     RELATION_TYPES, RELATION_IDENTIFIERS, $filter, $q, WorkPackagesHelper, PathHelper, UsersHelper,
-    ConfigurationService, WorkPackageService, ActivityService, ProjectService,
-    CommonRelationsHandler, ChildrenRelationsHandler, ParentRelationsHandler,
-    WorkPackagesOverviewService, WorkPackageFieldService, EditableFieldsState,
-    WorkPackagesDisplayHelper, NotificationsService, WorkPackageAuthorization,
-    PERMITTED_MORE_MENU_ACTIONS, HookService, $window, WorkPackageAttachmentsService,
-    AuthorisationService) {
-
-  $scope.can = AuthorisationService.can;
-  $scope.cannot = AuthorisationService.cannot;
+    ConfigurationService, WorkPackageService, ActivityService, CommonRelationsHandler,
+    ChildrenRelationsHandler, ParentRelationsHandler, WorkPackagesOverviewService,
+    WorkPackageFieldService, EditableFieldsState, WorkPackagesDisplayHelper, NotificationsService,
+    WorkPackageAuthorization, PERMITTED_MORE_MENU_ACTIONS, HookService, $window,
+    WorkPackageAttachmentsService) {
 
   $scope.editAll = EditableFieldsState.editAll;
 
@@ -122,20 +118,10 @@ function WorkPackageShowController($scope, $rootScope, $state, latestTab, workPa
   $scope.projectIdentifier = $scope.workPackage.embedded.project.props.identifier;
 
 
-  function fetchProjectTypes() {
-    ProjectService.getProject($scope.projectIdentifier)
-      .then(function(project) {
-        $scope.availableTypes = project.embedded.types;
-      });
-  }
-
-  fetchProjectTypes();
-
   function refreshWorkPackage() {
     WorkPackageService.getWorkPackage($scope.workPackage.props.id)
       .then(function(workPackage) {
         setWorkPackageScopeProperties(workPackage);
-        fetchProjectTypes();
         $scope.$broadcast('workPackageRefreshed');
       });
   }

frontend/app/components/routes/controllers/work-packages-list.controller.js

@@ -31,9 +31,9 @@ angular
   .controller('WorkPackagesListController', WorkPackagesListController);
 
 function WorkPackagesListController($scope, $rootScope, $state, $stateParams, $location, latestTab,
-  I18n, WorkPackagesTableService, WorkPackageService, ProjectService, QueryService,
-  PaginationService, AuthorisationService, UrlParamsHelper, Query,
-  OPERATORS_AND_LABELS_BY_FILTER_TYPE, NotificationsService, EditableFieldsState) {
+  I18n, WorkPackagesTableService, WorkPackageService, QueryService, PaginationService,
+  AuthorisationService, UrlParamsHelper, Query, OPERATORS_AND_LABELS_BY_FILTER_TYPE,
+  NotificationsService, EditableFieldsState) {
 
   $scope.projectIdentifier = $stateParams.projectPath || null;
 
@@ -71,7 +71,6 @@ function WorkPackagesListController($scope, $rootScope, $state, $stateParams, $l
       })
       .then(function() {
         fetchAvailableColumns();
-        fetchProjectTypesAndQueries();
         QueryService.loadAvailableGroupedQueries($scope.projectIdentifier);
       });
   }
@@ -107,18 +106,6 @@ function WorkPackagesListController($scope, $rootScope, $state, $stateParams, $l
     $location.search('query_id', null);
   }
 
-  function fetchProjectTypesAndQueries() {
-    if ($scope.projectIdentifier) {
-      ProjectService.getProject($scope.projectIdentifier)
-        .then(function(project) {
-          $scope.project = project;
-          $scope.projects = [ project ];
-          $scope.availableTypes = project.embedded.types;
-        });
-
-    }
-  }
-
   function setupPage(json, queryParamsPresent) {
     initQuery(json.meta, queryParamsPresent);
     setupWorkPackagesTable(json);
@@ -240,10 +227,6 @@ function WorkPackagesListController($scope, $rootScope, $state, $stateParams, $l
 
   initialSetup();
 
-  // Just to keep the templates a bit cleaner
-  $scope.can = AuthorisationService.can;
-  $scope.cannot = AuthorisationService.cannot;
-
   $scope.editAll = EditableFieldsState.editAll;
 
   $scope.$watch(QueryService.getQueryName, function(queryName){

frontend/app/components/routes/partials/work-packages.list.html

@@ -8,7 +8,7 @@
 
     <ul class="toolbar-items">
       <li class="toolbar-item">
-        <wp-create-button></wp-create-button>
+        <wp-create-button project-identifier="projectIdentifier"></wp-create-button>
       </li>
       <li class="toolbar-item">
         <label for="work-packages-filter-toggle-button" class="hidden-for-sighted">

frontend/app/components/routes/partials/work-packages.show.html

@@ -3,7 +3,7 @@
     <div toolbar id="toolbar">
       <ul id="toolbar-items">
         <li class="toolbar-item" ng-hide="true">
-          <wp-create-button></wp-create-button>
+          <wp-create-button project-identifier="projectIdentifier"></wp-create-button>
         </li>
         <li class="toolbar-item">
           <button class="button edit-all-button"

frontend/app/components/work-packages/directives/wp-create-button/wp-create-button.directive.html

@@ -1,9 +1,7 @@
-<button class="button -alt-highlight add-work-package"
-        has-dropdown-menu
-        target="TasksDropdownMenu"
-        locals="availableTypes,projectIdentifier"
-        ng-disabled="cannot('work_package', 'create') || editAll.state">
+<button class="button -alt-highlight add-work-package" has-dropdown-menu target="TasksDropdownMenu"
+    locals="vm.types,vm.projectIdentifier" ng-disabled="vm.disabled">
+
   <i class="button--icon icon-add"></i>
-  <span class="button--text" ng-bind="::I18n.t('js.toolbar.unselected_title')"></span>
+  <span class="button--text" ng-bind="::vm.text"></span>
   <i class="button--dropdown-indicator"></i>
 </button>

frontend/app/components/work-packages/directives/wp-create-button/wp-create-button.directive.js

@@ -36,11 +36,30 @@ function wpCreateButton() {
     templateUrl: '/components/work-packages/directives/wp-create-button/' +
       'wp-create-button.directive.html',
 
+    scope: {
+      projectIdentifier: '='
+    },
+
+    bindToController: true,
     controllerAs: 'vm',
     controller: WorkPackageCreateButtonController
   }
 }
 
-function WorkPackageCreateButtonController() {
+function WorkPackageCreateButtonController($scope, AuthorisationService, EditableFieldsState,
+    ProjectService) {
+
+  var vm = this,
+      editAll = EditableFieldsState.editAll.state;
+
+  vm.text = I18n.t('js.toolbar.unselected_title');
+  vm.disabled = editAll || AuthorisationService.cannot('work_package', 'create');
+
+  ProjectService.getProject(vm.projectIdentifier).then(function(project) {
+    vm.types = project.embedded.types;
+  });
 
+  $scope.$on('modelAuthUpdate.work_package', function (event, can, cannot) {
+    vm.disabled = editAll || cannot('create');
+  })
 }