1 files changed, 113 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts
new file mode 100644
index 0000000000..22a2d078b7
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts
@@ -0,0 +1,113 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+    'use strict';
+
+
+    export interface IRelationMenuScope extends ng.IScope {
+        relationMenuDirectiveObj:Models.RelationMenuDirectiveObj;
+        createRelation:Function;
+        isLinkMenuOpen:boolean;
+        hideRelationMatch:Function;
+        cancel:Function;
+
+        saveRelation();
+        showMatch(arr1:Array<Models.MatchBase>, arr2:Array<Models.MatchBase>):boolean;
+        hasMatchesToShow(matchesObj:Models.MatchBase, selectedMatch:Array<Models.MatchBase>);
+        updateSelectionText():void;
+
+    }
+
+
+    export class RelationMenuDirective implements ng.IDirective {
+
+        constructor(private $templateCache:ng.ITemplateCacheService,
+                    private $filter:ng.IFilterService
+        ) {
+        }
+
+        scope = {
+            relationMenuDirectiveObj: '=',
+            isLinkMenuOpen: '=',
+            createRelation: '&',
+            cancel:'&'
+        };
+
+        restrict = 'E';
+        replace = true;
+        template = ():string => {
+            return this.$templateCache.get('/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html');
+        };
+
+        link = (scope:IRelationMenuScope, element:JQuery, $attr:ng.IAttributes) => {
+
+            scope.saveRelation = ():void=> {
+                let chosenMatches:Array<any> = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch);
+                let chosenMatch:Models.MatchBase = chosenMatches[0];
+                let  chosenVL:Models.Components.Component;
+                if ("mptmp" === scope.relationMenuDirectiveObj.vlType) {
+                    chosenVL = scope.relationMenuDirectiveObj.mp2mpVL;
+                } else {
+                    chosenVL = scope.relationMenuDirectiveObj.p2pVL;
+                }
+                scope.createRelation()(chosenMatch,chosenVL);
+            };
+
+
+            scope.hideRelationMatch = () => {
+                scope.isLinkMenuOpen = false;
+                scope.cancel();
+            };
+
+            //to show options in link menu
+            scope.showMatch = (arr1:Array<Models.MatchBase>, arr2:Array<Models.MatchBase>):boolean => {
+                return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0;
+            };
+
+            //to show requirements/capabilities title
+            scope.hasMatchesToShow = (matchesObj:Models.MatchBase, selectedMatch:Array<Models.MatchBase>):boolean => {
+                let result:boolean = false;
+                _.forEach(matchesObj, (matchesArr:Array<Models.MatchBase>) => {
+                    if (!result) {
+                        result = scope.showMatch(matchesArr, selectedMatch);
+                    }
+                });
+                return result;
+            };
+
+
+            scope.updateSelectionText = ():void => {
+                let left:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].getDisplayText('left')) : '';
+                let both:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch && scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? ' - ' +
+                this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].requirement.relationship) + ' - ' : '';
+                let right:string = scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch[0].getDisplayText('right')) : '';
+                scope.relationMenuDirectiveObj.selectionText = left + both + right;
+            };
+
+
+        }
+        public static factory = ($templateCache:ng.ITemplateCacheService , $filter:ng.IFilterService)=> {
+            return new RelationMenuDirective($templateCache, $filter);
+        };
+    }
+
+    RelationMenuDirective.factory.$inject = ['$templateCache', '$filter'];
+}