openaire-library/dashboard/sharedComponents/sidebar/sideBar.component.ts

172 lines
4.9 KiB
TypeScript
Raw Normal View History

import {
AfterViewInit, ChangeDetectorRef,
Component,
ElementRef,
Inject,
Input, OnChanges,
OnDestroy,
OnInit,
PLATFORM_ID, SimpleChanges,
ViewChild
} from '@angular/core';
import {MenuItem} from "../../../sharedComponents/menu";
import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
import {DomSanitizer} from "@angular/platform-browser";
import {properties} from "../../../../../environments/environment";
import {LayoutService} from "./layout.service";
import {Subscription} from "rxjs";
declare var UIkit;
@Component({
selector: 'dashboard-sidebar',
templateUrl: 'sideBar.component.html'
})
export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
@Input() items: MenuItem[] = [];
@Input() activeItem: string = '';
@Input() activeSubItem: string = '';
@Input() backItem: MenuItem = null;
2022-03-17 12:28:25 +01:00
@Input() queryParamsHandling;
@Input() logoURL: string;
@ViewChild("nav") nav: ElementRef;
@ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
public offset: number;
public properties = properties;
private subscriptions: any[] = [];
private init: boolean = false;
constructor(private route: ActivatedRoute, private router: Router,
private sanitizer: DomSanitizer, private layoutService: LayoutService,
private cdr: ChangeDetectorRef, @Inject(PLATFORM_ID) private platformId) {
this.subscriptions.push(this.router.events.subscribe(event => {
if(event instanceof NavigationEnd && (!this.activeItem && !this.activeSubItem)) {
this.setActiveMenuItem();
}
}));
}
ngOnInit() {
if (typeof document !== "undefined") {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
}
this.setActiveMenuItem();
}
ngAfterViewInit() {
setTimeout(() => {
this.toggle(true);
});
}
ngOnChanges(changes: SimpleChanges) {
if(changes.activeItem || changes.activeSubItem || changes.items) {
this.setActiveMenuItem();
if(this.init && changes.items) {
this.toggle();
}
}
}
ngOnDestroy() {
this.layoutService.setActiveSidebarItem(null);
this.subscriptions.forEach(subscription => {
if(subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
toggle(init: boolean = false) {
this.init = this.init || init;
if(this.nav && typeof UIkit !== "undefined") {
setTimeout(() => {
if(this.items[this.activeIndex]?.items?.length > 0) {
UIkit.nav(this.nav.nativeElement).toggle(this.activeIndex, true);
}
});
}
}
get isBrowser() {
return this.platformId === 'browser';
}
2022-03-28 10:40:21 +02:00
get currentRoute() {
return {
route: this.router.url.split('?')[0].split('#')[0],
fragment: this.route.snapshot.fragment
}
}
2022-03-17 12:28:25 +01:00
get activeIndex(): number {
return this.items?this.items.findIndex(item => item.isActive):0;
2022-03-17 12:28:25 +01:00
}
getItemRoute(item: MenuItem) {
if(this.activeSubItem && item.items.length > 0) {
let subItem = item.items.find(subItem => subItem._id === this.activeSubItem);
return subItem?subItem.route:(item.route?item.route:null);
} else {
return item.route?item.route:null;
}
}
setActiveMenuItem() {
this.items.forEach(item => {
item.isActive = this.isTheActiveMenuItem(item);
if(item.isActive) {
if(item.items.length > 0) {
item.items.forEach(subItem => {
subItem.isActive = this.isTheActiveMenuItem(item, subItem);
if(subItem.isActive) {
this.layoutService.setActiveSidebarItem({
name: item.title,
icon: item.icon,
subItem: {
name: subItem.title
}
});
}
});
} else {
this.layoutService.setActiveSidebarItem({
name: item.title,
icon: item.icon
});
}
} else {
item.items.forEach(subItem => {
subItem.isActive = false;
});
}
});
if(!this.items.find(item => item.isActive)) {
this.layoutService.setActiveSidebarItem(null);
}
this.cdr.detectChanges();
}
private isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
if (this.activeItem || this.activeSubItem) {
return (!subItem && this.activeItem === item._id) ||
(subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
} else {
if (subItem) {
2022-03-28 10:40:21 +02:00
return MenuItem.isTheActiveMenu(subItem, this.currentRoute);
}
2022-03-28 10:40:21 +02:00
return MenuItem.isTheActiveMenu(item,this.currentRoute);
}
}
public get open() {
return this.layoutService.open;
}
public closeOffcanvas() {
if(this.sidebar_offcanvas) {
UIkit.offcanvas(this.sidebar_offcanvas.nativeElement).hide();
}
}
}