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