feat(dashboard): Recent People drawer is now in local storage (#521)

* Recent people können mit Button getoggelt werden.

* feat(app.dashboard): toggles recent people list

ISSUES CLOSED: #277

* scroller fixed, openbydefault fixed

haven't fixed colour yet

* background-colour-fixed

* style: background-colour-recent-people-fixed

ISSUES CLOSED: #277

* hidden in smaller window

* Update Phonebook.Frontend/src/app/pages/dashboard/dashboard.component.html

Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de>

* button needs to be relocated

* feat(dashboard): make recent people collapsible

* add formatting rule

* fix two little issue
 - default open
 - oveflow scroll bar

* Update dashboard.component.ts

first change

* recent people in local storage

* small change

* feat(App.Types): drawer in store

* closed drawer when window smaller than 768px

* auto toggle when resizing window

* preference saved when bigger screen

* better code

* fix(recentPeople): save state only in big screen

 * auto resize drawer while repecting state

Co-authored-by: DanielHabenicht <daniel-habenicht@outlook.de>

Author: Frieda-Hentschel

Phonebook.Frontend/src/app/pages/dashboard/dashboard.component.html

@@ -1,5 +1,11 @@
 <mat-drawer-container hasBackdrop="false" class="container" position="end">
-  <mat-drawer #drawer [mode]="drawerMode" [opened]="drawerOpen" position="end" class="pb-recent-people-drawer">
+  <mat-drawer
+    #drawer
+    [mode]="smallScreen ? 'push' : 'side'"
+    [opened]="drawerOpen"
+    position="end"
+    class="pb-recent-people-drawer"
+  >
     <div class="pb-recent-people">
       <h1>
         <ng-container i18n="DashboardComponent|Title of the recent people section@@DashboardComponentTitleRecent">
@@ -111,7 +117,7 @@ <h1 i18n="DashboardComponent|Title of the Bookmarked people section@@DashboardCo
     <div class="toggle-drawer">
       <button
         mat-icon-button
-        (click)="drawer.toggle()"
+        (click)="toggleDrawer()"
         i18n-matTooltip="
            DashboardComponent|Tooltip for expanding recently viewed people@@DashboardComponentButtonExpandTooltip
         "

Phonebook.Frontend/src/app/pages/dashboard/dashboard.component.ts

@@ -1,19 +1,24 @@
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CdkDragEnd, CdkDragEnter, moveItemInArray } from '@angular/cdk/drag-drop';
-import { ChangeDetectorRef, Component, OnInit, OnDestroy } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
+import { untilComponentDestroyed } from 'ng2-rx-componentdestroyed';
 import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Person, PhonebookSortDirection } from 'src/app/shared/models';
-import { BookmarksState, ToggleBookmark, UpdateBookmarkOrder } from 'src/app/shared/states';
+import {
+  AppState,
+  BookmarksState,
+  SetRecentPeopleDrawer,
+  ToggleBookmark,
+  UpdateBookmarkOrder
+} from 'src/app/shared/states';
 import {
   LastPersonsState,
   RemoveFromLastPersons,
   ResetLastPersons,
   SetLastPersons
 } from 'src/app/shared/states/LastPersons.state';
-import { untilComponentDestroyed } from 'ng2-rx-componentdestroyed';
-import { MatDrawerMode } from '@angular/material/sidenav';
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
@@ -31,18 +36,28 @@ export class DashboardComponent implements OnInit, OnDestroy {
   @Select(BookmarksState)
   public bookmarkedPersons$: Observable<Person[]>;
   public removedLastPersons: Person[] | null = null;
-  public drawerOpen: boolean = !this.breakpointObserver.isMatched('(max-width: 768px)');
-  public drawerMode: MatDrawerMode = 'side';
-  public smallerScreen: boolean = false;
+  public drawerOpen: boolean = false;
+  public smallScreen: boolean = false;
   constructor(private store: Store, private cd: ChangeDetectorRef, private breakpointObserver: BreakpointObserver) {}
 
   public ngOnInit() {
     this.changeOrder();
+    this.store
+      .select(AppState.recentPeopleDrawer)
+      .pipe(untilComponentDestroyed(this))
+      .subscribe(open => {
+        this.drawerOpen = open;
+      });
     this.breakpointObserver
       .observe('(max-width: 768px)')
       .pipe(untilComponentDestroyed(this))
       .subscribe(result => {
-        this.drawerMode = !result.matches ? 'side' : 'push';
+        this.smallScreen = result.matches;
+        if (this.smallScreen) {
+          this.drawerOpen = false;
+        } else {
+          this.drawerOpen = this.store.selectSnapshot(AppState.recentPeopleDrawer);
+        }
       });
   }
 
@@ -98,5 +113,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
   public removeFromBookmarkedPersons(person: Person) {
     this.store.dispatch(new ToggleBookmark(person));
   }
+
+  public toggleDrawer() {
+    this.drawerOpen = !this.drawerOpen;
+    if (!this.smallScreen) {
+      this.store.dispatch(new SetRecentPeopleDrawer(this.drawerOpen));
+    }
+  }
   ngOnDestroy(): void {}
 }

Phonebook.Frontend/src/app/shared/states/App.state.ts

@@ -1,7 +1,7 @@
+import { Injectable } from '@angular/core';
 import { Action, Selector, State, StateContext } from '@ngxs/store';
 import { ThemeService } from 'src/app/services/theme.service';
 import { Theme } from 'src/app/shared/models/enumerables/Theme';
-import { Injectable } from '@angular/core';
 
 export class ServiceWorkerNotificationDisplayed {
   public static readonly type: string = '[App State] Service Worker Notification displayed';
@@ -30,6 +30,11 @@ export class InitTheme {
   public static readonly type: string = '[App State] Init activeTheme';
 }
 
+export class SetRecentPeopleDrawer {
+  public static readonly type: string = '[App State] Set recentPeopleDrawer';
+  constructor(public active: boolean) {}
+}
+
 export interface AppStateModel {
   serviceWorkerNotificationDisplayed: boolean;
   version: string;
@@ -40,6 +45,7 @@ export interface AppStateModel {
    */
   sendFeedback: boolean | null;
   activeTheme: Theme;
+  recentPeopleDrawer: boolean;
 }
 
 @State<AppStateModel>({
@@ -49,7 +55,8 @@ export interface AppStateModel {
     version: '0.0.0',
     displayedNotificationVersion: 0,
     sendFeedback: null,
-    activeTheme: Theme.magenta_light_theme
+    activeTheme: Theme.magenta_light_theme,
+    recentPeopleDrawer: true
   }
 })
 @Injectable()
@@ -77,6 +84,10 @@ export class AppState {
   public static sendFeedback(state: AppStateModel): boolean | null {
     return state.sendFeedback;
   }
+  @Selector()
+  public static recentPeopleDrawer(state: AppStateModel): boolean {
+    return state.recentPeopleDrawer;
+  }
 
   @Action(ServiceWorkerNotificationDisplayed)
   public serviceWorkerNotificationDisplayed(ctx: StateContext<AppStateModel>) {
@@ -128,4 +139,13 @@ export class AppState {
     const state = ctx.getState();
     this.themeService.setTheme(state.activeTheme);
   }
+
+  @Action(SetRecentPeopleDrawer)
+  public setDrawer(ctx: StateContext<AppStateModel>, action: SetRecentPeopleDrawer) {
+    const state = ctx.getState();
+    ctx.setState({
+      ...state,
+      recentPeopleDrawer: action.active
+    });
+  }
 }