Add spinner

bkd-mba-fbi · Dec 18, 2024 · fa5c1d8 · fa5c1d8
1 parent 097b3ad
commit fa5c1d8
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 42 deletions.
diff --git a/...ts/events-students-study-course-detail/events-students-study-course-detail.component.html b/...ts/events-students-study-course-detail/events-students-study-course-detail.component.html
@@ -1,33 +1,45 @@
 <bkd-backlink link="../.." [params]="backLink()"></bkd-backlink>
 
-<h1>{{ person()?.FullName }}</h1>
-<span class="additional-info">
-  @if (person()?.Birthdate) {
-    {{ person()?.Birthdate | date: "dd.MM.yyyy" }}
-  }
-  @if (person()?.Gender) {
-    ({{ person()?.Gender }})
-  }
-</span>
-<address>
-  @if (person()?.AddressLine1) {
-    {{ person()?.AddressLine1 }}<br />
-  }
-  @if (person()?.Zip && person()?.Location) {
-    {{ person()?.Zip }} {{ person()?.Location }}<br />
-  }
-  @if (person()?.PhonePrivate) {
-    <a href="tel:{{ person()?.PhonePrivate }}">{{ person()?.PhonePrivate }}</a
-    ><br />
-  }
-  @if (person()?.PhoneMobile) {
-    <a href="tel:{{ person()?.PhoneMobile }}">{{ person()?.PhoneMobile }}</a>
-  }
-</address>
-<div class="status">
-  {{ "events-students.study-course-detail.status" | translate }}:
-  <span class="ms-2">{{ subscription()?.Status }}</span>
-</div>
+@let personData = person();
+@if (personData) {
+  <h1>{{ personData.FullName }}</h1>
+  <span class="additional-info">
+    @if (personData.Birthdate) {
+      {{ personData.Birthdate | date: "dd.MM.yyyy" }}
+    }
+    @if (personData.Gender) {
+      ({{ personData.Gender }})
+    }
+  </span>
+  <address>
+    @if (personData.AddressLine1) {
+      {{ personData.AddressLine1 }}<br />
+    }
+    @if (personData.Zip && personData.Location) {
+      {{ personData.Zip }} {{ personData.Location }}<br />
+    }
+    @if (personData.PhonePrivate) {
+      <a href="tel:{{ personData.PhonePrivate }}">{{
+        personData.PhonePrivate
+      }}</a
+      ><br />
+    }
+    @if (personData.PhoneMobile) {
+      <a href="tel:{{ personData.PhoneMobile }}">{{
+        personData.PhoneMobile
+      }}</a>
+    }
+  </address>
+}
+
+@let status = subscription()?.Status;
+@if (status) {
+  <div class="status">
+    {{ "events-students.study-course-detail.status" | translate }}:
+    <span class="ms-2">{{ status }}</span>
+  </div>
+}
+
 @for (detail of subscriptionDetails(); track detail.id) {
   @if (detail.value) {
     <div class="detail">
@@ -40,3 +52,7 @@ <h1>{{ person()?.FullName }}</h1>
     </div>
   }
 }
+
+@if (loading()) {
+  <bkd-spinner></bkd-spinner>
+}
diff --git a/...ents/events-students-study-course-detail/events-students-study-course-detail.component.ts b/...ents/events-students-study-course-detail/events-students-study-course-detail.component.ts
@@ -9,6 +9,8 @@ import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { ActivatedRoute } from "@angular/router";
 import { TranslatePipe } from "@ngx-translate/core";
 import { Observable, combineLatest, filter, map, switchMap } from "rxjs";
+import { SpinnerComponent } from "src/app/shared/components/spinner/spinner.component";
+import { LoadingService } from "src/app/shared/services/loading-service";
 import { SETTINGS, Settings } from "../../../settings";
 import { BacklinkComponent } from "../../../shared/components/backlink/backlink.component";
 import {
@@ -31,7 +33,7 @@ type SubscriptionDetailsEntry = {
 
 @Component({
   selector: "bkd-events-students-study-course-detail",
-  imports: [BacklinkComponent, DatePipe, TranslatePipe],
+  imports: [TranslatePipe, DatePipe, BacklinkComponent, SpinnerComponent],
   templateUrl: "./events-students-study-course-detail.component.html",
   styleUrl: "./events-students-study-course-detail.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -55,6 +57,7 @@ export class EventsStudentsStudyCourseDetailComponent {
       map(parseQueryString),
     ),
   );
+  loading = toSignal(this.loadingService.loading$, { initialValue: true });
 
   constructor(
     @Inject(SETTINGS) private settings: Settings,
@@ -63,30 +66,37 @@ export class EventsStudentsStudyCourseDetailComponent {
     private subscriptionService: SubscriptionsRestService,
     private state: EventsStudentsStateService,
     private storageService: StorageService,
+    private loadingService: LoadingService,
   ) {}
 
   private loadSubscription(): Observable<Option<Subscription>> {
-    return combineLatest([this.state.eventId$, this.personId$]).pipe(
-      switchMap(([eventId, personId]) =>
-        this.subscriptionService.getSubscriptionsByCourse(eventId, {
-          "filter.PersonId": `=${personId}`,
-        }),
+    return this.loadingService.load(
+      combineLatest([this.state.eventId$, this.personId$]).pipe(
+        switchMap(([eventId, personId]) =>
+          this.subscriptionService.getSubscriptionsByCourse(eventId, {
+            "filter.PersonId": `=${personId}`,
+          }),
+        ),
+        map((subscriptions) => subscriptions[0] ?? null),
       ),
-      map((subscriptions) => subscriptions[0] ?? null),
+      { stopOnFirstValue: true },
     );
   }
 
   private loadSubscriptionDetails(): Observable<
     ReadonlyArray<SubscriptionDetailsEntry>
   > {
-    return toObservable(this.subscriptionId).pipe(
-      filter(notNull),
-      switchMap((id) =>
-        this.subscriptionService.getSubscriptionDetailsById(id),
-      ),
-      map((details) =>
-        details.map((detail) => this.toSubscriptionDetailsEntry(detail)),
+    return this.loadingService.load(
+      toObservable(this.subscriptionId).pipe(
+        filter(notNull),
+        switchMap((id) =>
+          this.subscriptionService.getSubscriptionDetailsById(id),
+        ),
+        map((details) =>
+          details.map((detail) => this.toSubscriptionDetailsEntry(detail)),
+        ),
       ),
+      { stopOnFirstValue: true },
     );
   }