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   ngOnInit () {
  57     this.updateChildLabels(window.location.pathname)
  58
  59     this.routeSub = this.router.events
  60       .pipe(filter(event => event instanceof NavigationEnd))
  61       .subscribe(() => this.updateChildLabels(window.location.pathname))
  62
  63     this.hasIcons = this.menuEntries.some(
  64       e => e.children && e.children.some(c => !!c.iconName)
  65     )
  66   }
  67
  68   ngOnDestroy () {
  69     if (this.routeSub) this.routeSub.unsubscribe()
  70   }
  71
  72   dropdownAnchorClicked (dropdown: NgbDropdown) {
  73     return dropdown.toggle()
  74   }
  75
  76   openModal (index: number) {
  77     this.currentMenuEntryIndex = index
  78     this.isModalOpened = true
  79
  80     this.modalService.open(this.modal, {
  81       centered: true,
  82       beforeDismiss: async () => {
  83         this.onModalDismiss()
  84         return true
  85       }
  86     })
  87   }
  88
  89   onModalDismiss () {
  90     this.isModalOpened = false
  91   }
  92
  93   dismissOtherModals () {
  94     this.modalService.dismissAll()
  95   }
  96
  97   isDisplayed (obj: { isDisplayed?: () => boolean }) {
  98     if (typeof obj.isDisplayed !== 'function') return true
  99
 100     return obj.isDisplayed()
 101   }
 102
 103   private updateChildLabels (path: string) {
 104     this.suffixLabels = {}
 105
 106     for (const entry of this.menuEntries) {
 107       if (!entry.children) continue
 108
 109       for (const child of entry.children) {
 110         if (path.startsWith(child.routerLink)) {
 111           this.suffixLabels[entry.label] = child.label
 112         }
 113       }
 114     }
 115   }
 116 }