feat(dashboard): Select different Layouts for Bookmarks in Settings (#536)

Previously, the only option were the user-small-cards. Now one can choose between three different Layouts for the bookmarked people on the dashboard. I used the user-small-cards and user-tiny-cards for two of the layouts and created the user-list-card.component for the third option.

closes #176

Co-authored-by: DanielHabenicht <daniel-habenicht@outlook.de>
Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com>
Co-authored-by: Restyled.io <commits@restyled.io>

Author: 4 people

Phonebook.Frontend/src/app/app.module.ts

@@ -53,6 +53,7 @@ import { environment } from 'src/environments/environment';
 import { FloorplanService } from './services/floorplan.service';
 import { SearchComponent } from './shared/components/search/search.component';
 import { HttpRedirectToLogin } from 'src/app/shared/interceptors/HttpRedirectToLogin';
+import { FormsModule } from '@angular/forms';
 
 declare const require;
 
@@ -71,6 +72,7 @@ declare const require;
     HttpClientModule,
     ErrorHandlerModule.forRoot(),
     MaterialModule,
+    FormsModule,
     DialogsModule,
     ProfilePictureModule,
     SettingsModule,

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

@@ -90,29 +90,77 @@ <h1>
             >
           </mat-select>
         </mat-form-field>
+        <button
+          i18n-matTooltip="
+            DashboardComponent|Layout Change Button Tooltip@@dashboardComponentLayoutChangeTooltip"
+          matTooltip="Here you can change the layout of your dashboard."
+          (click)="select.open()"
+          mat-icon-button
+          class="changeLayoutButton"
+        >
+          <mat-icon>{{ activeLayout$ | async }}</mat-icon>
+          <mat-select
+            #select
+            class="selectLayout"
+            [ngModel]="activeLayout$ | async"
+            (ngModelChange)="changeLayout($event)"
+          >
+            <mat-option *ngFor="let view of layouts" [value]="view">
+              <span>{{ getLayoutName(view) }}</span>
+            </mat-option>
+          </mat-select>
+        </button>
       </div>
       <!-- This is a workaround for https://github.com/angular/material2/issues/13372 -->
-      <div cdkDropListGroup class="pb-bookmarks-list pb-flex-row">
-        <div
-          *ngFor="let person of bookmarkedPersons; index as i"
-          cdkDropList
-          [cdkDropListData]="i"
-          cdkDropListOrientation="horizontal"
-          class="card-container"
-        >
-          <app-user-small-card
-            [person]="person"
-            [actionButtonIcon]="'close'"
-            [actionButtonClasses]="'white'"
-            (actionButtonClicked)="removeFromBookmarkedPersons(person)"
-            class="pb-small-card pb-card"
-            cdkDrag
-            (cdkDragEntered)="entered($event)"
-            (cdkDragEnded)="ended($event)"
-            [cdkDragData]="i"
-            [cdkDragDisabled]="favoriteSort != ''"
-          ></app-user-small-card>
-        </div>
+      <div
+        cdkDropListGroup
+        class="pb-flex-row pb-bookmarks-list"
+        [ngSwitch]="activeLayout$ | async"
+      >
+        <ng-container *ngSwitchCase="layout.medium_cards">
+          <div
+            *ngFor="let person of bookmarkedPersons; index as i"
+            cdkDropList
+            [cdkDropListData]="i"
+            cdkDropListOrientation="horizontal"
+            class="card-container"
+          >
+            <app-user-small-card
+              [person]="person"
+              [actionButtonIcon]="'close'"
+              [actionButtonClasses]="'white'"
+              (actionButtonClicked)="removeFromBookmarkedPersons(person)"
+              class="pb-small-card pb-card"
+              cdkDrag
+              (cdkDragEntered)="entered($event)"
+              (cdkDragEnded)="ended($event)"
+              [cdkDragData]="i"
+              [cdkDragDisabled]="favoriteSort != ''"
+            ></app-user-small-card>
+          </div>
+        </ng-container>
+        <ng-container *ngSwitchCase="layout.small_cards">
+          <div
+            *ngFor="let person of bookmarkedPersons; index as i"
+            cdkDropList
+            [cdkDropListData]="i"
+            cdkDropListOrientation="horizontal"
+            class="card-container"
+          >
+            <app-user-tiny-card
+              [person]="person"
+              [actionButtonIcon]="'close'"
+              [actionButtonClasses]="'white'"
+              (actionButtonClicked)="removeFromBookmarkedPersons(person)"
+              class="pb-card"
+              cdkDrag
+              (cdkDragEntered)="entered($event)"
+              (cdkDragEnded)="ended($event)"
+              [cdkDragData]="i"
+              [cdkDragDisabled]="favoriteSort != ''"
+            ></app-user-tiny-card>
+          </div>
+        </ng-container>
       </div>
       <div
         *ngIf="bookmarkedPersons.length === 0"

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

@@ -11,6 +11,7 @@ mat-drawer-container {
 
 .pb-bookmarked {
   height: 100%;
+  margin-right: 50px;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -93,3 +94,17 @@ mat-drawer-container {
 .cdk-drag-animating {
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+::ng-deep .selectLayout div.mat-select-arrow-wrapper {
+  display: none;
+}
+
+::ng-deep .selectLayout.mat-select {
+  display: inline;
+}
+
+.changeLayoutButton {
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
+}

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

@@ -6,9 +6,11 @@ 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 { Layout } from 'src/app/shared/models/enumerables/Layout';
 import {
   AppState,
   BookmarksState,
+  SetLayout,
   SetRecentPeopleDrawer,
   ToggleBookmark,
   UpdateBookmarkOrder,
@@ -36,6 +38,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
   @Select(BookmarksState)
   public bookmarkedPersons$: Observable<Person[]>;
   public removedLastPersons: Person[] | null = null;
+  @Select(AppState.activeLayout)
+  public activeLayout$: Observable<Layout>;
+  public layouts: string[] = Object.values(Layout);
+
+  public layout: typeof Layout = Layout;
   public drawerOpen: boolean = false;
   public smallScreen: boolean = false;
   constructor(
@@ -118,11 +125,28 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.store.dispatch(new ToggleBookmark(person));
   }
 
+  public changeLayout(layoutClass: Layout) {
+    this.store.dispatch(new SetLayout(layoutClass));
+  }
+
+  public getLayoutName(layout: Layout): string {
+    switch (layout) {
+      case Layout.medium_cards: {
+        return $localize`:NavigationComponent|View Mode - MediumCards@@NavigationComponentViewModeMediumCards:Medium Cards`;
+      }
+      case Layout.small_cards: {
+        return $localize`:NavigationComponent|View Mode - SmallCards@@NavigationComponentViewModeSmallCards:Small Cards`;
+      }
+      default:
+        throw Error(`Translation for layout ${layout} does not exist.`);
+    }
+  }
+
   public toggleDrawer() {
     this.drawerOpen = !this.drawerOpen;
     if (!this.smallScreen) {
       this.store.dispatch(new SetRecentPeopleDrawer(this.drawerOpen));
     }
   }
-  ngOnDestroy(): void {}
+  public ngOnDestroy(): void {}
 }

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

@@ -13,8 +13,15 @@ <h1 i18n="SettingsComponent|Title of the settings page@@SettingsComponentTitle">
 
   <mat-card-content class="settings">
     <div class="pb-flex-1">
-      <h2 i18n="SettingsComponent|Language SubTitle@@SettingsComponentSubTitleLanguage"
-        >Language</h2
+      <h2
+        class="subheading"
+        i18n="
+          SettingsComponent|Subtitle General of the settings page@@SettingsComponentSubtitleGeneral"
+      >
+        General
+      </h2>
+      <h4 i18n="SettingsComponent|Language SubTitle@@SettingsComponentSubTitleLanguage"
+        >Language</h4
       >
       <mat-list>
         <mat-list-item>
@@ -28,8 +35,8 @@ <h1 i18n="SettingsComponent|Title of the settings page@@SettingsComponentTitle">
           </mat-form-field>
         </mat-list-item>
       </mat-list>
-      <h2 i18n="SettingsComponent|Color Theme SubTitle@@SettingsComponentSubTitleColorTheme"
-        >Color Theme</h2
+      <h4 i18n="SettingsComponent|Color Theme SubTitle@@SettingsComponentSubTitleColorTheme"
+        >Color Theme</h4
       >
       <mat-list>
         <mat-list-item>
@@ -47,23 +54,6 @@ <h1 i18n="SettingsComponent|Title of the settings page@@SettingsComponentTitle">
           </mat-form-field>
         </mat-list-item>
       </mat-list>
-      <h2 i18n="SettingsComponent|Layout Subtitle@@SettingsComponentSubTitleLayout">Layout</h2>
-      <mat-list>
-        <mat-list-item>
-          <mat-icon class="pb-margin-20">{{ layoutValue }}</mat-icon>
-          <mat-form-field>
-            <mat-select [(ngModel)]="layoutValue" (ngModelChange)="changeLayout(layoutValue)">
-              <mat-select-trigger>
-                <span>{{ getLayoutName(layoutValue) }}</span>
-              </mat-select-trigger>
-              <mat-option *ngFor="let view of layout" [value]="view">
-                <mat-icon>{{ view }}</mat-icon>
-                <span>{{ getLayoutName(view) }}</span>
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </mat-list-item>
-      </mat-list>
     </div>
   </mat-card-content>
 </mat-card>

Phonebook.Frontend/src/app/pages/settings/settings.component.scss

@@ -2,3 +2,7 @@
   display: flex;
   flex-direction: row;
 }
+
+.subheading {
+  margin: 10px 0 0 0 !important;
+}

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

@@ -1,14 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-
-import { Store, Select } from '@ngxs/store';
+import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { FeatureFlagService } from 'src/app/modules/feature-flag/feature-flag.service';
-import { NotImplementedService } from 'src/app/modules/not-implemented/not-implemented.service';
 import { LanguageService } from 'src/app/services/language.service';
 import { Language } from 'src/app/shared/models/enumerables/Language';
-import { AppState, SetTheme } from 'src/app/shared/states';
 import { Theme } from 'src/app/shared/models/enumerables/Theme';
+import { AppState, SetTheme } from 'src/app/shared/states';
 
 @Component({
   selector: 'app-settings',
@@ -21,16 +19,13 @@ export class SettingsComponent implements OnInit, OnDestroy {
   public themeValue$: Observable<Theme>;
   public themes: string[] = Object.values(Theme);
   public languages: string[] = Object.keys(Language);
-  public layoutValue: Layout = Layout.view_module;
-  public layout: string[] = Object.values(Layout);
   public featureFlags: Observable<
     { name: string; value: boolean }[]
   > = this.featureFlagService.getAllDefaultDisabled();
 
   constructor(
     private store: Store,
     public languageService: LanguageService,
-    private notImplementedService: NotImplementedService,
     public featureFlagService: FeatureFlagService
   ) {}
 
@@ -46,11 +41,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.languageService.setLanguage(lang);
   }
 
-  public changeLayout(layout: Layout) {
-    this.notImplementedService.notImplemented();
-    this.layoutValue = layout;
-  }
-
   public getThemeName(theme: Theme) {
     switch (theme) {
       case Theme.blue_light_theme: {
@@ -73,29 +63,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
     }
   }
 
-  public getLayoutName(layout: Layout): string {
-    switch (layout) {
-      case Layout.view_list: {
-        return $localize`:NavigationComponent|View Mode - List@@NavigationComponentViewModeList:List View`;
-      }
-      case Layout.view_module: {
-        return $localize`:NavigationComponent|View Mode - Module@@NavigationComponentViewModeModule:Module View`;
-      }
-      case Layout.view_stream: {
-        return $localize`:NavigationComponent|View Mode - Stream@@NavigationComponentViewModeStream:Stream View`;
-      }
-    }
-  }
-
   public changeFeatureFlag(event: MatSlideToggleChange, flag: string) {
     this.featureFlagService.set(flag, event.checked);
   }
 
   public ngOnDestroy() {}
 }
-
-enum Layout {
-  view_list = 'view_list',
-  view_module = 'view_module',
-  view_stream = 'view_stream',
-}

Phonebook.Frontend/src/app/shared/models/enumerables/Layout.ts

@@ -0,0 +1,4 @@
+export enum Layout {
+  medium_cards = 'view_stream',
+  small_cards = 'view_module',
+}

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

@@ -2,11 +2,17 @@ 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 { Layout } from 'src/app/shared/models/enumerables/Layout';
 
 export class ServiceWorkerNotificationDisplayed {
   public static readonly type: string = '[App State] Service Worker Notification displayed';
 }
 
+export class SetLayout {
+  public static readonly type: string = '[App State] Set activeLayout';
+  constructor(public activeLayout: Layout) {}
+}
+
 export class SetVersion {
   public static readonly type: string = '[App State] Set Version';
   constructor(public version: string) {}
@@ -45,6 +51,7 @@ export interface AppStateModel {
    */
   sendFeedback: boolean | null;
   activeTheme: Theme;
+  activeLayout: Layout;
   recentPeopleDrawer: boolean;
 }
 
@@ -56,6 +63,7 @@ export interface AppStateModel {
     displayedNotificationVersion: 0,
     sendFeedback: null,
     activeTheme: Theme.magenta_light_theme,
+    activeLayout: Layout.medium_cards,
     recentPeopleDrawer: true,
   },
 })
@@ -75,6 +83,10 @@ export class AppState {
   public static activeTheme(state: AppStateModel): Theme {
     return state.activeTheme;
   }
+  @Selector()
+  public static activeLayout(state: AppStateModel): Layout {
+    return state.activeLayout;
+  }
 
   @Selector()
   public static displayedNotificationVersion(state: AppStateModel): number {
@@ -143,6 +155,15 @@ export class AppState {
     this.themeService.setTheme(state.activeTheme);
   }
 
+  @Action(SetLayout)
+  public setLayout(ctx: StateContext<AppStateModel>, action: SetLayout) {
+    const state = ctx.getState();
+    ctx.setState({
+      ...state,
+      activeLayout: action.activeLayout,
+    });
+  }
+
   @Action(SetRecentPeopleDrawer)
   public setDrawer(ctx: StateContext<AppStateModel>, action: SetRecentPeopleDrawer) {
     const state = ctx.getState();