Re-style study course detail labels, handle dropdown and yes/no entries

#716
bkd-mba-fbi · Dec 19, 2024 · f2cd5d2 · f2cd5d2
1 parent 01694b6
commit f2cd5d2
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 7 deletions.
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
@@ -25,7 +25,7 @@ address {
   padding-top: $spacer;
 
   div {
-    color: $gray-dark;
-    font-size: $font-size-sm;
+    font-weight: normal;
+    color: rgba($body-color, 0.5);
   }
 }
diff --git a/...events-students-study-course-detail/events-students-study-course-detail.component.spec.ts b/...events-students-study-course-detail/events-students-study-course-detail.component.spec.ts
@@ -137,6 +137,85 @@ describe("EventsStudentsStudyCourseDetailComponent", () => {
       expect(element.textContent).toContain("2401");
     });
 
+    it("renders isYes entries", () => {
+      const detail1 = buildSubscriptionDetail(1001, "Ja");
+      detail1.Id = "1001";
+      detail1.VssDesignation = "Vegetarische Ernährung";
+      detail1.VssType = "isYes";
+      detail1.ShowAsRadioButtons = true;
+
+      const detail2 = buildSubscriptionDetail(1002, "Nein");
+      detail2.Id = "1002";
+      detail2.VssDesignation = "Halbtax";
+      detail2.VssType = "isYes";
+      detail2.ShowAsRadioButtons = true;
+
+      details = [detail1, detail2];
+
+      fixture.detectChanges();
+      expect(element.textContent).toContain("Vegetarische Ernährung");
+      expect(element.textContent).toContain(
+        "events-students.study-course-detail.yes",
+      );
+      expect(element.textContent).toContain("Halbtax");
+      expect(element.textContent).toContain(
+        "events-students.study-course-detail.no",
+      );
+    });
+
+    it("renders isYesNo entries", () => {
+      const detail1 = buildSubscriptionDetail(1001, "Ja");
+      detail1.Id = "1001";
+      detail1.VssDesignation = "Vegetarische Ernährung";
+      detail1.VssType = "isYesNo";
+      detail1.ShowAsRadioButtons = true;
+
+      const detail2 = buildSubscriptionDetail(1002, "Nein");
+      detail2.Id = "1002";
+      detail2.VssDesignation = "Halbtax";
+      detail2.VssType = "isYesNo";
+      detail2.ShowAsRadioButtons = true;
+
+      details = [detail1, detail2];
+
+      fixture.detectChanges();
+      expect(element.textContent).toContain("Vegetarische Ernährung");
+      expect(element.textContent).toContain(
+        "events-students.study-course-detail.yes",
+      );
+      expect(element.textContent).toContain("Halbtax");
+      expect(element.textContent).toContain(
+        "events-students.study-course-detail.no",
+      );
+    });
+
+    it("renders dropdown entries", () => {
+      const detail1 = buildSubscriptionDetail(1001, "1234");
+      detail1.Id = "1001";
+      detail1.VssDesignation = "Lieblingsfarbe";
+      detail1.DropdownItems = [
+        { Key: "1234", Value: "salmon" },
+        { Key: "5678", Value: "gold" },
+      ];
+
+      const detail2 = buildSubscriptionDetail(1002, "Spaghetti Bolo");
+      detail2.Id = "1002";
+      detail2.VssDesignation = "Lieblingsessen";
+      detail2.DropdownItems = [
+        { Key: "1234", Value: "Pizza" },
+        { Key: "5678", Value: "Lasagne" },
+      ];
+      detail2.VssStyle = "CB";
+
+      details = [detail1, detail2];
+
+      fixture.detectChanges();
+      expect(element.textContent).toContain("Lieblingsfarbe");
+      expect(element.textContent).toContain("salmon");
+      expect(element.textContent).toContain("Lieblingsessen");
+      expect(element.textContent).toContain("Spaghetti Bolo");
+    });
+
     it("renders document file entry", () => {
       const detail = buildSubscriptionDetail(1001, "document.pdf");
       detail.Id = "1001";

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
@@ -7,7 +7,7 @@ import {
 } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { ActivatedRoute } from "@angular/router";
-import { TranslatePipe } from "@ngx-translate/core";
+import { TranslatePipe, TranslateService } from "@ngx-translate/core";
 import { Observable, combineLatest, filter, map, of, switchMap } from "rxjs";
 import { SpinnerComponent } from "src/app/shared/components/spinner/spinner.component";
 import { LoadingService } from "src/app/shared/services/loading-service";
@@ -69,6 +69,7 @@ export class EventsStudentsStudyCourseDetailComponent {
     private subscriptionsService: SubscriptionsRestService,
     private storageService: StorageService,
     private loadingService: LoadingService,
+    private translate: TranslateService,
   ) {}
 
   private loadSubscription(): Observable<Option<Subscription>> {
@@ -105,14 +106,49 @@ export class EventsStudentsStudyCourseDetailComponent {
   private toSubscriptionDetailsEntry(
     detail: SubscriptionDetail,
   ): SubscriptionDetailsEntry {
+    let value = detail.Value ?? "";
+    value = this.normalizeSubscriptionDetailsYesNoValue(detail, value);
+    value = this.normalizeSubscriptionDetailsDropdownValue(detail, value);
     return {
       id: detail.Id,
       label: detail.VssDesignation,
-      value: detail.Value ?? "",
+      value,
       file: this.buildFileUrl(detail),
     };
   }
 
+  private normalizeSubscriptionDetailsYesNoValue(
+    detail: SubscriptionDetail,
+    value: string,
+  ) {
+    if (
+      (detail.VssType === "isYes" || detail.VssType === "isYesNo") &&
+      detail.ShowAsRadioButtons
+    ) {
+      if (value === "Ja") {
+        return this.translate.instant(
+          `events-students.study-course-detail.yes`,
+        );
+      } else if (value === "Nein") {
+        return this.translate.instant(`events-students.study-course-detail.no`);
+      }
+    }
+    return value;
+  }
+
+  private normalizeSubscriptionDetailsDropdownValue(
+    detail: SubscriptionDetail,
+    value: string,
+  ) {
+    if (detail.DropdownItems && detail.VssStyle !== "CB") {
+      return (
+        detail.DropdownItems.find((item) => String(item.Key) === value)
+          ?.Value ?? value
+      );
+    }
+    return value;
+  }
+
   private buildFileUrl(detail: SubscriptionDetail): Option<string> {
     if (
       detail.VssStyle === "PD" ||

diff --git a/src/app/shared/models/subscription.model.ts b/src/app/shared/models/subscription.model.ts
@@ -24,7 +24,7 @@ const SubscriptionDetail = t.type({
   // VssStyleDescription: t.string,
   VssStyle: t.string,
   // VssTypeId: t.number,
-  // VssType: t.string,
+  VssType: t.string,
   // ReadOnly: t.boolean,
   // ValueRangeRegex: Option(t.string),
   // ValueRangeError: Option(t.string),

diff --git a/src/assets/locales/de-CH.json b/src/assets/locales/de-CH.json
@@ -265,7 +265,9 @@
       }
     },
     "study-course-detail": {
-      "status": "Status"
+      "status": "Status",
+      "yes": "Ja",
+      "no": "Nein"
     }
   },
   "courses": {

diff --git a/src/assets/locales/fr-CH.json b/src/assets/locales/fr-CH.json
@@ -265,7 +265,9 @@
       }
     },
     "study-course-detail": {
-      "status": "Statut"
+      "status": "Statut",
+      "yes": "Oui",
+      "no": "Non"
     }
   },
   "courses": {

diff --git a/src/spec-builders.ts b/src/spec-builders.ts
@@ -485,6 +485,7 @@ export function buildSubscriptionDetail(
     SubscriptionId: 1,
     IdPerson: 1,
     VssId: vssId,
+    VssType: "",
     Value: value || "",
     VssDesignation: "",
     VssStyle: "",