#19 Dashboard Overview (#2)

* Overview ready

* Limit to top five only

* BE adjustments

* PR fix

src/app/components/dashboard/dashboard.component.html

@@ -2,20 +2,25 @@
 <div class="grid grid-cols-2">
   <app-panel>
     <div class="text-light-pink">Chärtli</div>
-    <div class="text-4xl">1/420</div>
+    <div class="text-4xl">
+      {{ (this.dashboardData$ | async)?.myUniqueCardsCount }} /
+      {{ (this.dashboardData$ | async)?.allCardsCount }}
+    </div>
   </app-panel>
   <app-panel>
     <div class="text-light-pink">Rang</div>
-    <div class="text-4xl">69</div>
+    <div class="text-4xl">{{ this.myRank }}</div>
   </app-panel>
 </div>
 <app-panel>
   <div class="text-light-pink">Top 5</div>
   <ol class="list-decimal list-inside">
-    <li>Big P</li>
-    <li>Stefan Hüsemann</li>
-    <li>Larissa Zollinger</li>
-    <li>Christoph Weber</li>
-    <li>Kevin Duss</li>
+    <li
+      *ngFor="
+        let ranking of (this.dashboardData$ | async)?.rankingList | slice: 0 : 5
+      "
+    >
+      {{ ranking.displayName }}
+    </li>
   </ol>
 </app-panel>

src/app/components/dashboard/dashboard.component.ts

@@ -1,7 +1,39 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable, zip } from 'rxjs';
+import { Dashboard } from 'src/app/models/dashboard.model';
+import { DashboardService } from 'src/app/services/dashboard.service';
+import { selectProfile } from 'src/app/state/profile/profile.selectors';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
 })
-export class DashboardComponent {}
+export class DashboardComponent implements OnInit {
+  dashboardData$?: Observable<Dashboard>;
+  myRank?: number;
+
+  constructor(
+    private readonly dashboardService: DashboardService,
+    private readonly store: Store,
+  ) {}
+
+  ngOnInit(): void {
+    this.dashboardData$ = this.dashboardService.getDashboardData(
+      this.store.select(selectProfile),
+    );
+
+    zip([this.dashboardData$, this.store.select(selectProfile)]).subscribe(
+      ([dashboardData, user]) => {
+        if (!user) {
+          this.myRank = undefined;
+        } else {
+          this.myRank = this.dashboardService.getRankOf(
+            user.userPrincipalName,
+            dashboardData.rankingList,
+          );
+        }
+      },
+    );
+  }
+}

src/app/models/dashboard.model.ts

@@ -0,0 +1,14 @@
+export interface Dashboard {
+  myCardsCount: number;
+  myUniqueCardsCount: number;
+  allCardsCount: number;
+  duplicateCardsCount: number;
+  rankingList: Ranking[];
+}
+
+export interface Ranking {
+  rank: number;
+  cardsCount: number;
+  displayName: string;
+  userEmail: string;
+}

src/app/services/dashboard.service.ts

@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Dashboard, Ranking } from '../models/dashboard.model';
+import { environment } from 'src/environments/environment';
+import { Profile } from '../models/profile.model';
+import { Observable, of, switchMap, defaultIfEmpty } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DashboardService {
+  constructor(private readonly http: HttpClient) {}
+
+  getDashboardData(user: Observable<Profile | null>): Observable<Dashboard> {
+    return user.pipe(
+      switchMap((user) => {
+        // Return empty dashboard if no user is found
+        if (user === null) {
+          return of<Dashboard>({
+            myCardsCount: 0,
+            myUniqueCardsCount: 0,
+            allCardsCount: 0,
+            duplicateCardsCount: 0,
+            rankingList: [],
+          });
+        }
+
+        return this.http.get<Dashboard>(`${environment.backendUri}/overview`);
+      }),
+    );
+  }
+
+  getRankOf(userEmail: string, rankingList: Ranking[]): number {
+    return (
+      rankingList.find((ranking) => ranking.userEmail === userEmail)?.rank ?? 0
+    );
+  }
+}