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