argos/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts

import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { MatomoService } from '@app/core/services/matomo/matomo-service';
import { TranslateService } from '@ngx-translate/core';
import { AppRole } from '../../core/common/enum/app-role';
import { AuthService } from '../../core/services/auth/auth.service';
import { LanguageDialogComponent } from '../language/dialog/language-dialog.component';
import { UserDialogComponent } from '../navbar/user-dialog/user-dialog.component';

declare interface RouteInfo {
	path: string;
	title: string;
	icon: string;
	url?: string;
}
declare interface GroupMenuItem {
	title: string;
	routes: RouteInfo[];
	requiresAuthentication: boolean;
	requiresSpecialPermission?: AppRole;
	requiresAdmin: boolean;
	isGeneral: boolean;
}

export const GENERAL_ROUTES: RouteInfo[] = [
	{ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'home' }
];
export const DMP_ROUTES: RouteInfo[] = [
	{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'library_books' },
	{ path: '/descriptions', title: 'SIDE-BAR.MY-DESCRIPTIONS', icon: 'dns' },
];
export const DATASETS_ROUTES: RouteInfo[] = [
	{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'library_books' },
	{ path: '/explore-descriptions', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'dns' },
];

export const PUBLIC_ROUTES: RouteInfo[] = [
	{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'library_books' },
	{ path: '/explore-descriptions', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'dns' }
];

export const ADMIN_ROUTES: RouteInfo[] = [
	{ path: '/dmp-blueprints', title: 'SIDE-BAR.DMP-BLUEPRINTS', icon: 'library_books' },
	{ path: '/description-templates', title: 'SIDE-BAR.DESCRIPTION-TEMPLATES', icon: 'description' },
	{ path: '/description-template-type', title: 'SIDE-BAR.DESCRIPTION-TEMPLATE-TYPES', icon: 'stack' },
	{ path: '/entity-locks', title: 'SIDE-BAR.ENTITY-LOCKS', icon: 'build' },
	{ path: '/references', title: 'SIDE-BAR.REFERENCES', icon: 'dataset_linked' },
	{ path: '/reference-type', title: 'SIDE-BAR.REFERENCE-TYPES', icon: 'add_link' },
	{ path: '/prefilling-sources', title: 'SIDE-BAR.PREFILLING-SOURCES', icon: 'add_link' },
	{ path: '/tenants', title: 'SIDE-BAR.TENANTS', icon: 'tenancy' },
	{ path: '/users', title: 'SIDE-BAR.USERS', icon: 'people' },
	{ path: '/languages', title: 'SIDE-BAR.LANGUAGES', icon: 'language' },
	{ path: '/supportive-material', title: 'SIDE-BAR.SUPPORTIVE-MATERIAL', icon: 'dataset_linked' },
	{ path: '/notification-templates', title: 'SIDE-BAR.NOTIFICATION-TEMPLATES', icon: 'build' },
	{ path: '/notifications', title: 'SIDE-BAR.NOTIFICATIONS', icon: 'build' },
	{ path: '/index-managment', title: 'SIDE-BAR.MAINTENANCE', icon: 'build' }
];

export const DATASET_TEMPLATE_ROUTES: RouteInfo[] = [
	{ path: '/description-templates', title: 'SIDE-BAR.DESCRIPTION-TEMPLATES', icon: 'description' }
];

export const INFO_ROUTES: RouteInfo[] = [
	{ path: '/co-branding', title: 'SIDE-BAR.CO-BRANDING', icon: 'toll' },
	{ path: '/contact-support', title: 'SIDE-BAR.SUPPORT', icon: 'help' },
	{ path: '/feedback', title: 'SIDE-BAR.FEEDBACK', icon: 'feedback', url: 'https://docs.google.com/forms/d/12RSCrUjdSDp2LZLpjDKOi44cN1fLDD2q1-F66SqZIis/viewform?edit_requested=true' }
];

@Component({
	selector: 'app-sidebar',
	templateUrl: './sidebar.component.html',
	styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
	generalItems: GroupMenuItem;
	dmpItems: GroupMenuItem;
	adminItems: GroupMenuItem;
	datasetTemplateItems: GroupMenuItem;
	//   historyItems: GroupMenuItem;
	datasetItems: GroupMenuItem;
	grantItems: GroupMenuItem;
	publicItems: GroupMenuItem;
	infoItems: GroupMenuItem;
	groupMenuItems: GroupMenuItem[] = [];
	private toggleButton: any;
	currentRoute: string;

	constructor(
		public translate: TranslateService,
		private authentication: AuthService,
		private dialog: MatDialog,
		public router: Router,
		private location: Location,
		private httpClient: HttpClient,
		private matomoService: MatomoService
	) {
	}

	ngOnInit() {
		this.matomoService.trackPageView('Sidebar');
		this.currentRoute = this.router.url;
		this.generalItems = {
			title: 'SIDE-BAR.GENERAL',
			routes: GENERAL_ROUTES,
			requiresAuthentication: false,
			requiresAdmin: false,
			isGeneral: true
		}
		this.groupMenuItems.push(this.generalItems);

		this.dmpItems = {
			title: 'SIDE-BAR.DMP',
			routes: DMP_ROUTES,
			requiresAuthentication: true,
			requiresAdmin: false,
			isGeneral: false
		}
		this.groupMenuItems.push(this.dmpItems);

		this.datasetItems = {
			title: 'SIDE-BAR.DATASETS',
			routes: DATASETS_ROUTES,
			requiresAuthentication: true,
			requiresAdmin: false,
			isGeneral: false
		}
		this.groupMenuItems.push(this.datasetItems);

		this.adminItems = {
			title: 'SIDE-BAR.ADMIN',
			routes: ADMIN_ROUTES,
			requiresAuthentication: true,
			requiresAdmin: true,
			isGeneral: false
		}
		this.groupMenuItems.push(this.adminItems);

		this.datasetTemplateItems = {
			title: 'SIDE-BAR.ADMIN',
			routes: DATASET_TEMPLATE_ROUTES,
			requiresAuthentication: true,
			requiresSpecialPermission: AppRole.DescriptionTemplateEditor,
			requiresAdmin: false,
			isGeneral: false
		}
		this.groupMenuItems.push(this.datasetTemplateItems);

		this.publicItems = {
			title: 'SIDE-BAR.PUBLIC',
			routes: PUBLIC_ROUTES,
			requiresAuthentication: false,
			requiresAdmin: false,
			isGeneral: false
		}
		this.groupMenuItems.push(this.publicItems);

		this.infoItems = {
			title: "",
			routes: INFO_ROUTES,
			requiresAuthentication: false,
			requiresAdmin: false,
			isGeneral: false
		}
		this.groupMenuItems.push(this.infoItems);

		this.router.events.subscribe((event) => this.currentRoute = this.router.url);
	}

	public principalHasAvatar(): boolean {
		return this.authentication.getUserProfileAvatarUrl() != null && this.authentication.getUserProfileAvatarUrl().length > 0;
	}

	public getPrincipalAvatar(): string {
		return this.authentication.getUserProfileAvatarUrl();
	}

	public getDefaultAvatar(): string {
		return 'assets/images/profile-placeholder.png';
	}

	public applyFallbackAvatar(ev: Event) {
		(ev.target as HTMLImageElement).src = this.getDefaultAvatar();
	}

	public isAuthenticated(): boolean {
		return this.authentication.currentAccountIsAuthenticated();
	}

	public isAdmin(): boolean {
		return this.authentication.hasRole(AppRole.Admin);
	}

	public hasPermission(role: AppRole): boolean {
		return this.authentication.hasRole(role);
	}

	isLoginRouteActivated(): boolean {
		return this.location.path().indexOf('/login') > -1;
	}

	public logout(): void {
		this.router.navigate(['/logout']);
	}

	showItem(value: GroupMenuItem) {
		if (this.isAuthenticated()) {
			if (value.requiresAdmin) {
				return this.isAdmin();
			}
			else if (value.requiresSpecialPermission !== undefined) {
				return this.hasPermission(value.requiresSpecialPermission);
			}
			else {
				return value.isGeneral || value.requiresAuthentication;
			}
		}
		else {
			return !value.requiresAuthentication;
		}
	}

	openProfile() {
		const dialogRef = this.dialog.open(UserDialogComponent, {
			hasBackdrop: true,
			autoFocus: false,
			closeOnNavigation: true,
			disableClose: false,
			position: { top: '64px', right: '1em' },
			panelClass: 'custom-userbox'
		});
	}

	public onInvalidUrl(): boolean {
		return this.currentRoute === '/language-editor' || this.currentRoute === '/profile';
	}

	public openLanguageDialog() {
		if (this.dialog.openDialogs.length > 0) {
			this.dialog.closeAll();
		}
		else {
			const dialogRef = this.dialog.open(LanguageDialogComponent, {
				disableClose: true,
				data: {
					isDialog: true
				}
			});
		}
	}

	public openFeedback(groupMenuRoute: RouteInfo) {
		window.open(groupMenuRoute.url, '_blank');
	}

}