import { AppConfigService , SidenavLayoutComponent , UserPreferencesService } from '@alfresco/adf-core' ; import { Component , OnDestroy , OnInit , ViewChild , ViewEncapsulation } from '@angular/core' ; import { NavigationEnd , Router , NavigationStart } from '@angular/router' ; import { Store } from '@ngrx/store' ; import { Subject , Observable } from 'rxjs' ; import { filter , takeUntil , map , withLatestFrom , delay } from 'rxjs/operators' ; import { NodePermissionService } from '@alfresco/aca-shared' ; import { BreakpointObserver } from '@angular/cdk/layout' ; import { AppStore , getCurrentFolder , getFileUploadingDialog , ResetSelectionAction } from '@alfresco/aca-shared/store' ; import { Directionality } from '@angular/cdk/bidi' ; @ Component ( { selector : 'app-layout' , templateUrl : './app-layout.component.html' , styleUrls : [ './app-layout.component.scss' ] , encapsulation : ViewEncapsulation . None , host : { class : 'app-layout' } } ) export class AppLayoutComponent implements OnInit , OnDestroy { @ ViewChild ( 'layout' , { static : true } ) layout : SidenavLayoutComponent ; onDestroy$ : Subject < boolean > = new Subject < boolean > ( ) ; isSmallScreen$ : Observable < boolean > ; expandedSidenav : boolean ; currentFolderId : string ; canUpload = false ; minimizeSidenav = false ; hideSidenav = false ; direction : Directionality ; showFileUploadingDialog : boolean ; private minimizeConditions : string [ ] = [ 'search' ] ; private hideConditions : string [ ] = [ '/preview/' ] ; constructor ( protected store , private permission , private router , private userPreferenceService , private appConfigService , private breakpointObserver ) { } ngOnInit ( ) { this . isSmallScreen$ = this . breakpointObserver . observe ( [ '(max-width: 600px)' ] ) . pipe ( map ( ( result ) => result . matches ) ) ; this . hideSidenav = this . hideConditions . some ( ( el ) => this . router . routerState . snapshot . url . includes ( el ) ) ; this . minimizeSidenav = this . minimizeConditions . some ( ( el ) => this . router . routerState . snapshot . url . includes ( el ) ) ; if ( ! this . minimizeSidenav ) { this . expandedSidenav = this . getSidenavState ( ) ; } else { this . expandedSidenav = false ; } this . store . select ( getCurrentFolder ) . pipe ( takeUntil ( this . onDestroy$ ) ) . subscribe ( ( node ) => { this . currentFolderId = node ? node . id : null ; this . canUpload = node && this . permission . check ( node , [ 'create' ] ) ; } ) ; this . router . events . pipe ( withLatestFrom ( this . isSmallScreen$ ) , filter ( ( [ event , isSmallScreen ] ) => isSmallScreen && event instanceof NavigationEnd ) , takeUntil ( this . onDestroy$ ) ) . subscribe ( ( ) => { this . layout . container . sidenav . close ( ) ; } ) ; this . router . events . pipe ( filter ( ( event ) => event instanceof NavigationEnd ) , takeUntil ( this . onDestroy$ ) ) . subscribe ( ( event ) => { this . minimizeSidenav = this . minimizeConditions . some ( ( el ) => event . urlAfterRedirects . includes ( el ) ) ; this . hideSidenav = this . hideConditions . some ( ( el ) => event . urlAfterRedirects . includes ( el ) ) ; this . updateState ( ) ; } ) ; this . router . events . pipe ( filter ( ( event ) => event instanceof NavigationStart ) , takeUntil ( this . onDestroy$ ) ) . subscribe ( ( ) => { this . store . dispatch ( new ResetSelectionAction ( ) ) ; } ) ; this . store . select ( getFileUploadingDialog ) . pipe ( delay ( 0 ) , takeUntil ( this . onDestroy$ ) ) . subscribe ( ( fileUploadingDialog ) => { this . showFileUploadingDialog = fileUploadingDialog ; } ) ; } ngOnDestroy ( ) { this . onDestroy$ . next ( true ) ; this . onDestroy$ . complete ( ) ; } hideMenu ( event ) { if ( this . layout . container . isMobileScreenSize ) { event . preventDefault ( ) ; this . layout . container . toggleMenu ( ) ; } } private updateState ( ) { if ( this . minimizeSidenav && ! this . layout . isMenuMinimized ) { this . layout . isMenuMinimized = true ; if ( ! this . layout . container . isMobileScreenSize ) { this . layout . container . toggleMenu ( ) ; } } if ( ! this . minimizeSidenav ) { if ( this . getSidenavState ( ) && this . layout . isMenuMinimized ) { this . layout . isMenuMinimized = false ; this . layout . container . toggleMenu ( ) ; } } } onExpanded ( state ) { if ( ! this . minimizeSidenav && this . appConfigService . get ( 'sideNav.preserveState' ) ) { this . userPreferenceService . set ( 'expandedSidenav' , state ) ; } } private getSidenavState ( ) { const expand = this . appConfigService . get < boolean > ( 'sideNav.expandedSidenav' , true ) ; const preserveState = this . appConfigService . get < boolean > ( 'sideNav.preserveState' , true ) ; if ( preserveState ) { return this . userPreferenceService . get ( 'expandedSidenav' , expand . toString ( ) ) === 'true' ; } return expand ; } }