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

   1 import { Subscription } from 'rxjs'
   2 import { filter } from 'rxjs/operators'
   3 import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
   4 import { NavigationEnd, Router } from '@angular/router'
   5 import { MenuService, ScreenService } from '@app/core'
   6 import { scrollToTop } from '@app/helpers'
   7 import { GlobalIconName } from '@app/shared/shared-icons'
   8 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
   9
  10 export type TopMenuDropdownParam = {
  11   label: string
  12   routerLink?: string
  13   isDisplayed?: () => boolean // Default: () => true
  14
  15   children?: {
  16     label: string
  17     routerLink: string
  18     iconName?: GlobalIconName
  19
  20     isDisplayed?: () => boolean // Default: () => true
  21   }[]
  22 }
  23
  24 @Component({
  25   selector: 'my-top-menu-dropdown',
  26   templateUrl: './top-menu-dropdown.component.html',
  27   styleUrls: [ './top-menu-dropdown.component.scss' ]
  28 })
  29 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
  30   @Input() menuEntries: TopMenuDropdownParam[] = []
  31
  32   @ViewChild('modal', { static: true }) modal: NgbModal
  33
  34   suffixLabels: { [ parentLabel: string ]: string }
  35   hasIcons = false
  36   isModalOpened = false
  37   currentMenuEntryIndex: number
  38
  39   private routeSub: Subscription
  40
  41   constructor (
  42     private router: Router,
  43     private modalService: NgbModal,
  44     private screen: ScreenService,
  45     private menuService: MenuService
  46   ) { }
  47
  48   get isInSmallView () {
  49     let marginLeft = 0
  50     if (this.menuService.isMenuDisplayed) {
  51       marginLeft = this.menuService.menuWidth
  52     }
  53
  54     return this.screen.isInSmallView(marginLeft)
  55   }
  56
  57   get isBroadcastMessageDisplayed () {
  58     return this.screen.isBroadcastMessageDisplayed
  59   }
  60
  61   ngOnInit () {
  62     this.updateChildLabels(window.location.pathname)
  63
  64     this.routeSub = this.router.events
  65       .pipe(filter(event => event instanceof NavigationEnd))
  66       .subscribe(() => this.updateChildLabels(window.location.pathname))
  67
  68     this.hasIcons = this.menuEntries.some(
  69       e => e.children?.some(c => !!c.iconName)
  70     )
  71   }
  72
  73   ngOnDestroy () {
  74     if (this.routeSub) this.routeSub.unsubscribe()
  75   }
  76
  77   dropdownAnchorClicked (dropdown: NgbDropdown) {
  78     return dropdown.toggle()
  79   }
  80
  81   openModal (index: number) {
  82     this.currentMenuEntryIndex = index
  83     this.isModalOpened = true
  84
  85     this.modalService.open(this.modal, {
  86       centered: true,
  87       beforeDismiss: async () => {
  88         this.onModalDismiss()
  89         return true
  90       }
  91     })
  92   }
  93
  94   onModalDismiss () {
  95     this.isModalOpened = false
  96   }
  97
  98   onActiveLinkScrollToTop (link: HTMLAnchorElement) {
  99     if (!this.isBroadcastMessageDisplayed && this.router.url.includes(link.getAttribute('href'))) {
 100       scrollToTop('smooth')
 101     }
 102   }
 103
 104   dismissOtherModals () {
 105     this.modalService.dismissAll()
 106   }
 107
 108   isDisplayed (obj: { isDisplayed?: () => boolean }) {
 109     if (typeof obj.isDisplayed !== 'function') return true
 110
 111     return obj.isDisplayed()
 112   }
 113
 114   private updateChildLabels (path: string) {
 115     this.suffixLabels = {}
 116
 117     for (const entry of this.menuEntries) {
 118       if (!entry.children) continue
 119
 120       for (const child of entry.children) {
 121         if (path.startsWith(child.routerLink)) {
 122           this.suffixLabels[entry.label] = child.label
 123         }
 124       }
 125     }
 126   }
 127 }