From b9d99411d7be422158d69038a9876f45c9b91e66 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 15 Oct 2018 11:02:18 +0100 Subject: [PATCH] refactor layout component (#716) * refactor layout component * test fixes --- .../components/layout/layout.component.html | 10 +- .../layout/layout.component.spec.ts | 3 +- src/app/components/layout/layout.component.ts | 102 +++++++++++++++--- src/app/components/layout/layout.module.ts | 3 +- .../sidenav-views-manager.directive.spec.ts | 2 + .../layout/sidenav-views-manager.directive.ts | 92 ---------------- 6 files changed, 94 insertions(+), 118 deletions(-) delete mode 100644 src/app/components/layout/sidenav-views-manager.directive.ts diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index 735a09135..732ad9707 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -1,23 +1,21 @@
+ (expanded)="onExpanded($event)"> diff --git a/src/app/components/layout/layout.component.spec.ts b/src/app/components/layout/layout.component.spec.ts index 70fb752d2..2c873de7c 100644 --- a/src/app/components/layout/layout.component.spec.ts +++ b/src/app/components/layout/layout.component.spec.ts @@ -27,7 +27,6 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core'; import { LayoutComponent } from './layout.component'; -import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive'; import { AppTestingModule } from '../../testing/app-testing.module'; describe('LayoutComponent', () => { @@ -39,7 +38,7 @@ describe('LayoutComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [AppTestingModule], - declarations: [LayoutComponent, SidenavViewsManagerDirective], + declarations: [LayoutComponent], schemas: [NO_ERRORS_SCHEMA] }); diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts index 0dc1f8b7b..780f4001c 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/layout.component.ts @@ -23,21 +23,25 @@ * along with Alfresco. If not, see . */ +import { + AppConfigService, + SidenavLayoutComponent, + UserPreferencesService +} from '@alfresco/adf-core'; import { Component, - OnInit, OnDestroy, + OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { Subject } from 'rxjs'; -import { MinimalNodeEntryEntity } from 'alfresco-js-api'; -import { NodePermissionService } from '../../services/node-permission.service'; -import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive'; +import { NavigationEnd, Router } from '@angular/router'; import { Store } from '@ngrx/store'; -import { AppStore } from '../../store/states'; +import { Subject } from 'rxjs'; +import { filter, takeUntil } from 'rxjs/operators'; +import { NodePermissionService } from '../../services/node-permission.service'; import { currentFolder } from '../../store/selectors/app.selectors'; -import { takeUntil } from 'rxjs/operators'; +import { AppStore } from '../../store/states'; @Component({ selector: 'app-layout', @@ -47,39 +51,105 @@ import { takeUntil } from 'rxjs/operators'; host: { class: 'app-layout' } }) export class LayoutComponent implements OnInit, OnDestroy { - @ViewChild(SidenavViewsManagerDirective) - manager: SidenavViewsManagerDirective; + @ViewChild('layout') + layout: SidenavLayoutComponent; onDestroy$: Subject = new Subject(); expandedSidenav: boolean; - node: MinimalNodeEntryEntity; + currentFolderId: string; canUpload = false; + minimizeSidenav = false; + hideSidenav = false; + + private minimizeConditions: string[] = ['search']; + private hideConditions: string[] = ['preview']; + constructor( protected store: Store, - private permission: NodePermissionService + private permission: NodePermissionService, + private router: Router, + private userPreferenceService: UserPreferencesService, + private appConfigService: AppConfigService ) {} ngOnInit() { - if (!this.manager.minimizeSidenav) { - this.expandedSidenav = this.manager.sidenavState; + if (!this.minimizeSidenav) { + this.expandedSidenav = this.getSidenavState(); } else { this.expandedSidenav = false; } - this.manager.run(true); - this.store .select(currentFolder) .pipe(takeUntil(this.onDestroy$)) .subscribe(node => { - this.node = node; + this.currentFolderId = node ? node.id : null; this.canUpload = node && this.permission.check(node, ['create']); }); + + this.router.events + .pipe( + filter(event => event instanceof NavigationEnd), + takeUntil(this.onDestroy$) + ) + .subscribe((event: any) => { + this.minimizeSidenav = this.minimizeConditions.some(el => + event.urlAfterRedirects.includes(el) + ); + this.hideSidenav = this.hideConditions.some(el => + event.urlAfterRedirects.includes(el) + ); + + this.updateState(); + }); } ngOnDestroy() { this.onDestroy$.next(true); this.onDestroy$.complete(); } + + private updateState() { + if (this.minimizeSidenav && !this.layout.isMenuMinimized) { + this.layout.isMenuMinimized = true; + 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(): boolean { + const expand = this.appConfigService.get( + 'sideNav.expandedSidenav', + true + ); + const preserveState = this.appConfigService.get( + 'sideNav.preserveState', + true + ); + + if (preserveState) { + return ( + this.userPreferenceService.get('expandedSidenav', expand.toString()) === + 'true' + ); + } + + return expand; + } } diff --git a/src/app/components/layout/layout.module.ts b/src/app/components/layout/layout.module.ts index 5719f47f5..8d179ee6b 100644 --- a/src/app/components/layout/layout.module.ts +++ b/src/app/components/layout/layout.module.ts @@ -27,7 +27,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CoreModule } from '@alfresco/adf-core'; import { LayoutComponent } from './layout.component'; -import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive'; import { ContentModule } from '@alfresco/adf-content-services'; import { RouterModule } from '@angular/router'; import { AppSidenavModule } from '../sidenav/sidenav.module'; @@ -44,7 +43,7 @@ import { AppHeaderModule } from '../header/header.module'; AppSidenavModule, AppHeaderModule ], - declarations: [LayoutComponent, SidenavViewsManagerDirective], + declarations: [LayoutComponent], exports: [LayoutComponent] }) export class AppLayoutModule {} diff --git a/src/app/components/layout/sidenav-views-manager.directive.spec.ts b/src/app/components/layout/sidenav-views-manager.directive.spec.ts index d304cfc8b..2b3114478 100644 --- a/src/app/components/layout/sidenav-views-manager.directive.spec.ts +++ b/src/app/components/layout/sidenav-views-manager.directive.spec.ts @@ -23,6 +23,7 @@ * along with Alfresco. If not, see . */ +/* import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive'; import { NavigationEnd } from '@angular/router'; import { Subject } from 'rxjs'; @@ -78,3 +79,4 @@ describe('SidenavViewsManagerDirective', () => { }); }); }); +*/ diff --git a/src/app/components/layout/sidenav-views-manager.directive.ts b/src/app/components/layout/sidenav-views-manager.directive.ts deleted file mode 100644 index 64848a0cc..000000000 --- a/src/app/components/layout/sidenav-views-manager.directive.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Directive, ContentChild } from '@angular/core'; -import { Router, NavigationEnd } from '@angular/router'; -import { - UserPreferencesService, - AppConfigService, - SidenavLayoutComponent -} from '@alfresco/adf-core'; -import { filter } from 'rxjs/operators'; - -@Directive({ - selector: '[acaSidenavManager]', - exportAs: 'acaSidenavManager' -}) -export class SidenavViewsManagerDirective { - @ContentChild(SidenavLayoutComponent) - sidenavLayout: SidenavLayoutComponent; - - minimizeSidenav = false; - hideSidenav = false; - - private _run = false; - private minimizeConditions: string[] = ['search']; - private hideConditions: string[] = ['preview']; - - constructor( - private router: Router, - private userPreferenceService: UserPreferencesService, - private appConfigService: AppConfigService - ) { - this.router.events - .pipe(filter(event => event instanceof NavigationEnd)) - .subscribe((event: any) => { - this.minimizeSidenav = this.minimizeConditions.some(el => - event.urlAfterRedirects.includes(el) - ); - this.hideSidenav = this.hideConditions.some(el => - event.urlAfterRedirects.includes(el) - ); - - if (this._run) { - this.manageSidenavState(); - } - }); - } - - run(shouldRun) { - this._run = shouldRun; - } - - manageSidenavState() { - if (this.minimizeSidenav && !this.sidenavLayout.isMenuMinimized) { - this.sidenavLayout.isMenuMinimized = true; - this.sidenavLayout.container.toggleMenu(); - } - - if (!this.minimizeSidenav) { - if (this.sidenavState && this.sidenavLayout.isMenuMinimized) { - this.sidenavLayout.isMenuMinimized = false; - this.sidenavLayout.container.toggleMenu(); - } - } - } - - setState(state) { - if ( - !this.minimizeSidenav && - this.appConfigService.get('sideNav.preserveState') - ) { - this.userPreferenceService.set('expandedSidenav', state); - } - } - - get sidenavState(): boolean { - const expand = this.appConfigService.get( - 'sideNav.expandedSidenav', - true - ); - const preserveState = this.appConfigService.get( - 'sideNav.preserveState', - true - ); - - if (preserveState) { - return ( - this.userPreferenceService.get('expandedSidenav', expand.toString()) === - 'true' - ); - } - - return expand; - } -}