8 import { filter, take } from 'rxjs/operators'
9 import { NavigationEnd, Router } from '@angular/router'
10 import { Subscription } from 'rxjs'
11 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
12 import { GlobalIconName } from '@app/shared/images/global-icon.component'
13 import { ScreenService } from '@app/shared/misc/screen.service'
15 export type TopMenuDropdownParam = {
23 iconName?: GlobalIconName
28 selector: 'my-top-menu-dropdown',
29 templateUrl: './top-menu-dropdown.component.html',
30 styleUrls: [ './top-menu-dropdown.component.scss' ]
32 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
33 @Input() menuEntries: TopMenuDropdownParam[] = []
35 @ViewChild('modal', { static: true }) modal: NgbModal
37 suffixLabels: { [ parentLabel: string ]: string }
39 container: undefined | 'body' = undefined
41 currentMenuEntryIndex: number
43 private openedOnHover = false
44 private routeSub: Subscription
47 private router: Router,
48 private modalService: NgbModal,
49 private screen: ScreenService
52 get isInSmallView () {
53 return this.screen.isInSmallView()
57 this.updateChildLabels(window.location.pathname)
59 this.routeSub = this.router.events
60 .pipe(filter(event => event instanceof NavigationEnd))
61 .subscribe(() => this.updateChildLabels(window.location.pathname))
63 this.hasIcons = this.menuEntries.some(
64 e => e.children && e.children.some(c => !!c.iconName)
67 // We have to set body for the container to avoid scroll overflow on mobile and small views
68 if (this.isInSmallView) {
69 this.container = 'body'
74 if (this.routeSub) this.routeSub.unsubscribe()
77 openDropdownOnHover (dropdown: NgbDropdown) {
78 this.openedOnHover = true
84 .subscribe(() => this.openedOnHover = false)
87 dropdownAnchorClicked (dropdown: NgbDropdown) {
88 if (this.openedOnHover) {
89 this.openedOnHover = false
93 return dropdown.toggle()
96 closeDropdownIfHovered (dropdown: NgbDropdown) {
97 if (this.openedOnHover === false) return
100 this.openedOnHover = false
103 openModal (index: number) {
104 this.currentMenuEntryIndex = index
105 this.isModalOpened = true
107 this.modalService.open(this.modal, {
109 beforeDismiss: async () => {
110 this.onModalDismiss()
117 this.isModalOpened = false
120 dismissOtherModals () {
121 this.modalService.dismissAll()
124 private updateChildLabels (path: string) {
125 this.suffixLabels = {}
127 for (const entry of this.menuEntries) {
128 if (!entry.children) continue
130 for (const child of entry.children) {
131 if (path.startsWith(child.routerLink)) {
132 this.suffixLabels[entry.label] = child.label