[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>

21 files changed, 1578 insertions, 0 deletions

diff --git a/ecomp-portal-FE-common/client/app/directives/auto-focus/auto-focus.directive.js b/ecomp-portal-FE-common/client/app/directives/auto-focus/auto-focus.directive.js
new file mode 100644
index 00000000..73964115
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/auto-focus/auto-focus.directive.js
@@ -0,0 +1,46 @@
+/*-
+ * ================================================================================
+ * 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('autoFocus', function () {
+//        return {
+//            restrict: 'A',
+//            scope: {},
+//            link: function (scope, element) {
+//                element[0].focus();
+//            }
+//        };
+//    });
+
+/* istanbul ignore next */
+(function(){
+    class AutoFocusDirective{
+        constructor(){
+            this.restrict = 'A';
+            this.link = this._link.bind(this);
+        }
+        _link(scope, element){
+            element[0].focus();
+        }
+    }
+    angular.module('ecompApp').directive('autoFocus', () => new AutoFocusDirective());
+})();
diff --git a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.directive.js b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.directive.js
new file mode 100644
index 00000000..7284e4db
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.directive.js
@@ -0,0 +1,68 @@
+/*-

+ * ================================================================================

+ * 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.

+ * ================================================================================

+ */

+(function () {

+   	/*

+   	 * Custom version of b2b-left-navigation directive:

+   	 * 1. Make parent menu a link if no child menus.

+   	 * 2. Add unique IDs to all items.

+   	 * 3. Hide icon if no child menus.

+   	 * 4. Add arrow toggle button.

+   	 * 5. Adjust the page on collapse/expand.

+   	 */

+    class B2BLeftMenu {

+        constructor($rootScope) {

+            this.templateUrl = 'app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html';

+            this.restrict = 'EA';

+            this.$rootScope = $rootScope;

+            this.link = this._link.bind(this);

+            this.scope = {

+            	menuData: '='

+            }

+        }

+        _link(scope) {

+        	scope.idx = -1;

+            scope.itemIdx = -1;

+            scope.navIdx = -1;

+            scope.toggleNav = function (val,link) {

+                if (val === scope.idx) {

+                    scope.idx = -1;

+                    return;

+                }

+                scope.idx = val;

+            };

+            /*New function for ECOMP sdk*/

+            scope.toggleDrawer = function(showmenu){

+            	scope.idx=-1; /*hide the sunmenus*/

+            	if(showmenu){

+        			document.getElementById('page-content').style.paddingLeft = "50px";

+        		}

+        		else

+        			document.getElementById('page-content').style.paddingLeft = "230px";           	

+            };

+            scope.liveLink = function (evt, val1, val2) {

+                scope.itemIdx = val1;

+                scope.navIdx = val2;

+                evt.stopPropagation();

+            };

+        }

+    }

+    angular.module('ecompApp').directive('leftMenuEcomp', ($rootScope) => new B2BLeftMenu($rootScope));

+})();

+

diff --git a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.less b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.less
new file mode 100644
index 00000000..91a10aa2
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.less
@@ -0,0 +1,4 @@
+.b2b-nav-menu .b2b-subnav-container li{

+	background-color:white;

+	z-index:10;

+}
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html
new file mode 100644
index 00000000..240c8c9b
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html
@@ -0,0 +1,62 @@
+<!--

+  ================================================================================

+  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="b2b-nav-menu" id="left-menu-main-div" ng-init="(showmenu = true)" ng-class="{false: 'left-menu-collapsed'}[showmenu]">

+	<div class="b2b-subnav-container" id="left-menu-subnav-container">

+		<ul class="b2b-subnav-content" id="left-menu-subnav-content">

+			<li id="left-menu-subnav-content-li">

+				<div ng-class="{true: 'leftmenu-arrow-expand', false: 'leftmenu-arrow-collapse'}[showmenu]"	id="left-menu-arrow-toggle-div">

+					<a ng-click="toggleDrawer(showmenu);(showmenu = !showmenu) " class="text-right" id="left-menu-arrow-toggle-anchor"> 

+						<i ng-class="{true: 'icon-controls-left', false: 'icon-controls-right'}[showmenu]" id="left-menuf-arrow-toggle-icon">&nbsp;</i>

+					</a>

+				</div>

+			</li>

+			<li ng-repeat="menu in menuData" ui-sref="{{menu.state}}" id="left-menu-li-{{menu.name.split(' ').join('-')}}">

+				<span ng-class="{true: 'menu-icon', false: 'menu-icon-collapse'}[showmenu]"	

+					id="left-menu-span-{{menu.name.split(' ').join('-')}}"> 

+					<span class="{{menu.imageSrc}}" id="icon-image-{{menu.name.split(' ').join('-')}}"></span>

+				</span> 

+				<a ng-class="{expand: isOpen($index)}" ng-if="showmenu" title="{{menu.name}}"

+					aria-label="{{menu.name}}" aria-expanded="{{(idx==$index)?true:false;}}"

+					href="javascript:void(0);" id="parent-item-{{menu.name.split(' ').join('-')}}">

+					{{menu.name}} 

+					<i aria-hidden="true" ng-if="(menu.menuItems.length > 0)"

+						class="b2b-icon-primary-plus-minus"

+						ng-class="idx==$index ? 'icon-primary-expanded' : 'icon-primary-collapsed'"></i>

+				</a>

+				<div role="region" aria-hidden="{{(isOpen($index))?false:true;}}" 

+					id="left-menu-child-div-{{menu.name.split(' ').join('-')}}">

+					<ul ng-class="{expand: idx==$index}"

+						id="left-menu-child-ul-{{menu.name.split(' ').join('-')}}">

+						<li ng-repeat="menuItem in menu.menuItems"

+							ng-click="liveLink($event, $index, $parent.$index)"

+							id="left-menu-child-li-{{menuItem.name.split(' ').join('-')}}-{{menu.name.split(' ').join('-')}}">

+							<a ng-class="{active: itemIdx==$index && navIdx==$parent.$index}"

+								aria-hidden="{{!(idx==$parent.$index)}}" aria-label="{{menuItem.name}}" 

+								title="{{menuItem.name}}" href="{{menuItem.href}}"

+								tabindex="{{(idx==$parent.$index)?0:-1;}}"

+								id="child-item-{{menuItem.name.split(' ').join('-')}}">{{menuItem.name}}

+							</a>

+						</li>

+					</ul>

+				</div>

+			</li>

+		</ul>

+	</div>

+</div>

diff --git a/ecomp-portal-FE-common/client/app/directives/file-upload/file-upload.directive.js b/ecomp-portal-FE-common/client/app/directives/file-upload/file-upload.directive.js
new file mode 100644
index 00000000..bfedcd75
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/file-upload/file-upload.directive.js
@@ -0,0 +1,39 @@
+/*-

+ * ================================================================================

+ * 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 Rui Lu on 12/12/16.

+ */

+'use strict';

+

+angular.module('ecompApp').directive('fileModel', [ '$parse', function($parse) {

+	return {

+		restrict : 'A',

+		link : function(scope, element, attrs) {

+			var model = $parse(attrs.fileModel);

+			var modelSetter = model.assign;

+

+			element.bind('change', function() {

+				scope.$apply(function() {

+					modelSetter(scope, element[0].files[0]);

+				});

+			});

+		}

+	};

+} ]);

diff --git a/ecomp-portal-FE-common/client/app/directives/image-upload/image-upload.directive.js b/ecomp-portal-FE-common/client/app/directives/image-upload/image-upload.directive.js
new file mode 100644
index 00000000..e031ed0e
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/image-upload/image-upload.directive.js
@@ -0,0 +1,238 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+
+'use strict';
+
+angular.module('ecompApp').directive('imageUpload', function factory($q) {
+    var imageMimeRgx = /^image\/[a-zA-Z0-9]*$/;
+
+    var URL = window.URL || window.webkitURL;
+
+    var getResizeArea = function () {
+        var resizeAreaId = 'fileupload-resize-area';
+
+        var resizeArea = document.getElementById(resizeAreaId);
+
+        if (!resizeArea) {
+            resizeArea = document.createElement('canvas');
+            resizeArea.id = resizeAreaId;
+            resizeArea.style.visibility = 'hidden';
+            document.body.appendChild(resizeArea);
+        }
+
+        return resizeArea;
+    };
+
+    var resizeImage = function (origImage, options) {
+        var maxHeight = options.resizeMaxHeight || 300;
+        var maxWidth = options.resizeMaxWidth || 250;
+        var quality = options.resizeQuality || 0.7;
+        var type = options.resizeType || 'image/jpg';
+
+        var canvas = getResizeArea();
+
+        var height = origImage.height;
+        var width = origImage.width;
+
+        //image redraw starting points
+        var x0, y0;
+
+        // calculate the width and height, constraining the proportions
+        if (width > height) {
+            if (width > maxWidth) {
+                height = Math.round(height *= maxWidth / width);
+                width = maxWidth;
+
+                x0 = 0;
+                y0 = Math.round((maxHeight - height)/2);
+            }else{
+                maxHeight = height;
+                maxWidth = width;
+                x0 = 0;
+                y0 = 0;
+            }
+        } else {
+            if (height > maxHeight) {
+                width = Math.round(width *= maxHeight / height);
+                height = maxHeight;
+
+                x0 = Math.round((maxWidth - width)/2);
+                y0 = 0;
+            }else{
+                maxHeight = height;
+                maxWidth = width;
+                x0 = 0;
+                y0 = 0;
+            }
+        }
+
+        canvas.width = maxWidth;
+        canvas.height = maxHeight;
+
+        //draw image on canvas
+        var ctx = canvas.getContext('2d');
+
+        //set background color
+        if(options.backgroundColor){
+            ctx.fillStyle = options.backgroundColor;
+            ctx.fillRect(0,0,maxWidth,maxHeight);
+        }
+
+
+        ctx.drawImage(origImage, x0, y0, width, height);
+
+        // get the data from canvas as 70% jpg (or specified type).
+        return canvas.toDataURL(type, quality);
+    };
+
+    var createImage = function(url, callback) {
+        var image = new Image();
+        image.onload = function() {
+            callback(image);
+        };
+        image.src = url;
+    };
+
+    var fileToDataURL = function (file) {
+        var deferred = $q.defer();
+        var reader = new FileReader();
+        reader.onload = function (e) {
+            deferred.resolve(e.target.result);
+        };
+        reader.readAsDataURL(file);
+        return deferred.promise;
+    };
+
+    /**
+     * Image Upload directive
+     * ************************
+     * image-upload: image object , Mandatory
+     * image-upload-resize-max-height: <Number>, Optional (default 300), resize maximum height
+     * image-upload-resize-max-width: <Number>, Optional (default 270), resize maximum width
+     * image-upload-resize-quality: <Number>, Optional, value can be 0.0-1.0 (default 0.7), resize compression quality
+     * image-upload-resize-type: <String>, Optional, (default 'image/jpg'), image mime type
+     * image-upload-api: <Object>, Optional, pass an api  reference object and get api.clearFile() function - clear input field and reset form validation
+     * image-upload-background-color: <String> color name, Optional, background color fill if image doesn't fit the whole desired resize area.
+     *
+     * in addition, if <input> element is part of <form>, in order to get form validation please  set its 'name' attribute and 'ng-model'  to get the following field validation errors:
+     * - 'mimeType' : in case the uploaded image is not an image
+     * - 'imageSize' : in case the image size (in bytes) is too large
+     */
+
+    return {
+        restrict: 'A',
+        require: '^form',
+        scope: {
+            image: '=imageUpload',
+            resizeMaxHeight: '@?imageUploadResizeMaxHeight',
+            resizeMaxWidth: '@?imageUploadResizeMaxWidth',
+            resizeQuality: '@?imageUploadResizeQuality',
+            resizeType: '@?imageUploadResizeType',
+            imageApi: '=?imageUploadApi',
+            backgroundColor: '@?imageUploadBackgroundColor'
+        },
+        compile: function compile(tElement, tAttrs, transclude) {
+            return function postLink(scope, iElement, iAttrs, formCtrl) {
+                var doResizing = function(imageResult, callback) {
+                    createImage(imageResult.url, function(image) {
+                        var dataURL = resizeImage(image, scope);
+                        imageResult.resized = {
+                            dataURL: dataURL,
+                            type: dataURL.match(/:(.+\/.+);/)[1]
+                        };
+                        callback(imageResult);
+                    });
+                };
+
+                var applyScope = function(imageResult) {
+                    scope.$apply(function() {
+                        //console.log(imageResult);
+                        if(iAttrs.multiple)
+                            scope.image.push(imageResult);
+                        else
+                            scope.image = imageResult;
+                    });
+                };
+
+                iElement.bind('change', function (evt) {
+                    //when multiple always return an array of images
+                    if(iAttrs.multiple)
+                        scope.image = [];
+
+                    var files = evt.target.files;
+                    for(var i = 0; i < files.length; i++) {
+                        setInputValidity(files[i]);
+
+                        //create a result object for each file in files
+                        var imageResult = {
+                            file: files[i],
+                            url: URL.createObjectURL(files[i])
+                        };
+
+                        fileToDataURL(files[i]).then(function (dataURL) {
+                            imageResult.dataURL = dataURL;
+                        });
+
+                        if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image
+                            doResizing(imageResult, function(imageResult) {
+                                applyScope(imageResult);
+                            });
+                        }
+                        else { //no resizing
+                            applyScope(imageResult);
+                        }
+                    }
+                });
+
+                //API for otter actions
+                scope.imageApi = scope.imageApi || {};
+                scope.imageApi.clearFile = () => {
+                    iElement[0].value = '';
+                    setInputValidity();
+                };
+
+
+                let setInputValidity = file => {
+                    //if form validation supported
+
+                    if(formCtrl && iAttrs.name && formCtrl[iAttrs.name]){
+                        formCtrl[iAttrs.name].$setDirty();
+                        if(file && file.type && !imageMimeRgx.test(file.type)){
+                            //set form invalid
+                            formCtrl[iAttrs.name].$setValidity('mimeType', false);
+                            applyScope();
+                            return;
+                        }
+                        if(file && file.size && file.size > 1000000){
+                            //set form invalid
+                            formCtrl[iAttrs.name].$setValidity('imageSize', false);
+                            applyScope();
+                            return;
+                        }
+                        //set valid
+                        formCtrl[iAttrs.name].$setValidity('mimeType', true);
+                        formCtrl[iAttrs.name].$setValidity('imageSize', true);
+                    }
+
+                }
+            }
+        }
+    }
+});
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.directive.js b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.directive.js
new file mode 100644
index 00000000..98979e2c
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.directive.js
@@ -0,0 +1,90 @@
+/*-

+ * ================================================================================

+ * 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 1/28/16.

+ */

+(function () {

+    class LeftMenu {

+        constructor($rootScope, userbarUpdateService,notificationService,auditLogService) {

+            this.templateUrl = 'app/directives/left-menu/left-menu.tpl.html';

+            this.restrict = 'AE';

+            this.$rootScope = $rootScope;

+            this.userbarUpdateService = userbarUpdateService;

+            this.notificationService = notificationService;

+            this.auditLogService= auditLogService;

+            this.link = this._link.bind(this);

+            this.scope = {

+                sidebarModel: '='

+            }

+        }

+        _link(scope) {

+            let init = () => {

+                scope.isOpen = true;

+            };

+

+            init();

+

+            scope.refreshOnlineUsers = () => {

+            	this.userbarUpdateService.setRefreshCount(this.userbarUpdateService.maxCount);

+            };

+            

+            scope.refreshNotification = () => {

+            	this.notificationService.setRefreshCount(this.notificationService.maxCount);

+            };

+

+            scope.toggleSidebar = () => {

+                scope.isOpen = !scope.isOpen;

+                if(scope.isOpen==true)

+                	setContentPos(1);

+                else

+                	setContentPos(0);

+            };

+            scope.auditLog =(name) => {         

+        		this.auditLogService.storeAudit(1,'leftMenu',name);

+        	};

+

+

+            scope.isBrowserInternetExplorer = false;

+            scope.browserName = bowser.name;

+

+            if (bowser.msie || bowser.msedge) {

+                scope.isBrowserInternetExplorer = true;

+            } else {

+                scope.isBrowserInternetExplorer = false;

+            }

+

+

+            this.$rootScope.$on('$stateChangeStart', () => {

+                scope.isOpen = true;

+            });

+        }

+    }

+    angular.module('ecompApp').directive('leftMenu', ($rootScope,userbarUpdateService,notificationService,auditLogService) => new LeftMenu($rootScope,userbarUpdateService,notificationService,auditLogService));

+})();

+

+function setContentPos(open) {

+	// console.log("*******************************************");

+	if(open==1){

+		$("#page-content" ).css( "padding-left", "210px" );

+	}else{

+		$("#page-content" ).css( "padding-left", "50px" );

+	}

+

+}

diff --git a/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.less b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.less
new file mode 100644
index 00000000..6c2043dd
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.less
@@ -0,0 +1,177 @@
+/**
+ * Created by nnaffar on 1/28/16.
+ */
+@sidebar-width: 200px;
+@transition-duration: 0.25s;
+@overlayer-opacity: 0.65;
+
+.left-menu-close-button {
+    padding-right: 10px;
+  font-size: 1.25em;
+  line-height: 18px;
+  position: absolute;
+  cursor: pointer;
+  vertical-align: middle;
+  top: @second-level-top;
+  left: 160px;
+  //-webkit-font-smoothing: antialiased;
+  height: 25px;
+  z-index: 101;
+  //box-shadow: 0 4px 5px rgba(0, 0, 0, .2);
+}
+
+@-moz-document url-prefix() {
+    .close-button-arrow {
+        top: 115px; // bug in Firefox
+    }
+}
+.close-button-arrow{
+    left: 180px;
+}
+
+@-moz-document url-prefix() {
+    .open-button-arrow{
+        top: 115px; // bug in Firefox
+    }
+}
+
+.close-button-arrow{
+    left: 180px;
+}
+
+.open-button-arrow{
+    left: 0;
+    padding-left: 13px;
+}
+
+.ecomp-sidebar-container {
+    position: absolute;
+    display: block;
+    left: 0;
+    //width: inherit;
+    z-index: 100;
+    //transition: left @transition-duration;
+    margin-top: -15px;
+
+  .ecomp-sidebar-main {
+      left: 0;
+    //background-color: ;
+    position: absolute;
+    margin-top: 125px;
+    width: @sidebar-width;
+    height: 100vh;
+    // .bg_portalWhite;//white for 1610
+    .bg_portalGray;  // gray for 1702
+    //box-shadow: 0 4px 5px rgba(0, 0, 0, .2);
+
+    //padding-right: 10px;
+    //padding-left: 10px;
+
+    .accordion-container{
+      margin-top: 45px;
+    }
+    .portal-accordion-font{
+      font-size: .875rem;
+      //color: #666;
+      display: inline-block;
+    }
+
+    .portal-accordion-active{
+        color: @funcBlueLink !important;
+        .bg_portalWhite;
+        padding-left: 10px;
+    }
+
+    .sub-item{
+      .portal-accordion-font;
+      cursor: pointer;
+      height: 37px;
+      line-height: 37px;
+      padding-left: 20px;
+      padding-bottom: 10px;
+      vertical-align: middle;
+      width: 100%;
+    }
+    .sub-item:hover{
+      .portal-accordion-active;
+    }
+
+    .parent-item{
+        .portal-accordion-font;
+        border-bottom: 1px solid @portalLGray;
+        cursor: pointer;
+        height: 37px;
+        line-height: 37px;
+        padding-bottom: 10px;
+        vertical-align: middle;
+        width: 100%;
+        padding-left: 10px;
+    }
+
+    .parent-item:hover{
+      .portal-accordion-active;
+    }
+
+  }
+}
+
+.open-sidebar {
+  width: @sidebar-width;
+}
+
+.close-sidebar {
+	display: none;
+    width: 35px !important;
+    span {color: transparent}
+}
+
+.content-overlayed {
+  position: fixed;
+  top: 110px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: none repeat scroll 0 0 @funcBkgGray;
+  z-index: 9999;
+}
+.fade-animation{
+  opacity: @overlayer-opacity;
+  transition: opacity @transition-duration ease-in-out;
+}
+.fade-animation.ng-hide {
+  opacity:0;
+  transition: opacity @transition-duration ease-in-out;
+}
+
+.left-menu-collapsed {
+	width: 22px !important;
+} 
+
+.leftmenu-arrow-expand{
+	margin-left:200px
+}
+.leftmenu-arrow-collapse{
+	margin-left:0px;
+}
+
+.left-menu-div{
+	margin-top:110px;
+	float: left;
+}
+.b2b-subnav-content > li > a {
+	display: inline-block;
+}
+
+.leftment-items{
+	margin-left:40px;
+}
+
+.menu-icon {
+	line-height: 40px;
+}
+
+.menu-icon-collapse {
+	line-height: 40px;
+	margin-top:10px;
+	margin-bottom:10px;
+}
diff --git a/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.tpl.html b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.tpl.html
new file mode 100644
index 00000000..4478bc8f
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.tpl.html
@@ -0,0 +1,22 @@
+<!--

+  ================================================================================

+  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="left-menu-div">

+ 	<left-menu-ecomp menu-data="sidebarModel.navItems"></left-menu-ecomp>

+ </div> 

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
diff --git a/ecomp-portal-FE-common/client/app/directives/right-click-menu/right-click-menu.directive.js b/ecomp-portal-FE-common/client/app/directives/right-click-menu/right-click-menu.directive.js
new file mode 100644
index 00000000..ff339322
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/right-click-menu/right-click-menu.directive.js
@@ -0,0 +1,41 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+'use strict';
+angular.module('ecompApp').directive( 'contextMenu', function($compile){
+    contextMenu = {};
+    contextMenu.restrict = 'AE';
+    contextMenu.link = function( lScope, lElem, lAttr ){
+        lElem.on('contextmenu', function (e) {
+            e.preventDefault(); // default context menu is disabled
+            //  The customized context menu is defined in the main controller. To function the ng-click functions the, contextmenu HTML should be compiled.
+            lElem.append( $compile( lScope[ lAttr.contextMenu ])(lScope) );
+            // The location of the context menu is defined on the click position and the click position is catched by the right click event.
+            $('#contextmenu-node').css('left', e.clientX);
+            $('#contextmenu-node').css('top', e.clientY);
+        });
+        lElem.on('mouseleave', function(e){
+            console.log('Leaved the div');
+            // on mouse leave, the context menu is removed.
+            if($('#contextmenu-node') )
+                $('#contextmenu-node').remove();
+        });
+    };
+    return contextMenu;
+});
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/directives/right-click/ng-right-click-directive.js b/ecomp-portal-FE-common/client/app/directives/right-click/ng-right-click-directive.js
new file mode 100644
index 00000000..b8af5ebe
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/right-click/ng-right-click-directive.js
@@ -0,0 +1,32 @@
+/*-

+ * ================================================================================

+ * 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('ngRightClick', function($parse) {

+        return function(scope, element, attrs)

+        {

+        var fn = $parse(attrs.ngRightClick);

+        element.bind('contextmenu', function(event) {

+            scope.$apply(function() {

+                event.preventDefault();

+                fn(scope, {$event:event});

+            });

+        });

+        };

+    });

diff --git a/ecomp-portal-FE-common/client/app/directives/scroll-top/scroll-top.directive.js b/ecomp-portal-FE-common/client/app/directives/scroll-top/scroll-top.directive.js
new file mode 100644
index 00000000..d0672577
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/scroll-top/scroll-top.directive.js
@@ -0,0 +1,35 @@
+/*-
+ * ================================================================================
+ * 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('scrollTop', function () {
+        return {
+            restrict: 'A',
+            scope: {api: '=scrollTop'},
+            link: function (scope, element) {
+                scope.api = scope.api || {};
+                scope.api.scrollTop = function() {
+                    element.animate({
+                        scrollTop : 0
+                    }, 500);
+                };
+            }
+        };
+    });
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/directives/search-users/search-users.controller.js b/ecomp-portal-FE-common/client/app/directives/search-users/search-users.controller.js
new file mode 100644
index 00000000..6fd402c6
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/search-users/search-users.controller.js
@@ -0,0 +1,92 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+    class SearchUsersCtrl {
+        constructor($log, usersService, $scope) {
+            $scope.UserSearchsIsNull=false;
+            this.scrollApi = {};//scrollTop directive
+            $scope.txtResults = 'result';
+            /**
+             * Handle all active HTTP requests
+             * activeRequests @type {Array[requests with cancel option]}
+             */
+            let activeRequests = [];
+            let clearReq = (req) => {
+                activeRequests.splice(activeRequests.indexOf(req), 1);
+            };
+
+            /**
+             * this function retrieves users info 
+             */
+            this.searchUsers = () => {
+                this.isLoading = true;
+                if(this.searchUsersInProgress){
+                    return;
+                }
+                this.selectedUser = null;
+                this.searchUsersInProgress = true;
+                this.searchUsersResults = null;
+
+                let searchUsersReq = usersService.searchUsers(this.searchUserString);
+                activeRequests.push(searchUsersReq);
+                searchUsersReq.promise().then(usersList => {
+                    $log.debug('searchUsers found the following users: ', JSON.stringify(usersList));
+                    this.searchUsersResults = usersList;
+                    $log.debug('searchUsersResults length: ', usersList.length);
+                    if (usersList.length != 1) {
+                        $scope.txtResults = 'results'
+                    } else {
+                        $scope.txtResults = 'result'
+                    }
+                    $scope.UserSearchsIsNull=false;
+                }).catch(err => {
+                    $log.error('SearchUsersCtrl.searchUsers: ' + err);
+                    $scope.UserSearchsIsNull=true;
+                }).finally(() => {
+                    this.scrollApi.scrollTop();
+                    this.searchUsersInProgress = false;
+                    clearReq(searchUsersReq);
+                    this.isLoading = false;
+                });
+            };
+
+            let init = () => {
+                this.isLoading = false;
+                this.searchUsersInProgress = false;
+            };
+
+            this.setSelectedUser = user => {
+                this.selectedUser = user;
+            };
+
+            init();
+
+            $scope.$on('$destroy', () => {
+                //cancel all active requests when closing the modal
+                activeRequests.forEach(req => {
+                    req.cancel();
+                });
+            });
+        }
+    }
+    SearchUsersCtrl.$inject = ['$log', 'usersService', '$scope'];
+    angular.module('ecompApp').controller('SearchUsersCtrl', SearchUsersCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/directives/search-users/search-users.controller.spec.js b/ecomp-portal-FE-common/client/app/directives/search-users/search-users.controller.spec.js
new file mode 100644
index 00000000..e3c9711c
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/search-users/search-users.controller.spec.js
@@ -0,0 +1,176 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+
+//'use strict';
+//
+//describe('Controller: NewAdminCtrl ', () => {
+//    beforeEach(module('ecompApp'));
+//
+//    //destroy $http default cache before starting to prevent the error 'default cache already exists'
+//    beforeEach(inject((_CacheFactory_)=> {
+//        _CacheFactory_.destroyAll();
+//    }));
+//
+//
+//    let newCtrl, $controller, $q, $rootScope, $log;
+//
+//    beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {
+//        [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];
+//    }));
+//
+//    let deferredUsersList, deferredAdminAppsRoles, deferredUpdateRolesRes;
+//    let usersServiceMock, adminsServiceMock;
+//    beforeEach(()=> {
+//        [deferredUsersList, deferredAdminAppsRoles, deferredUpdateRolesRes] = [$q.defer(), $q.defer(), $q.defer()];
+//
+//        //usersServiceMock = jasmine.createSpyObj('usersServiceMock', ['searchUsers']);
+//        usersServiceMock = {
+//            searchUsers: () => {
+//                var promise = () => {return deferredUsersList.promise};
+//                var cancel = jasmine.createSpy();
+//                return {
+//                    promise: promise,
+//                    cancel: cancel
+//                }
+//            }
+//        };
+//
+//        adminsServiceMock = jasmine.createSpyObj('adminsServiceMock', ['getAdminAppsRoles', 'updateAdminAppsRoles']);
+//
+//        //usersServiceMock.searchUsers.and.returnValue(deferredUsersList.promise);
+//        adminsServiceMock.getAdminAppsRoles.and.returnValue(deferredAdminAppsRoles.promise);
+//        adminsServiceMock.updateAdminAppsRoles.and.returnValue(deferredUpdateRolesRes.promise);
+//
+//        newCtrl = $controller('NewAdminModalCtrl', {
+//            $log: $log,
+//            usersService: usersServiceMock,
+//            adminsService: adminsServiceMock,
+//            $scope: $rootScope
+//        });
+//    });
+//
+//    it('should init default values when loading the controller', ()=> {
+//        //expect(newCtrl.searchUsersInProgress).toBe(false);
+//        expect(newCtrl.dialogState).toBe(1);
+//        expect(newCtrl.selectedUser).toBe(null);
+//    });
+//
+//    it('should populate retrieved users when search users service returns a list ', ()=> {
+//        //spyOn(usersServiceMock, 'searchUsers');
+//        let usersListRes = [{user: 1}, {user: 2}];
+//        newCtrl.searchUserString = 'some att user name';
+//        deferredUsersList.resolve(usersListRes);
+//        newCtrl.searchUsers();
+//        $rootScope.$apply();
+//
+//        //expect(usersServiceMock.searchUsers).toHaveBeenCalledWith(newCtrl.searchUserString);
+//        expect(newCtrl.searchUsersResults).toEqual(usersListRes);
+//        expect(newCtrl.searchUsersInProgress).toBe(false);
+//    });
+//
+//    it('should log the error when search users fails', ()=> {
+//        spyOn($log, 'error');
+//        deferredUsersList.reject('oh snap!');
+//        newCtrl.searchUsers();
+//        $rootScope.$apply();
+//        expect($log.error).toHaveBeenCalled();
+//    });
+//
+//    it('should populate admin apps roles and move to the next screen when adminsService.getAdminAppsRoles succeeded', ()=> {
+//        let userApps = {appsRoles: [{id: 1, isAdmin: false}, {id: 2, isAdmin: true}]};
+//        deferredAdminAppsRoles.resolve(userApps);
+//
+//        newCtrl.searchUsersInProgress = false;
+//        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+//
+//        newCtrl.getAdminAppsRoles();
+//        $rootScope.$apply();
+//
+//        expect(adminsServiceMock.getAdminAppsRoles).toHaveBeenCalledWith(newCtrl.selectedUser.orgUserId);
+//        expect(newCtrl.adminAppsRoles).toEqual(userApps.appsRoles);
+//        expect(newCtrl.dialogState).toBe(2);
+//    });
+//
+//    it('should  log the error when adminsService.getAdminAppsRoles fails', ()=> {
+//        spyOn($log, 'error');
+//        deferredAdminAppsRoles.reject('some error');
+//
+//        newCtrl.searchUsersInProgress = false;
+//        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+//
+//        newCtrl.getAdminAppsRoles();
+//        $rootScope.$apply();
+//
+//        expect($log.error).toHaveBeenCalled();
+//    });
+//    it('should  log the error when trying to getAdminAppsRoles without selecting user ', ()=> {
+//        spyOn($log, 'error');
+//
+//        newCtrl.searchUsersInProgress = false;
+//        newCtrl.selectedUser = null;
+//
+//        newCtrl.getAdminAppsRoles();
+//        $rootScope.$apply();
+//
+//        expect($log.error).toHaveBeenCalled();
+//    });
+//    //it('should setSelectedUser when choosing user', ()=> {
+//    //
+//    //});
+//    //it('should set isAdmin as false when removing app from the administrated apps list', ()=> {
+//    //});
+//    it('should set isAdmin as true when adding app via the dropdown menu', ()=> {
+//        newCtrl.adminAppsRoles = [{id: 1, isAdmin: false},{id: 2, isAdmin: true}];
+//        //simulate UI change
+//        $rootScope.$apply('newAdmin.selectedNewApp = null');
+//        $rootScope.$apply('newAdmin.selectedNewApp = {id: 1, isAdmin: true}');
+//
+//        expect(newCtrl.adminAppsRoles[0].isAdmin).toBe(true);
+//        expect(newCtrl.selectedNewApp).toBe(null);
+//    });
+//
+//    it('should close the modal when updating apps roles succeeded', ()=> {
+//        $rootScope.closeThisDialog = () => {};
+//        spyOn($rootScope,'closeThisDialog');
+//
+//        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+//        newCtrl.adminAppsRoles = [{id: 1}];
+//
+//        deferredUpdateRolesRes.resolve();
+//        newCtrl.updateAdminAppsRoles();
+//        $rootScope.$apply();
+//
+//        expect(adminsServiceMock.updateAdminAppsRoles).toHaveBeenCalledWith({orgUserId: newCtrl.selectedUser.orgUserId, appsRoles: newCtrl.adminAppsRoles});
+//        expect($rootScope.closeThisDialog).toHaveBeenCalled();
+//    });
+//    it('should log the error when updating apps roles fails', ()=> {
+//        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+//        newCtrl.adminAppsRoles = [{id: 1}];
+//
+//        spyOn($log,'error');
+//        deferredUpdateRolesRes.reject();
+//        newCtrl.updateAdminAppsRoles();
+//        $rootScope.$apply();
+//        expect($log.error).toHaveBeenCalled();
+//    });
+//    //it('should display the add admin dropdown when clicking the add button', ()=> {
+//    //});
+//
+//});
diff --git a/ecomp-portal-FE-common/client/app/directives/search-users/search-users.directive.js b/ecomp-portal-FE-common/client/app/directives/search-users/search-users.directive.js
new file mode 100644
index 00000000..e297c7f6
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/directives/search-users/search-users.directive.js
@@ -0,0 +1,34 @@
+/*-
+ * ================================================================================
+ * 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('searchUsers', function () {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/directives/search-users/search-users.tpl.html',
+            controller: 'SearchUsersCtrl',
+            controllerAs: 'searchUsers',
+            bindToController: true,
+            scope: {
+                selectedUser: '=',
+                searchTitle: '@'
+            }
+        };
+    });
\ No newline at end of file