src/app/layout/navigation/navigation.component.ts
Navigation component
| selector | app-navigation |
| templateUrl | ./navigation.component.html |
Properties |
Methods |
HostListeners |
constructor(authService: AuthService, sharedAboutService: SharedAboutService, renderer: Renderer2)
|
||||||||||||||||
|
Contructor
Parameters :
|
| window:resize |
Arguments : '$event'
|
window:resize(event: )
|
| ngDoCheck |
ngDoCheck()
|
|
Do check
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Will cleanup any {@link Subscription}s to prevent memory leaks.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Init
Returns :
void
|
| toggle |
toggle()
|
|
Toggle sidebar
Returns :
void
|
| update |
update()
|
|
Update states
Returns :
void
|
| featureInfoLoaded |
featureInfoLoaded:
|
Default value : false
|
|
Is the feature information (required for role-based visibility of features) available? |
| isCollapsed |
isCollapsed:
|
Default value : true
|
|
Collapsed state |
| isSm |
isSm:
|
Default value : false
|
|
Small screen size |
| Private ngUnsubscribe$ |
ngUnsubscribe$:
|
Type : Subject<any>
|
|
Unubscribe |
| securityInfo |
securityInfo:
|
Type : SecurityInfo
|
|
Security Info |
import { Component, DoCheck, HostListener, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { SecurityInfo } from '../../shared/model/about/security-info.model';
import { AuthService } from '../../auth/auth.service';
import { SharedAboutService } from 'src/app/shared/services/shared-about.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
/**
* Navigation component
*
* @author Gunnar Hillert
* @author Damien Vitrac
*/
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
})
export class NavigationComponent implements DoCheck, OnInit, OnDestroy {
/**
* Unubscribe
*/
private ngUnsubscribe$: Subject<any> = new Subject();
/**
* Security Info
*/
securityInfo: SecurityInfo;
/**
* Is the feature information (required for role-based visibility of features)
* available?
*/
featureInfoLoaded = false;
/**
* Collapsed state
* @type {boolean}
*/
isCollapsed = true;
/**
* Small screen size
* @type {boolean}
*/
isSm = false;
/**
* Contructor
*
* @param {AuthService} authService
* @param {SharedAboutService} sharedAboutService
* @param {Renderer2} renderer
*/
constructor(private authService: AuthService,
private sharedAboutService: SharedAboutService,
private renderer: Renderer2) {
this.securityInfo = authService.securityInfo;
}
/**
* Will cleanup any {@link Subscription}s to prevent
* memory leaks.
*/
ngOnDestroy() {
this.ngUnsubscribe$.next();
this.ngUnsubscribe$.complete();
}
/**
* Init
*/
ngOnInit() {
if (this.isCollapsed) {
this.renderer.addClass(document.body, 'sidebar-fixed');
}
this.sharedAboutService.featureInfoSubject
.pipe(takeUntil(this.ngUnsubscribe$))
.subscribe(event => {
if (event) {
this.featureInfoLoaded = true;
}
});
}
/**
* Do check
*/
ngDoCheck() {
this.securityInfo = this.authService.securityInfo;
}
/**
* Listener on Resize Window
*/
@HostListener('window:resize', ['$event'])
onResize(event) {
this.update();
}
/**
* Update states
*/
update() {
this.isSm = document.documentElement.clientWidth < 900;
if (this.isSm && this.isCollapsed) {
this.toggle();
}
}
/**
* Toggle sidebar
*/
toggle() {
if (this.isCollapsed) {
this.renderer.removeClass(document.body, 'sidebar-fixed');
this.renderer.removeClass(document.body, 'sidebar-open');
} else {
this.renderer.addClass(document.body, 'sidebar-fixed');
}
this.isCollapsed = !this.isCollapsed;
}
}
<div *ngIf="featureInfoLoaded">
<app-navigation-search [force]="!isCollapsed" [dataflowAppRoles]="['ROLE_VIEW']"></app-navigation-search>
<div class="sidebar-user" *ngIf="securityInfo.isAuthenticationEnabled" [dataflowAppRoles]="['ROLE_VIEW']">
<div dropdown class="sidebar-item dropdown" *ngIf="securityInfo.isAuthenticated">
<a class="dropdown-toggle" dropdownToggle>
<i class="sidebar-fa fa fa-user"></i>
<span class="text">{{ securityInfo.username | truncate: 20 }}</span>
<span class="fa fa-chevron-right"></span>
</a>
<ul class="dropdown-menu" *dropdownMenu="">
<li>
<a routerLink="logout">Logout</a>
</li>
</ul>
</div>
</div>
<div class="sidebar-items" [dataflowAppRoles]="['ROLE_VIEW']">
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']">
<a routerLink="apps">
<i class="sidebar-fa fa fa-tags"></i>
<span class="text">Apps</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="streamsEnabled">
<a routerLink="runtime/apps">
<i class="sidebar-fa fa fa-terminal"></i>
<span class="text">Runtime</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="streamsEnabled">
<a routerLink="streams">
<i class="sidebar-fa fa fa-cloud"></i>
<span class="text">Streams</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="tasksEnabled">
<a routerLink="tasks">
<i class="sidebar-fa fa fa-tasks"></i>
<span class="text">Tasks</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="tasksEnabled">
<a routerLink="jobs">
<i class="sidebar-fa fa fa-clock-o"></i>
<span class="text">Jobs</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']">
<a routerLink="audit-records">
<i class="sidebar-fa fa fa-list-alt"></i>
<span class="text">Audit Records</span>
</a>
</div>
</div>
<div class="sidebar-items sidebar-items-bottom" [dataflowAppRoles]="['ROLE_VIEW']">
<div class="sidebar-item" routerLinkActive="active">
<a routerLink="about">
<i class="sidebar-fa fa fa-leaf"></i>
<span class="text">About & Docs</span>
</a>
</div>
<div class="sidebar-divider"></div>
<div class="sidebar-item sidebar-item-collapser" *ngIf="!isSm">
<a (click)="toggle()">
<i [class.fa-rotate-180]="!isCollapsed" class="sidebar-fa fa fa-chevron-left"></i>
</a>
</div>
</div>
</div>
<div *ngIf="!featureInfoLoaded">
<div style="padding: 10px 15px;">
<app-loader *ngIf="!isSm && isCollapsed"></app-loader>
<app-loader *ngIf="isSm || !isCollapsed" [text]="''"></app-loader>
</div>
</div>