Load and style subscription entries (WIP) #716

bkd-mba-fbi · Dec 12, 2024 · eb39a58 · eb39a58
1 parent 249220c
commit eb39a58
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 19 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
@@ -20,11 +20,13 @@ <h1>{{ person()?.FullName }}</h1>
   {{ "events-students.study-course-detail.status" | translate }}:
   <span class="ms-2">{{ studentEntry()?.status }}</span>
 </div>
-@for (detail of subscriptionDetails(); track detail.Id) {
-  <ul>
-    <li>{{ detail.Id }}</li>
-    <li>{{ detail.Value }}</li>
-    <li>{{ detail.VssDesignation }}</li>
-    <li>{{ detail.VssStyle }}</li>
-  </ul>
+@for (detail of subscriptionDetails(); track detail.id) {
+  <div class="detail">
+    <div>{{ detail.label }}</div>
+    @if (detail.file !== null) {
+      <a href="{{ detail.file }}" target="_blank">{{ detail.value }}</a>
+    } @else {
+      {{ detail.value }}
+    }
+  </div>
 }
diff --git a/...ts/events-students-study-course-detail/events-students-study-course-detail.component.scss b/...ts/events-students-study-course-detail/events-students-study-course-detail.component.scss
@@ -19,3 +19,13 @@ address {
   border-top: 1px solid $border-color;
   border-bottom: 1px solid $border-color;
 }
+
+.detail {
+  max-width: 70ch;
+  padding-top: $spacer;
+
+  div {
+    color: $gray-dark;
+    font-size: $font-size-sm;
+  }
+}
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
@@ -1,15 +1,30 @@
 import { DatePipe } from "@angular/common";
-import { ChangeDetectionStrategy, Component, computed } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  computed,
+} from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { ActivatedRoute } from "@angular/router";
 import { TranslateModule } from "@ngx-translate/core";
-import { filter, map, switchMap } from "rxjs";
+import { Observable, filter, map, switchMap, tap } from "rxjs";
+import { SETTINGS, Settings } from "../../../settings";
 import { BacklinkComponent } from "../../../shared/components/backlink/backlink.component";
+import { SubscriptionDetail } from "../../../shared/models/subscription.model";
 import { PersonsRestService } from "../../../shared/services/persons-rest.service";
+import { StorageService } from "../../../shared/services/storage.service";
 import { SubscriptionsRestService } from "../../../shared/services/subscriptions-rest.service";
 import { notNull } from "../../../shared/utils/filter";
 import { EventsStudentsStateService } from "../../services/events-students-state.service";
 
+type SubscriptionDetailsEntry = {
+  id: string;
+  label: string;
+  value: string;
+  file: Option<string>;
+};
+
 @Component({
   selector: "bkd-events-students-study-course-detail",
   standalone: true,
@@ -31,21 +46,54 @@ export class EventsStudentsStudyCourseDetailComponent {
       this.state.entries().filter((entry) => entry.id === this.person()?.Id)[0],
   );
   subscriptionId = computed(() => this.studentEntry()?.subscriptionId ?? null);
-  subscriptionDetails = toSignal(
-    toObservable(this.subscriptionId).pipe(
-      filter(notNull),
-      switchMap((id) =>
-        this.subscriptionService.getSubscriptionDetailsById(id),
-      ),
-      map((details) => details.filter((detail) => detail.Value)),
-    ),
-    { initialValue: [] },
-  );
+  subscriptionDetails = toSignal(this.loadSubscriptionDetails(), {
+    initialValue: [] as ReadonlyArray<SubscriptionDetailsEntry>,
+  });
 
   constructor(
+    @Inject(SETTINGS) private settings: Settings,
     private route: ActivatedRoute,
     private personService: PersonsRestService,
     private subscriptionService: SubscriptionsRestService,
     private state: EventsStudentsStateService,
+    private storageService: StorageService,
   ) {}
+
+  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)),
+      ),
+      tap((details) => console.log(details)),
+    );
+  }
+
+  private toSubscriptionDetailsEntry(
+    detail: SubscriptionDetail,
+  ): SubscriptionDetailsEntry {
+    return {
+      id: detail.Id,
+      label: detail.VssDesignation,
+      value: detail.Value || "",
+      file: this.buildFileUrl(detail),
+    };
+  }
+
+  private buildFileUrl(detail: SubscriptionDetail): Option<string> {
+    if (
+      detail.VssStyle === "PD" ||
+      detail.VssStyle === "PF" ||
+      detail.VssStyle === "DA"
+    ) {
+      const accessToken = this.storageService.getAccessToken() || "";
+      return `${this.settings.apiUrl}/Files/SubscriptionDetails/${detail.Id}?token=${accessToken}`;
+    }
+    return null;
+  }
 }