diff --git a/src/app.config.json b/src/app.config.json index 7fe0ce871..0fb00c0e6 100644 --- a/src/app.config.json +++ b/src/app.config.json @@ -19,6 +19,10 @@ "allowDownload": true, "allowDelete": true }, + "sideNav" : { + "preserveState" : true, + "expandedSidenav": true + }, "navigation": { "main": [ { diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index 958362bc2..090d002c0 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -7,14 +7,13 @@ [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" - [hideSidenav]="isPreview" - [expandedSidenav]="true"> + [hideSidenav]="hideSidenav" + [expandedSidenav]="expandedSidenav" + (expanded)="setState($event)"> - - - + diff --git a/src/app/components/layout/layout.component.spec.ts b/src/app/components/layout/layout.component.spec.ts index 166179c45..0424abf35 100644 --- a/src/app/components/layout/layout.component.spec.ts +++ b/src/app/components/layout/layout.component.spec.ts @@ -45,6 +45,8 @@ describe('LayoutComponent', () => { let fixture: ComponentFixture; let component: LayoutComponent; let browsingFilesService: BrowsingFilesService; + let appConfig: AppConfigService; + let userPreference: UserPreferencesService; const navItem = { label: 'some-label', route: { @@ -86,18 +88,114 @@ describe('LayoutComponent', () => { fixture = TestBed.createComponent(LayoutComponent); component = fixture.componentInstance; browsingFilesService = TestBed.get(BrowsingFilesService); - - const appConfig = TestBed.get(AppConfigService); - spyOn(appConfig, 'get').and.returnValue([navItem]); - - fixture.detectChanges(); + appConfig = TestBed.get(AppConfigService); + userPreference = TestBed.get(UserPreferencesService); }); it('sets current node', () => { + appConfig.config = { + navigation: [navItem] + }; + const currentNode = { id: 'someId' }; + fixture.detectChanges(); + browsingFilesService.onChangeParent.next(currentNode); expect(component.node).toEqual(currentNode); }); + + describe('sidenav state', () => { + it('should get state from configuration', () => { + appConfig.config = { + sideNav: { + expandedSidenav: false, + preserveState: false + } + }; + + fixture.detectChanges(); + + expect(component.expandedSidenav).toBe(false); + }); + + it('should resolve state to true is no configuration', () => { + appConfig.config = {}; + + fixture.detectChanges(); + + expect(component.expandedSidenav).toBe(true); + }); + + it('should get state from user settings as true', () => { + appConfig.config = { + sideNav: { + expandedSidenav: false, + preserveState: true + } + }; + + spyOn(userPreference, 'get').and.callFake(key => { + if (key === 'expandedSidenav') { + return 'true'; + } + }); + + fixture.detectChanges(); + + expect(component.expandedSidenav).toBe(true); + }); + + it('should get state from user settings as false', () => { + appConfig.config = { + sideNav: { + expandedSidenav: false, + preserveState: true + } + }; + + spyOn(userPreference, 'get').and.callFake(key => { + if (key === 'expandedSidenav') { + return 'false'; + } + }); + + fixture.detectChanges(); + + expect(component.expandedSidenav).toBe(false); + }); + + it('should set expandedSidenav to true if configuration is true', () => { + spyOn(userPreference, 'set'); + + appConfig.config = { + sideNav: { + expandedSidenav: false, + preserveState: true + } + }; + + fixture.detectChanges(); + component.setState(true); + + expect(userPreference.set).toHaveBeenCalledWith( 'expandedSidenav', true); + }); + + it('should set expandedSidenav to false if configuration is true', () => { + spyOn(userPreference, 'set'); + + appConfig.config = { + sideNav: { + expandedSidenav: false, + preserveState: true + } + }; + + fixture.detectChanges(); + component.setState(false); + + expect(userPreference.set).toHaveBeenCalledWith( 'expandedSidenav', false); + }); + }); }); diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts index 07f3fa06e..1800a8ddc 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/layout.component.ts @@ -27,6 +27,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { Subscription } from 'rxjs/Rx'; import { MinimalNodeEntryEntity } from 'alfresco-js-api'; +import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core'; import { BrowsingFilesService } from '../../common/services/browsing-files.service'; import { NodePermissionService } from '../../common/services/node-permission.service'; @@ -37,22 +38,27 @@ import { NodePermissionService } from '../../common/services/node-permission.ser }) export class LayoutComponent implements OnInit, OnDestroy { node: MinimalNodeEntryEntity; - isPreview = false; - + hideSidenav: boolean; + expandedSidenav: boolean; + private hideConditions: string[] = ['preview']; private subscriptions: Subscription[] = []; constructor( private router: Router, private browsingFilesService: BrowsingFilesService, + private userPreferenceService: UserPreferencesService, + private appConfigService: AppConfigService, public permission: NodePermissionService) { this.router.events .filter(event => event instanceof NavigationEnd) .subscribe( (event: any ) => { - this.isPreview = event.urlAfterRedirects.includes('preview'); + this.hideSidenav = this.hideConditions.some(el => event.urlAfterRedirects.includes(el)); }); } ngOnInit() { + this.expandedSidenav = this.sidenavState; + this.subscriptions.concat([ this.browsingFilesService.onChangeParent.subscribe((node: MinimalNodeEntryEntity) => this.node = node) ]); @@ -61,4 +67,21 @@ export class LayoutComponent implements OnInit, OnDestroy { ngOnDestroy() { this.subscriptions.forEach(s => s.unsubscribe()); } + + 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; + } + + setState(state) { + if (this.appConfigService.get('sideNav.preserveState')) { + this.userPreferenceService.set('expandedSidenav', state); + } + } }