diff options
Diffstat (limited to 'ecomp-portal-FE/client/app/views/header')
7 files changed, 1359 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/app/views/header/header.controller.js b/ecomp-portal-FE/client/app/views/header/header.controller.js new file mode 100644 index 00000000..8d3cab29 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/header/header.controller.js @@ -0,0 +1,419 @@ +/*- + * ================================================================================ + * 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 HeaderCtrl { + constructor($log, $window, userProfileService, menusService, $scope, ECOMP_URL_REGEX, $cookies, $state) { + this.firstName = ''; + this.lastName = ''; + this.$log = $log; + this.menusService = menusService; + this.$scope = $scope; + this.favoritesMenuItems = ''; + $scope.favoriteItemsCount = 0; + $scope.favoritesMenuItems = ''; + $scope.showFavorites = false; + $scope.emptyFavorites = false; + $scope.favoritesWindow = false; + + $scope.showNotification = true; + + $scope.hideMenus = false; + + $scope.menuItems = []; + $scope.activeClickSubMenu = { + x: '' + }; + $scope.activeClickMenu = { + x: '' + }; + $scope.megaMenuDataObject =[]; + + this.isLoading = true; + this.ECOMP_URL_REGEX = ECOMP_URL_REGEX; + + var menuStructureConvert = function(menuItems) { + $scope.megaMenuDataObjectTemp = [ + { + text: "Manage/Functions", + children: [], + }, + { + text: "Help", + children: [{ + restrictedApp: true, + text:"Contact Us", + url:"" + }, + { + text:"Get Access", + url:"root.access" + }] + } + + ]; + return $scope.megaMenuDataObjectTemp; + }; + + var unflatten = function( array, parent, tree ){ + + tree = typeof tree !== 'undefined' ? tree : []; + parent = typeof parent !== 'undefined' ? parent : { menuId: null }; + var children = _.filter( array, function(child){ return child.parentMenuId == parent.menuId; }); + + if( !_.isEmpty( children ) ){ + if( parent.menuId === null ){ + tree = children; + }else{ + parent['children'] = children + } + _.each( children, function( child ){ unflatten( array, child ) } ); + } + + return tree; + } + + var self = this; + $scope.$on('handleUpdateUserInfo', function () { + userProfileService.resetFunctionalMenuStaticInfo() + .then(reset_res=> { + userProfileService.getFunctionalMenuStaticInfo() + .then(res=> { + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting Functional Menu Static Info init'); + if(res==null || res.firstName==null || res.firstName=='' || res.lastName==null || res.lastName=='' ){ + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: failed getting userinfo from shared context.. '); + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting userinfo from session '); + userProfileService.getUserProfile() + .then(profile=> { + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting userinfo from session success'); + self.firstName = profile.firstName; + self.lastName = profile.lastName; + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: user has the following roles: ' + profile.roles); + }).catch(err=> { + $log.error('Header Controller:: getUserProfile() failed: ' + err); + }); + }else{ + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting Functional Menu Static Info successfully',res); + self.firstName = res.firstName; + self.lastName = res.lastName; + $scope.contactUsURL = res.contact_us_link; + } + + menusService.GetFunctionalMenuForUser() + .then(jsonHeaderMenu=> { + $scope.menuItems = unflatten( jsonHeaderMenu ); + $scope.megaMenuDataObject = $scope.menuItems; + }).catch(err=> { + $scope.megaMenuDataObject = menuStructureConvert(''); + $log.error('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err); + }); + + userProfileService.refreshUserBusinessCard(); + + }).catch(err=> { + $log.error('HeaderCtrl::getFunctionalMenuStaticInfo failed: ' + err); + }); + }).catch(err=> { + $log.error('HeaderCtrl::resetFunctionalMenuStaticInfo failed: ' + err); + }) + + + }); + + userProfileService.getFunctionalMenuStaticInfo() + .then(res=> { + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting Functional Menu Static Info init'); + if(res==null || res.firstName==null || res.firstName=='' || res.lastName==null || res.lastName=='' ){ + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: failed getting userinfo from shared context.. '); + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting userinfo from session '); + userProfileService.getUserProfile() + .then(profile=> { + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting userinfo from session success'); + this.firstName = profile.firstName; + this.lastName = profile.lastName; + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: user has the following roles: ' + profile.roles); + }).catch(err=> { + $log.error('Header Controller:: getUserProfile() failed: ' + err); + }); + }else{ + $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: getting Functional Menu Static Info successfully',res); + this.firstName = res.firstName; + this.lastName = res.lastName; + $scope.contactUsURL = res.contact_us_link; + } + + menusService.GetFunctionalMenuForUser() + .then(jsonHeaderMenu=> { + $scope.menuItems = unflatten( jsonHeaderMenu ); + $scope.megaMenuDataObject = $scope.menuItems; + }).catch(err=> { + $scope.megaMenuDataObject = menuStructureConvert(''); + $log.error('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err); + }); + + }).catch(err=> { + $log.error('HeaderCtrl::getFunctionalMenuStaticInfo failed: ' + err); + }); + + + $scope.loadFavorites = function () { + $scope.hideMenus = false; + $log.debug('HeaderCtrl::loadFavorites: loadFavorites has happened.'); + if ($scope.favoritesMenuItems == '') { + generateFavoriteItems(); + $log.debug('HeaderCtrl::loadFavorites: loadFavorites is calling generateFavoriteItems()'); + } else { + $log.debug('HeaderCtrl::loadFavorites: loadFavorites is NOT calling generateFavoriteItems()'); + } + } + + $scope.goToUrl = (item) => { + $log.info('HeaderCtrl::goToUrl has started'); + let url = item.url; + let restrictedApp = item.restrictedApp; + if (!url) { + $log.info('HeaderCtrl::goToUrl: No url found for this application, doing nothing..'); + return; + } + if (restrictedApp) { + $window.open(url, '_blank'); + } else { + if(item.url=="getAccess" || item.url=="contactUs"){ + // if (url = window.location.href) + $state.go("root."+url); + var tabContent = { id: new Date(), title: 'Home', url: item.url }; + $cookies.putObject('addTab', tabContent ); + } else { + var tabContent = { id: new Date(), title: item.text, url: item.url }; + $cookies.putObject('addTab', tabContent ); + } + $log.debug('HeaderCtrl::goToUrl: url = ', url); + } + $scope.hideMenus = true; + } + + + + $scope.submenuLevelAction = function(index, column) { + if ($scope.favoritesMenuItems == '') { + generateFavoriteItems(); + $log.debug('HeaderCtrl::submenuLevelAction: submenuLevelAction is calling generateFavoriteItems()'); + } + if (index=='Favorites' && $scope.favoriteItemsCount != 0) { + $log.debug('HeaderCtrl::submenuLevelAction: Showing Favorites window'); + $scope.favoritesWindow = true; + $scope.showFavorites = true; + $scope.emptyFavorites = false; + } + if (index=='Favorites' && $scope.favoriteItemsCount == 0) { + $log.debug('HeaderCtrl::submenuLevelAction: Hiding Favorites window in favor of No Favorites Window'); + $scope.favoritesWindow = true; + $scope.showFavorites = false; + $scope.emptyFavorites = true; + } + if (index!='Favorites' ) { + $scope.favoritesWindow = false; + $scope.showFavorites = false; + $scope.emptyFavorites = false; + } + + }; + + $scope.hideFavoritesWindow = function() { + $scope.showFavorites = false; + $scope.emptyFavorites = false; + } + + $scope.isUrlFavorite = function (menuId) { + var jsonMenu = JSON.stringify($scope.favoritesMenuItems); + var isMenuFavorite = jsonMenu.indexOf('menuId\":' + menuId); + if (isMenuFavorite==-1) { + return false; + } else { + return true; + } + + } + + let generateFavoriteItems = () => { + menusService.getFavoriteItems() + .then(favorites=> { + $scope.favoritesMenuItems = favorites; + $scope.favoriteItemsCount = Object.keys(favorites).length; + $log.info('HeaderCtrl.getFavoriteItems:: number of favorite menus: ' + $scope.favoriteItemsCount); + }).catch(err=> { + $log.error('HeaderCtrl.getFavoriteItems:: Error retrieving Favorites menus: ' + err); + }); + } + + $scope.setAsFavoriteItem = function(event, menuId){ + var jsonMenuID = angular.toJson({'menuId': + menuId }); + $log.debug('HeaderCtrl::setFavoriteItems: ' + jsonMenuID + " - " + event.target.id); + + menusService.setFavoriteItem(jsonMenuID) + .then(() => { + angular.element('#' + event.target.id).css('color', '#fbb313'); + generateFavoriteItems(); + }).catch(err=> { + $log.error('HeaderCtrl::setFavoriteItems:: API setFavoriteItem error: ' + err); + }); + }; + + $scope.removeAsFavoriteItem = function(event, menuId){ + $log.debug('-----------------------------removeAsFavoriteItem: ' + menuId + " - " + event.target.id); + menusService.removeFavoriteItem(menuId) + .then(() => { + angular.element('#' + event.target.id).css('color', '#666666'); + generateFavoriteItems(); + }).catch(err=> { + $log.error('HeaderCtrl::removeAsFavoriteItem: API removeFavoriteItem error: ' + err); + }); + }; + + $scope.goToPortal = (headerText, url) => { + if (!url) { + $log.info('HeaderCtrl::goToPortal: No url found for this application, doing nothing..'); + return; + } + if (!ECOMP_URL_REGEX.test(url)) { + url = 'http://' + url; + } + + if(headerText.startsWith("vUSP")) { + window.open(url, '_blank'); + } + else { + var tabContent = { id: new Date(), title: headerText, url: url }; + $cookies.putObject('addTab', tabContent ); + } + }; + + } + } + class LoginSnippetCtrl { + constructor($log, $scope, $cookies, $timeout, userProfileService, sessionService,ngDialog) { + $scope.firstName=""; + $scope.lastName=""; + + $scope.allAppsLogout = function(){ + + var cookieTabs = $cookies.getObject('visInVisCookieTabs'); + if(cookieTabs!=null){ + for(var t in cookieTabs){ + + var url = cookieTabs[t].content; + if(url != "") { + sessionService.logout(url); + } + } + } + // wait for individular applications to logoutout before the portal logout + $timeout(function() { + window.location = "logout.htm"; + }, 2000); + } + + $scope.openEditUserModal = function(){ + + var data = { + loginId : $scope.loginSnippetUserId, + updateRemoteApp : false, + appId : $scope.selectedApp!=null?$scope.selectedApp.id:'' + } + var modalInstance = ngDialog.open({ + templateUrl: 'app/views/header/user-edit/edit-user.tpl.html', + controller: 'editUserController', + data: data, + resolve: { + message: function message() { + var message = { + type: 'Contact', + }; + return message; + } + } + }).closePromise.then(needUpdate => { + //updateContactUsTable(); + }); + + } + + try { + userProfileService.getFunctionalMenuStaticInfo() + .then(res=> { + $log.info('HeaderCtrl::LoginSnippetCtrl: Login information: ' + JSON.stringify(res)); + $scope.firstName = res.firstName; + $scope.lastName = res.lastName; + $scope.loginSnippetEmail = res.email; + $scope.loginSnippetUserId = res.userId; + $scope.lastLogin = res.last_login; + }).catch(err=> { + $log.error('HeaderCtrl::LoginSnippetCtrl: User Profile error: ' + err); + }); + } catch (err) { + $log.error('HeaderCtrl::LoginSnippetCtrl:getFunctionalMenuStaticInfo failed: ' + err); + } + + $scope.$on('refreshUserBusinessCard', function () { + try { + userProfileService.getFunctionalMenuStaticInfo() + .then(res=> { + $log.info('HeaderCtrl::LoginSnippetCtrl: Login information: ' + JSON.stringify(res)); + $scope.firstName = res.firstName; + $scope.lastName = res.lastName; + $scope.loginSnippetEmail = res.email; + $scope.loginSnippetUserId = res.userId; + $scope.lastLogin = res.last_login; + }).catch(err=> { + $log.error('HeaderCtrl::LoginSnippetCtrl: User Profile error: ' + err); + }); + } catch (err) { + $log.error('HeaderCtrl::LoginSnippetCtrl:getFunctionalMenuStaticInfo failed: ' + err); + } + }); + + + } + } + class NotificationCtrl{ + constructor($log, $scope, $cookies, $timeout, sessionService) { + $scope.notifications=[]; + for(var i=0;i<6;i++){ + var data ={ + content:'Notification '+i, + time:'10:0'+i+'AM' + }; + $scope.notifications.push(data); + } + + $scope.deleteNotification = function(index){ + + $scope.notifications.splice(index,1); + } + } + } + NotificationCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout','userProfileService', 'sessionService']; + LoginSnippetCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout','userProfileService', 'sessionService','ngDialog']; + HeaderCtrl.$inject = ['$log', '$window', 'userProfileService', 'menusService', '$scope', 'ECOMP_URL_REGEX','$cookies','$state']; + angular.module('ecompApp').controller('HeaderCtrl', HeaderCtrl); + angular.module('ecompApp').controller('loginSnippetCtrl', LoginSnippetCtrl); + angular.module('ecompApp').controller('notificationCtrl', NotificationCtrl); + +})(); diff --git a/ecomp-portal-FE/client/app/views/header/header.controller.spec.js b/ecomp-portal-FE/client/app/views/header/header.controller.spec.js new file mode 100644 index 00000000..34042c14 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/header/header.controller.spec.js @@ -0,0 +1,19 @@ +/*- + * ================================================================================ + * 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. + * ================================================================================ + */ diff --git a/ecomp-portal-FE/client/app/views/header/header.less b/ecomp-portal-FE/client/app/views/header/header.less new file mode 100644 index 00000000..19ea467a --- /dev/null +++ b/ecomp-portal-FE/client/app/views/header/header.less @@ -0,0 +1,380 @@ +/*- + * ================================================================================ + * 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. + * ================================================================================ + */ + .header-section { + position: relative; + z-index: 999; +} + +.logo-image { + .ecomp-logo; + display: inline-block; + vertical-align: middle; + margin-top: -3px; + } + +.portal-title { + font-weight: 400; + font-family: arial !important; + font-size: 18px; +} + + +.megamenu-tabs .megamenu__item { + padding: 0 0; +} +.megamenu-tabs .megamenu__item span { + font-size: 18px; +} + +.submenu-tabs { + line-height:50px; +} +.submenu-tabs .sub__menu{ + top:54px; + padding-top: 10px; + + padding-left: 20px; + + .third-level-title{ + padding-left: 10px; + margin-bottom: 10px; + } +} + +.submenu-tabs .sub__menu .tabsbid__item{ + width:100% +} + +.top-megamenu .megamenu-tabs ul{ + width:98%; + list-style: none; +} + +.megaMenuContainer { + margin-top: 0; + min-height: 50px; + overflow: visible; +} + +.megaMenuDataObject { + float: left; + width: 100%; +} + +.parentmenu-tabs { + height: 55px; +} + +.menu-section { + float: left; +} + +.controlCls{ + font-size: .975rem; + color: #666; + display: inline-block; + font-family: arial; + cursor: pointer; + height: 37px; + line-height: 37px; + padding-bottom: 10px; + vertical-align: middle; + width: 100%; +} + + +.controlCls:hover{ + color:#199DDF !important; +} + +.login-section { + float: right; + min-width:150px; +} + +.login-snippet-text { + display: inline-block; + font-size: 12px; + font-weight: bold; + margin-left: 5px; + overflow: hidden; + max-height: 60px; + max-width: 120px; + padding-top: 20px; + margin-top: 0; + white-space: nowrap; +} + +.megamenu__item { + width: 100px; +} + +.megamenu-item-top { + line-height:55px; +} + + +.newrow { + clear: left; +} + +.header-columns{ + -webkit-column-count:4; + -moz-column-rule: 1px outset #D3D3D3; + -moz-column-count:4; + column-count: 4; + line-height: 12px; + max-height: 500px; + overflow-x: hidden; + overflow-y:hidden; + column-gap: 13px; + column-rule: 1px outset #D3D3D3; + + +} + +.header-columns li{ + -webkit-column-break-inside: avoid; + break-inside: avoid; + //-webkit-page-break-inside: avoid; + page-break-inside: avoid; + + margin-top: 0px !important; + +} + +.header-columns-div{ + width:100%; + margin-left: 12px; + margin-top: 12px; + &:hover{ + .level3-favorites-icon-inactive { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + -moz-opacity: 1; + -khtml-opacity: 1; + } + } +} + + +.header-level4-div{ + width:100%; + margin-left: 12px; + margin-top: 12px; + &:hover{ + .level4-favorites-icon-inactive { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + -moz-opacity: 1; + -khtml-opacity: 1; + } + } +} + +.favorites-icon-active { + position: relative; + margin-top: 5px; + margin-left: 5px; + top: 3px; + color: @i; +} + +.level3-favorites-icon-inactive { + .favorites-icon-inactive; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -moz-opacity: 0; + -khtml-opacity: 0; +} + +.level4-favorites-icon-inactive { + .favorites-icon-inactive; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -moz-opacity: 0; + -khtml-opacity: 0; +} + +.favorites-icon-inactive { + position: relative; + margin-top: 5px; + margin-left: 5px; + top: 3px; + color: @o; +} + +.favorites-window-empty { + width: 100%; + height: auto; + display:flex; + justify-content:center; + align-items:center; + margin: auto; + text-align: center; + + .largeText { + font-weight: 400; + font-family: arial !important; + font-size: 18px; + text-align: center; + color: @o; + } + + .normal { + color: @o; + font-size: 14px; + text-align: center; + } + + +} +.favorites-window { + width: 100%; + height: auto; + //margin: auto; + font-size: 14px !important; + display: flex; + font-family: arial; + margin-top: 25px; + margin-left: 25px; + z-index: 1000; + + .fav-links { + margin-right: 25px; + } + + .largeText { + font-weight: 400; + font-family: arial !important; + font-size: 18px; + text-align: center; + color: @o; + } + + a:link, a:active, a:hover { + margin-left: 3px; + margin-right: 20px; + text-decoration: none; + } + + a:hover { + color: @z; + } +} + + + + .notifications-count + { + .border-radius(50%); + background:#db3434; + color: @colorWhite; + font: normal .85em 'Lato'; + height: 16px; + + position: absolute; + right: -7px; + text-align: center; + top: -8px; + width: 16px; + } + + .notification-header{ + border-bottom: 1px solid #b4b4b4; + padding: 10px 40px 0px 40px; + } + .notification-heading{ + font-family: arial; + font-size: 24px; + padding-top: 15px; + margin-bottom: 1rem; + } + .notificationBox{ + border-bottom: 1px solid #b4b4b4; + + } + + .notification-info-icon{ + padding-top: 41px; + font-size: 47px; + } + .notification-text { + line-height: 15px; + margin: 0; + padding: 0 0 24px 0; + text-align: center; + font-family: arial; + font-size: 16px; + } + +#icon-user-small{ + display: inline-block; + vertical-align: middle; + width: 20px; + padding-top: 20px; +} + +.notificationBox .icon-circle-action-close { + cursor: pointer; + font-size: 16px; + } + + .notification-close { + padding: 2px 2px 0px 0px; + float: right; + } + + #fav-icon{ + color: #ffb81c; + font-size: 80px; + } + + .edit-user-button{ + margin-top:5px; + display: inline; + margin-left:2px; + width: 20px; + } + + .log-out-button{ + margin-top:5px; + display: inline; + margin-left:10px; + width: 20px; + } + + .new-button { + margin-left:5px; + float: left; + display: block; + width: 80px; + height: 25px; + background: #0574ac!important; + padding: 6px; + text-align: center; + border-radius: 5px; + color: white; + font-size:13px; +}
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/views/header/header.tpl.html b/ecomp-portal-FE/client/app/views/header/header.tpl.html new file mode 100644 index 00000000..1928cb64 --- /dev/null +++ b/ecomp-portal-FE/client/app/views/header/header.tpl.html @@ -0,0 +1,277 @@ +<!-- + ================================================================================ + 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. + ================================================================================ + --> +<style type="text/css"> + + .att-popover .pop-over-caret.pop-over-caret--below{ + left: 5%; + color:#fff; + } + .att-popover .pop-over-caret.pop-over-caret-border--below{ + left: 5%; + } + + .popover-demo.att-popover{ + float: left; + top: 44px; + } + .reg-profileDetails{ + outline:none !important; + } + #reg-header-snippet .reg-profileDetails { + padding: 0px; + min-height: 150px; + } + #reg-header-snippet .reg-profileDetails .reg-userEmail-label .reg-userEmail-label-spn { + color: #0574ac; font-size: 13px; font-weight: bold; + } + #reg-header-snippet .reg-profileDetails .reg-userRole-label .reg-userRole-label-spn { + color: #0574ac;font-size: 13px; font-weight: bold; + } + +</style> +<div class="header-section"> + <div class="headerContainer" id="headerContainer"> + <div id="megaMenuContainer" class="megaMenuContainer"> + <div> +<!--for mega Menu--> +<!-- Mega Menu parent-tab directive with three models menu-items, active-sub-menu, active-menu --> + <div id="topMenu" class="top-megamenu" ng-mouseleave="activeClickSubMenu.x.active=false; activeClickMenu.x.active=false"> + <div class="megaMenuDataObject" parent-tab menu-items="megaMenuDataObject" + active-sub-menu='activeClickSubMenu.x' active-menu='activeClickMenu.x'> + <div parentmenu-tabs mega-menu="true" menu-items="megaMenuDataObject" class="parentmenu-tabs"> + <div class="menu-section"> +<!-- TITLE --> + <li class="megamenu__item" style="line-height:55px;" onclick="window.location = 'applicationsHome'"> + <span id="logo-image" class="logo-image"></span> + <span id="portal-title" class="portal-title" >OpenECOMP Portal</span> + </li> +<!-- MENUS --> <!-- MENUS --> + <div id="menu-tabs-mega-menu" + menu-tabs mega-menu="true" + tab-name="item.text" + menu-item="item" + ng-mousedown="loadFavorites()" + active-menu="activeClickMenu.x" + ng-repeat="item in megaMenuDataObject" style="font-size: 18px;"> + <div id="parentmenu-tabs" parentmenu-tabs sub-menu="true" + ng-show="activeClickMenu.x.active && item.active" + menu-items="activeClickMenu.x.children"> + +<!-- Second level menu --> <!-- Second level menu --> + <div id="second-level-menus" menu-tabs sub-menu="true" + menu-item="subItem" tab-name="subItem.text" tab-url="subItem.url" + ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'" + active-menu="activeClickSubMenu.x" + sub-item-active="{{subItem.active}}" style="float:left;" + aria-label="{{subItem.text}} | orderBy : 'column'" + ng-mousemove="submenuLevelAction(subItem.text,subItem.column)" + ng-if="item.text!='Help' && item.text!='Support'" + > + <i ng-if="subItem.text=='Favorites'" id="favorite-star" data-size="large" + class="ion-star favorites-icon-active"> + </i> + </div> + <div id="second-level-menus-help" menu-tabs sub-menu="true" + menu-item="subItem" + ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'" + ng-if="item.text=='Help' || item.text=='Support'" + > + <span ng-click="goToUrl(subItem)">{{subItem.text}}</span> + </div> + + + <div class="sub__menu" > + <ul ng-show="activeClickSubMenu.x.active" role="menubar" class="header-columns"> +<!-- Third level menu --> <!-- Third level menu --> + <div id="third-level-menus" class="header-columns-div" + ng-hide='favoritesWindow || hideMenus' + menu-tabs menu-item="subItem" + ng-repeat="subItem in activeClickSubMenu.x.children | orderBy : 'column'" + ng-show="activeClickSubMenu.x.active" > + <i id="level3-star-inactive-{{subItem.menuId}}" ng-cloak + class="ion-star level3-favorites-icon-inactive" data-size="large" + data-ng-click="setAsFavoriteItem($event, subItem.menuId)" + ng-if="subItem.url.length > 1 && isUrlFavorite(subItem.menuId)==false"> + </i> + <i id="level3-star-active-{{subItem.menuId}}" ng-cloak + ng-if="subItem.url.length > 1 && isUrlFavorite(subItem.menuId)" + class="ion-star favorites-icon-active ng-cloak" data-size="large" + data-ng-click="removeAsFavoriteItem($event, subItem.menuId)" + > + </i> + <span class="title" + aria-label="{{subItem.text | elipsis: 50}}" + ng-click="goToUrl(subItem)">{{subItem.text}}</span> +<!-- Fourth level menus - <!-- Fourth level menus --> + <div class ="header-level4-div" att-links-list="" ng-repeat="tabValue in subItem.children" > + <i id="level4-star-inactive-{{tabValue.menuId}}" ng-cloak + class="ion-star level4-favorites-icon-inactive" + data-ng-click="setAsFavoriteItem($event, tabValue.menuId)" + ng-if="tabValue.url.length > 1 && isUrlFavorite(tabValue.menuId)==false"> + </i> + <i id="level4-star-active-{{tabValue.menuId}}" ng-cloak + class="ion-star favorites-icon-active" + data-ng-click="removeAsFavoriteItem($event, tabValue.menuId)" + ng-if="tabValue.url.length > 1 && isUrlFavorite(tabValue.menuId)"> + + </i> + + <span ng-click="goToUrl(tabValue)" + role="menuitem" att-links-list-item="" + style="display: inline; padding-left: 8px" + att-accessibility-click="13,32" + title="{{tabValue.text}}" + ng-class="{'disabled': tabValue.disabled}">{{tabValue.text | elipsis: 50}}</span> + </div> + <div att-divider-lines ng-show="!$last"></div> + </div> + </ul> +<!-- Favorites level menu --> <!-- Favorites level menu --> + <div class="header-columns-div" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()"> + <div id="favorites-menu-items" att-links-list="" + ng-show="showFavorites" + ng-hide="hideMenus" + ng-repeat="subItem in favoritesMenuItems" + att-links-list="" > + + <div class="fav-links"> + <i id="favorite-selector-favorites-list" + class="ion-star favorites-icon-active" + style="font-size:18px" + data-ng-click="removeAsFavoriteItem($event, subItem.menuId)" + ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)"> + </i> + <a id="favorites-list" aria-label="{{subItem.text}}" style="color: #000" + ng-click="goToUrl(subItem)">{{subItem.text}} + </a> + </div> + </div> + <!-- Favorites when empty --> + <div id="favorites-empty" + ng-show="emptyFavorites" + class="favorites-window-empty" > + <div> + <span id="fav-icon" class="ion-ios-star" ></span> + <p id="p-no-favs" class="largeText">No Favorites</p> + <p id="p-no-favs-desc" class="normal">Add your favorite items for quick access.</p> + </div> + </div> + </div> + </div> + + </div> + </div > + </div> + + <div class="login-section"> + <li id="bcLoginSnippet" class="megamenu__item" style="width: 140px;" > + <div popover="loginSnippet.html" aria-label="Login Snippet" referby="loginSnippet" att-accessibility-click="13,32" popover-style="" popover-trigger="click" popover-placement="below" style="width: 150px; height: 55px; display: inline-flex"> + <div id="icon-user-small" class="ion-android-person login-snippet-icon"></div> + <div id="login-snippet-text" class="login-snippet-text">{{header.firstName}}</div> + </div> + </li> + </div> + </div> + </div> + <div style="clear: both"></div> + </div> + </div> + </div> + </div> +</div> +<script type="text/ng-template" id="loginSnippet.html"> + <div ng-controller="loginSnippetCtrl" > + <div id="reg-header-snippet"> + <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id"> + <ul class="reg-Details-table" style="list-style: none; border-bottom: 1px solid #bbb; padding-bottom: 20px;" > + <li> + <div class="reg-userName-table"> + <div id="reg-userName-table-row"> + <div id="reg-userName-table-cell"> + <h3 class="att-global-fonts" style="font-size:18px; line-height:1.6 !important;" id="reg-userName" > + {{firstName}} {{lastName}} </h3> + <span> </span> + </div> + </div> + </div> + </li> + <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">Email<span class="visuallyhidden">: + </span></span></div></li> + <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn"> + {{loginSnippetEmail}}</span></div></li> + <li> </li> + <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn"> + User ID<span class="visuallyhidden">:</span></span></div></li> + <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn"> + {{loginSnippetUserId}}<span class="visuallyhidden"></span></span></div></li> + + </ul> + <div id="reg-logout-div" style="padding-top: 8px;"> + <p>Last login: <span ng-bind="lastLogin"></span></p> + <div style="margin-top: 10px"> + <a href="javascript:void(0)" id="allLogout" ng-click="openEditUserModal()" style="" class="new-button"> + Profile + </a> + <a href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="new-button"> + Log out + </a> + </div> + </div> + </div> + </div> + </div> + +</script> +<script type="text/ng-template" id="notificationCtrl.html"> + <div style="line-height: normal; right: 167px; min-height: 122px; height: auto; width: auto; " ng-controller="notificationCtrl" > + <div class="ng-scope"> + <div id="notification" class="notificationBox "> + <div class="notification-header"> + <div style="float:left;"> + <p class="notification-heading">Notifications</p> + </div> + <!-- <div class="notification-close ng-isolate-scope" tabindex="0" ddh-accessibility-click="13,32" b2b-close-flyout=""> + <span class="icon-circle-action-close" aria-label="close button"></span> + </div>--> + <div style="clear:both;"></div> + </div> + <div class="notification-main"> + <div style="height:113px;"> + <div align="center" class="icon-information notification-info-icon"></div> + </div> + <div> + <p class="notification-text">No New Notifications.</p> + </div> + </div> + <div class="notification-main ng-hide" ng-show="showList"> + <!-- ngRepeat: notification in notifications track by $index --> + </div> + <div class="notification-footer"> + <div class="notification-links"> + <div style="clear:both;"></div> + </div> + </div> + <!--/div --> + + + </div> + </div> + </div> +</script> diff --git a/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.controller.js b/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.controller.js new file mode 100644 index 00000000..507b3a0e --- /dev/null +++ b/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.controller.js @@ -0,0 +1,134 @@ +/*- + * ================================================================================ + * 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 EditUserController { + constructor($scope,$log, message, $q, $http, conf,contactUsService,confirmBoxService,userProfileService,adminsService) { + + $scope.newUser ={ + firstName:'', + lastName:'', + emailAddress:'', + middleName:'', + loginId:'', + loginPwd:'', + }; + + $scope.userId = $scope.ngDialogData.loginId; + $scope.updateRemoteApp = $scope.ngDialogData.updateRemoteApp; + try { + userProfileService.getCurrentUserProfile($scope.userId) + .then(res=> { + $scope.newUser.firstName = res.firstName; + $scope.newUser.lastName = res.lastName; + $scope.newUser.emailAddress = res.email; + $scope.newUser.middleName = res.middleInitial; + $scope.newUser.loginId = res.loginId; + $scope.newUser.loginPwd = res.loginPwd; + $scope.newUser.loginPwdCheck = res.loginPwd; + + }).catch(err=> { + $log.error('HeaderCtrl::LoginSnippetCtrl:get Current User Profile error: ' + err); + }); + } catch (err) { + $log.error('HeaderCtrl::LoginSnippetCtrl:getFunctionalMenuStaticInfo failed: ' + err); + } + + $scope.changePwdText = function(){ + $scope.newUser.loginPwdCheck = ''; + } + + $scope.closeDialog = function(){ + $scope.closeThisDialog( $scope.widgetData); + } + + $scope.updateUserFun = function(){ + + if ($scope.newUser.firstName==''||$scope.newUser.lastName==''||$scope.newUser.loginPwd=='') { + var warningMsg = "Please enter missing values"; + confirmBoxService.showInformation(warningMsg).then(isConfirmed => {return;}); + return; + } else if ($scope.newUser.loginPwd != $scope.newUser.loginPwdCheck) { + var warningMsg = "Passwords do not match, please try again."; + confirmBoxService.showInformation(warningMsg).then(isConfirmed => {return;}); + return; + } else { + + // check password length complexity. + var warningMsg = adminsService.isComplexPassword($scope.newUser.loginPwd); + if (warningMsg != null) { + confirmBoxService.showInformation(warningMsg).then(isConfirmed => {return;}); + return; + } + + adminsService.addNewUser($scope.newUser,'No').then(res=> { + + $scope.closeThisDialog(); + + confirmBoxService.showInformation('Update User Info successfully'); + userProfileService.broadCastUpdatedUserInfo(); + + + if($scope.updateRemoteApp){ + //need update remote app's database + var remoteAppId = $scope.ngDialogData.appId; + if(remoteAppId!=null){ + + userProfileService.updateRemoteUserProfile($scope.userId,remoteAppId).then(res=> { + + + }).catch(err=> { + $log.error('userProfileService: update user profile in remote app error:: ', err); + confirmBoxService.showInformation('Update User in remote app failed: ' + err); + + }).finally(() => { + + }); + + + } + + } + + }).catch(err=> { + $log.error('adminsService: addNewUser error:: ', err); + // $scope.errMsg=err; + confirmBoxService.showInformation('Add New User failed: ' + err); + + }).finally(() => { + //this.isLoadingTable = false; + + }); + + } + } + + + } + } + EditUserController.$inject = ['$scope','$log', 'message', '$q', '$http', 'conf','contactUsService','confirmBoxService','userProfileService','adminsService']; + angular.module('ecompApp').controller('editUserController', EditUserController); + + +})(); +function validateUrl(value){ + return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value); + }
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.less b/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.less new file mode 100644 index 00000000..853e48db --- /dev/null +++ b/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.less @@ -0,0 +1,61 @@ +/*- + * ================================================================================ + * 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. + * ================================================================================ + */ + + .main{ + padding:10px; + margin-left: 40px; + + } + .manage-user-home-title{ + + margin-top:15px; + color: #067ab4; + font-family: arial; + font-size: 24px; + margin-left: 0px; + width: 250px; + + } + + .input-text-edit-user { + font-style: italic; + padding: 7px 10px; + width: 200px !important; + display: inline-block; + position: relative; + margin-bottom: 10px; + border-radius: 6px; + border: 1px solid #d8d8d8; + height: 32px; + border-color: slategrey !important; + } + + .input-edit-user-div{ + float: left; + width: 300px; + } + + .edit-user-section{ + + margin-top:5px; + margin-left:10px; + + } +
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.tpl.html b/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.tpl.html new file mode 100644 index 00000000..719f8bde --- /dev/null +++ b/ecomp-portal-FE/client/app/views/header/user-edit/edit-user.tpl.html @@ -0,0 +1,69 @@ +<!-- + ================================================================================ + 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="main" style="margin-top: 5px; height: 350px;"> + <div id="title" class="manage-user-home-title">Profile</div> + + <div class="edit-user-section" > + <div class="input-edit-user-div" > + <div class="">*First Name</div> + <input class="input-text-edit-user" type="text" ng-model="newUser.firstName"/> + </div> + <div class="input-edit-user-div" > + <div class="">Middle Name</div> + <input class="input-text-edit-user" type="text" ng-model="newUser.middleName"/> + </div> + <div class="input-edit-user-div" > + <div class="">*Last Name</div> + <input class="input-text-edit-user" type="text" ng-model="newUser.lastName"/> + </div> + <div class="input-edit-user-div" > + <div class="">*Email Address ID</div> + <input class="input-text-edit-user" type="text" disabled ng-model="newUser.emailAddress"/> + </div> + <div class="input-edit-user-div" > + <div class="">*Login ID</div> + <input class="input-text-edit-user" type="text" disabled ng-model="newUser.loginId"/> + </div> + <div class="input-edit-user-div" > + <div class="">*Login Password</div> + <input class="input-text-edit-user" type="password" ng-model="newUser.loginPwd" ng-change="changePwdText()"/> + </div> + <div class="input-edit-user-div" > + <div class="">*Confirm Login Password</div> + <input class="input-text-edit-user" type="password" ng-model="newUser.loginPwdCheck"/> + </div> + </div> + <div style="bottom: 2px; height:50px;width:180px;margin-top:60px"> + <div class="dialog-control"> + <div id="div-updateAdminAppsRoles" class="next-button" ng-click="updateUserFun()" + ng-class="{disabled: false}">Save + </div> + <div id="div-cancel-button" class="cancel-button" ng-click="closeThisDialog()">Cancel</div> + </div> + </div> + + +</div> + +<script type="application/javascript"> + $(document).ready(function(){ + $(".ngdialog-content").css("width","85%") + }); +</script>
\ No newline at end of file |