2022-12-23 16:36:35 +01:00
|
|
|
import {AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild} from '@angular/core';
|
2019-12-23 13:52:26 +01:00
|
|
|
import {MenuItem} from "../../../sharedComponents/menu";
|
2022-11-03 14:50:51 +01:00
|
|
|
import {ActivatedRoute, 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";
|
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'
|
|
|
|
})
|
2022-11-03 14:50:51 +01:00
|
|
|
export class SideBarComponent implements AfterViewInit {
|
2019-12-23 13:52:26 +01:00
|
|
|
@Input() items: MenuItem[] = [];
|
|
|
|
@Input() activeItem: string = '';
|
|
|
|
@Input() activeSubItem: string = '';
|
2020-10-29 15:20:41 +01:00
|
|
|
@Input() specialMenuItem: MenuItem = null;
|
2022-03-17 12:28:25 +01:00
|
|
|
@Input() queryParamsHandling;
|
2022-11-03 14:50:51 +01:00
|
|
|
@ViewChild("nav") nav: ElementRef
|
|
|
|
public properties = properties;
|
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,
|
|
|
|
@Inject(PLATFORM_ID) private platformId) {}
|
2020-10-29 15:20:41 +01:00
|
|
|
|
2022-11-03 14:50:51 +01:00
|
|
|
ngAfterViewInit() {
|
2022-12-23 16:36:35 +01:00
|
|
|
if(this.nav && typeof UIkit !== "undefined") {
|
2022-11-07 15:55:27 +01:00
|
|
|
setTimeout(() => {
|
2022-12-20 16:39:51 +01:00
|
|
|
if(this.items[this.activeIndex]?.items?.length > 0) {
|
2022-12-10 00:56:56 +01:00
|
|
|
UIkit.nav(this.nav.nativeElement).toggle(this.activeIndex, true);
|
|
|
|
}
|
2022-11-07 15:55:27 +01:00
|
|
|
});
|
|
|
|
}
|
2020-10-29 15:20:41 +01:00
|
|
|
}
|
2022-11-03 14:50:51 +01:00
|
|
|
|
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 {
|
|
|
|
return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0;
|
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-23 13:52:26 +01:00
|
|
|
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-07-13 11:15:00 +02:00
|
|
|
isTheActiveUrl(menuItemURL): boolean {
|
|
|
|
return (menuItemURL == this.router.url.split('?')[0])
|
|
|
|
}
|
2020-10-29 15:20:41 +01:00
|
|
|
|
|
|
|
satinizeHTML(html) {
|
2020-06-11 18:59:00 +02:00
|
|
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
|
|
}
|
2020-10-29 15:20:41 +01:00
|
|
|
|
2020-10-12 14:39:42 +02:00
|
|
|
public get isSmallScreen() {
|
|
|
|
return this.layoutService.isSmallScreen;
|
|
|
|
}
|
2020-10-29 15:20:41 +01:00
|
|
|
|
2020-10-12 14:39:42 +02:00
|
|
|
public get open() {
|
|
|
|
return this.layoutService.open;
|
|
|
|
}
|
2019-12-23 13:52:26 +01:00
|
|
|
}
|