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

   1 /*-
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal
   4  * ===================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  37  */
  38 /**
  39  * Created by nnaffar on 12/21/15.+
  40  */
  41 angular.module('ecompApp')
  42     .directive('multipleSelect', function ($window) {
  43         return {
  44             restrict: 'E',
  45             templateUrl: 'app/directives/multiple-select/multiple-select.tpl.html',
  46             scope: {
  47                 onChange: '&',
  48                 nameAttr: '@',
  49                 valueAttr: '@',
  50                 ngModel: '=',
  51                 placeholder: '@',
  52                 uniqueData: '@?',
  53                 onDropdownClose: '&?'
  54             },
  55             link: function(scope, elm, attrs){
  56                 scope.isExpanded = false;
  57
  58                 scope.isDisabled = !scope.ngModel || !scope.ngModel.length;
  59                 scope.$watch('ngModel', function(newVal){
  60                     scope.isDisabled = !newVal || !newVal.length;
  61                 });
  62
  63
  64                 let startListening = () => {
  65                     console.log('listening on $window!');
  66                     angular.element($window).on('click', function () {
  67                         stopListening();
  68                     });
  69
  70                     angular.element('multiple-select').on('click', function(e) {
  71                         if($(e.target).closest('multiple-select')[0].attributes['unique-data'].value === attrs.uniqueData){
  72                             console.log('ignored that..:', attrs.uniqueData);
  73                             e.stopPropagation();
  74                         }else{
  75                             console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);
  76                             scope.isExpanded = false;
  77                             scope.$applyAsync();
  78                         }
  79                     });
  80                 };
  81
  82                 let stopListening = function() {
  83                     if(scope.onDropdownClose){
  84                         scope.onDropdownClose();
  85                     }
  86                     scope.isExpanded = false;
  87                     scope.$applyAsync();
  88                     console.log('stop listening on $window and multiple-element!');
  89                     angular.element($window).off('click');
  90                     angular.element('multiple-select').off('click');
  91                 };
  92
  93                 scope.showCheckboxes = function(){
  94                     scope.isExpanded = !scope.isExpanded;
  95                     if(scope.isExpanded){
  96                         startListening();
  97                     }else{
  98                         stopListening();
  99                         if(scope.onDropdownClose){
 100                             scope.onDropdownClose();
 101                         }
 102                     }
 103                 };
 104
 105                 scope.onCheckboxClicked = function() {
 106                     console.log('checkbox clicked; unique data: ',attrs.uniqueData);
 107                     if(scope.onChange) {
 108                         scope.onChange();
 109                     }
 110                 }
 111
 112                 scope.getTitle = function(){
 113                     var disp = '';
 114                     if(!scope.ngModel || !scope.ngModel.length) {
 115                         return disp;
 116                     }
 117                     scope.ngModel.forEach(function(item){
 118                         if(item[scope.valueAttr]){
 119                             disp+=item[scope.nameAttr] + ',';
 120                         }
 121                     });
 122                     if(disp!==''){
 123                         disp = disp.slice(0,disp.length-1);
 124                     }else{
 125                         disp = scope.placeholder;
 126                     }
 127                     return disp;
 128                 };
 129
 130                 scope.getIdTitle = function(){
 131                     var disp = '';
 132                     if(!scope.ngModel || !scope.ngModel.length) {
 133                         return disp;
 134                     }
 135                     scope.ngModel.forEach(function(item){
 136                         if(item[scope.valueAttr]){
 137                             disp+=item[scope.nameAttr] + ',';
 138                         }
 139                     });
 140                     if(disp!==''){
 141                         disp = disp.slice(0,disp.length-1);
 142                     }else{
 143                         disp = scope.placeholder;
 144                     }
 145                     return disp+attrs.uniqueData;
 146                 };
 147             }
 148         };
 149     });