client/src/app/+my-account/top-menu-dropdown.component.ts

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