diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/ecomp-header')
3 files changed, 604 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.html b/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.html new file mode 100644 index 0000000000..e86f9df8b0 --- /dev/null +++ b/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.html @@ -0,0 +1,73 @@ +<div class="sdc-ecomp-header-wrapper"> + + <div class="sdc-ecomp-header"> + + <div class="sdc-ecomp-logo-wrapper"> + <a class="sdc-ecomp-header-title" data-ng-if="clickableLogo==='true'" data-ui-sref="dashboard"><span class="sdc-ecomp-logo"></span>ASDC</a> + <a class="sdc-ecomp-header-title" data-ng-if="clickableLogo==='false'"><span class="sdc-ecomp-logo"></span>ASDC</a> + <div class="sdc-ecomp-header-version"> v.{{version}}</div> + </div> + + <div class="sdc-ecomp-menu"> + + <!-- Top level menu --> + <ul class="sdc-ecomp-menu-top-level"> + <li class="sdc-ecomp-menu-top-level-item" + ng-repeat="item in megaMenuDataObject" + data-ng-if="item.children && item.children.length>0" + > + <span class="selected" data-ng-if="item.menuId === selectedTopMenu.menuId"></span> + <a href data-ng-click="firstMenuLevelClick(item.menuId)">{{item.text}}</a> + + <!-- Second level menu --> + <div class="sdc-ecomp-menu-second-level" data-ng-if="item.menuId === selectedTopMenu.menuId" data-ng-mouseleave="subMenuLeaveAction(item.menuId)"> + <ul> + <li class="sdc-ecomp-menu-second-level-item" + ng-repeat="subItem in selectedTopMenu.children | orderBy : 'column'" + aria-label="{{subItem.text}}" + data-ng-class="{'sdc-ecomp-menu-item-hover': menuItemHover===true}" + ng-mouseover="subMenuEnterAction(subItem.menuId)" + ng-mouseenter="menuItemHover=true" + ng-mouseleave="menuItemHover=false"> + + <!--<i ng-if="subItem.text=='Favorites'" id="favorite-star" class="icon-star favorites-icon-active"></i>--> + + <a href title="{{subItem.text}}" data-ng-click="memuItemClick(subItem)">{{subItem.text}}</a> + + <!-- Third and Four menu panel --> + <ul class="sdc-ecomp-menu-third-level" data-ng-if="subItem.menuId === selectedSubMenu.menuId && (selectedSubMenu.children && selectedSubMenu.children.length>0)"> + <li class="sdc-ecomp-menu-third-level-item" + ng-repeat="thirdItem in selectedSubMenu.children | orderBy : 'column'" + aria-label="{{thirdItem.text}}"> + <a class="sdc-ecomp-menu-third-level-title" href title="{{thirdItem.text}}" data-ng-click="memuItemClick(thirdItem)">{{thirdItem.text}}</a> + <span class="sdc-ecomp-menu-four-level-seperator"></span> + <ul class="sdc-ecomp-menu-four-level"> + <li class="sdc-ecomp-menu-four-level-item" data-ng-repeat="fourItem in thirdItem.children | orderBy : 'column'"> + <a href title="{{fourItem.text}}" data-ng-click="memuItemClick(fourItem)">{{fourItem.text}}</a> + </li> + </ul> + </li> + </ul> + + </li> + </ul> + </div> + + </li> + + </ul> + + </div> + <div class="sdc-ecomp-user-wrapper"> + <span class="sdc-ecomp-user-icon"></span> + <div class="sdc-ecomp-user-details"> + <div class="sdc-ecomp-user-details-name-role"> + <div sdc-smart-tooltip class="sdc-ecomp-user-details-name" data-ng-bind="user.getName()"></div> + <div class="sdc-ecomp-user-details-role" data-ng-bind="user.getRoleToView()"></div> + </div> + <div class="sdc-ecomp-user-details-last-login" data-ng-show="user.getLastLogin()!==''">Last Login: {{user.getLastLogin() | date: 'MMM dd hh:mm a' : 'UTC'}} UTC</div> + </div> + </div> + </div> + +</div> diff --git a/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.less b/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.less new file mode 100644 index 0000000000..a6f7e9b5a2 --- /dev/null +++ b/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.less @@ -0,0 +1,296 @@ +@first-level-color: #067ab4; +@second-level-color: #f8f8f8; + +@first-level-height: 60px; +@second-level-height: 60px; +@third-four-level-height: 370px; + +@max-item-width: 250px; + +.sdc-ecomp-header-wrapper { + + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 999; + + ul { + margin: 0; + padding: 0; + } + + .sdc-ecomp-header { + + background-color: @first-level-color; + height: @first-level-height; + line-height: @first-level-height; + vertical-align: middle; + display: flex; + flex-direction: row; + padding: 0 20px; + + .sdc-ecomp-menu { + flex-grow: 98; + } + + } + + /* LEVEL 1 */ + .sdc-ecomp-menu-top-level { + list-style: none; + + .sdc-ecomp-menu-top-level-item:first-child { + margin-left: 0; + } + + .sdc-ecomp-menu-top-level-item { + display: inline-block; + margin: 0 20px; + position: relative; + a { + .p_14_m; + text-decoration: none; + } + + span { + &.selected { + position: absolute; + bottom: 0; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 15px solid @second-level-color; + } + } + } + } + + /* LEVEL 2 */ + .sdc-ecomp-menu-second-level { + background-color: @second-level-color; + box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.33); + height: @second-level-height; + list-style: none; + line-height: @second-level-height; + vertical-align: middle; + display: flex; + flex-direction: row; + padding: 0 20px; + position: fixed; + left: 0; + right: 0; + + .sdc-ecomp-menu-second-level-item:first-child { + margin-left: 0; + } + + .sdc-ecomp-menu-second-level-item { + display: inline-block; + height: @second-level-height; + line-height: @second-level-height; + + &.sdc-ecomp-menu-item-hover { + border-bottom: 4px solid #067ab4; + } + + a { + .m_14_r; + text-decoration: none; + text-align:center; + padding: 0 20px; + display: block; + + &:hover { + .s_14_r; + font-weight:bold; + } + + &:active { + font-weight: bold; + } + + /* fix jump when hovering text */ + &:after { + display:block; + content:attr(title); + font-weight:bold; + height:1px; + color:transparent; + overflow:hidden; + visibility:hidden; + } + } + + } + + } + + /* LEVEL 3 */ + ul.sdc-ecomp-menu-third-level { + background-color: #ffffff; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + min-height: @third-four-level-height; + list-style: none; + + display: flex; + flex-direction: row; + /*flex-wrap: wrap;*/ + position: fixed; + top: @first-level-height + @second-level-height; + left: 0; + right: 0; + padding: 0 40px; + + li.sdc-ecomp-menu-third-level-item { + height: 40px; + line-height: 40px; + position: relative; + /*width: @max-item-width;*/ + max-width: @max-item-width; + + .sdc-ecomp-menu-third-level-title { + .m_14_m; + text-decoration: none; + text-align: left; + display: block; + padding: 0 20px; + line-height: 20px; + margin-top: 20px; + font-weight: bold; + cursor: pointer; + } + + .sdc-ecomp-menu-four-level-seperator { + position: absolute; + border-right: solid 1px #e5e5e5; + height: @third-four-level-height - 20; + top: 10px; + } + } + + li.sdc-ecomp-menu-third-level-item:first-child { + .sdc-ecomp-menu-four-level-seperator { + border: none; + } + } + } + + /* LEVEL 4 */ + ul.sdc-ecomp-menu-four-level { + display: flex; + flex-direction: column; + margin-top: 10px; + + li.sdc-ecomp-menu-four-level-item { + display: block; + /*width: @max-item-width;*/ + max-width: @max-item-width; + line-height: 20px; + + a { + .m_14_r; + text-decoration: none; + text-align: left; + display: block; + + &:hover { + .s_14_r; + font-weight: bold; + } + } + } + } + +} + +.sdc-ecomp-logo-wrapper { + flex-grow: 1; + .p_18_m; + white-space: nowrap; + min-width: 210px; + text-align: left; + position: relative; + + .sdc-ecomp-logo { + background-image: url("images/att_logo_white.png"); + background-repeat: no-repeat; + display: inline-block; + vertical-align: middle; + width: 55px; + height: 55px; + } + + .sdc-ecomp-header-version { + .c_16; + .opacity(0.8); + position: absolute; + top: 34px; + line-height: 20px; + left: 56px; + } + + a.sdc-ecomp-header-title { + .p_24; + text-decoration: none; + } +} + + +.sdc-ecomp-user-wrapper { + + flex-grow: 1; + .p_14_m; + white-space: nowrap; + display: flex; + flex-direction: row; + align-items: center; + height: @first-level-height; + + .sdc-ecomp-user-icon { + margin-right: 20px; + .tlv-sprite; + .tlv-sprite.user; + } + + .sdc-ecomp-user-details { + display: flex; + flex-direction: column; + } + + .sdc-ecomp-user-details-name-role { + line-height: 20px; + + .sdc-ecomp-user-details-name { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: bottom; + + .bold; + display: inline-block; + } + + .sdc-ecomp-user-details-role { + .bold; + display: inline-block; + margin-left: 6px; + + &:before { + content: ''; + margin-right: 8px; + border-left: 1px solid @color_m; + } + } + } + + .sdc-ecomp-user-details-last-login { + .font-type._3; + display: block; + line-height: 20px; + height: 20px; + } + +} diff --git a/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.ts b/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.ts new file mode 100644 index 0000000000..7102c810ba --- /dev/null +++ b/catalog-ui/app/scripts/directives/ecomp-header/ecomp-header.ts @@ -0,0 +1,235 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ +/// <reference path="../../references"/> +module Sdc.Directives { + 'use strict'; + + export class MenuItem { + menuId:number; + column:number; + text:string; + parentMenuId:number; + url:string; + children:Array<MenuItem> + } + + export interface IEcompHeaderDirectiveScope extends ng.IScope { + menuData:Array<MenuItem>; + version:string; + clickableLogo:string; + contactUsUrl:string; + getAccessUrl:string; + megaMenuDataObjectTemp:Array<any>; + megaMenuDataObject:Array<any>; + + selectedTopMenu:MenuItem; + selectedSubMenu:MenuItem; + + firstMenuLevelClick:Function; + subMenuEnterAction:Function; + subMenuLeaveAction:Function; + + memuItemClick:Function; + user: Models.IUser; + } + + export class EcompHeaderDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService, + private $http:ng.IHttpService, + private sdcConfig:Models.IAppConfigurtaion, + private UserResourceClass:Services.IUserResourceClass) { + + } + + scope = { + menuData: '=', + version: '@', + clickableLogo: '@?' + }; + + public replace = true; + public restrict = 'E'; + public controller = EcompHeaderController; + + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/ecomp-header/ecomp-header.html'); + }; + + link = ($scope:IEcompHeaderDirectiveScope, $elem:JQuery, attr:any) => { + + if (!$scope.clickableLogo){ + $scope.clickableLogo="true"; + } + + let findMenuItemById = (menuId):MenuItem => { + let selectedMenuItem:MenuItem = _.find($scope.menuData, (item:MenuItem)=>{ + if (item.menuId === menuId){ + return item; + } + }); + return selectedMenuItem; + }; + + let initUser = ():void => { + let defaultUserId:string; + let user:Services.IUserResource = this.UserResourceClass.getLoggedinUser(); + if (!user) { + defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; + user = this.UserResourceClass.get({id: defaultUserId}, ():void => { + $scope.user = new Models.User(user); + }); + } else { + $scope.user = new Models.User(user); + } + }; + + $scope.firstMenuLevelClick = (menuId:number):void => { + let selectedMenuItem:MenuItem = _.find($scope.megaMenuDataObjectTemp, (item:MenuItem)=>{ + if (item.menuId === menuId){ + return item; + } + }); + if (selectedMenuItem) { + $scope.selectedTopMenu = selectedMenuItem; + //console.log("Selected menu item: " + selectedMenuItem.text); + } + }; + + $scope.subMenuEnterAction = (menuId:number):void => { + $scope.selectedSubMenu = findMenuItemById(menuId); + }; + + $scope.subMenuLeaveAction = (menuId:number):void => { + $scope.selectedTopMenu = undefined; + }; + + $scope.memuItemClick = (menuItem:MenuItem):void => { + if (menuItem.url){ + window.location.href=menuItem.url; + } else { + console.log("Menu item: " + menuItem.text + " does not have defined URL!"); + } + }; + + initUser(); + + }; + + public static factory = ($templateCache:ng.ITemplateCacheService, + $http:ng.IHttpService, + sdcConfig:Models.IAppConfigurtaion, + UserResourceClass:Services.IUserResourceClass)=> { + return new EcompHeaderDirective($templateCache, $http, sdcConfig, UserResourceClass); + }; + + } + + export class EcompHeaderController { + + messages:any; + getAttachId:Function; + render:any; + reRender:Function; + register:Function; + deregister:Function; + head:any; + + static '$inject' = [ + '$element', + '$scope', + '$attrs', + '$animate' + ]; + + constructor(private $element:JQuery, + private $scope:IEcompHeaderDirectiveScope, + private $attrs:ng.IAttributes, + private $animate:any) { + + this.$scope = $scope; + + this.$scope.$watch('menuData', (newVal, oldVal) => { + if (newVal){ + this.init(); + } + }); + + } + + init = ():void => { + + this.$scope.contactUsUrl = "https://wiki.web.att.com/display/EcompPortal/ECOMP+Portal+Home"; + this.$scope.getAccessUrl = "http://ecomp-tlv-dev2.uccentral.att.com:8080/ecompportal/get_access"; + + let unflatten = ( array, parent?, tree? ) => { + tree = typeof tree !== 'undefined' ? tree : []; + parent = typeof parent !== 'undefined' ? parent : { menuId: null }; + let 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; + }; + + let menuStructureConvert = (menuItems) => { + console.log(menuItems); + this.$scope.megaMenuDataObjectTemp = [ + { + menuId: 1001, + text: "ECOMP", + children: menuItems + }, + { + menuId: 1002, + text: "Help", + children: [ + { + text:"Contact Us", + url: this.$scope.contactUsUrl + }] + } + ]; + + /*{ + text:"Get Access", + url: this.$scope.getAccessUrl + }*/ + return this.$scope.megaMenuDataObjectTemp; + }; + + let a = unflatten(this.$scope.menuData); + this.$scope.megaMenuDataObject = menuStructureConvert(a); + //console.log(this.$scope.megaMenuDataObject); + }; + } + + EcompHeaderDirective.factory.$inject = ['$templateCache', '$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; + +} + + + + |