feat(dashboard): Show Team on Dashboard

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

@@ -1,11 +1,18 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-import { DashboardComponent } from 'src/app/pages/dashboard/dashboard.component';
+import { DashboardComponent } from 'src/app/pages/dashboard/components/dashboard/dashboard.component';
 import { SettingsComponent } from 'src/app/pages/settings/settings.component';
 import { environment } from 'src/environments/environment';
+import { TeamComponent } from './pages/dashboard/components/team/team.component';
+import { BookmarkedComponent } from './pages/dashboard/components/bookmarked/bookmarked.component';
 
 const routes: Routes = [
-  { path: '', component: DashboardComponent, pathMatch: 'full' },
+  { path: '', redirectTo: 'dashboard/bookmarks', pathMatch: 'full' },
+  {
+    path: 'dashboard',
+    loadChildren: () =>
+      import('src/app/pages/dashboard/dashboard.module').then((m) => m.DashboardModule),
+  },
   {
     path: 'search',
     loadChildren: () => import('src/app/modules/table/table.module').then((m) => m.TableModule),

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

@@ -20,7 +20,7 @@ import { FeatureFlagModule } from 'src/app/modules/feature-flag/feature-flag.mod
 import { NotImplementedModule } from 'src/app/modules/not-implemented/not-implemented.module';
 import { ProfilePictureModule } from 'src/app/modules/profile-picture/profile-picture.module';
 import { TableModule } from 'src/app/modules/table/table.module';
-import { DashboardComponent } from 'src/app/pages/dashboard/dashboard.component';
+import { DashboardComponent } from 'src/app/pages/dashboard/components/dashboard/dashboard.component';
 import { SettingsModule } from 'src/app/pages/settings/settings.module';
 import { UserPagesModule } from 'src/app/pages/users/user-pages.module';
 import { ApiModule } from 'src/app/services/api/api.module';
@@ -58,13 +58,7 @@ import { FormsModule } from '@angular/forms';
 declare const require;
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    SearchComponent,
-    DashboardComponent,
-    NavigationComponent,
-    OnlineBarComponent,
-  ],
+  declarations: [AppComponent, SearchComponent, NavigationComponent, OnlineBarComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,

Phonebook.Frontend/src/app/modules/organigram/pages/organigram/organigram.component.ts

@@ -13,7 +13,7 @@ export class OrganigramComponent implements OnInit {
   constructor(private organigramService: OrganigramService) {}
 
   public ngOnInit() {
-    this.organigramService.getOrganigram().subscribe((organigram) => {
+    this.organigramService.getOrganigramTree().subscribe((organigram) => {
       this.nodes = organigram;
     });
   }

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

@@ -0,0 +1,106 @@
+<div class="pb-bookmarked">
+  <div class="pb-bookmarked-title">
+    <h1>
+      <mat-icon>bookmark</mat-icon>
+      <span
+        class="mat-headline pb-margin-0"
+        i18n="
+          DashboardComponent|Title of the Bookmarked people section@@DashboardComponentTitleBookmark"
+      >
+        Bookmarked People
+      </span>
+    </h1>
+    <mat-form-field>
+      <mat-select [(value)]="favoriteSort" (valueChange)="changeOrder()">
+        <mat-option
+          value=""
+          i18n="
+            DashboardComponent|The standard (customizable) order of the favorite
+            cards@@DashboardComponentOrderNone"
+        >
+          Custom Order</mat-option
+        >
+        <mat-option
+          value="asc"
+          i18n="
+            DashboardComponent|The alphabetical asc order of the favorite
+            cards@@DashboardComponentOrderAsc"
+        >
+          Alphabetical asc</mat-option
+        >
+        <mat-option
+          value="desc"
+          i18n="
+            DashboardComponent|The alphabetical desc order of the favorite
+            cards@@DashboardComponentOrderDesc"
+        >
+          Alphabetical desc</mat-option
+        >
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <!-- This is a workaround for https://github.com/angular/material2/issues/13372 -->
+  <div
+    cdkDropListGroup
+    class="pb-bookmarks-list pb-flex-row pb-overflow-auto"
+    [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
+      *ngIf="bookmarkedPersons.length === 0"
+      i18n="
+        DashboardComponent|Message displayed if no people are
+        bookmarked@@DashboardComponentDescriptionBookmark"
+    >
+      You haven't bookmarked anybody yet, look for the button
+      <button mat-icon-button>
+        <mat-icon>bookmark_border</mat-icon>
+      </button>
+      on a workmates page.
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,50 @@
+.pb-bookmarked {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding-right: 10px;
+}
+
+.pb-small-card {
+  width: 320px;
+  height: 275px;
+}
+
+.card-container {
+  display: flex;
+}
+
+.pb-card:active {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+.cdk-drop-dragging .cdk-drag,
+.pb-card:not(.cdk-drag-placeholder) {
+  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drag-animating {
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.pb-bookmarked-title {
+  display: flex;
+  flex-direction: row;
+  mat-icon {
+    display: inline-flex;
+    vertical-align: middle;
+    height: 29px;
+    width: 29px;
+  }
+  h1 {
+    margin: 0;
+  }
+  mat-form-field {
+    margin-left: 16px;
+  }
+  ::ng-deep .mat-form-field-infix {
+    border: none;
+  }
+}

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

@@ -0,0 +1,101 @@
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { CdkDragEnd, CdkDragEnter, moveItemInArray } from '@angular/cdk/drag-drop';
+import { ChangeDetectorRef, Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Select, Store } from '@ngxs/store';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Person, PhonebookSortDirection } from 'src/app/shared/models';
+import {
+  BookmarksState,
+  ToggleBookmark,
+  UpdateBookmarkOrder,
+  AppState,
+} from 'src/app/shared/states';
+import { CurrentUserService } from 'src/app/services/api/current-user.service';
+import { untilComponentDestroyed } from 'ng2-rx-componentdestroyed';
+import { Router } from '@angular/router';
+import { Layout } from 'src/app/shared/models/enumerables/Layout';
+
+@Component({
+  selector: 'app-bookmarked',
+  templateUrl: './bookmarked.component.html',
+  styleUrls: ['./bookmarked.component.scss'],
+  host: { class: 'pb-dashboard-component' },
+})
+export class BookmarkedComponent implements OnInit, OnDestroy {
+  public bookmarkedPersons: Person[];
+  public bookmarkedPersonsSubscriptions: Subscription | null = null;
+  public favoriteSort: PhonebookSortDirection = PhonebookSortDirection.none;
+  public lastFrom: number;
+  public lastTo: number;
+  @Select(BookmarksState)
+  public bookmarkedPersons$: Observable<Person[]>;
+  public currentUser: Person | null = null;
+  @Select(AppState.activeLayout)
+  public activeLayout$: Observable<Layout>;
+  public layouts: string[] = Object.values(Layout);
+  public layout: typeof Layout = Layout;
+  constructor(
+    private store: Store,
+    private cd: ChangeDetectorRef,
+    private breakpointObserver: BreakpointObserver,
+    public router: Router,
+    private currentUserService: CurrentUserService
+  ) {}
+
+  public ngOnInit() {
+    this.changeOrder();
+    this.currentUserService
+      .getCurrentUser()
+      .pipe(untilComponentDestroyed(this))
+      .subscribe(
+        (user) => {
+          if (user != null) {
+            this.currentUser = user;
+          }
+        },
+        (error) => {
+          this.currentUser = null;
+        }
+      );
+  }
+
+  public changeOrder() {
+    if (this.bookmarkedPersonsSubscriptions) {
+      this.bookmarkedPersonsSubscriptions.unsubscribe();
+    }
+    this.bookmarkedPersonsSubscriptions = this.store
+      .select(BookmarksState.sortedBookmarks)
+      .pipe(map((filterFn) => filterFn(this.favoriteSort)))
+      .subscribe((persons) => {
+        this.bookmarkedPersons = persons;
+      });
+  }
+
+  public entered(e: CdkDragEnter) {
+    if (this.bookmarkedPersons && this.bookmarkedPersons.length === 1) {
+      return;
+    }
+
+    this.lastFrom = e.item.data;
+    this.lastTo = e.container.data;
+  }
+
+  public ended(e: CdkDragEnd) {
+    if (this.bookmarkedPersons && this.bookmarkedPersons.length === 1) {
+      return;
+    }
+    if (this.lastFrom === undefined || this.lastTo === undefined) {
+      return;
+    }
+    moveItemInArray(this.bookmarkedPersons, this.lastFrom, this.lastTo);
+    this.store.dispatch(new UpdateBookmarkOrder(this.bookmarkedPersons));
+    this.cd.detectChanges();
+  }
+
+  public removeFromBookmarkedPersons(person: Person) {
+    this.store.dispatch(new ToggleBookmark(person));
+  }
+
+  public ngOnDestroy(): void {}
+}