[PORTAL-7] Rebase
[portal.git] / ecomp-portal-FE-common / client / app / views / header / header.tpl.html
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.tpl.html b/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
new file mode 100644 (file)
index 0000000..65a34ed
--- /dev/null
@@ -0,0 +1,266 @@
+<!--\r
+  ================================================================================\r
+  ECOMP Portal\r
+  ================================================================================\r
+  Copyright (C) 2017 AT&T Intellectual Property\r
+  ================================================================================\r
+  Licensed under the Apache License, Version 2.0 (the "License");\r
+  you may not use this file except in compliance with the License.\r
+  You may obtain a copy of the License at\r
+  \r
+       http://www.apache.org/licenses/LICENSE-2.0\r
+  \r
+  Unless required by applicable law or agreed to in writing, software\r
+  distributed under the License is distributed on an "AS IS" BASIS,\r
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+  See the License for the specific language governing permissions and\r
+  limitations under the License.\r
+  ================================================================================\r
+  -->\r
+<div style="position:fixed;width: 100%;top: 0px;left: 0;background-color: #222;z-index:9999">\r
+    <header class="b2b-header-tabs" b2b-header-responsive>\r
+        <ul class="header__items" role="navigation">\r
+<!-- Menu Icon and name -->\r
+            <li class="header__item icon__item" onclick="window.location = 'applicationsHome'">\r
+                <span id="logo-image"  class="icon-primary-att-globe"></span>\r
+                <span id="portal-title" class="portal-title" >OpenECOMP Portal</span>                  \r
+            </li>\r
+<!-- First Level menu -->\r
+            <li b2b-header-menu \r
+               id="megaMenu-{{item.text.split(' ').join('-')}}" \r
+               class="header__item b2b-headermenu" \r
+               ng-repeat="item in megaMenuDataObject" \r
+               ng-mousedown="loadFavorites(item.text)"  \r
+               role="presentation">\r
+               \r
+                <a href="javascript:void(0);" \r
+                id="parentmenu-tabs"\r
+                class="menu__item" \r
+                role="menuitem">{{item.text}}</a>\r
+                \r
+                <div class="header-secondary-wrapper" ng-if="item.active_yn=='Y'">\r
+                    <ul class="header-secondary" role="menu">\r
+<!-- Second Level menu -->\r
+                        <li class="header-subitem" \r
+                        id="subItem-{{subItem.text.split(' ').join('-')}}"\r
+                        b2b-header-submenu \r
+                        ng-repeat="i in item.children | orderBy : 'column'" \r
+                        ng-mousemove="submenuLevelAction(i.text,i.column)" \r
+                        role="presentation">\r
+           <!-- Favorites -->\r
+                               <div ng-if="i.text=='Favorites'" >                                      \r
+                                       <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>                \r
+                                       <i id="favorite-star" data-size="large"  class="icon-star favorites-icon-active"></i>                   \r
+                                       <div class="header-columns-div" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()" >\r
+                                               <div class="header-tertiary-wrapper" id="header-favorites">\r
+                                                   <ul class="header-tertiary" role="menu">\r
+                                                       <li role="presentation">\r
+                                                               <div                                                   \r
+                                                     ng-repeat="subItem in favoritesMenuItems"\r
+                                                     ng-show="showFavorites"\r
+                                                     ng-hide="hideMenus"\r
+                                                     id="favoritesMenuItems-{{subItem.text.split(' ').join('-')}}">\r
+                                                    <div class="fav-links">\r
+                                                        <i id="favorite-selector-favorites-list"\r
+                                                           class="icon-star favorites-icon-active"                                                       \r
+                                                           data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"\r
+                                                           ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)">\r
+                                                        </i>\r
+                                                        <a id="favorites-list" aria-label="{{subItem.text}}" ng-click="goToUrl(subItem)">{{subItem.text}}</a>\r
+                                                    </div>\r
+                                                </div> \r
+                                                                                               \r
+                                                           <div id="favorites-empty"  class="favorites-window-empty"   ng-show="emptyFavorites">\r
+                                                               <p id="p-no-favs-icon" class="no-fav-icon">\r
+                                                                       <span class="icon-star" ></span>\r
+                                                               </p>\r
+                                                               <p id="p-no-favs" class="largeText">No Favorites</p>\r
+                                                               <p id="p-no-favs-desc"  class="normal">Add your favorite items for quick access.</p>\r
+                                                               </div>\r
+                                                       </li>\r
+                                                   </ul>\r
+                                           </div>\r
+                                       </div>                  \r
+                               </div>\r
+            <!-- Support or Help -->\r
+                               <div ng-if="item.text=='Support' || item.text=='Help'" id="second-level-menus-help">                            \r
+                                       <a href="javascript:void(0);" ng-click="goToUrl(i);auditLog(i,'Support')" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>                \r
+                               </div>\r
+                       <!-- Others -->\r
+                               <div ng-if="i.text!='Favorites' && (item.text!='Support' && item.text!='Help')" >\r
+                                       <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>\r
+                                   <div class="header-tertiary-wrapper" >\r
+                                           <ul class="third-level-menu"  role="menu" id="third-level-menus">\r
+<!-- Third Level menu -->                       \r
+                                                                               \r
+                                                       <li b2b-header-tertiarymenu ng-repeat="link in i.children | orderBy : 'column'" role="presentation" >\r
+                                                           <i id="level3-star-inactive-{{link.menuId}}" ng-cloak\r
+                                                    class="icon-star favorites-icon-inactive"  data-size="large"\r
+                                                    data-ng-click="setAsFavoriteItem($event, link.menuId)"\r
+                                                    ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)==false">\r
+                                                </i>\r
+                                                <i id="level3-star-active-{{link.menuId}}" ng-cloak\r
+                                                   ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)"\r
+                                                   class="icon-star favorites-icon-active ng-cloak"  data-size="large"\r
+                                                   data-ng-click="removeAsFavoriteItem($event, link.menuId)">\r
+                                                </i>                                              \r
+                                                \r
+                                                           <a class="third-level-title"\r
+                                                          aria-label="{{link.text | elipsis: 50}}"\r
+                                                          ng-click="goToUrl(link);auditLog(link,'application')">{{link.text| elipsis: 50}}</a>\r
+<!-- Fourth Level menu -->\r
+                                                           <div b2b-tertiary-link ng-repeat="title in link.children"  >\r
+                                                               <i id="level4-star-inactive-{{title.menuId}}" ng-cloak\r
+                                                              class="icon-star favorites-icon-inactive"\r
+                                                              data-ng-click="setAsFavoriteItem($event, title.menuId)"\r
+                                                              ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)==false">\r
+                                                           </i>\r
+                                                           <i id="level4-star-active-{{title.menuId}}" ng-cloak\r
+                                                              class="icon-star favorites-icon-active"\r
+                                                              data-ng-click="removeAsFavoriteItem($event, title.menuId)"\r
+                                                              ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)">\r
+                                                           </i>\r
+                                                               <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>                                      \r
+                                                           </div>\r
+                                                       </li>   \r
+                                                       \r
+                                                          \r
+                                             \r
+                                                                \r
+                                           </ul>\r
+                                   </div>\r
+                               </div>\r
+           \r
+                        </li>                        \r
+                    </ul>\r
+                </div>\r
+            </li>\r
+<!-- Right side of the Menu - User Icon and Notification flag -->\r
+            <div class="login-section">\r
+     <!-- User Icon -->\r
+            <li class="header__item profile" aria-haspopup="true">\r
+                               <b2b-flyout>\r
+                                       <div b2b-flyout-toggler >\r
+                                               <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>\r
+                                       <div id="login-snippet-text" class="login-snippet-text">{{header.isGuest ? 'Guest' : header.firstName}}</div>                  \r
+                                       </div>                                  \r
+                           <b2b-flyout-content horizontal-placement="center" vertical-placement="below">\r
+                                               <div  ng-controller="loginSnippetCtrl" >\r
+                                                       <div id="reg-header-snippet">\r
+                                                               <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">\r
+                                                                       <ul class="reg-Details-table">\r
+                                                                               <li>\r
+                                                               <div class="reg-userName-table">\r
+                                                                   <div id="reg-userName-table-row">\r
+                                                                       <div id="reg-userName-table-cell">\r
+                                                                           <h3 >\r
+                                                                           {{firstName}} {{lastName}}&nbsp;</h3>\r
+                                                                           <span>&nbsp;</span>\r
+                                                                       </div>\r
+                                                                   </div>\r
+                                                               </div>\r
+                                                           </li>\r
+                                                                               <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn" style=font-weight:bold>Email<span class="visuallyhidden">:\r
+                                                           </span></span></div></li>\r
+                                                                               <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">\r
+                                                               {{loginSnippetEmail}}</span></div></li>\r
+                                                           <li>&nbsp;</li>\r
+                                                                               <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn" style=font-weight:bold>\r
+                                                               User Id<span class="visuallyhidden">:</span></span></div></li>\r
+                                                                               <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">\r
+                                                               {{loginSnippetUserid}}<span class="visuallyhidden"></span></span></div></li>\r
+                                                           <li>&nbsp;</li>\r
+                                                                               <li><div class="reg-userLastLogin-label"><span class="reg-userLastLogin-label-spn" style=font-weight:bold>\r
+                                                               Last login<span class="visuallyhidden">:</span></span></div></li>\r
+                                                                               <li><div class="reg-userLastLogin-value"><span class="reg-userLastLogin-value-spn">\r
+                                                               {{lastLogin}}<span class="visuallyhidden"></span></span></div></li>\r
+                                                               <li>&nbsp;</li>\r
+                                                                               <li>\r
+                                                                       <div class="display-userAppRoles-label">\r
+                                                                               <a href="javascript:void(0);"  ng-click="getUserApplicationRoles()"  class="icon-controls-add-maximize" ><span>Applications and Roles</span></a>\r
+                                                                       </div>\r
+                                                               \r
+                                                               <div class="display-userAppRoles-label" ng-show="displayUserAppRoles" style="height:200px; overflow-y:auto;">\r
+                                                                    <div ng-repeat="ua in userapproles track by  $index">\r
+                                                                   <div class="reg-userApp-value">\r
+                                                                       <span class="reg-userApp-value-spn" style=font-weight:bold>{{ua.App}}<span class="visuallyhidden">:</span></span>\r
+                                                                                                       </div>                                                             \r
+                                                                       <div ng-repeat="role in ua.Roles track by  $index" class="reg-userAppRoles-value" >\r
+                                                                               <span class="reg-userAppRoles-value-spn">{{role}}</span>\r
+                                                                       </div>\r
+                                                                       </div>\r
+                                                               </div>\r
+                                                               </li>\r
+                                                                       </ul>\r
+                                                       <div id="reg-logout-div" style="padding-top: 8px">\r
+                                                             <button href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="btn btn-alt btn-small">\r
+                                                                                       Log out\r
+                                                                               </button>\r
+                                                       </div>\r
+                                                       </div>\r
+                                                       </div>\r
+                                               </div>          \r
+                           </b2b-flyout-content>\r
+                       </b2b-flyout>\r
+            </li> \r
+    <!-- Notification flag -->\r
+            <li class="header__item notification" aria-haspopup="true" class="notification-li">\r
+               <b2b-flyout>\r
+                       <div b2b-flyout-toggler class="notification-div">\r
+                               <div class="notifications-count" ng-hide="notificationCount.count==0" ng-bind="notificationCount.count"></div>          \r
+                                               <div  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>\r
+                           </div>\r
+                           <b2b-flyout-content horizontal-placement="center" vertical-placement="below">\r
+                                               <div class="notification-content" ng-controller="notificationCtrl" >\r
+                                                       <div class="ng-scope">\r
+                                                               <div id="notification" class="notificationBox ">\r
+                                                                       <div align ="right">\r
+                                                                                <a ui-sref="root.notificationHistory" style="font-size: 14px"> View All Recent Notifications </a>\r
+                                                                       </div>\r
+                                                                       <div class="notification-header">\r
+                                                                               <div style="float:left;">\r
+                                                                                       <p class="notification-heading">Notifications</p>\r
+                                                                               </div>\r
+                                                                               <div style="clear:both;"></div>\r
+                                                                       </div>\r
+                                                                       <div ng-show="notifications.length==0">\r
+                                                                               <div class="notification-main">\r
+                                                                                       <div style="height:113px;">\r
+                                                                                               <div align="center" class="icon-information notification-info-icon"></div>\r
+                                                                                       </div>\r
+                                                                               <div>\r
+                                                                               <p class="notification-text">No New Notifications.</p>\r
+                                                                       </div>\r
+                                                                       \r
+                                                               </div>\r
+                                                       </div>\r
+                                                       <div class="notification-main" ng-show="notifications.length>0">\r
+                                                               <ul class="notifications-list">\r
+                                                                       <li class="item" data-id="5" ng-repeat="item in notifications">\r
+                                                                               <div class="icon">\r
+                                                                                       <span class="important" ng-show="item.priority==2"/>\r
+                                                                                       <span class="normal" ng-show="item.priority==1"/>\r
+                                                                               </div>\r
+                                                                               <div class="details">\r
+                                                                                       <span class="title" ng-bind="item.title"></span>\r
+                                                                                       <span class="message-body" ng-bind="item.message"></span>\r
+                                                                                       <!-- <span class="date" ng-bind="item.time" ></span> -->\r
+                                                                                       <mydate>{{item.time | date:'MM/dd/yyyy hh:mm:ss a Z'}}</mydate>                 \r
+                                                                               </div>\r
+                                                                               <button type="button" ng-click="deleteNotification($index)" class="button-default button-dismiss js-dismiss">x</button>\r
+                                                                       </li>\r
+                                                               </ul>\r
+                                                       </div>\r
+                                                       <div class="notification-footer">\r
+                                                               <div class="notification-links">\r
+                                                                       <div style="clear:both;"></div>\r
+                                                               </div>\r
+                                                       </div>\r
+                                               </div>                                  \r
+                           </b2b-flyout-content>\r
+                       </b2b-flyout>\r
+            </li>\r
+            </div>\r
+        </ul>\r
+       </header>\r
+</div>\r