feat: keep sidenav visibility state on the server for every user (#1194)

PR Close #994

src/app/core/components/sidenav/sidenav.component.html

@@ -2,7 +2,7 @@
   <button
     class="hide-button"
     mat-icon-button
-    (click)="toggleDrawer()"
+    (click)="closeSidenav()"
   >
     <mat-icon class="mdi-chevron-left"></mat-icon>
   </button>

src/app/core/components/sidenav/sidenav.component.ts

@@ -1,16 +1,15 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { DragulaService } from 'ng2-dragula';
 import * as cloneDeep from 'lodash/cloneDeep';
 
 import { ConfigService } from '../../services';
-import { LayoutService } from '../../../shared/services/layout.service';
 import { RouterUtilsService } from '../../../shared/services/router-utils.service';
 import { WithUnsubscribe } from '../../../utils/mixins/with-unsubscribe';
 import { transformHandle, transformLinks } from './sidenav-animations';
 import { NavigationItem, nonDraggableRoutes, SidenavRoute, sidenavRoutes } from './sidenav-routes';
-import { State, UserTagsActions, UserTagsSelectors } from '../../../root-store';
+import { layoutActions, State, UserTagsActions, UserTagsSelectors } from '../../../root-store';
 
 
 @Component({
@@ -19,7 +18,7 @@ import { State, UserTagsActions, UserTagsSelectors } from '../../../root-store';
   styleUrls: ['./sidenav.component.scss'],
   animations: [transformHandle, transformLinks]
 })
-export class SidenavComponent extends WithUnsubscribe() implements AfterViewInit, OnInit, OnDestroy {
+export class SidenavComponent extends WithUnsubscribe() implements OnInit, OnDestroy {
   @ViewChild('navigationBar') public navigationBar: ElementRef;
   @Input() public open: boolean;
   @Input() public title: string;
@@ -38,7 +37,6 @@ export class SidenavComponent extends WithUnsubscribe() implements AfterViewInit
   constructor(
     private configService: ConfigService,
     private dragula: DragulaService,
-    private layoutService: LayoutService,
     private routerUtilsService: RouterUtilsService,
     private router: Router,
     private store: Store<State>
@@ -52,12 +50,6 @@ export class SidenavComponent extends WithUnsubscribe() implements AfterViewInit
     this.initNavigationOrder();
   }
 
-  public ngAfterViewInit(): void {
-    this.layoutService.drawerToggled
-      .takeUntil(this.unsubscribe$)
-      .subscribe(() => this.toggleDrawer());
-  }
-
   public ngOnDestroy(): void {
     super.ngOnDestroy();
     this.dragula.destroy(this.dragulaContainerName);
@@ -83,8 +75,8 @@ export class SidenavComponent extends WithUnsubscribe() implements AfterViewInit
     return new Date().getFullYear().toString();
   }
 
-  public toggleDrawer(): void {
-    this.layoutService.toggleDrawer();
+  public closeSidenav(): void {
+    this.store.dispatch(new layoutActions.CloseSidenav());
   }
 
   public toggleEditing(): void {

src/app/core/config/config-interface.ts

@@ -47,6 +47,7 @@ export interface ConfigInterface {
   askToCreateVolume: boolean;
   savePasswordForAllVMs: boolean | null;
   lastVMId: number;
+  isSidenavVisible: boolean;
   showSystemTags: boolean;
   navigationOrder: string;
 }

src/app/core/config/default-configuration.ts

@@ -156,6 +156,7 @@ export const defaultConfig: ConfigInterface = {
    // The application will ask him about autosave passwords and set the value based on the user's choice.
   savePasswordForAllVMs: null,
   lastVMId: 1,
+  isSidenavVisible: true,
   showSystemTags: false,
   navigationOrder: ''
 };

src/app/core/services/system-tags.service.ts

@@ -41,6 +41,10 @@ export class SystemTagsService {
           key: userTagKeys.sessionTimeout,
           value: `${this.configService.get<number>('sessionTimeout')}`
         },
+        {
+          key: userTagKeys.sidenavVisible,
+          value: `${this.configService.get<boolean>('isSidenavVisible')}`
+        },
         {
           key: userTagKeys.showSystemTags,
           value: `${this.configService.get<boolean>('showSystemTags')}`

src/app/home/home.component.html

@@ -1,9 +1,7 @@
-<div class="wrapper">
-  <mat-sidenav-container>
-    <mat-sidenav [opened]="isDrawerOpen" mode="side">
-      <cs-sidenav [title]="title"></cs-sidenav>
-    </mat-sidenav>
+<mat-sidenav-container fullscreen>
+  <mat-sidenav [opened]="isSidenavVisible$ | async" mode="side">
+    <cs-sidenav [title]="title"></cs-sidenav>
+  </mat-sidenav>
 
-    <router-outlet></router-outlet>
-  </mat-sidenav-container>
-</div>
+  <router-outlet></router-outlet>
+</mat-sidenav-container>

src/app/home/home.component.scss

@@ -1,20 +1,4 @@
-:host {
-  height: 100%;
-}
-
-.wrapper {
-  display: flex;
-  flex: 1 1 auto;
-  height: 100%;
-}
-
 mat-sidenav-container {
-  flex-grow: 1;
-  min-height: 100%;
-  height: auto !important;
-  max-width: 100%;
-  margin: 0;
-
   mat-sidenav {
     display: flex;
     flex-direction: column;

src/app/home/home.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import { State, UserTagsActions } from '../root-store';
+import { layoutSelectors, State, UserTagsActions } from '../root-store';
 import { AuthService } from '../shared/services/auth.service';
-import { LayoutService } from '../shared/services/layout.service';
 import { WithUnsubscribe } from '../utils/mixins/with-unsubscribe';
 import { getName } from '../shared/models';
 import * as authActions from '../reducers/auth/redux/auth.actions';
@@ -16,10 +15,10 @@ import * as serviceOfferingActions from '../reducers/service-offerings/redux/ser
 })
 export class HomeComponent extends WithUnsubscribe() implements OnInit {
   public disableSecurityGroups = false;
+  public isSidenavVisible$ = this.store.select(layoutSelectors.isSidenavVisible);
 
   constructor(
     private auth: AuthService,
-    private layoutService: LayoutService,
     private store: Store<State>
   ) {
     super();
@@ -44,8 +43,4 @@ export class HomeComponent extends WithUnsubscribe() implements OnInit {
   public get title(): string {
     return this.auth.user ? getName(this.auth.user) : '';
   }
-
-  public get isDrawerOpen(): boolean {
-    return this.layoutService.drawerOpen;
-  }
 }

src/app/root-store/index.ts

@@ -1,4 +1,5 @@
 export { RootStoreModule } from './root-store.module';
 export * from './state';
 export * from './server-data';
+export * from './layout';
 export { IdleMonitorActions } from './idle-monitor';

src/app/root-store/layout/index.ts

@@ -0,0 +1,7 @@
+import * as layoutActions from './layout.actions';
+import * as layoutSelectors from './layout.selectors';
+
+export {
+  layoutActions,
+  layoutSelectors
+};

src/app/root-store/layout/layout.actions.ts

@@ -0,0 +1 @@
+export { OpenSidenav, CloseSidenav } from '../server-data/user-tags/user-tags.actions';

src/app/root-store/layout/layout.selectors.ts

@@ -0,0 +1,3 @@
+import * as UserTagsSelectors from '../server-data/user-tags/user-tags.selectors';
+
+export const isSidenavVisible = UserTagsSelectors.isSidenavVisible;