src/main/resources/META-INF/resources/designer/lib/angularjs-dropdown-multiselect.js

   1 'use strict';
   2
   3 var directiveModule = angular.module('angularjs-dropdown-multiselect', ['ngRoute',
   4                                                                         'ngResource',
   5                                                                         'hljs',
   6                                                                         'ui.bootstrap',
   7                                                                         'angular-loading-bar',
   8                                                                         'ngAnimate',
   9                                                                         'dialogs.main',
  10                                                                         'ui.grid',
  11                                                                         'ui.grid.resizeColumns',
  12                                                                         'ui.grid.paging',
  13                                                                         'ui.grid.selection',
  14                                                                         'ui.grid.cellNav',
  15                                                                         'ui.grid.pinning',
  16                                                                         'ngSanitize','vs-repeat']);
  17
  18 directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$compile', '$parse','$rootScope', '$resource', '$http','$location',
  19     function ($filter, $document, $compile, $parse, $rootScope, $resource, $http,$location)
  20     {
  21
  22                 //console.log($http);
  23
  24         return {
  25             restrict: 'AE',
  26             scope: {
  27                 selectedModel: '=',
  28                 options: '=',
  29                 extraSettings: '=',
  30                 events: '=',
  31                 searchFilter: '=?',
  32                 translationTexts: '=',
  33                 groupBy: '@'
  34             },
  35             template: function (element, attrs)
  36             {
  37                 var checkboxes = attrs.checkboxes ? true : false;
  38                 var groups = attrs.groupBy ? true : false;
  39
  40                 var template = '<div class="multiselect-parent btn-group dropdown-multiselect" style="width:100%;">';
  41                 template += '<div style="width:98%;" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}&nbsp;<span class="caret"></span></div>';
  42                 template += '<ul class="dropdown-menu dropdown-menu-form" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: scroll; width:280px;" >';
  43                 template += '<li ng-hide="!settings.showCheckAll"><a data-ng-click="selectAll()"><span class="glyphicon glyphicon-ok"></span>  {{texts.checkAll}}</a>';
  44                 template += '<li ng-show="settings.showUncheckAll"><a data-ng-click="deselectAll();"><span class="glyphicon glyphicon-remove"></span>   {{texts.uncheckAll}}</a></li>';
  45                 template += '<li ng-hide="(!settings.showCheckAll) && !settings.showUncheckAll" class="divider"></li>';
  46                 template += '<li ng-show="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control" style="width: 100%;" ng-model="searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
  47                 template += '<li ng-show="settings.enableSearch" class="divider"></li>';
  48
  49                 template += '<div vs-repeat> ';
  50
  51                 if (groups) {
  52                     template += '<li ng-repeat-start="option in orderedItems | filter: searchFilter" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
  53                     template += '<li ng-repeat-end role="presentation">';
  54                 } else {
  55                     template += '<li role="presentation" ng-repeat="option in options| filter: searchFilter">';
  56                 }
  57
  58                 template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';
  59
  60                 if (checkboxes) {
  61                     template += '<div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /> {{getPropertyForObject(option, settings.displayProp)}}</label></div></a>';
  62                 } else {
  63                     template += '<span data-ng-class="{\'glyphicon glyphicon-ok\': isChecked(getPropertyForObject(option,settings.idProp))}"></span> {{getPropertyForObject(option, settings.displayProp)}}</a>';
  64                 }
  65
  66                 template += '</li>';
  67                 template += '</div>';
  68
  69
  70                 template += '<li class="divider" ng-show="settings.selectionLimit > 1"></li>';
  71                 template += '<li role="presentation" ng-show="settings.selectionLimit > 1"><a role="menuitem">{{selectedModel.length}} {{texts.selectionOf}} {{settings.selectionLimit}} {{texts.selectionCount}}</a></li>';
  72
  73                 template += '</ul>';
  74                 template += '</div>';
  75
  76                 element.html(template);
  77             },
  78             link: function ($scope, $element, $attrs)
  79             {
  80                 var $dropdownTrigger = $element.children()[0];
  81
  82                 $scope.toggleDropdown = function () {
  83                     $scope.open = !$scope.open;
  84                     if ($('#left').height()<$('#right').height()){
  85                         $('#left').height($('#right').height());
  86                     }
  87                         setTimeout(function(){ $('#left').scrollTop($('#left')[0].scrollHeight); }, 1);
  88                 };
  89
  90                 $scope.checkboxClick = function ($event, id) {
  91                     $scope.setSelectedItem(id);
  92                     $event.stopImmediatePropagation();
  93                 };
  94
  95                 $scope.externalEvents =
  96                 {
  97                     onItemSelect: angular.noop,
  98                     onItemDeselect: angular.noop,
  99                     onSelectAll: angular.noop,
 100                     onDeselectAll: angular.noop,
 101                     onInitDone: angular.noop,
 102                     onMaxSelectionReached: angular.noop
 103                 };
 104
 105                 $scope.settings = {
 106                     dynamicTitle: true,
 107                     scrollable: false,
 108                     scrollableHeight: '300px',
 109                     closeOnBlur: true,
 110                     displayProp: 'id',
 111                     idProp: 'id',
 112                     externalIdProp: 'id',
 113                     enableSearch: false,
 114                     selectionLimit: 0,
 115                     showCheckAll: true,
 116                     showUncheckAll: true,
 117                     closeOnSelect: false,
 118                     buttonClasses: 'btn btn-default',
 119                     closeOnDeselect: false,
 120                     groupBy: $attrs.groupBy || undefined,
 121                     groupByTextProvider: null,
 122                     smartButtonMaxItems: 0,
 123                     smartButtonTextConverter: angular.noop
 124                 };
 125
 126                 $scope.texts = {
 127                     checkAll: 'Check All',
 128                     uncheckAll: 'Uncheck All',
 129                     selectionCount: 'checked',
 130                     selectionOf: '/',
 131                     searchPlaceholder: 'Search...',
 132                     buttonDefaultText: 'Select',
 133                     dynamicButtonTextSuffix: 'checked'
 134                 };
 135
 136                 $scope.searchFilter = $scope.searchFilter || '';
 137
 138                 if (angular.isDefined($scope.settings.groupBy))
 139                 {
 140                     $scope.$watch('options', function (newValue)
 141                     {
 142                         if (angular.isDefined(newValue))
 143                         {
 144                             $scope.orderedItems = $filter('orderBy')(newValue, $scope.settings.groupBy);
 145                         }
 146                     });
 147                 }
 148
 149                 angular.extend($scope.settings, $scope.extraSettings || []);
 150                 angular.extend($scope.externalEvents, $scope.events || []);
 151                 angular.extend($scope.texts, $scope.translationTexts);
 152
 153                 $scope.singleSelection = $scope.settings.selectionLimit === 1;
 154
 155                 function getFindObj(id)
 156                 {
 157                     var findObj = {};
 158
 159                     if ($scope.settings.externalIdProp === '')
 160                     {
 161                         findObj[$scope.settings.idProp] = id;
 162                     }
 163                     else
 164                     {
 165                         findObj[$scope.settings.externalIdProp] = id;
 166                     }
 167
 168                     return findObj;
 169                 }
 170
 171                 function clearObject(object)
 172                 {
 173                     for (var prop in object)
 174                     {
 175                         delete object[prop];
 176                     }
 177                 }
 178
 179                 if ($scope.singleSelection)
 180                 {
 181                     if (angular.isArray($scope.selectedModel) && $scope.selectedModel.length === 0)
 182                     {
 183                         clearObject($scope.selectedModel);
 184                     }
 185                 }
 186
 187                 if ($scope.settings.closeOnBlur)
 188                 {
 189                     $document.on('click', function (e)
 190                     {
 191                         var target = e.target.parentElement;
 192                         var parentFound = false;
 193
 194                         while (angular.isDefined(target) && target !== null && !parentFound)
 195                         {
 196                                 try
 197                                 {
 198                                         if (_.contains(target.className.split(' '), 'multiselect-parent') && !parentFound)
 199                                     {
 200                                         if(target === $dropdownTrigger)
 201                                         {
 202                                             parentFound = true;
 203                                         }
 204                                     }
 205
 206                                     target = target.parentElement;
 207
 208                                 }catch(e){break;}
 209
 210                         }
 211
 212                         if (!parentFound) {
 213                             $scope.$apply(function () {
 214                                 $scope.open = false;
 215                             });
 216                         }
 217                     });
 218                 }
 219
 220                 $scope.getGroupTitle = function (groupValue) {
 221                     if ($scope.settings.groupByTextProvider !== null) {
 222                         return $scope.settings.groupByTextProvider(groupValue);
 223                     }
 224
 225                     return groupValue;
 226                 };
 227
 228                 $scope.getButtonText = function () {
 229                     if ($scope.settings.dynamicTitle && ($scope.selectedModel.length > 0 || (angular.isObject($scope.selectedModel) && _.keys($scope.selectedModel).length > 0))) {
 230                         if ($scope.settings.smartButtonMaxItems > 0) {
 231                             var itemsText = [];
 232
 233                             angular.forEach($scope.options, function (optionItem) {
 234                                 if ($scope.isChecked($scope.getPropertyForObject(optionItem, $scope.settings.idProp))) {
 235                                     var displayText = $scope.getPropertyForObject(optionItem, $scope.settings.displayProp);
 236                                     var converterResponse = $scope.settings.smartButtonTextConverter(displayText, optionItem);
 237
 238                                     itemsText.push(converterResponse ? converterResponse : displayText);
 239                                 }
 240                             });
 241
 242                             if ($scope.selectedModel.length > $scope.settings.smartButtonMaxItems) {
 243                                 itemsText = itemsText.slice(0, $scope.settings.smartButtonMaxItems);
 244                                 itemsText.push('...');
 245                             }
 246
 247                             return itemsText.join(', ');
 248                         } else {
 249                             var totalSelected;
 250
 251                             if ($scope.singleSelection) {
 252                                 totalSelected = ($scope.selectedModel !== null && angular.isDefined($scope.selectedModel[$scope.settings.idProp])) ? 1 : 0;
 253                             } else {
 254                                 totalSelected = angular.isDefined($scope.selectedModel) ? $scope.selectedModel.length : 0;
 255                             }
 256
 257                             if (totalSelected === 0) {
 258                                 return $scope.texts.buttonDefaultText;
 259                             } else {
 260                                 return totalSelected + ' ' + $scope.texts.dynamicButtonTextSuffix;
 261                             }
 262                         }
 263                     } else {
 264                         return $scope.texts.buttonDefaultText;
 265                     }
 266                 };
 267
 268                 $scope.getPropertyForObject = function (object, property)
 269                 {
 270                     if (angular.isDefined(object) && object.hasOwnProperty(property)) {
 271                         return object[property];
 272                     }
 273
 274                     return '';
 275                 };
 276
 277                 $scope.selectAll = function ()
 278                 {
 279                         $scope.deselectAll(false,true);
 280                     $scope.externalEvents.onSelectAll();
 281
 282                     var len = $scope.selectedModel.length;
 283
 284                     angular.forEach($scope.options, function (value)
 285                     {
 286                         if(value[$scope.settings.idProp]=="All")
 287                                 {
 288                                 if(len > 1)
 289                             {
 290                                         $scope.setSelectedItem(value[$scope.settings.idProp], true, true);
 291                             }
 292                             else
 293                                 {
 294                                 $scope.setSelectedItem(value[$scope.settings.idProp], true, true);
 295                             }
 296                                 }
 297                     });
 298                 };
 299
 300                 $scope.deselectAll = function (sendEvent,ignore)
 301                 {
 302                         var len = $scope.selectedModel.length;
 303
 304                         sendEvent = sendEvent || true;
 305
 306                     if (sendEvent)
 307                     {
 308                         $scope.externalEvents.onDeselectAll();
 309                     }
 310
 311                     if ($scope.singleSelection)
 312                     {
 313                         clearObject($scope.selectedModel);
 314                     }
 315                     else
 316                     {
 317                         $scope.selectedModel.splice(0, $scope.selectedModel.length);
 318                     }
 319
 320                     if(ignore!=true || ignore==undefined)
 321                     {
 322                             if(len > 1)
 323                             {
 324                                 $scope.setSelectedItem("All", true, true);
 325                             }
 326                             else
 327                                 {
 328                                 $scope.setSelectedItem("All", true, true);
 329                             }
 330                     }
 331
 332
 333                 };
 334
 335                 $scope.setSelectedItem = function (id, dontRemove, refresh)
 336                 {
 337                         var findObj = getFindObj(id);
 338                     var finalObj = null;
 339
 340                     if ($scope.settings.externalIdProp === '')
 341                     {
 342                         finalObj = _.find($scope.options, findObj);
 343                     }
 344                     else
 345                     {
 346                         finalObj = findObj;
 347                     }
 348
 349
 350                     if ($scope.singleSelection)
 351                     {
 352                         clearObject($scope.selectedModel);
 353                         angular.extend($scope.selectedModel, finalObj);
 354                         $scope.externalEvents.onItemSelect(finalObj);
 355
 356                         if ($scope.settings.closeOnSelect) $scope.open = false;
 357
 358                         return;
 359                     }
 360
 361                     dontRemove = dontRemove || false;
 362
 363
 364                     var exists = _.findIndex($scope.selectedModel, findObj) !== -1;
 365
 366                     if (!dontRemove && exists) {
 367                         $scope.selectedModel.splice(_.findIndex($scope.selectedModel, findObj), 1);
 368                         $scope.externalEvents.onItemDeselect(findObj);
 369                     } else if (!exists && ($scope.settings.selectionLimit === 0 || $scope.selectedModel.length < $scope.settings.selectionLimit)) {
 370                         $scope.selectedModel.push(finalObj);
 371                         $scope.externalEvents.onItemSelect(finalObj);
 372                     }
 373
 374                     if ($scope.settings.closeOnSelect) $scope.open = false;
 375
 376                     if(refresh || refresh==undefined)
 377                         {
 378                          if("/dashboard"==$location.path())
 379                                  {
 380                                 $rootScope.ReLoadDashboardComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 381                                   }
 382                                   else if("/api_portfolio"==$location.path())
 383                                   {
 384                                         $rootScope.ReLoadAPIPortfolioComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 385                                   }
 386                                   else if("/project_portfolio"==$location.path())
 387                                   {
 388                                         $rootScope.ReLoadProjectPortFolioComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 389                                   }
 390                                   else if("/installed_bundle_versions"==$location.path())
 391                                   {
 392                                         $rootScope.ReLoadInstalledBundleComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 393                                   }else if("/adapter_inventory"==$location.path())
 394                                   {
 395                                                 $rootScope.ReLoadAdapterInventoryComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 396                                   }
 397                                   else if("/api_taxonomy"==$location.path())
 398                                   {
 399                                                 $rootScope.ReLoadAPITaxonomyComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 400                                   }else if("/defects"==$location.path())
 401                                   {
 402                                                 $rootScope.ReLoadDefectReportComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 403                                   } else if("/environment_configurations"==$location.path())
 404                                   {
 405                                                 $rootScope.ReLoadEnvConfigComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 406                                   }
 407                                         else if("/qc_coverage_report"==$location.path())          {
 408                                                 $rootScope.ReLoadQcCodeCoverageComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 409                                   }else if("/func_test_exec_status"==$location.path())    {
 410                                                 $rootScope.ReLoadFunTestResultComboBox($scope.translationTexts.buttonDefaultText,finalObj.id);
 411                                   }
 412                                         else if("/api_schema"==$location.path())          {
 413
 414                                                 $rootScope.reloadApiSchemaPage($scope.translationTexts.buttonDefaultText,finalObj.id);
 415                                   }
 416
 417
 418
 419
 420
 421                         }
 422
 423                 };
 424
 425                 $scope.isChecked = function (id) {
 426                     if ($scope.singleSelection) {
 427                         return $scope.selectedModel !== null && angular.isDefined($scope.selectedModel[$scope.settings.idProp]) && $scope.selectedModel[$scope.settings.idProp] === getFindObj(id)[$scope.settings.idProp];
 428                     }
 429
 430                     return _.findIndex($scope.selectedModel, getFindObj(id)) !== -1;
 431                 };
 432
 433                 $scope.externalEvents.onInitDone();
 434             }
 435         };
 436 }]);