diff options
Diffstat (limited to 'ecomp-portal-FE/client/app/directives/multiple-select')
3 files changed, 230 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.directive.js b/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.directive.js new file mode 100644 index 00000000..e8f6ed94 --- /dev/null +++ b/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.directive.js @@ -0,0 +1,111 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ + +angular.module('ecompApp') + .directive('multipleSelect', function ($window) { + return { + restrict: 'E', + templateUrl: 'app/directives/multiple-select/multiple-select.tpl.html', + scope: { + onChange: '&', + nameAttr: '@', + valueAttr: '@', + ngModel: '=', + placeholder: '@', + uniqueData: '@?', + onDropdownClose: '&?' + }, + link: function(scope, elm, attrs){ + scope.isExpanded = false; + + scope.isDisabled = !scope.ngModel || !scope.ngModel.length; + scope.$watch('ngModel', function(newVal){ + scope.isDisabled = !newVal || !newVal.length; + }); + + + let startListening = () => { + console.log('listening on $window!'); + angular.element($window).on('click', function () { + stopListening(); + }); + + angular.element('multiple-select').on('click', function(e) { + if($(e.target).closest('multiple-select')[0].attributes['unique-data'].value === attrs.uniqueData){ + console.log('ignored that..:', attrs.uniqueData); + e.stopPropagation(); + }else{ + console.log('shouldnt ignore, close expanded!:', attrs.uniqueData); + scope.isExpanded = false; + scope.$applyAsync(); + } + }); + }; + + let stopListening = function() { + if(scope.onDropdownClose){ + scope.onDropdownClose(); + } + scope.isExpanded = false; + scope.$applyAsync(); + console.log('stop listening on $window and multiple-element!'); + angular.element($window).off('click'); + angular.element('multiple-select').off('click'); + }; + + scope.showCheckboxes = function(){ + scope.isExpanded = !scope.isExpanded; + if(scope.isExpanded){ + startListening(); + }else{ + stopListening(); + if(scope.onDropdownClose){ + scope.onDropdownClose(); + } + } + }; + + scope.onCheckboxClicked = function() { + console.log('checkbox clicked; unique data: ',attrs.uniqueData); + if(scope.onChange) { + scope.onChange(); + } + } + + scope.getTitle = function(){ + var disp = ""; + if(!scope.ngModel || !scope.ngModel.length) { + return disp; + } + scope.ngModel.forEach(function(item){ + if(item[scope.valueAttr]){ + disp+=item[scope.nameAttr] + ","; + } + }); + if(disp!==""){ + disp = disp.slice(0,disp.length-1); + }else{ + disp = scope.placeholder; + } + return disp; + }; + } + }; + }); diff --git a/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.less b/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.less new file mode 100644 index 00000000..6e54c8b6 --- /dev/null +++ b/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.less @@ -0,0 +1,81 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ + .multiple-select{ + position: relative; + width: 100%; + + .selectBox{ + cursor: pointer; + position: relative; + border: 1px solid @o; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 30px; + height: 30px; + padding-left: 10px; + padding-right: 10px; + + &.open::after{ + content: ''; + .arrow_up; + display: block; + position: absolute; + top: 12px; + right: 4px; + } + &.closed::after{ + content: ''; + .arrow_down; + display: block; + position: absolute; + top: 12px; + right: 4px; + } + &.disabled{ + cursor: default; + background: #CCCCCC; + } + + } + + .checkboxes{ + z-index: 99999; + padding-left: 8px; + padding-right: 8px; + position: absolute; + top: 30px; + width: 100%; + background: white; + + display: block; + border: 1px #dadada solid; + + label{ + cursor: pointer; + display: block; + } + input{ + cursor: pointer; + } + + + } +}
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.tpl.html b/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.tpl.html new file mode 100644 index 00000000..e55e844c --- /dev/null +++ b/ecomp-portal-FE/client/app/directives/multiple-select/multiple-select.tpl.html @@ -0,0 +1,38 @@ +<!-- + ================================================================================ + eCOMP Portal + ================================================================================ + Copyright (C) 2017 AT&T Intellectual Property + ================================================================================ + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + ================================================================================ + --> + <div class="dropdown-container" style="height:30px;"> + <div class="right_arrow_down" style="left:185px"></div> + <div class="multiple-select"> + <div class="selectBox" + ng-click="isDisabled || showCheckboxes()" + title="{{getTitle()}}" + ng-bind="getTitle()" + ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div> + + <div class="checkboxes" ng-show="isExpanded"> + <div ng-repeat="item in ngModel"> + <label> + <input type="checkbox" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()"> + {{item[nameAttr]}} + </label> + </div> + </div> + </div> +</div> |