2020-06-23 14:10:17 +02:00
|
|
|
import { Subscription } from 'rxjs'
|
2020-08-10 09:42:50 +02:00
|
|
|
import { filter } from 'rxjs/operators'
|
2020-06-23 14:10:17 +02:00
|
|
|
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
|
2018-12-18 09:31:09 +01:00
|
|
|
import { NavigationEnd, Router } from '@angular/router'
|
2020-06-23 14:10:17 +02:00
|
|
|
import { MenuService, ScreenService } from '@app/core'
|
2020-11-17 14:04:44 +01:00
|
|
|
import { scrollToTop } from '@app/helpers'
|
2020-06-23 14:10:17 +02:00
|
|
|
import { GlobalIconName } from '@app/shared/shared-icons'
|
2020-04-30 19:23:54 +02:00
|
|
|
import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
2018-12-05 14:21:10 +01:00
|
|
|
|
|
|
|
export type TopMenuDropdownParam = {
|
|
|
|
label: string
|
|
|
|
routerLink?: string
|
2020-07-28 15:18:38 +02:00
|
|
|
isDisplayed?: () => boolean // Default: () => true
|
2018-12-05 14:21:10 +01:00
|
|
|
|
|
|
|
children?: {
|
|
|
|
label: string
|
|
|
|
routerLink: string
|
2019-03-20 13:53:51 +01:00
|
|
|
iconName?: GlobalIconName
|
2020-07-28 15:18:38 +02:00
|
|
|
|
|
|
|
isDisplayed?: () => boolean // Default: () => true
|
2018-12-05 14:21:10 +01:00
|
|
|
}[]
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'my-top-menu-dropdown',
|
|
|
|
templateUrl: './top-menu-dropdown.component.html',
|
|
|
|
styleUrls: [ './top-menu-dropdown.component.scss' ]
|
|
|
|
})
|
|
|
|
export class TopMenuDropdownComponent implements OnInit, OnDestroy {
|
|
|
|
@Input() menuEntries: TopMenuDropdownParam[] = []
|
|
|
|
|
2020-04-30 19:23:54 +02:00
|
|
|
@ViewChild('modal', { static: true }) modal: NgbModal
|
|
|
|
|
2018-12-05 14:21:10 +01:00
|
|
|
suffixLabels: { [ parentLabel: string ]: string }
|
2019-03-20 13:53:51 +01:00
|
|
|
hasIcons = false
|
2020-04-30 19:23:54 +02:00
|
|
|
isModalOpened = false
|
|
|
|
currentMenuEntryIndex: number
|
2018-12-05 14:21:10 +01:00
|
|
|
|
|
|
|
private routeSub: Subscription
|
|
|
|
|
2019-04-26 11:39:03 +02:00
|
|
|
constructor (
|
|
|
|
private router: Router,
|
2020-04-30 19:23:54 +02:00
|
|
|
private modalService: NgbModal,
|
2020-05-11 11:12:58 +02:00
|
|
|
private screen: ScreenService,
|
|
|
|
private menuService: MenuService
|
2020-04-30 19:23:54 +02:00
|
|
|
) { }
|
|
|
|
|
|
|
|
get isInSmallView () {
|
2020-05-11 11:12:58 +02:00
|
|
|
let marginLeft = 0
|
|
|
|
if (this.menuService.isMenuDisplayed) {
|
|
|
|
marginLeft = this.menuService.menuWidth
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.screen.isInSmallView(marginLeft)
|
2020-04-30 19:23:54 +02:00
|
|
|
}
|
2018-12-05 14:21:10 +01:00
|
|
|
|
2020-08-10 23:28:31 +02:00
|
|
|
get isBroadcastMessageDisplayed () {
|
|
|
|
return this.screen.isBroadcastMessageDisplayed
|
|
|
|
}
|
|
|
|
|
2018-12-05 14:21:10 +01:00
|
|
|
ngOnInit () {
|
|
|
|
this.updateChildLabels(window.location.pathname)
|
|
|
|
|
|
|
|
this.routeSub = this.router.events
|
2020-04-30 19:23:54 +02:00
|
|
|
.pipe(filter(event => event instanceof NavigationEnd))
|
|
|
|
.subscribe(() => this.updateChildLabels(window.location.pathname))
|
2019-03-20 13:53:51 +01:00
|
|
|
|
|
|
|
this.hasIcons = this.menuEntries.some(
|
2021-08-17 14:42:53 +02:00
|
|
|
e => e.children?.some(c => !!c.iconName)
|
2019-03-20 13:53:51 +01:00
|
|
|
)
|
2018-12-05 14:21:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
ngOnDestroy () {
|
|
|
|
if (this.routeSub) this.routeSub.unsubscribe()
|
|
|
|
}
|
|
|
|
|
2018-12-18 09:31:09 +01:00
|
|
|
dropdownAnchorClicked (dropdown: NgbDropdown) {
|
|
|
|
return dropdown.toggle()
|
|
|
|
}
|
|
|
|
|
2020-04-30 19:23:54 +02:00
|
|
|
openModal (index: number) {
|
|
|
|
this.currentMenuEntryIndex = index
|
|
|
|
this.isModalOpened = true
|
|
|
|
|
|
|
|
this.modalService.open(this.modal, {
|
|
|
|
centered: true,
|
2021-08-25 16:14:11 +02:00
|
|
|
beforeDismiss: () => {
|
2020-04-30 19:23:54 +02:00
|
|
|
this.onModalDismiss()
|
2021-08-25 16:14:11 +02:00
|
|
|
|
2020-04-30 19:23:54 +02:00
|
|
|
return true
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
onModalDismiss () {
|
|
|
|
this.isModalOpened = false
|
|
|
|
}
|
|
|
|
|
2020-08-17 10:13:31 +02:00
|
|
|
onActiveLinkScrollToTop (link: HTMLAnchorElement) {
|
|
|
|
if (!this.isBroadcastMessageDisplayed && this.router.url.includes(link.getAttribute('href'))) {
|
2020-11-17 14:04:44 +01:00
|
|
|
scrollToTop('smooth')
|
2020-08-17 10:13:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-30 19:23:54 +02:00
|
|
|
dismissOtherModals () {
|
|
|
|
this.modalService.dismissAll()
|
|
|
|
}
|
|
|
|
|
2020-07-28 15:18:38 +02:00
|
|
|
isDisplayed (obj: { isDisplayed?: () => boolean }) {
|
|
|
|
if (typeof obj.isDisplayed !== 'function') return true
|
|
|
|
|
|
|
|
return obj.isDisplayed()
|
|
|
|
}
|
|
|
|
|
2018-12-05 14:21:10 +01:00
|
|
|
private updateChildLabels (path: string) {
|
|
|
|
this.suffixLabels = {}
|
|
|
|
|
|
|
|
for (const entry of this.menuEntries) {
|
|
|
|
if (!entry.children) continue
|
|
|
|
|
|
|
|
for (const child of entry.children) {
|
|
|
|
if (path.startsWith(child.routerLink)) {
|
|
|
|
this.suffixLabels[entry.label] = child.label
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|