[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects abstraction of components Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8 Signed-off-by: st782s <statta@research.att.com>
author: st782s <statta@research.att.com> 2017-05-04 07:48:42 -0400
committer: st782s <statta@research.att.com> 2017-05-04 12:28:17 -0400
commit: b54df0ddd0c6a0372327c5aa3668e5a6458fcd64 (patch)
tree: e69cfa9b314a801bd187cf0145d1d4306436229c /ecomp-portal-FE-common/client/app/directives/multiple-select
parent: 39d1e62c84041831bfc52cca73b5ed5efaf57d27 (diff)
6 files changed, 422 insertions, 0 deletions
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js
new file mode 100644
index 00000000..fb56d438
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js
@@ -0,0 +1,113 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/21/15.+
+ */
+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-common/client/app/directives/multiple-select/multiple-select.less b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.less
new file mode 100644
index 00000000..7035a329
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.less
@@ -0,0 +1,62 @@
+.multiple-select{
+  position: relative;
+  width: 100%;
+
+  .selectBox{
+    cursor: pointer;
+    position: relative;
+    border: 1px solid @portalDGray;
+    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: @portalLGray;
+    }
+
+  }
+
+  .checkboxes{
+    z-index: 99999;
+    padding-left: 8px;
+    padding-right: 8px;
+    position: absolute;
+    top: 30px;
+    width: 100%;
+    background: @portalWhite;
+
+    display: block;
+    border: 1px @portalLGray solid;
+
+    label{
+      cursor: pointer;
+      display: block;
+    }
+    input{
+      cursor: pointer;
+    }
+
+
+  }
+}
+\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html
new file mode 100644
index 00000000..3896bf2d
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html
@@ -0,0 +1,36 @@
+<!--
+  ================================================================================
+  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 id="app-multilple-select" class="multiple-select">
+    <div class="selectBox"
+    	 id="app-select-{{getTitle()}}"
+         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" id="{{item[nameAttr]}}-checkbox-div">
+            <label id="{{item[nameAttr]}}-checkbox-label">
+                <input type="checkbox" id="{{item[nameAttr]}}-checkbox" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">
+                {{item[nameAttr]}}
+            </label>
+        </div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js
new file mode 100644
index 00000000..e0471631
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js
@@ -0,0 +1,113 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/21/15.+
+ */
+angular.module('ecompApp')
+    .directive('multipleSelect2', function ($window) {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/directives/multiple-select/multiple-select2.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-select2').on('click', function(e) {
+                        if($(e.target).closest('multiple-select2')[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-select2').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-common/client/app/directives/multiple-select/multiple-select2.tpl.html b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html
new file mode 100644
index 00000000..34a6cea0
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html
@@ -0,0 +1,36 @@
+<!--
+  ================================================================================
+  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 id="app-multilple-select" class="multiple-select2">
+    <div class="selectBox"
+    	 id="app-select-{{getTitle()}}"
+         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" id="{{item[nameAttr]}}-checkbox-div">
+            <label id="{{item[nameAttr]}}-checkbox-label">
+                <input type="checkbox" id="{{item[nameAttr]}}-checkbox" disabled="disabled" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">
+                {{item[nameAttr]}}
+            </label>
+        </div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/mutliple-select2.less b/ecomp-portal-FE-common/client/app/directives/multiple-select/mutliple-select2.less
new file mode 100644
index 00000000..b31d00e3
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/mutliple-select2.less
@@ -0,0 +1,62 @@
+.multiple-select2{
+  position: relative;
+  width: 100%;
+
+  .selectBox{
+    cursor: pointer;
+    position: relative;
+    border: 1px solid @portalDGray;
+    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: @portalLGray;
+    }
+
+  }
+
+  .checkboxes{
+    z-index: 99999;
+    padding-left: 8px;
+    padding-right: 8px;
+    position: absolute;
+    top: 30px;
+    width: 100%;
+    background: @portalWhite;
+
+    display: block;
+    border: 1px @portalLGray solid;
+
+    label{
+      cursor: pointer;
+      display: block;
+    }
+    input{
+      cursor: pointer;
+    }
+
+
+  }
+}
+\ No newline at end of file
author	st782s <statta@research.att.com>	2017-05-04 07:48:42 -0400
committer	st782s <statta@research.att.com>	2017-05-04 12:28:17 -0400
commit	b54df0ddd0c6a0372327c5aa3668e5a6458fcd64 (patch)
tree	e69cfa9b314a801bd187cf0145d1d4306436229c /ecomp-portal-FE-common/client/app/directives/multiple-select
parent	39d1e62c84041831bfc52cca73b5ed5efaf57d27 (diff)