preserve state (#358)

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)">
 
             <adf-sidenav-layout-header>
                 <ng-template let-toggleMenu="toggleMenu">
-
-                        <app-header (menu)="toggleMenu()"></app-header>
-
+                    <app-header (menu)="toggleMenu()"></app-header>
                 </ng-template>
             </adf-sidenav-layout-header>
 

src/app/components/layout/layout.component.spec.ts

@@ -45,6 +45,8 @@ describe('LayoutComponent', () => {
     let fixture: ComponentFixture<LayoutComponent>;
     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 = <MinimalNodeEntryEntity>{ 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);
+        });
+    });
  });

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<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;
+    }
+
+    setState(state) {
+        if (this.appConfigService.get('sideNav.preserveState')) {
+            this.userPreferenceService.set('expandedSidenav', state);
+        }
+    }
 }