2019-12-11 15:51:03 +01:00
|
|
|
import { Location } from '@angular/common';
|
2020-08-24 09:56:49 +02:00
|
|
|
import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
|
2024-01-09 14:52:07 +01:00
|
|
|
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
2023-10-06 10:10:53 +02:00
|
|
|
import { MatMenuTrigger } from '@angular/material/menu';
|
2019-04-24 11:26:53 +02:00
|
|
|
import { Router } from '@angular/router';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { AppRole } from '@app/core/common/enum/app-role';
|
2023-12-29 16:04:16 +01:00
|
|
|
import { User } from '@app/core/model/user/user';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { AuthService } from '@app/core/services/auth/auth.service';
|
2023-02-11 13:38:13 +01:00
|
|
|
import { LanguageService } from '@app/core/services/language/language.service';
|
|
|
|
import { MatomoService } from '@app/core/services/matomo/matomo-service';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { ProgressIndicationService } from '@app/core/services/progress-indication/progress-indication-service';
|
2023-02-11 13:38:13 +01:00
|
|
|
import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { BaseComponent } from '@common/base/base.component';
|
2019-04-30 17:59:19 +02:00
|
|
|
import { takeUntil } from 'rxjs/operators';
|
2023-12-28 16:18:49 +01:00
|
|
|
import { StartNewDmpDialogComponent } from '../dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component';
|
2023-02-11 13:38:13 +01:00
|
|
|
import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
|
2023-12-29 16:04:16 +01:00
|
|
|
import { UserDialogComponent } from './user-dialog/user-dialog.component';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { DATASETS_ROUTES, DMP_ROUTES, GENERAL_ROUTES } from '../sidebar/sidebar.component';
|
2024-01-09 14:52:07 +01:00
|
|
|
import { InAppNotificationListingDialogComponent } from '../inapp-notification/listing-dialog/inapp-notification-listing-dialog.component';
|
|
|
|
import { InAppNotificationService } from '@app/core/services/inapp-notification/inapp-notification.service';
|
|
|
|
import { timer } from 'rxjs';
|
|
|
|
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
|
2023-12-29 16:04:16 +01:00
|
|
|
|
2019-04-24 11:26:53 +02:00
|
|
|
@Component({
|
2019-04-30 17:59:19 +02:00
|
|
|
selector: 'app-navbar',
|
|
|
|
templateUrl: './navbar.component.html',
|
|
|
|
styleUrls: ['./navbar.component.css', './navbar.component.scss']
|
2019-04-24 11:26:53 +02:00
|
|
|
})
|
2019-04-30 17:59:19 +02:00
|
|
|
export class NavbarComponent extends BaseComponent implements OnInit {
|
|
|
|
progressIndication = false;
|
|
|
|
private listTitles: any[];
|
|
|
|
location: Location;
|
|
|
|
mobile_menu_visible: any = 0;
|
|
|
|
private toggleButton: any;
|
|
|
|
private sidebarVisible: boolean;
|
2023-02-11 13:38:13 +01:00
|
|
|
languages = [];
|
2020-01-27 17:38:24 +01:00
|
|
|
currentRoute: string;
|
2022-10-11 17:52:08 +02:00
|
|
|
selectedLanguage: string;
|
2023-12-29 16:04:16 +01:00
|
|
|
private user: User;
|
2024-01-09 14:52:07 +01:00
|
|
|
inAppNotificationDialog: MatDialogRef<InAppNotificationListingDialogComponent> = null;
|
|
|
|
inAppNotificationCount = 0;
|
2020-06-26 11:08:51 +02:00
|
|
|
@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
|
2021-09-24 20:52:14 +02:00
|
|
|
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
|
2019-04-30 17:59:19 +02:00
|
|
|
|
|
|
|
constructor(location: Location,
|
|
|
|
private element: ElementRef,
|
|
|
|
private router: Router,
|
2024-01-09 14:52:07 +01:00
|
|
|
public authentication: AuthService,
|
2019-04-30 17:59:19 +02:00
|
|
|
private dialog: MatDialog,
|
2020-01-23 17:35:11 +01:00
|
|
|
private progressIndicationService: ProgressIndicationService,
|
2020-07-14 11:47:57 +02:00
|
|
|
private languageService: LanguageService,
|
2021-03-05 10:05:09 +01:00
|
|
|
private matomoService: MatomoService,
|
2022-10-11 17:52:08 +02:00
|
|
|
private sidenavService: SideNavService,
|
2024-01-09 14:52:07 +01:00
|
|
|
private inappNotificationService: InAppNotificationService,
|
|
|
|
private configurationService: ConfigurationService
|
2019-04-30 17:59:19 +02:00
|
|
|
) {
|
|
|
|
super();
|
|
|
|
this.location = location;
|
|
|
|
this.sidebarVisible = false;
|
2023-11-29 14:26:40 +01:00
|
|
|
this.languages = this.languageService.getAvailableLanguagesCodes();
|
|
|
|
this.selectedLanguage = this.languageService.getDefaultLanguagesCode();
|
2019-04-30 17:59:19 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
ngOnInit() {
|
2020-12-14 18:28:13 +01:00
|
|
|
this.matomoService.trackPageView('Navbar');
|
2020-01-27 17:38:24 +01:00
|
|
|
this.currentRoute = this.router.url;
|
2019-04-30 17:59:19 +02:00
|
|
|
this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle);
|
|
|
|
this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle));
|
|
|
|
// this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle));
|
2019-06-18 10:40:12 +02:00
|
|
|
this.listTitles.push(DATASETS_ROUTES.filter(listTitle => listTitle));
|
2020-06-26 11:08:51 +02:00
|
|
|
// const navbar: HTMLElement = this.element.nativeElement;
|
|
|
|
// this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
|
|
|
|
// this.router.events.subscribe((event) => {
|
|
|
|
// this.sidebarClose();
|
|
|
|
// var $layer: any = document.getElementsByClassName('close-layer')[0];
|
|
|
|
// this.currentRoute = this.router.url;
|
|
|
|
// if ($layer) {
|
|
|
|
// $layer.remove();
|
|
|
|
// this.mobile_menu_visible = 0;
|
|
|
|
// }
|
|
|
|
// });
|
2019-04-30 17:59:19 +02:00
|
|
|
|
|
|
|
this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
|
|
|
|
setTimeout(() => { this.progressIndication = x; });
|
|
|
|
});
|
2024-01-09 14:52:07 +01:00
|
|
|
timer(2000, this.configurationService.inAppNotificationsCountInterval * 1000)
|
|
|
|
.pipe(takeUntil(this._destroyed))
|
|
|
|
.subscribe(x => {
|
|
|
|
this.countUnreadInappNotifications();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
private countUnreadInappNotifications() {
|
|
|
|
if (this.isAuthenticated()) {
|
|
|
|
this.inappNotificationService.countUnread()
|
|
|
|
.pipe(takeUntil(this._destroyed))
|
|
|
|
.subscribe(
|
|
|
|
data => {
|
|
|
|
this.inAppNotificationCount = data;
|
|
|
|
},
|
|
|
|
);
|
|
|
|
}
|
2019-04-24 11:26:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
public isAuthenticated(): boolean {
|
2023-10-11 16:53:12 +02:00
|
|
|
return this.authentication.currentAccountIsAuthenticated();
|
2019-04-24 11:26:53 +02:00
|
|
|
}
|
|
|
|
|
2020-01-28 17:31:21 +01:00
|
|
|
public onInvalidUrl(): boolean {
|
|
|
|
return this.currentRoute === '/language-editor' || this.currentRoute === '/profile';
|
2020-01-27 17:38:24 +01:00
|
|
|
}
|
|
|
|
|
2020-08-24 09:56:49 +02:00
|
|
|
openMyMenu() {
|
|
|
|
this.trigger.openMenu();
|
2020-11-06 10:00:19 +01:00
|
|
|
}
|
2020-08-24 09:56:49 +02:00
|
|
|
|
|
|
|
closeMyMenu() {
|
|
|
|
this.trigger.closeMenu();
|
2020-11-06 10:00:19 +01:00
|
|
|
}
|
2020-08-24 09:56:49 +02:00
|
|
|
|
2019-04-30 17:59:19 +02:00
|
|
|
sidebarOpen() {
|
|
|
|
const toggleButton = this.toggleButton;
|
|
|
|
const body = document.getElementsByTagName('body')[0];
|
|
|
|
setTimeout(function () {
|
|
|
|
toggleButton.classList.add('toggled');
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
body.classList.add('nav-open');
|
|
|
|
|
|
|
|
this.sidebarVisible = true;
|
|
|
|
};
|
|
|
|
sidebarClose() {
|
|
|
|
const body = document.getElementsByTagName('body')[0];
|
|
|
|
this.toggleButton.classList.remove('toggled');
|
|
|
|
this.sidebarVisible = false;
|
|
|
|
body.classList.remove('nav-open');
|
|
|
|
};
|
|
|
|
sidebarToggle() {
|
|
|
|
// const toggleButton = this.toggleButton;
|
|
|
|
// const body = document.getElementsByTagName('body')[0];
|
|
|
|
var $toggle = document.getElementsByClassName('navbar-toggler')[0];
|
|
|
|
|
|
|
|
if (this.sidebarVisible === false) {
|
|
|
|
this.sidebarOpen();
|
|
|
|
} else {
|
|
|
|
this.sidebarClose();
|
|
|
|
}
|
|
|
|
const body = document.getElementsByTagName('body')[0];
|
|
|
|
|
|
|
|
if (this.mobile_menu_visible == 1) {
|
|
|
|
// $('html').removeClass('nav-open');
|
|
|
|
body.classList.remove('nav-open');
|
|
|
|
if ($layer) {
|
|
|
|
$layer.remove();
|
|
|
|
}
|
|
|
|
setTimeout(function () {
|
|
|
|
$toggle.classList.remove('toggled');
|
|
|
|
}, 400);
|
|
|
|
|
|
|
|
this.mobile_menu_visible = 0;
|
|
|
|
} else {
|
|
|
|
setTimeout(function () {
|
|
|
|
$toggle.classList.add('toggled');
|
|
|
|
}, 430);
|
|
|
|
|
|
|
|
var $layer = document.createElement('div');
|
|
|
|
$layer.setAttribute('class', 'close-layer');
|
|
|
|
|
|
|
|
|
|
|
|
if (body.querySelectorAll('.main-panel')) {
|
|
|
|
document.getElementsByClassName('main-panel')[0].appendChild($layer);
|
|
|
|
} else if (body.classList.contains('off-canvas-sidebar')) {
|
|
|
|
document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
|
|
|
|
}
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
$layer.classList.add('visible');
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
$layer.onclick = function () { //asign a function
|
|
|
|
body.classList.remove('nav-open');
|
|
|
|
this.mobile_menu_visible = 0;
|
|
|
|
$layer.classList.remove('visible');
|
|
|
|
setTimeout(function () {
|
|
|
|
$layer.remove();
|
|
|
|
$toggle.classList.remove('toggled');
|
|
|
|
}, 400);
|
|
|
|
}.bind(this);
|
|
|
|
|
|
|
|
body.classList.add('nav-open');
|
|
|
|
this.mobile_menu_visible = 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
getTitle() {
|
|
|
|
var titlee = this.location.prepareExternalUrl(this.location.path());
|
|
|
|
if (titlee.charAt(0) === '#') {
|
|
|
|
titlee = titlee.slice(2);
|
|
|
|
}
|
|
|
|
titlee = titlee.split('/').pop();
|
|
|
|
|
|
|
|
for (var item = 0; item < this.listTitles.length; item++) {
|
|
|
|
if (this.listTitles[item].path === titlee) {
|
|
|
|
return this.listTitles[item].title;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return 'Dashboard';
|
2019-04-24 11:26:53 +02:00
|
|
|
}
|
|
|
|
|
2020-02-18 12:14:19 +01:00
|
|
|
public getCurrentLanguage(): any {
|
|
|
|
const lang = this.languages.find(lang => lang.value === this.languageService.getCurrentLanguage());
|
|
|
|
return lang;
|
|
|
|
}
|
|
|
|
|
|
|
|
public getPrincipalName(): string {
|
2023-10-11 16:53:12 +02:00
|
|
|
return this.authentication.getPrincipalName();
|
2020-02-18 12:14:19 +01:00
|
|
|
}
|
|
|
|
|
2019-04-24 11:26:53 +02:00
|
|
|
public principalHasAvatar(): boolean {
|
2023-10-11 16:53:12 +02:00
|
|
|
return this.authentication.getUserProfileAvatarUrl() != null && this.authentication.getUserProfileAvatarUrl().length > 0;
|
2019-04-24 11:26:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
public getPrincipalAvatar(): string {
|
2023-10-11 16:53:12 +02:00
|
|
|
return this.authentication.getUserProfileAvatarUrl();
|
2019-04-24 11:26:53 +02:00
|
|
|
}
|
|
|
|
|
2019-11-22 17:28:20 +01:00
|
|
|
public getDefaultAvatar(): string {
|
|
|
|
return 'assets/images/profile-placeholder.png';
|
|
|
|
}
|
|
|
|
|
2020-02-17 16:39:33 +01:00
|
|
|
public applyFallbackAvatar(ev: Event) {
|
|
|
|
(ev.target as HTMLImageElement).src = this.getDefaultAvatar();
|
|
|
|
}
|
|
|
|
|
2019-04-25 11:03:22 +02:00
|
|
|
public isAdmin(): boolean {
|
2023-10-11 16:53:12 +02:00
|
|
|
return this.authentication.hasRole(AppRole.Admin);
|
2019-04-25 11:03:22 +02:00
|
|
|
}
|
|
|
|
|
2019-04-24 11:26:53 +02:00
|
|
|
openProfile() {
|
|
|
|
const dialogRef = this.dialog.open(UserDialogComponent, {
|
|
|
|
hasBackdrop: true,
|
|
|
|
autoFocus: false,
|
|
|
|
closeOnNavigation: true,
|
|
|
|
disableClose: false,
|
2020-08-26 15:15:57 +02:00
|
|
|
position: { top: '64px', right: '1em' },
|
|
|
|
panelClass: 'custom-userbox'
|
2019-04-24 11:26:53 +02:00
|
|
|
});
|
|
|
|
}
|
2020-06-26 11:08:51 +02:00
|
|
|
|
|
|
|
openFaqDialog() {
|
|
|
|
if (this.dialog.openDialogs.length > 0) {
|
|
|
|
this.dialog.closeAll();
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
const dialogRef = this.dialog.open(FaqDialogComponent, {
|
|
|
|
disableClose: true,
|
|
|
|
data: {
|
|
|
|
isDialog: true
|
2023-04-26 16:25:59 +02:00
|
|
|
},
|
|
|
|
width: '100%'
|
2020-06-26 11:08:51 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
getLanguage(selectedLanguage: string) {
|
|
|
|
this.selectedLanguage = selectedLanguage;
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleNavbar(event) {
|
|
|
|
document.getElementById('hamburger').classList.toggle("change");
|
|
|
|
}
|
|
|
|
|
|
|
|
sidebarToggleOutput(event) {
|
|
|
|
this.sidebarToggled.emit(event);
|
|
|
|
}
|
2020-07-09 12:45:19 +02:00
|
|
|
|
2023-02-11 13:38:13 +01:00
|
|
|
toggleMyNav(event) {
|
2021-03-05 10:05:09 +01:00
|
|
|
this.sidenavService.toggle();
|
|
|
|
}
|
|
|
|
|
2020-07-09 12:45:19 +02:00
|
|
|
openNewDmpDialog() {
|
|
|
|
if (this.dialog.openDialogs.length > 0) {
|
|
|
|
this.dialog.closeAll();
|
2020-08-03 10:33:12 +02:00
|
|
|
} else if (!this.isAuthenticated()) {
|
|
|
|
this.router.navigate(['/login']);
|
|
|
|
} else {
|
2020-07-09 12:45:19 +02:00
|
|
|
const dialogRef = this.dialog.open(StartNewDmpDialogComponent, {
|
2020-07-28 15:24:14 +02:00
|
|
|
disableClose: false,
|
2020-07-09 12:45:19 +02:00
|
|
|
data: {
|
|
|
|
isDialog: true
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-09 10:34:24 +01:00
|
|
|
logout() {
|
2023-10-11 16:53:12 +02:00
|
|
|
this.router.navigate(['/logout']);
|
2020-11-09 10:34:24 +01:00
|
|
|
}
|
|
|
|
|
2024-01-09 14:52:07 +01:00
|
|
|
toggleInAppNotifications() {
|
|
|
|
if (this.inAppNotificationDialog != null) {
|
|
|
|
this.inAppNotificationDialog.close();
|
|
|
|
} else {
|
|
|
|
this.countUnreadInappNotifications();
|
|
|
|
this.inAppNotificationDialog = this.dialog.open(InAppNotificationListingDialogComponent, {
|
|
|
|
position: {
|
|
|
|
top: '64px', right: '0px'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.inAppNotificationDialog.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
|
|
|
|
this.countUnreadInappNotifications();
|
|
|
|
this.inAppNotificationDialog = null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-24 11:26:53 +02:00
|
|
|
}
|