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" onclick="window.location = 'applicationsHome'">
  43                 <div ng-include class="profile-detail-extension" src="'app/views/header/header-logo.html'"></div>
  44                 <span id="portal-title" class="portal-title" ng-bind="ecompTitle"></span>
  45             </li>
  46 <!-- First Level menu -->
  47             <li b2b-header-menu
  48                 id="megaMenu-{{item.text.split(' ').join('-')}}"
  49                 class="header__item b2b-headermenu"
  50                 ng-repeat="item in megaMenuDataObject"
  51                 ng-mousedown="loadFavorites(item.text)"
  52                 role="presentation">
  53
  54                 <a href="javascript:void(0);"
  55                 id="parentmenu-{{item.text.split(' ').join('-')}}-tabs"
  56                 class="menu__item"
  57                 role="menuitem">{{item.text}}</a>
  58
  59                 <div class="header-secondary-wrapper" ng-if="item.active_yn=='Y'" ng-hide="hideMenus">
  60                     <ul class="header-secondary" role="menu">
  61 <!-- Second Level menu -->
  62                         <li class="header-subitem"
  63                         id="subItem-{{subItem.text.split(' ').join('-')}}"
  64                         b2b-header-submenu
  65                         ng-repeat="i in item.children | orderBy : 'column'"
  66                         ng-mousemove="submenuLevelAction(i.text,i.column)"
  67                         role="presentation">
  68            <!-- Favorites -->
  69                                 <div ng-if="i.text=='Favorites'" >
  70                                         <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>
  71                                         <i id="favorite-star" data-size="large"  class="icon-star favorites-icon-active"></i>
  72                                         <div class="header-columns-div" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()" >
  73                                                 <div class="header-tertiary-wrapper" id="header-favorites">
  74                                                     <ul class="header-tertiary" role="menu">
  75                                                         <li role="presentation">
  76                                                                 <div
  77                                                      ng-repeat="subItem in favoritesMenuItems"
  78                                                      ng-show="showFavorites"
  79
  80                                                      id="favoritesMenuItems-{{subItem.text.split(' ').join('-')}}">
  81                                                     <div class="fav-links">
  82                                                         <i id="favorite-selector-favorites-list"
  83                                                            class="icon-star favorites-icon-active"
  84                                                            data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"
  85                                                            ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)">
  86                                                         </i>
  87                                                         <a id="favorites-list" aria-label="{{subItem.text}}" ng-click="goToUrl(subItem)">{{subItem.text}}</a>
  88                                                     </div>
  89                                                 </div>
  90
  91                                                             <div id="favorites-empty"  class="favorites-window-empty"   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 Favorites'|T}}</p>
  96                                                                                 <p id="p-no-favs-desc"  class="normal">{{'Add your favorite items for quick access'|T}}.</p>
  97                                                                 </div>
  98                                                         </li>
  99                                                     </ul>
 100                                             </div>
 101                                         </div>
 102                                 </div>
 103             <!-- Support or Help -->
 104                                 <div ng-if="item.text=='Support' || item.text=='Help'" id="second-level-menus-help">
 105                                         <a id="second-level-menus-{{i.text.split(' ').join('-')}}-help" href="javascript:void(0);" ng-click="goToUrl(i);auditLog(i,'Support')" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>
 106                                 </div>
 107                 <!-- Others -->
 108                                 <div ng-if="i.text!='Favorites' && (item.text!='Support' && item.text!='Help')" >
 109                                         <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>
 110                                     <div class="header-tertiary-wrapper" >
 111                                             <ul class="third-level-menu"  role="menu" id="third-level-menus">
 112 <!-- Third Level menu -->
 113
 114                                                         <li b2b-header-tertiarymenu ng-repeat="link in i.children | orderBy : 'column'" role="presentation" >
 115                                                             <i id="level3-star-inactive-{{link.menuId}}" ng-cloak
 116                                                     class="icon-star favorites-icon-inactive"  data-size="large"
 117                                                     data-ng-click="setAsFavoriteItem($event, link.menuId)"
 118                                                     ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)==false">
 119                                                 </i>
 120                                                 <i id="level3-star-active-{{link.menuId}}" ng-cloak
 121                                                    ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)"
 122                                                    class="icon-star favorites-icon-active ng-cloak"  data-size="large"
 123                                                    data-ng-click="removeAsFavoriteItem($event, link.menuId)">
 124                                                 </i>
 125
 126                                                             <a class="third-level-title"
 127                                                           aria-label="{{link.text | elipsis: 50}}"
 128                                                           ng-click="goToUrl(link);auditLog(link,'application')">{{link.text| elipsis: 50}}</a>
 129 <!-- Fourth Level menu -->
 130                                                             <div b2b-tertiary-link ng-repeat="title in link.children"  >
 131                                                                 <i id="level4-star-inactive-{{title.menuId}}" ng-cloak
 132                                                                class="icon-star favorites-icon-inactive"
 133                                                                data-ng-click="setAsFavoriteItem($event, title.menuId)"
 134                                                                ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)==false">
 135                                                             </i>
 136                                                             <i id="level4-star-active-{{title.menuId}}" ng-cloak
 137                                                                class="icon-star favorites-icon-active"
 138                                                                data-ng-click="removeAsFavoriteItem($event, title.menuId)"
 139                                                                ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)">
 140                                                             </i>
 141                                                                 <a href="javascript:void(0);" class="header-tertiaryitem"  ng-class="{'disabled': title.disabled}" role="menuitem" ng-click="goToUrl(title);auditLog(title,'functional')">{{title.text | elipsis: 50}}</a>
 142                                                             </div>
 143                                                         </li>
 144
 145
 146
 147
 148                                             </ul>
 149                                     </div>
 150                                 </div>
 151
 152                         </li>
 153                     </ul>
 154                 </div>
 155             </li>
 156 <!-- Right side of the Menu - User Icon and Notification flag -->
 157             <div class="login-section">
 158         <!-- Language Select -->
 159                                 <select ng-controller="HeaderCtrl" ng-model="cur_lang" ng-change="switching(cur_lang)" style="float:right">
 160                                         <option value="{{x.languageAlias}}" ng-repeat="x in langList">{{x.languageName}}</option>
 161                                 </select>
 162      <!-- User Icon -->
 163             <li class="header__item profile" aria-haspopup="true">
 164                                 <b2b-flyout>
 165                                         <div b2b-flyout-toggler >
 166                                                 <div class="icon-people-oneperson" id="header-user-icon" tabindex="0" b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" aria-expanded="{{flyoutOpened}}" role="button"></div>
 167                                         <div id="login-snippet-text" class="login-snippet-text">{{header.isGuest ? 'Guest' : header.firstName}}</div>
 168                                         </div>
 169                             <b2b-flyout-content horizontal-placement="center" vertical-placement="below">
 170                                                 <div  ng-controller="loginSnippetCtrl" >
 171                                                         <div id="reg-header-snippet">
 172                                                                 <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
 173                                                                         <ul class="reg-Details-table">
 174                                                                                 <li>
 175                                                                 <div class="reg-userName-table">
 176                                                                     <div id="reg-userName-table-row">
 177                                                                         <div id="reg-userName-table-cell">
 178                                                                                 <h3 >{{firstName}} {{lastName}}&nbsp;</h3>
 179                                                                             <span>&nbsp;</span>
 180                                                                         </div>
 181                                                                     </div>
 182                                                                 </div>
 183                                                             </li>
 184                                                                                 <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn reg-common-label-spn-txt" >{{'Email'|T}}<span class="visuallyhidden">:
 185                                                             </span></span></div></li>
 186                                                                                 <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">
 187                                                                 {{loginSnippetEmail}}</span></div></li>
 188                                                             <li>&nbsp;</li>
 189                                                                                 <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn reg-common-label-spn-txt">
 190                                                                 {{'User Id'|T}}<span class="visuallyhidden">:</span></span></div></li>
 191                                                                                 <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">
 192                                                                 {{loginSnippetUserid}}<span class="visuallyhidden"></span></span></div></li>
 193                                                             <li>&nbsp;</li>
 194                                                                                 <li><div class="reg-userLastLogin-label"><span class="reg-userLastLogin-label-spn reg-common-label-spn-txt">
 195                                                                 {{'Last login'|T}}<span class="visuallyhidden">:</span></span></div></li>
 196                                                                                 <li><div class="reg-userLastLogin-value"><span class="reg-userLastLogin-value-spn">
 197                                                                 {{ lastLogin | date : 'medium' }}<span class="visuallyhidden"></span></span></div></li>
 198                                                                 <li>&nbsp;</li>
 199                                                                                 <li>
 200                                                                         <div class="display-userAppRoles-label">
 201                                                                                 <a href="javascript:void(0);"  ng-click="getUserApplicationRoles()"  class="icon-primary-accordion-plus" ng-class="{true: 'icon-primary-accordion-plus', false: 'icon-primary-accordion-minus'}[ !displayUserAppRoles]" ><span class="business-card-app-role">{{'Applications and Roles'|T}}</span></a>
 202                                                                         </div>
 203                                                                         <br>
 204                                                                 <div class="display-userAppRoles-label display-userAppRoles-label-txt" ng-show="displayUserAppRoles">
 205                                                                      <div ng-repeat="ua in userapproles track by  $index">
 206                                                                     <div class="reg-userApp-value">
 207                                                                         <span class="reg-userApp-value-spn reg-common-label-spn-txt">{{ua.App}}<span class="visuallyhidden">:</span></span>
 208                                                                                                         </div>
 209                                                                         <div ng-repeat="role in ua.Roles track by  $index" class="reg-userAppRoles-value" >
 210                                                                                  <span  ng-if="role.indexOf('global_')!=-1" id="required" style="color: Red;" visible="false"> *</span>
 211                                                                         <span class="reg-userAppRoles-value-spn">{{role}}</span>
 212                                                                         </div>
 213                                                                         <br>
 214                                                                         </div>
 215                                                                 </div>
 216                                                                 </li>
 217                                                                         </ul>
 218                                                         <div ng-include class="profile-detail-extension" src="'app/views/header/header-extension.tpl.html'"></div>
 219                                                         <div id="reg-logout-div" class="logout-btn-div">
 220                                                              <button href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="btn btn-alt btn-small">
 221                                                                                         {{'Log out'|T}}
 222                                                                                 </button>
 223                                                         </div>
 224                                                         </div>
 225                                                         </div>
 226                                                 </div>
 227                             </b2b-flyout-content>
 228                         </b2b-flyout>
 229             </li>
 230     <!-- Notification flag -->
 231             <li class="header__item notification" aria-haspopup="true" class="notification-li">
 232                 <b2b-flyout>
 233                         <div b2b-flyout-toggler class="notification-div">
 234                                 <div class="notifications-count" ng-hide="notificationCount.count==0" ng-bind="notificationCount.count"></div>
 235                                                 <div id="megamenu-notification-button" class="icon-content-flag megamenu-notification-overrides" class="b2b-flyout-icon" tabindex="0" b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" aria-expanded="{{flyoutOpened}}" role="button"></div>
 236                             </div>
 237                             <b2b-flyout-content horizontal-placement="center" vertical-placement="below">
 238                                                 <div class="notification-content" ng-controller="notificationCtrl" >
 239                                                         <div class="ng-scope">
 240                                                                 <div id="notification" class="notificationBox ">
 241                                                                         <div align ="right">
 242                                                                                  <a id="notification-history-link" ui-sref="root.notificationHistory" class="notification-history-link-txt"> View All Recent Notifications </a>
 243                                                                         </div>
 244                                                                         <div class="notification-header">
 245                                                                                 <div class="notification-common-position">
 246                                                                                 <p class="notification-heading">{{'Notifications'| T}}</p>
 247                                                                                 </div>
 248                                                                                 <div class="notification-common-space"></div>
 249                                                                         </div>
 250                                                                         <div ng-show="notifications.length==0">
 251                                                                                 <div class="notification-main">
 252                                                                                         <div class="notification-main-ht">
 253                                                                                                 <div align="center" class="icon-information notification-info-icon"></div>
 254                                                                                         </div>
 255                                                                                 <div>
 256                                                                                 <p class="notification-text">{{'No New Notifications'| T}}.</p>
 257                                                                         </div>
 258
 259                                                                 </div>
 260                                                         </div>
 261                                                         <div class="notification-main" ng-show="notifications.length>0">
 262                                                                 <ul class="notifications-list">
 263                                                                         <li class="item" data-id="5" ng-repeat="item in notifications">
 264                                                                                 <div class="icon">
 265                                                                                         <span class="important" ng-show="item.priority==2"/>
 266                                                                                         <span class="normal" ng-show="item.priority==1"/>
 267                                                                                 </div>
 268                                                                                         <div class="details" ng-click="showDetailedJsonMessage(item)">
 269                                                                                                 <span class="title" ng-bind="item.msgSource"></span> <span
 270                                                                                                         class="title" ng-bind="item.msgHeader"></span> <span
 271                                                                                                         class="message-body" ng-if="item.msgSource==='EP'"
 272                                                                                                         ng-bind="item.message"></span> <span class="message-body"
 273                                                                                                         ng-if="item.msgSource!=='EP'"
 274                                                                                                         ng-bind="item.message| elipsis: 27"> </span>
 275                                                                                                 <!-- <span class="date" ng-bind="item.time" ></span> -->
 276                                                                                                 <mydate>{{item.time | date:'MM/dd/yyyy hh:mm:ss a Z'}}</mydate>
 277
 278                                                                                         </div>
 279                                                                                 <button type="button" ng-click="deleteNotification($index)" class="button-default button-dismiss js-dismiss">x</button>
 280                                                                         </li>
 281                                                                 </ul>
 282                                                         </div>
 283                                                         <div class="notification-footer">
 284                                                                 <div class="notification-links">
 285                                                                         <div class="notification-common-space"></div>
 286                                                                 </div>
 287                                                         </div>
 288                                                 </div>
 289                             </b2b-flyout-content>
 290                         </b2b-flyout>
 291             </li>
 292
 293             <li class="header__item recommendation" aria-haspopup="true"
 294                                                         class="recommendation-li">
 295             <div ng-include class="recommendation-detail-extension" src="'app/views/headerRecommendation/headerRecommendations.tpl.html'"></div>
 296             </li>
 297             </div>
 298         </ul>
 299         </header>
 300 </div>