add loading and error handling in dashboard

Author: Weronika Wolska

angular-monorepo/libs/entities/data-repository/src/lib/services/mock-entity.service.ts

@@ -178,10 +178,13 @@ export class MockEntityService {
   }
 
   getLocationStats(): Observable<LocationStats> {
-    return of({
-      lastWeekLocationOccupancy: this.lastWeekLocationOccupancy,
-      lastWeekEmployeesVisits: this.mapVisits(),
-    });
+    return defer(() => {
+      if (Math.random() < 0.1) return throwError(() => 'Failed to update');
+      return of({
+        lastWeekLocationOccupancy: this.lastWeekLocationOccupancy,
+        lastWeekEmployeesVisits: this.mapVisits(),
+      });
+    }).pipe(delay(1000));
   }
 
   private mapVisits() {

angular-monorepo/libs/entities/feature-location-dashboard/src/lib/components/location-dashboard/location-dashboard.component.ts

@@ -1,13 +1,28 @@
 import { EntityService } from '@angular-monorepo/entities/data-repository';
 import { Component } from '@angular/core';
-
+import { catchError, of } from 'rxjs';
+import { MessageService } from 'primeng/api';
 @Component({
   selector: 'angular-monorepo-location-dashboard',
   templateUrl: './location-dashboard.component.html',
   styleUrls: ['./location-dashboard.component.scss'],
 })
 export class LocationDashboardComponent {
-  data$ = this.entityService.getLocationStats();
+  data$ = this.entityService.getLocationStats().pipe(
+    catchError(() => {
+      this.messageService.add({
+        severity: 'error',
+        detail: 'Could not load location data',
+      });
+      return of({
+        lastWeekLocationOccupancy: [],
+        lastWeekEmployeesVisits: [],
+      });
+    })
+  );
 
-  constructor(private entityService: EntityService) {}
+  constructor(
+    private entityService: EntityService,
+    private messageService: MessageService
+  ) {}
 }