import { Component , ElementRef , Input , OnDestroy , OnInit , Renderer2 , ViewChild } from '@angular/core' ; import { CookieService } from 'ngx-cookie-service' ; import { Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { FuseMatchMediaService } from '@fuse/services/match-media.service' ; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service' ; import { AccountService } from 'app/setup/account/account.service' ; import { MediaObserver } from '@angular/flex-layout' ; import { I18nService } from '../../../app/layout/components/i18n/i18n.service' ; import { Account } from '@signumjs/core' ; @ Component ( { selector : 'fuse-shortcuts' , templateUrl : './shortcuts.component.html' , styleUrls : [ './shortcuts.component.scss' ] } ) export class FuseShortcutsComponent implements OnInit , OnDestroy { shortcutItems : any [ ] ; navigationItems : any [ ] ; filteredNavigationItems : any [ ] ; searching : boolean ; mobileShortcutsPanelActive : boolean ; currentAccount : Account ; @ Input ( ) navigation : any ; @ ViewChild ( 'searchInput' , { static : true } ) searchInputField ; @ ViewChild ( 'shortcuts' , { static : true } ) shortcutsEl : ElementRef ; private _unsubscribeAll : Subject < any > ; constructor ( private i18nService , private _cookieService , private _fuseMatchMediaService , private _fuseNavigationService , private _observableMedia , private _renderer , private accountService ) { this . shortcutItems = [ ] ; this . searching = false ; this . mobileShortcutsPanelActive = false ; this . _unsubscribeAll = new Subject ( ) ; } ngOnInit ( ) { this . filteredNavigationItems = this . navigationItems = this . _fuseNavigationService . getFlatNavigation ( this . navigation ) ; if ( this . _cookieService . check ( 'FUSE2.shortcuts' ) ) { this . shortcutItems = JSON . parse ( this . _cookieService . get ( 'FUSE2.shortcuts' ) ) ; } else { this . accountService . currentAccount$ . subscribe ( this . setAccount ( ) ) ; } this . i18nService . state . subscribe ( ( ) => { this . updateShortcuts ( ) ; } ) ; this . _fuseMatchMediaService . onMediaChange . pipe ( takeUntil ( this . _unsubscribeAll ) ) . subscribe ( ( ) => { if ( this . _observableMedia . isActive ( 'gt-sm' ) ) { this . hideMobileShortcutsPanel ( ) ; } } ) ; } private setAccount ( ) { return ( account ) => { this . currentAccount = account ; this . updateShortcuts ( ) ; } ; } private updateShortcuts ( ) { this . shortcutItems = [ ] ; const isOfflineAccount = this . currentAccount && this . currentAccount . type === 'offline' ; this . shortcutItems . push ( { title : this . i18nService . getTranslation ( 'settings' ) , type : 'item' , icon : 'settings' , url : '/settings' } ) ; } ngOnDestroy ( ) { this . _unsubscribeAll . next ( ) ; this . _unsubscribeAll . complete ( ) ; } search ( event ) { const value = event . target . value . toLowerCase ( ) ; if ( value === '' ) { this . searching = false ; this . filteredNavigationItems = this . navigationItems ; return ; } this . searching = true ; this . filteredNavigationItems = this . navigationItems . filter ( ( navigationItem ) => { return navigationItem . title . toLowerCase ( ) . includes ( value ) ; } ) ; } toggleShortcut ( event , itemToToggle ) { event . stopPropagation ( ) ; for ( let i = 0 ; i < this . shortcutItems . length ; i ++ ) { if ( this . shortcutItems [ i ] . url === itemToToggle . url ) { this . shortcutItems . splice ( i , 1 ) ; this . _cookieService . set ( 'FUSE2.shortcuts' , JSON . stringify ( this . shortcutItems ) ) ; return ; } } this . shortcutItems . push ( itemToToggle ) ; this . _cookieService . set ( 'FUSE2.shortcuts' , JSON . stringify ( this . shortcutItems ) ) ; } isInShortcuts ( navigationItem ) { return this . shortcutItems . find ( item => { return item . url === navigationItem . url ; } ) ; } onMenuOpen ( ) { setTimeout ( ( ) => { this . searchInputField . nativeElement . focus ( ) ; } ) ; } showMobileShortcutsPanel ( ) { this . mobileShortcutsPanelActive = true ; this . _renderer . addClass ( this . shortcutsEl . nativeElement , 'show-mobile-panel' ) ; } hideMobileShortcutsPanel ( ) { this . mobileShortcutsPanelActive = false ; this . _renderer . removeClass ( this . shortcutsEl . nativeElement , 'show-mobile-panel' ) ; } }