2023-02-15 10:53:25 +01:00
|
|
|
import {
|
|
|
|
AfterViewInit, ChangeDetectorRef,
|
|
|
|
Component,
|
|
|
|
ElementRef,
|
|
|
|
Inject,
|
|
|
|
Input, OnChanges,
|
|
|
|
OnDestroy,
|
|
|
|
OnInit,
|
|
|
|
PLATFORM_ID, SimpleChanges,
|
|
|
|
ViewChild
|
|
|
|
} from '@angular/core';
|
2019-12-23 13:52:26 +01:00
|
|
|
import {MenuItem} from "../../../sharedComponents/menu";
|
2023-02-15 10:53:25 +01:00
|
|
|
import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
|
2020-06-11 18:59:00 +02:00
|
|
|
import {DomSanitizer} from "@angular/platform-browser";
|
|
|
|
import {properties} from "../../../../../environments/environment";
|
2020-10-12 14:39:42 +02:00
|
|
|
import {LayoutService} from "./layout.service";
|
2023-02-15 10:53:25 +01:00
|
|
|
import {Subscription} from "rxjs";
|
2019-12-23 13:52:26 +01:00
|
|
|
|
2022-11-03 14:50:51 +01:00
|
|
|
declare var UIkit;
|
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
@Component({
|
|
|
|
selector: 'dashboard-sidebar',
|
|
|
|
templateUrl: 'sideBar.component.html'
|
|
|
|
})
|
2023-02-15 10:53:25 +01:00
|
|
|
export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
|
2019-12-23 13:52:26 +01:00
|
|
|
@Input() items: MenuItem[] = [];
|
|
|
|
@Input() activeItem: string = '';
|
|
|
|
@Input() activeSubItem: string = '';
|
2023-03-01 14:20:00 +01:00
|
|
|
@Input() backItem: MenuItem = null;
|
2022-03-17 12:28:25 +01:00
|
|
|
@Input() queryParamsHandling;
|
2023-11-16 13:36:44 +01:00
|
|
|
@Input() logoURL: string;
|
2023-02-15 10:53:25 +01:00
|
|
|
@ViewChild("nav") nav: ElementRef;
|
|
|
|
@ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
|
2023-10-25 14:16:13 +02:00
|
|
|
public offset: number;
|
2022-11-03 14:50:51 +01:00
|
|
|
public properties = properties;
|
2023-02-15 10:53:25 +01:00
|
|
|
private subscriptions: any[] = [];
|
2023-04-03 11:15:49 +02:00
|
|
|
private init: boolean = false;
|
2020-10-29 15:20:41 +01:00
|
|
|
|
2022-12-23 16:36:35 +01:00
|
|
|
constructor(private route: ActivatedRoute, private router: Router,
|
|
|
|
private sanitizer: DomSanitizer, private layoutService: LayoutService,
|
2023-02-15 10:53:25 +01:00
|
|
|
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() {
|
2023-10-25 14:16:13 +02:00
|
|
|
if (typeof document !== "undefined") {
|
|
|
|
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
|
|
|
|
}
|
2023-02-15 10:53:25 +01:00
|
|
|
this.setActiveMenuItem();
|
|
|
|
}
|
|
|
|
|
2022-11-03 14:50:51 +01:00
|
|
|
ngAfterViewInit() {
|
2023-05-03 15:29:59 +02:00
|
|
|
setTimeout(() => {
|
|
|
|
this.toggle(true);
|
|
|
|
});
|
2020-10-29 15:20:41 +01:00
|
|
|
}
|
2023-02-15 10:53:25 +01:00
|
|
|
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
|
|
if(changes.activeItem || changes.activeSubItem || changes.items) {
|
|
|
|
this.setActiveMenuItem();
|
2023-04-03 11:15:49 +02:00
|
|
|
if(this.init && changes.items) {
|
|
|
|
this.toggle();
|
|
|
|
}
|
2023-02-15 10:53:25 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ngOnDestroy() {
|
|
|
|
this.layoutService.setActiveSidebarItem(null);
|
|
|
|
this.subscriptions.forEach(subscription => {
|
|
|
|
if(subscription instanceof Subscription) {
|
|
|
|
subscription.unsubscribe();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2022-11-03 14:50:51 +01:00
|
|
|
|
2023-04-03 11:15:49 +02:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-12-23 16:36:35 +01:00
|
|
|
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
|
|
|
|
}
|
|
|
|
}
|
2020-10-29 15:20:41 +01:00
|
|
|
|
2022-03-17 12:28:25 +01:00
|
|
|
get activeIndex(): number {
|
2023-02-15 10:53:25 +01:00
|
|
|
return this.items?this.items.findIndex(item => item.isActive):0;
|
2022-03-17 12:28:25 +01:00
|
|
|
}
|
|
|
|
|
2022-11-04 15:35:10 +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;
|
|
|
|
}
|
|
|
|
}
|
2023-02-15 10:53:25 +01:00
|
|
|
|
|
|
|
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();
|
|
|
|
}
|
2022-11-04 15:35:10 +01:00
|
|
|
|
2023-02-15 10:53:25 +01:00
|
|
|
private isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
|
2020-10-29 15:20:41 +01:00
|
|
|
if (this.activeItem || this.activeSubItem) {
|
2022-01-05 15:41:49 +01:00
|
|
|
return (!subItem && this.activeItem === item._id) ||
|
|
|
|
(subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
|
2020-10-29 15:20:41 +01:00
|
|
|
} else {
|
|
|
|
if (subItem) {
|
2022-03-28 10:40:21 +02:00
|
|
|
return MenuItem.isTheActiveMenu(subItem, this.currentRoute);
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|
2022-03-28 10:40:21 +02:00
|
|
|
return MenuItem.isTheActiveMenu(item,this.currentRoute);
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|
|
|
|
}
|
2020-10-29 15:20:41 +01:00
|
|
|
|
2020-10-12 14:39:42 +02:00
|
|
|
public get open() {
|
|
|
|
return this.layoutService.open;
|
|
|
|
}
|
2023-02-15 10:53:25 +01:00
|
|
|
|
|
|
|
public closeOffcanvas() {
|
|
|
|
if(this.sidebar_offcanvas) {
|
|
|
|
UIkit.offcanvas(this.sidebar_offcanvas.nativeElement).hide();
|
|
|
|
}
|
|
|
|
}
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|