ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js

   1 /*-
   2  * ================================================================================
   3  * ECOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   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  * ================================================================================
  19  */
  20 /**
  21  * Created by nnaffar on 12/21/15.+
  22  */
  23 angular.module('ecompApp')
  24     .directive('multipleSelect2', function ($window) {
  25         return {
  26             restrict: 'E',
  27             templateUrl: 'app/directives/multiple-select/multiple-select2.tpl.html',
  28             scope: {
  29                 onChange: '&',
  30                 nameAttr: '@',
  31                 valueAttr: '@',
  32                 ngModel: '=',
  33                 placeholder: '@',
  34                 uniqueData: '@?',
  35                 onDropdownClose: '&?'
  36             },
  37             link: function(scope, elm, attrs){
  38                 scope.isExpanded = false;
  39
  40                 scope.isDisabled = !scope.ngModel || !scope.ngModel.length;
  41                 scope.$watch('ngModel', function(newVal){
  42                     scope.isDisabled = !newVal || !newVal.length;
  43                 });
  44
  45
  46                 let startListening = () => {
  47                     console.log('listening on $window!');
  48                     angular.element($window).on('click', function () {
  49                         stopListening();
  50                     });
  51
  52                     angular.element('multiple-select2').on('click', function(e) {
  53                         if($(e.target).closest('multiple-select2')[0].attributes['unique-data'].value === attrs.uniqueData){
  54                             console.log('ignored that..:', attrs.uniqueData);
  55                             e.stopPropagation();
  56                         }else{
  57                             console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);
  58                             scope.isExpanded = false;
  59                             scope.$applyAsync();
  60                         }
  61                     });
  62                 };
  63
  64                 let stopListening = function() {
  65                     if(scope.onDropdownClose){
  66                         scope.onDropdownClose();
  67                     }
  68                     scope.isExpanded = false;
  69                     scope.$applyAsync();
  70                     console.log('stop listening on $window and multiple-element!');
  71                     angular.element($window).off('click');
  72                     angular.element('multiple-select2').off('click');
  73                 };
  74
  75                 scope.showCheckboxes = function(){
  76                     scope.isExpanded = !scope.isExpanded;
  77                     if(scope.isExpanded){
  78                         startListening();
  79                     }else{
  80                         stopListening();
  81                         if(scope.onDropdownClose){
  82                             scope.onDropdownClose();
  83                         }
  84                     }
  85                 };
  86
  87                 scope.onCheckboxClicked = function() {
  88                     console.log('checkbox clicked; unique data: ',attrs.uniqueData);
  89                     if(scope.onChange) {
  90                         scope.onChange();
  91                     }
  92                 }
  93
  94                 scope.getTitle = function(){
  95                     var disp = '';
  96                     if(!scope.ngModel || !scope.ngModel.length) {
  97                         return disp;
  98                     }
  99                     scope.ngModel.forEach(function(item){
 100                         if(item[scope.valueAttr]){
 101                             disp+=item[scope.nameAttr] + ',';
 102                         }
 103                     });
 104                     if(disp!==''){
 105                         disp = disp.slice(0,disp.length-1);
 106                     }else{
 107                         disp = scope.placeholder;
 108                     }
 109                     return disp;
 110                 };
 111             }
 112         };
 113     });