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

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