catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20 'use strict'
  21 import * as _ from "lodash";
  22 import {Match, ConnectRelationModel} from "app/models";
  23 import {Component} from "../../../models/components/component";
  24
  25 export interface IRelationMenuScope extends ng.IScope {
  26     relationMenuDirectiveObj:ConnectRelationModel;
  27     createRelation:Function;
  28     isLinkMenuOpen:boolean;
  29     hideRelationMatch:Function;
  30     cancel:Function;
  31
  32     saveRelation();
  33     showMatch(arr1:Array<Match>, arr2:Array<Match>):boolean;
  34     hasMatchesToShow(matchesObj:Match, selectedMatch:Array<Match>);
  35     updateSelectionText():void;
  36
  37 }
  38
  39
  40 export class RelationMenuDirective implements ng.IDirective {
  41
  42     constructor(private $filter:ng.IFilterService) {
  43     }
  44
  45     scope = {
  46         relationMenuDirectiveObj: '=',
  47         isLinkMenuOpen: '=',
  48         createRelation: '&',
  49         cancel: '&'
  50     };
  51
  52     restrict = 'E';
  53     replace = true;
  54     template = ():string => {
  55         return require('./relation-menu.html');
  56     };
  57
  58     link = (scope:IRelationMenuScope, element:JQuery, $attr:ng.IAttributes) => {
  59
  60         scope.saveRelation = ():void=> {
  61             let chosenMatches:Array<any> = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch);
  62             let chosenMatch:Match = chosenMatches[0];
  63             scope.createRelation()(chosenMatch);
  64         };
  65
  66
  67         scope.hideRelationMatch = () => {
  68             scope.isLinkMenuOpen = false;
  69             scope.cancel();
  70         };
  71
  72         //to show options in link menu
  73         scope.showMatch = (arr1:Array<Match>, arr2:Array<Match>):boolean => {
  74             return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0;
  75         };
  76
  77         //to show requirements/capabilities title
  78         scope.hasMatchesToShow = (matchesObj:Match, selectedMatch:Array<Match>):boolean => {
  79             let result:boolean = false;
  80             _.forEach(matchesObj, (matchesArr:Array<Match>) => {
  81                 if (!result) {
  82                     result = scope.showMatch(matchesArr, selectedMatch);
  83                 }
  84             });
  85             return result;
  86         };
  87
  88
  89         scope.updateSelectionText = ():void => {
  90             let left:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].getDisplayText('left')) : '';
  91             let both:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch && scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? ' - ' +
  92             this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].requirement.relationship) + ' - ' : '';
  93             let right:string = scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch[0].getDisplayText('right')) : '';
  94             scope.relationMenuDirectiveObj.selectionText = left + both + right;
  95         };
  96
  97
  98     }
  99     public static factory = ($filter:ng.IFilterService)=> {
 100         return new RelationMenuDirective($filter);
 101     };
 102 }
 103
 104 RelationMenuDirective.factory.$inject = ['$filter'];