diff options
Diffstat (limited to 'portal-FE-common/src/app/layout/components/header')
4 files changed, 458 insertions, 0 deletions
diff --git a/portal-FE-common/src/app/layout/components/header/header.component.html b/portal-FE-common/src/app/layout/components/header/header.component.html new file mode 100644 index 00000000..45b4e9f9 --- /dev/null +++ b/portal-FE-common/src/app/layout/components/header/header.component.html @@ -0,0 +1,130 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + =================================================================== + + Unless otherwise specified, all software contained herein is licensed + under the Apache License, Version 2.0 (the "License"); + you may not use this software 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. + + Unless otherwise specified, all documentation contained herein is licensed + under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + you may not use this documentation except in compliance with the License. + You may obtain a copy of the License at + + https://creativecommons.org/licenses/by/4.0/ + + Unless required by applicable law or agreed to in writing, documentation + 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============================================ + + + --> + +<div style="bottom: tabBottom; display: flex; height: 100%; overflow: hidden"> + <nav class="navbar navbar-expand-lg fixed-top"> + <a class="navbar-brand" href=""> <img src="assets/images/global.logo" style="width:14%"/> ONAP Portal</a> + <div class="header-menu-display"> + <app-header-menu></app-header-menu> + </div> + <button class="navbar-toggler" type="button" (click)="toggleSidebar()"> + <i class="icon ion-md-menu" style="color:white;"></i> + </button> + <div class="collapse navbar-collapse"> + <ul class="navbar-nav ml-auto"> + <app-global-search></app-global-search> + <li class="nav-item dropdown" ngbDropdown> + <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle> + <i class="icon ion-md-bulb"></i> <b class="caret"></b><span class="sr-only"></span> + </a> + <div class="custom-dropdown-item" ngbDropdownMenu> + + <li class="dropdown-divider"></li> + </div> + </li> + <li class="nav-item dropdown" ngbDropdown> + <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle> + <i class="icon ion-md-flag"></i> <b class="caret"></b><span class="sr-only"></span> + </a> + <div class="dropdown-menu-right" ngbDropdownMenu> + <a style="margin-left: 8%;" id="application-role" [routerLink]="['/recentNotifications']" + href="javascript:void(0);"> + {{ 'View All Recent Notifications' }} </a> + <li class="dropdown-divider"></li> +</div> +</li> +<li class="nav-item dropdown" ngbDropdown> + <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle> + <i class="icon ion-md-person"></i> {{firstName}} <b class="caret"></b> + </a> + <div class="dropdown-menu-right" ngbDropdownMenu> +<li class="dropdown-item" style="font-weight: lighter"> + {{firstName}}, {{lastName}} +</li> +<li class="dropdown-item"> + <span class="dropdown-item-name"> {{ 'Email'}}: </span> + <div> + <span class="dropdown-item-value"> + {{loginSnippetEmail}} + </span> + </div> +</li> +<li class="dropdown-item"> + <span class="dropdown-item-name"> {{ 'User Id' }}: </span> + <div> + <span class="dropdown-item-value"> + {{loginSnippetUserid}} + </span> + </div> +</li> +<li class="dropdown-item"> + <span class="dropdown-item-name"> {{ 'Last login' }}: </span> + <div> + <span class="dropdown-item-value"> + {{lastLogin | date:'medium'}} + </span> + </div> +</li> +<li class="custom-display-item"> + <a (click)="getUserApplicationRoles()" href="javascript:void(0);"><span><i class="icon ion-md-add-circle-outline" + [ngClass]="{true: 'icon ion-md-add-circle-outline', false: 'icon ion-md-remove-circle-outline'}[ !displayUserAppRoles]"></i> + {{ 'Applications and Roles' }} </span></a> + <span class="onap-spinner" *ngIf="isLoading"></span> +</li> <br> +<div class="custom-display-item approles" [hidden]="!displayUserAppRoles"> + <div *ngFor="let ua of userapproles ; index as i"> + <div class="reg-userApp-value"> + <span class="dropdown-item-name">{{ua.App}}:</span> + </div> + <div *ngFor="let role of ua.Roles ; index as i" class="reg-userAppRoles-value"> + <span *ngIf="role.indexOf('global_')!=-1" id="required" style="color: Red;" visible="false"> + *</span> <span class="dropdown-item-value">{{role}}</span> + </div> + <br> + </div> +</div> +<hr> +<div id="reg-logout-div" > +<button type="button" class="btn btn-primary" (click)="allAppsLogout()"> + <i class="icon ion-md-log-out"></i> {{ 'Log Out' }} </button></div> +</div> +</li> +</ul> +</div> +</nav> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/layout/components/header/header.component.scss b/portal-FE-common/src/app/layout/components/header/header.component.scss new file mode 100644 index 00000000..65a4be04 --- /dev/null +++ b/portal-FE-common/src/app/layout/components/header/header.component.scss @@ -0,0 +1,84 @@ +/* + * ============LICENSE_START========================================== + * ONAP Portal SDK + * =================================================================== + * Copyright � 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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============================================ + * + * + */ +$topnav-background-color: #222; +:host { + .navbar { + background-color: $topnav-background-color; + .navbar-brand { + color: #fff; + } + .nav-item > a { + color: #999; + &:hover { + color: #fff; + } + } + } + + .dropdown-menu-right.dropdown-menu.show{ + width: 250px; + } + .dropdown-item-name { + font-weight: bold; + } + + .dropdown-item-value { + font-weight: lighter; + } + + .custom-display-item { + display: block; + width: 100%; + padding: 0.25rem 1.5rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; + } + + .custom-display-item.approles { + overflow-y: scroll; + height: 250px; + } + .header-menu-display { + width: 250px; + } +} diff --git a/portal-FE-common/src/app/layout/components/header/header.component.spec.ts b/portal-FE-common/src/app/layout/components/header/header.component.spec.ts new file mode 100644 index 00000000..1bcd2ffb --- /dev/null +++ b/portal-FE-common/src/app/layout/components/header/header.component.spec.ts @@ -0,0 +1,63 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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============================================ + * + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture<HeaderComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/layout/components/header/header.component.ts b/portal-FE-common/src/app/layout/components/header/header.component.ts new file mode 100644 index 00000000..cb6bdd31 --- /dev/null +++ b/portal-FE-common/src/app/layout/components/header/header.component.ts @@ -0,0 +1,181 @@ +/* + * ============LICENSE_START========================================== + * ONAP Portal SDK + * =================================================================== + * Copyright � 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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============================================ + * + * + */ +import { Component, OnInit } from '@angular/core'; +import { Router, NavigationEnd } from '@angular/router'; +import { UserProfileService, MenusService } from 'src/app/shared/services'; +import { CookieService } from 'ngx-cookie-service'; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'] +}) +export class HeaderComponent implements OnInit { + public pushRightClass: string; + firstName: string; + lastName: string; + loginSnippetUserid: any; + lastLogin: number; + loginSnippetEmail: any; + userapproles: any[]; + displayUserAppRoles: any; + isLoading: boolean; + + constructor(public router: Router, private userProfileService: UserProfileService, private menusService: MenusService, private cookieService: CookieService) { + + this.router.events.subscribe(val => { + if ( + val instanceof NavigationEnd && + window.innerWidth <= 992 && + this.isToggled() + ) { + this.toggleSidebar(); + } + }); + } + + ngOnInit() { + this.pushRightClass = 'push-right'; + this.getUserInformation(); + } + + getUserInformation() { + this.userProfileService.getFunctionalMenuStaticInfo().toPromise().then((res: any) => { + if (res == null || res.firstName == null || res.firstName == '' || res.lastName == null || res.lastName == '') { + // $log.info('HeaderCtrl: failed to get all required data, trying user profile'); + this.userProfileService.getUserProfile().toPromise().then((profile: any) => { + this.firstName = profile.firstName; + this.lastName = profile.lastName; + }, (err) => { + // $log.error('Header Controller:: getUserProfile() failed: ' + err); + }); + } else { + this.firstName = res.firstName; + this.lastName = res.lastName; + this.loginSnippetEmail = res.email; + this.loginSnippetUserid = res.userId; + this.lastLogin = Date.parse(res.last_login); + } + sessionStorage.userId = res.userId; + this.menusService.getFunctionalMenuForUser().toPromise().then((jsonHeaderMenu: any) => { + // $scope.menuItems = unflatten(jsonHeaderMenu); + // $scope.megaMenuDataObject = $scope.menuItems; + }, (err) => { + // $log.error('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err); + }); + + }, (err) => { + // $log.error('HeaderCtrl::getFunctionalMenuStaticInfo failed: ' + err); + }) + } + + // unflatten = function( array, parent, tree ){ + + // tree = typeof tree !== 'undefined' ? tree : []; + // parent = typeof parent !== 'undefined' ? parent : { menuId: null }; + // var children = _.filter( array, function(child){ return child.parentMenuId == parent.menuId; }); + + // if( !_.isEmpty( children ) ){ + // if( parent.menuId === null ){ + // tree = children; + // }else{ + // parent['children'] = children + // } + // _.each( children, function( child ){ unflatten( array, child ) } ); + // } + + // return tree; + // } + + getUserApplicationRoles() { + this.userapproles = []; + if (this.displayUserAppRoles) { + this.displayUserAppRoles = false; + } else { + this.displayUserAppRoles = true; + this.isLoading = true; + this.userProfileService.getUserAppRoles(this.loginSnippetUserid) + .subscribe((res: any) => { + this.isLoading = false; + for (var i = 0; i < res.length; i++) { + var userapprole = { + App: res[i].appName, + Roles: res[i].roleNames, + }; + this.userapproles.push(userapprole); + } + }, (err) => { + this.isLoading = false; + }); + } + } + + allAppsLogout() { + this.firstName=""; + this.lastName=""; + this.displayUserAppRoles=false; + var cookieTabs = this.cookieService.get("visInVisCookieTabs").toString; + if(cookieTabs!=null){ + for(var t in cookieTabs){ + + var url = cookieTabs[t].content; + if(url != "") { + this.menusService.logout(url); + } + } + } + // wait for individual applications to log out before the portal logout + setTimeout(function() { + window.location.href = "logout.htm"; + }, 2000); + } + + isToggled(): boolean { + const dom: Element = document.querySelector('body'); + return dom.classList.contains(this.pushRightClass); + } + + toggleSidebar() { + const dom: any = document.querySelector('body'); + dom.classList.toggle(this.pushRightClass); + } + + onLoggedout() { + localStorage.removeItem('isLoggedin'); + } +} |