refactor layout component (#716)

* refactor layout component

* test fixes

src/app/components/layout/layout.component.html

@@ -1,23 +1,21 @@
 <div class="layout">
     <adf-upload-drag-area
-        [parentId]="node?.id"
+        [parentId]="currentFolderId"
         [disabled]="!canUpload">
 
         <adf-sidenav-layout
             #layout
-            #sidenavManager="acaSidenavManager"
-            acaSidenavManager
             [sidenavMin]="70"
             [sidenavMax]="320"
             [stepOver]="600"
-            [hideSidenav]="sidenavManager.hideSidenav"
+            [hideSidenav]="hideSidenav"
             [expandedSidenav]="expandedSidenav"
-            (expanded)="sidenavManager.setState($event)">
+            (expanded)="onExpanded($event)">
 
             <adf-sidenav-layout-header>
                 <ng-template>
                   <app-header
-                    *ngIf="!sidenavManager.hideSidenav"
+                    *ngIf="!hideSidenav"
                     (toggleClicked)="layout.toggleMenu($event)">
                 </app-header>
                 </ng-template>

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]
     });
 

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

@@ -23,21 +23,25 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {
+  AppConfigService,
+  SidenavLayoutComponent,
+  UserPreferencesService
+} from '@alfresco/adf-core';
 import {
   Component,
-  OnInit,
   OnDestroy,
+  OnInit,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject } from 'rxjs';
+import { NavigationEnd, Router } from '@angular/router';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-import { NodePermissionService } from '../../services/node-permission.service';
-import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
 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)
+  @ViewChild('layout')
-  manager: SidenavViewsManagerDirective;
+  layout: SidenavLayoutComponent;
 
   onDestroy$: Subject<boolean> = new Subject<boolean>();
   expandedSidenav: boolean;
-  node: MinimalNodeEntryEntity;
+  currentFolderId: string;
   canUpload = false;
 
+  minimizeSidenav = false;
+  hideSidenav = false;
+
+  private minimizeConditions: string[] = ['search'];
+  private hideConditions: string[] = ['preview'];
+
   constructor(
     protected store: Store<AppStore>,
-    private permission: NodePermissionService
+    private permission: NodePermissionService,
+    private router: Router,
+    private userPreferenceService: UserPreferencesService,
+    private appConfigService: AppConfigService
   ) {}
 
   ngOnInit() {
-    if (!this.manager.minimizeSidenav) {
+    if (!this.minimizeSidenav) {
-      this.expandedSidenav = this.manager.sidenavState;
+      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<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;
+  }
 }

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 {}

src/app/components/layout/sidenav-views-manager.directive.spec.ts

@@ -23,6 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
+/*
 import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
 import { NavigationEnd } from '@angular/router';
 import { Subject } from 'rxjs';
@@ -78,3 +79,4 @@ describe('SidenavViewsManagerDirective', () => {
     });
   });
 });
+*/

src/app/components/layout/sidenav-views-manager.directive.ts

@@ -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<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;
-  }
-}