Extract relation specific add controls

app/assets/javascripts/angular/work_packages/models/relations-handler.js

@@ -39,6 +39,8 @@ angular.module('openproject.models')
     this.workPackage = workPackage;
     this.relations = relations;
     this.relationsId = relationsId;
+
+    this.type = "relation";
   }
 
   CommonRelationsHandler.prototype = {

app/assets/javascripts/angular/work_packages/tabs/add-work-package-relation-directive.js

@@ -0,0 +1,37 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2014 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.
+//++
+
+// TODO move to UI components
+angular.module('openproject.workPackages.tabs')
+
+.directive('addWorkPackageRelation', [function() {
+  return {
+    restrict: 'E',
+    templateUrl: '/templates/work_packages/tabs/_add_work_package_relation.html',
+  };
+}]);

app/assets/javascripts/angular/work_packages/tabs/work-package-relations-directive.js

@@ -70,7 +70,9 @@ angular.module('openproject.workPackages.tabs')
         scope.expand = !scope.expand;
       };
 
-      scope.handler.applyCustomExtensions();
+      $timeout(function() {
+        scope.handler.applyCustomExtensions();
+      });
     }
   };
 }]);

public/templates/work_packages/tabs/_add_work_package_relation.html

@@ -0,0 +1,12 @@
+<button class="button"
+    title="{{ btnTitle }}"
+    ng-bind-html="btnIcon + ' ' + btnTitle"
+    ng-click="handler.addRelation(this)">
+</button>
+<input id="relation_to_id-{{ handler.relationsId }}"
+   name="relation[to_id][{{ handler.relationsId }}]"
+   size="10"
+   type="text"
+   autocomplete="off">
+<div id="related_issue_candidates-{{ handler.relationsId }}"
+ class="autocomplete related-issue-candidates"></div>

public/templates/work_packages/tabs/_work_package_relations.html

@@ -45,19 +45,8 @@
         No relation exists
       </div>
     </div>
-    <div class="add-relation" ng-if="handler.canAddRelation()">
-      <button class="button"
-              title="{{ btnTitle }}"
-              ng-bind-html="btnIcon + ' ' + btnTitle"
-              ng-click="handler.addRelation(this)">
-      </button>
-      <input id="relation_to_id-{{ handler.relationsId }}"
-             name="relation[to_id][{{ handler.relationsId }}]"
-             size="10"
-             type="text"
-             autocomplete="off">
-      <div id="related_issue_candidates-{{ handler.relationsId }}"
-           class="autocomplete related-issue-candidates"></div>
+    <div class="add-relation" ng-if="handler.canAddRelation()" ng-switch="handler.type">
+      <add-work-package-relation ng-switch_when="relation"></add-work-package-relation>
     </div>
   </div>
 </div>