ecomp-portal-FE-common/client/app/views/header/header.tpl.html

   1 <!--
   2   ============LICENSE_START==========================================
   3   ONAP Portal
   4   ===================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6   ===================================================================
   7
   8   Unless otherwise specified, all software contained herein is licensed
   9   under the Apache License, Version 2.0 (the "License");
  10   you may not use this software except in compliance with the License.
  11   You may obtain a copy of the License at
  12
  13               http://www.apache.org/licenses/LICENSE-2.0
  14
  15   Unless required by applicable law or agreed to in writing, software
  16   distributed under the License is distributed on an "AS IS" BASIS,
  17   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18   See the License for the specific language governing permissions and
  19   limitations under the License.
  20
  21   Unless otherwise specified, all documentation contained herein is licensed
  22   under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23   you may not use this documentation except in compliance with the License.
  24   You may obtain a copy of the License at
  25
  26               https://creativecommons.org/licenses/by/4.0/
  27
  28   Unless required by applicable law or agreed to in writing, documentation
  29   distributed under the License is distributed on an "AS IS" BASIS,
  30   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31   See the License for the specific language governing permissions and
  32   limitations under the License.
  33
  34   ============LICENSE_END============================================
  35
  36
  37   -->
  38 <div class="header-position">
  39         <header class="b2b-header-tabs" b2b-header-responsive>
  40                 <ul class="header__items" role="navigation">
  41                         <!-- Menu Icon and name -->
  42                         <li class="header__item icon__item"
  43                                 onclick="window.location = 'applicationsHome'">
  44                                 <div ng-include class="profile-detail-extension"
  45                                         src="'app/views/header/header-logo.html'"></div> <span
  46                                 id="portal-title" class="portal-title" ng-bind="ecompTitle"></span>
  47                         </li>
  48                         <!-- First Level menu -->
  49                         <li b2b-header-menu id="megaMenu-{{item.text.split(' ').join('-')}}"
  50                                 class="header__item b2b-headermenu"
  51                                 ng-repeat="item in megaMenuDataObject"
  52                                 ng-mousedown="loadFavorites(item.text)" role="presentation"><a
  53                                 href="javascript:void(0);"
  54                                 id="parentmenu-{{item.text.split(' ').join('-')}}-tabs"
  55                                 class="menu__item" role="menuitem">{{item.text}}</a>
  56
  57                                 <div class="header-secondary-wrapper" ng-if="item.active_yn=='Y'"
  58                                         ng-hide="hideMenus">
  59                                         <ul class="header-secondary" role="menu">
  60                                                 <!-- Second Level menu -->
  61                                                 <li class="header-subitem"
  62                                                         id="subItem-{{subItem.text.split(' ').join('-')}}"
  63                                                         b2b-header-submenu
  64                                                         ng-repeat="i in item.children | orderBy : 'column'"
  65                                                         ng-mousemove="submenuLevelAction(i.text,i.column)"
  66                                                         role="presentation">
  67                                                         <!-- Favorites -->
  68                                                         <div ng-if="i.text=='Favorites'">
  69                                                                 <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>
  70                                                                 <i id="favorite-star" data-size="large"
  71                                                                         class="icon-star favorites-icon-active"></i>
  72                                                                 <div class="header-columns-div" ng-show='favoritesWindow'
  73                                                                         ng-mouseleave="hideFavoritesWindow()">
  74                                                                         <div class="header-tertiary-wrapper" id="header-favorites">
  75                                                                                 <ul class="header-tertiary" role="menu">
  76                                                                                         <li role="presentation">
  77                                                                                                 <div ng-repeat="subItem in favoritesMenuItems"
  78                                                                                                         ng-show="showFavorites"
  79                                                                                                         id="favoritesMenuItems-{{subItem.text.split(' ').join('-')}}">
  80                                                                                                         <div class="fav-links">
  81                                                                                                                 <i id="favorite-selector-favorites-list"
  82                                                                                                                         class="icon-star favorites-icon-active"
  83                                                                                                                         data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"
  84                                                                                                                         ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)">
  85                                                                                                                 </i> <a id="favorites-list" aria-label="{{subItem.text}}"
  86                                                                                                                         ng-click="goToUrl(subItem)">{{subItem.text}}</a>
  87                                                                                                         </div>
  88                                                                                                 </div>
  89
  90                                                                                                 <div id="favorites-empty" class="favorites-window-empty"
  91                                                                                                         ng-show="emptyFavorites">
  92                                                                                                         <p id="p-no-favs-icon" class="no-fav-icon">
  93                                                                                                                 <span class="icon-star"></span>
  94                                                                                                         </p>
  95                                                                                                         <p id="p-no-favs" class="largeText">{{'No
  96                                                                                                                 Favorites'|T}}</p>
  97                                                                                                         <p id="p-no-favs-desc" class="normal">{{'Add your
  98                                                                                                                 favorite items for quick access'|T}}.</p>
  99                                                                                                 </div>
 100                                                                                         </li>
 101                                                                                 </ul>
 102                                                                         </div>
 103                                                                 </div>
 104                                                         </div> <!-- Support or Help -->
 105                                                         <div ng-if="item.text=='Support' || item.text=='Help'"
 106                                                                 id="second-level-menus-help">
 107                                                                 <a id="second-level-menus-{{i.text.split(' ').join('-')}}-help"
 108                                                                         href="javascript:void(0);"
 109                                                                         ng-click="goToUrl(i);auditLog(i,'Support')" class="menu__item"
 110                                                                         role="menuitem">{{i.text| elipsis: 50}}</a>
 111                                                         </div> <!-- Others -->
 112                                                         <div
 113                                                                 ng-if="i.text!='Favorites' && (item.text!='Support' && item.text!='Help')">
 114                                                                 <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text|
 115                                                                         elipsis: 50}}</a>
 116                                                                 <div class="header-tertiary-wrapper">
 117                                                                         <ul class="third-level-menu" role="menu" id="third-level-menus">
 118                                                                                 <!-- Third Level menu -->
 119
 120                                                                                 <li b2b-header-tertiarymenu
 121                                                                                         ng-repeat="link in i.children | orderBy : 'column'"
 122                                                                                         role="presentation"><i
 123                                                                                         id="level3-star-inactive-{{link.menuId}}" ng-cloak
 124                                                                                         class="icon-star favorites-icon-inactive" data-size="large"
 125                                                                                         data-ng-click="setAsFavoriteItem($event, link.menuId)"
 126                                                                                         ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)==false">
 127                                                                                 </i> <i id="level3-star-active-{{link.menuId}}" ng-cloak
 128                                                                                         ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)"
 129                                                                                         class="icon-star favorites-icon-active ng-cloak"
 130                                                                                         data-size="large"
 131                                                                                         data-ng-click="removeAsFavoriteItem($event, link.menuId)">
 132                                                                                 </i> <a class="third-level-title"
 133                                                                                         aria-label="{{link.text | elipsis: 50}}"
 134                                                                                         ng-click="goToUrl(link);auditLog(link,'application')">{{link.text|
 135                                                                                                 elipsis: 50}}</a> <!-- Fourth Level menu -->
 136                                                                                         <div b2b-tertiary-link ng-repeat="title in link.children">
 137                                                                                                 <i id="level4-star-inactive-{{title.menuId}}" ng-cloak
 138                                                                                                         class="icon-star favorites-icon-inactive"
 139                                                                                                         data-ng-click="setAsFavoriteItem($event, title.menuId)"
 140                                                                                                         ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)==false">
 141                                                                                                 </i> <i id="level4-star-active-{{title.menuId}}" ng-cloak
 142                                                                                                         class="icon-star favorites-icon-active"
 143                                                                                                         data-ng-click="removeAsFavoriteItem($event, title.menuId)"
 144                                                                                                         ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)">
 145                                                                                                 </i> <a href="javascript:void(0);" class="header-tertiaryitem"
 146                                                                                                         ng-class="{'disabled': title.disabled}" role="menuitem"
 147                                                                                                         ng-click="goToUrl(title);auditLog(title,'functional')">{{title.text
 148                                                                                                         | elipsis: 50}}</a>
 149                                                                                         </div></li>
 150
 151
 152
 153
 154                                                                         </ul>
 155                                                                 </div>
 156                                                         </div>
 157
 158                                                 </li>
 159                                         </ul>
 160                                 </div></li>
 161                         <!-- Right side of the Menu - User Icon and Notification flag -->
 162                         <div class="login-section">
 163                                         <!-- Language Select -->
 164                                         <div ng-if="langList" class="language">
 165                                                 <select style="font: normal 12px Omnes-ECOMP-W02, Arial;" id="dropdown1" name="dropdown1" placeholder-text="Select Language" ng-model="cur_lang" ng-change="switching(cur_lang)">
 166                                                 <option ng-repeat="x in langList" value="{{x.languageAlias}}">{{x.languageName}}</option>
 167                                             </select>
 168                                         </div>
 169                                 <!-- User Icon -->
 170                                 <li class="header__item profile" aria-haspopup="true"><b2b-flyout>
 171                                         <div b2b-flyout-toggler>
 172                                                 <div class="icon-people-oneperson" id="header-user-icon"
 173                                                         tabindex="0" b2b-accessibility-click="13,32"
 174                                                         aria-label="notifications" aria-haspopup="true"
 175                                                         aria-expanded="{{flyoutOpened}}" role="button"></div>
 176                                                 <div id="login-snippet-text" class="login-snippet-text">{{header.isGuest
 177                                                         ? 'Guest' : header.firstName}}</div>
 178                                         </div>
 179                                         <b2b-flyout-content horizontal-placement="center"
 180                                                 vertical-placement="below">
 181                                         <div ng-controller="loginSnippetCtrl">
 182                                                 <div id="reg-header-snippet">
 183                                                         <div tabindex="0" class="reg-profileDetails"
 184                                                                 id="reg-profiledetails-id">
 185                                                                 <ul class="reg-Details-table">
 186                                                                         <li>
 187                                                                                 <div class="reg-userName-table">
 188                                                                                         <div id="reg-userName-table-row">
 189                                                                                                 <div id="reg-userName-table-cell">
 190                                                                                                         <h3>{{firstName}} {{lastName}}&nbsp;</h3>
 191                                                                                                         <span>&nbsp;</span>
 192                                                                                                 </div>
 193                                                                                         </div>
 194                                                                                 </div>
 195                                                                         </li>
 196                                                                         <li><div class="reg-userEmail-label">
 197                                                                                         <span
 198                                                                                                 class="reg-userEmail-label-spn reg-common-label-spn-txt">{{'Email'|T}}<span
 199                                                                                                 class="visuallyhidden">: </span></span>
 200                                                                                 </div></li>
 201                                                                         <li><div class="reg-userEmail-value">
 202                                                                                         <span class="reg-userEmail-value-spn">
 203                                                                                                 {{loginSnippetEmail}}</span>
 204                                                                                 </div></li>
 205                                                                         <li>&nbsp;</li>
 206                                                                         <li><div class="reg-userRole-label">
 207                                                                                         <span class="reg-userRole-label-spn reg-common-label-spn-txt">
 208                                                                                                 {{'User Id'|T}}<span class="visuallyhidden">:</span>
 209                                                                                         </span>
 210                                                                                 </div></li>
 211                                                                         <li><div class="reg-userRole-value">
 212                                                                                         <span class="reg-userRole-value-spn">
 213                                                                                                 {{loginSnippetUserid}}<span class="visuallyhidden"></span>
 214                                                                                         </span>
 215                                                                                 </div></li>
 216                                                                         <li>&nbsp;</li>
 217                                                                         <li><div class="reg-userLastLogin-label">
 218                                                                                         <span
 219                                                                                                 class="reg-userLastLogin-label-spn reg-common-label-spn-txt">
 220                                                                                                 {{'Last login'|T}}<span class="visuallyhidden">:</span>
 221                                                                                         </span>
 222                                                                                 </div></li>
 223                                                                         <li><div class="reg-userLastLogin-value">
 224                                                                                         <span class="reg-userLastLogin-value-spn"> {{
 225                                                                                                 lastLogin | date : 'medium' }}<span class="visuallyhidden"></span>
 226                                                                                         </span>
 227                                                                                 </div></li>
 228                                                                         <li>&nbsp;</li>
 229                                                                         <li>
 230                                                                                 <div class="display-userAppRoles-label">
 231                                                                                         <a href="javascript:void(0);"
 232                                                                                                 ng-click="getUserApplicationRoles()"
 233                                                                                                 class="icon-primary-accordion-plus"
 234                                                                                                 ng-class="{true: 'icon-primary-accordion-plus', false: 'icon-primary-accordion-minus'}[ !displayUserAppRoles]"><span
 235                                                                                                 class="business-card-app-role">{{'Applications and
 236                                                                                                         Roles'|T}}</span></a>
 237                                                                                 </div> <br>
 238                                                                                 <div
 239                                                                                         class="display-userAppRoles-label display-userAppRoles-label-txt"
 240                                                                                         ng-show="displayUserAppRoles">
 241                                                                                         <div ng-repeat="ua in userapproles track by  $index">
 242                                                                                                 <div class="reg-userApp-value">
 243                                                                                                         <span
 244                                                                                                                 class="reg-userApp-value-spn reg-common-label-spn-txt">{{ua.App}}<span
 245                                                                                                                 class="visuallyhidden">:</span></span>
 246                                                                                                 </div>
 247                                                                                                 <div ng-repeat="role in ua.Roles track by  $index"
 248                                                                                                         class="reg-userAppRoles-value">
 249                                                                                                         <span ng-if="role.indexOf('global_')!=-1" id="required"
 250                                                                                                                 style="color: Red;" visible="false"> *</span> <span
 251                                                                                                                 class="reg-userAppRoles-value-spn">{{role}}</span>
 252                                                                                                 </div>
 253                                                                                                 <br>
 254                                                                                         </div>
 255                                                                                 </div>
 256                                                                         </li>
 257                                                                 </ul>
 258                                                                 <div ng-include class="profile-detail-extension"
 259                                                                         src="'app/views/header/header-extension.tpl.html'"></div>
 260                                                                 <div id="reg-logout-div" class="logout-btn-div">
 261                                                                         <button href="javascript:void(0)" id="allLogout"
 262                                                                                 ng-click="allAppsLogout()" class="btn btn-alt btn-small">
 263                                                                                 {{'Log out'|T}}</button>
 264                                                                 </div>
 265                                                         </div>
 266                                                 </div>
 267                                         </div>
 268                                         </b2b-flyout-content> </b2b-flyout></li>
 269                                 <!-- Notification flag -->
 270                                 <li class="header__item notification" aria-haspopup="true"
 271                                         class="notification-li"><b2b-flyout>
 272                                         <div b2b-flyout-toggler class="notification-div">
 273                                                 <div class="notifications-count"
 274                                                         ng-hide="notificationCount.count==0"
 275                                                         ng-bind="notificationCount.count"></div>
 276                                                 <div id="megamenu-notification-button"
 277                                                         class="icon-content-flag megamenu-notification-overrides"
 278                                                         class="b2b-flyout-icon" tabindex="0"
 279                                                         b2b-accessibility-click="13,32" aria-label="notifications"
 280                                                         aria-haspopup="true" aria-expanded="{{flyoutOpened}}"
 281                                                         role="button"></div>
 282                                         </div>
 283                                         <b2b-flyout-content horizontal-placement="center"
 284                                                 vertical-placement="below">
 285                                         <div class="notification-content" ng-controller="notificationCtrl">
 286                                                 <div class="ng-scope">
 287                                                         <div id="notification" class="notificationBox ">
 288                                                                 <div align="right">
 289                                                                         <a id="notification-history-link"
 290                                                                                 ui-sref="root.notificationHistory"
 291                                                                                 class="notification-history-link-txt"> View All Recent
 292                                                                                 Notifications </a>
 293                                                                 </div>
 294                                                                 <div class="notification-header">
 295                                                                         <div class="notification-common-position">
 296                                                                                 <p class="notification-heading">{{'Notifications'| T}}</p>
 297                                                                         </div>
 298                                                                         <div class="notification-common-space"></div>
 299                                                                 </div>
 300                                                                 <div ng-show="notifications.length==0">
 301                                                                         <div class="notification-main">
 302                                                                                 <div class="notification-main-ht">
 303                                                                                         <div align="center"
 304                                                                                                 class="icon-information notification-info-icon"></div>
 305                                                                                 </div>
 306                                                                                 <div>
 307                                                                                         <p class="notification-text">{{'No New Notifications'|
 308                                                                                                 T}}.</p>
 309                                                                                 </div>
 310
 311                                                                         </div>
 312                                                                 </div>
 313                                                                 <div class="notification-main" ng-show="notifications.length>0">
 314                                                                         <ul class="notifications-list">
 315                                                                                 <li class="item" data-id="5" ng-repeat="item in notifications">
 316                                                                                         <div class="icon">
 317                                                                                                 <span class="important" ng-show="item.priority==2" /> <span
 318                                                                                                         class="normal" ng-show="item.priority==1" />
 319                                                                                         </div>
 320                                                                                         <div class="details" ng-click="showDetailedJsonMessage(item)">
 321                                                                                                 <span class="title" ng-bind="item.msgSource"></span> <span
 322                                                                                                         class="title" ng-bind="item.msgHeader"></span> <span
 323                                                                                                         class="message-body" ng-if="item.msgSource==='EP'"
 324                                                                                                         ng-bind="item.message"></span> <span class="message-body"
 325                                                                                                         ng-if="item.msgSource!=='EP'"
 326                                                                                                         ng-bind="item.message| elipsis: 27"> </span>
 327                                                                                                 <!-- <span class="date" ng-bind="item.time" ></span> -->
 328                                                                                                 <mydate>{{item.time | date:'MM/dd/yyyy hh:mm:ss a
 329                                                                                                 Z'}}</mydate>
 330
 331                                                                                         </div>
 332                                                                                         <button type="button" ng-click="deleteNotification($index)"
 333                                                                                                 class="button-default button-dismiss js-dismiss">x</button>
 334                                                                                 </li>
 335                                                                         </ul>
 336                                                                 </div>
 337                                                                 <div class="notification-footer">
 338                                                                         <div class="notification-links">
 339                                                                                 <div class="notification-common-space"></div>
 340                                                                         </div>
 341                                                                 </div>
 342                                                         </div>
 343                                                 </div>
 344                                         </div>
 345                                         </b2b-flyout-content> </b2b-flyout></li>
 346                                         <li class="header__item recommendation" aria-haspopup="true"
 347                                                 class="recommendation-li">
 348                                                 <div ng-include class="recommendation-detail-extension"
 349                                                         src="'app/views/headerRecommendation/headerRecommendations.tpl.html'"></div>
 350                                         </li>
 351                 </ul>
 352         </header>
 353 </div>