Move wpRelations directive to components

frontend/app/angular-modules.ts

@@ -115,7 +115,7 @@ export const wpDirectivesModule = angular.module('openproject.workPackages.direc
   'openproject.workPackages.services',
   'openproject.workPackages.models'
 ]);
-angular.module('openproject.workPackages.tabs', []);
+export const wpTabsModule = angular.module('openproject.workPackages.tabs', []);
 angular.module('openproject.workPackages.activities', []);
 
 // messages

frontend/app/components/wp-panels/relations-panel/relations-panel.directive.html

@@ -1,57 +1,57 @@
 <div class="detail-panel-description" ng-if="workPackage">
   <div class="detail-panel-description-content">
-    <work-package-relations relation-type="parent"
+    <wp-relations relation-type="parent"
                   handler="wpParent"
                   button-title="{{ I18n.t('js.relation_buttons.change_parent') }}"
                   button-icon="<i class='icon-hierarchy icon-edit'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="children"
+    <wp-relations relation-type="children"
                   handler="wpChildren"
                   button-title="{{ I18n.t('js.relation_buttons.add_child') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="relates"
+    <wp-relations relation-type="relates"
                   handler="relatedTo"
                   button-title="{{ I18n.t('js.relation_buttons.add_related_to') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="duplicates"
+    <wp-relations relation-type="duplicates"
                   handler="duplicates"
                   button-title="{{ I18n.t('js.relation_buttons.add_duplicates') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="duplicated"
+    <wp-relations relation-type="duplicated"
                   handler="duplicated"
                   button-title="{{ I18n.t('js.relation_buttons.add_duplicated_by') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="blocks"
+    <wp-relations relation-type="blocks"
                   handler="blocks"
                   button-title="{{ I18n.t('js.relation_buttons.add_blocks') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="blocked"
+    <wp-relations relation-type="blocked"
                   handler="blocked"
                   button-title="{{ I18n.t('js.relation_buttons.add_blocked_by') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="precedes"
+    <wp-relations relation-type="precedes"
                   handler="precedes"
                   button-title="{{ I18n.t('js.relation_buttons.add_precedes') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
 
-    <work-package-relations relation-type="follows"
+    <wp-relations relation-type="follows"
                   handler="follows"
                   button-title="{{ I18n.t('js.relation_buttons.add_follows') }}"
                   button-icon="<i class='icon-hierarchy icon-add'></i>">
-    </work-package-relations>
+    </wp-relations>
   </div>
 </div>

frontend/app/components/wp-relations/wp-relations.directive.test.ts

@@ -26,13 +26,15 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-/*jshint expr: true*/
+
+import {wpTabsModule, opApiModule} from "../../angular-modules";
 
 describe('Work Package Relations Directive', function () {
   var I18n, PathHelper, WorkPackagesHelper, Ajax, compile, element, scope, ChildrenRelationsHandler, stateParams = {};
 
-  beforeEach(angular.mock.module('openproject.workPackages.tabs',
-                                 'openproject.api',
+  beforeEach(angular.mock.module(
+    wpTabsModule.name,
+    opApiModule.name,
     'openproject.helpers',
     'openproject.models',
     'openproject.layout',
@@ -41,16 +43,16 @@ describe('Work Package Relations Directive', function() {
     'ngSanitize'));
 
   beforeEach(angular.mock.module('openproject.templates', function ($provide) {
-    var configurationService = {};
-
-    configurationService.isTimezoneSet = sinon.stub().returns(false);
-    configurationService.accessibilityModeEnabled = sinon.stub().returns(false);
+    var configurationService = {
+      isTimezoneSet: sinon.stub().returns(false),
+      accessibilityModeEnabled: sinon.stub().returns(false)
+    };
 
     $provide.constant('$stateParams', stateParams);
     $provide.constant('ConfigurationService', configurationService);
   }));
 
-  beforeEach(inject(function($rootScope,
+  beforeEach(angular.mock.inject(function ($rootScope,
                               $compile,
                               _I18n_,
                               _PathHelper_,
@@ -85,8 +87,8 @@ describe('Work Package Relations Directive', function() {
     I18n.t.restore();
   });
 
-  var html = "<work-package-relations relation-type='parent' handler='relations' " +
-             "button-title='Add Relation' button-icon='%MyIcon%'></work-package-relations>";
+  var html = "<wp-relations relation-type='parent' handler='relations' " +
+    "button-title='Add Relation' button-icon='%MyIcon%'></wp-relations>";
 
   var workPackage1;
   var workPackage2;
@@ -101,7 +103,7 @@ describe('Work Package Relations Directive', function() {
   var relationsHandlerWithNotAssignedRelatedWorkPackage;
 
   var createRelationsHandlerStub = function ($timeout, count) {
-    var relationsHandler = {};
+    var relationsHandler:any = {};
 
     relationsHandler.relationsId = sinon.stub();
     relationsHandler.isEmpty = sinon.stub();
@@ -508,25 +510,4 @@ describe('Work Package Relations Directive', function() {
       });
     });
   });
-
-  // describe('multi element markup', function() {
-  //   beforeEach(inject(function($timeout) {
-  //     scope.workPackage = workPackage1;
-  //     scope.relations = [relation1, relation2];
-
-  //     compile(multiElementHtml);
-
-  //     $timeout.flush();
-  //   }));
-
-  //   shouldBehaveLikeRelationsDirective();
-
-  //   shouldBehaveLikeMultiRelationDirective();
-
-  //   shouldBehaveLikeExpandedRelationsDirective();
-
-  //   shouldBehaveLikeHasTableHeader();
-
-  //   shouldBehaveLikeHasTableContent(2);
-  // });
 });

frontend/app/components/wp-relations/wp-relations.directive.ts

@@ -26,10 +26,14 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-module.exports = function(I18n, WorkPackagesHelper, $timeout) {
+import {wpTabsModule} from "../../angular-modules";
+
+function wpRelationsDirective(I18n, WorkPackagesHelper, $timeout) {
   return {
     restrict: 'E',
     replace: true,
+    templateUrl: '/components/wp-relations/wp-relations.directive.html',
+
     scope: {
       relationType: '@',
       handler: '=',
@@ -37,11 +41,11 @@ module.exports = function(I18n, WorkPackagesHelper, $timeout) {
       btnIcon: '@buttonIcon',
       isSingletonRelation: '@singletonRelation'
     },
-    templateUrl: '/templates/work_packages/tabs/_work_package_relations.html',
-    link: function(scope, element, attrs) {
+
+    link: function(scope) {
       scope.I18n = I18n;
       scope.focusElementIndex = -2;
-      scope.title = I18n.t('js.relation_labels.' + scope.relationType)
+      scope.title = I18n.t('js.relation_labels.' + scope.relationType);
 
       scope.$watch('handler', function() {
         if (scope.handler) {
@@ -85,4 +89,6 @@ module.exports = function(I18n, WorkPackagesHelper, $timeout) {
       };
     }
   };
-};
+}
+
+wpTabsModule.directive('wpRelations', wpRelationsDirective);

frontend/app/work_packages/tabs/index.js

@@ -37,10 +37,4 @@ angular.module('openproject.workPackages.tabs')
     'PathHelper',
     'WorkPackagesHelper', require(
       './related-work-package-table-row-directive')
-  ])
-  .directive('workPackageRelations', [
-    'I18n',
-    'WorkPackagesHelper',
-    '$timeout',
-    require('./work-package-relations-directive')
   ]);