client/src/app/shared/menu/top-menu-dropdown.component.ts

   1 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
   2 import { filter, take } from 'rxjs/operators'
   3 import { NavigationEnd, Router } from '@angular/router'
   4 import { Subscription } from 'rxjs'
   5 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
   6 import { GlobalIconName } from '@app/shared/images/global-icon.component'
   7
   8 export type TopMenuDropdownParam = {
   9   label: string
  10   routerLink?: string
  11
  12   children?: {
  13     label: string
  14     routerLink: string
  15
  16     iconName?: GlobalIconName
  17   }[]
  18 }
  19
  20 @Component({
  21   selector: 'my-top-menu-dropdown',
  22   templateUrl: './top-menu-dropdown.component.html',
  23   styleUrls: [ './top-menu-dropdown.component.scss' ]
  24 })
  25 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
  26   @Input() menuEntries: TopMenuDropdownParam[] = []
  27
  28   suffixLabels: { [ parentLabel: string ]: string }
  29   hasIcons = false
  30
  31   private openedOnHover = false
  32   private routeSub: Subscription
  33
  34   constructor (private router: Router) {}
  35
  36   ngOnInit () {
  37     this.updateChildLabels(window.location.pathname)
  38
  39     this.routeSub = this.router.events
  40                         .pipe(filter(event => event instanceof NavigationEnd))
  41                         .subscribe(() => this.updateChildLabels(window.location.pathname))
  42
  43     this.hasIcons = this.menuEntries.some(
  44       e => e.children && e.children.some(c => !!c.iconName)
  45     )
  46   }
  47
  48   ngOnDestroy () {
  49     if (this.routeSub) this.routeSub.unsubscribe()
  50   }
  51
  52   openDropdownOnHover (dropdown: NgbDropdown) {
  53     this.openedOnHover = true
  54     dropdown.open()
  55
  56     // Menu was closed
  57     dropdown.openChange
  58             .pipe(take(1))
  59             .subscribe(() => this.openedOnHover = false)
  60   }
  61
  62   dropdownAnchorClicked (dropdown: NgbDropdown) {
  63     if (this.openedOnHover) {
  64       this.openedOnHover = false
  65       return
  66     }
  67
  68     return dropdown.toggle()
  69   }
  70
  71   closeDropdownIfHovered (dropdown: NgbDropdown) {
  72     if (this.openedOnHover === false) return
  73
  74     dropdown.close()
  75     this.openedOnHover = false
  76   }
  77
  78   private updateChildLabels (path: string) {
  79     this.suffixLabels = {}
  80
  81     for (const entry of this.menuEntries) {
  82       if (!entry.children) continue
  83
  84       for (const child of entry.children) {
  85         if (path.startsWith(child.routerLink)) {
  86           this.suffixLabels[entry.label] = child.label
  87         }
  88       }
  89     }
  90   }
  91 }