Extract events list entry to separate component #671

src/app/events/components/events-list-entry/events-list-entry.component.html

@@ -0,0 +1,31 @@
+<div class="designation">
+  <a [href]="event.detailLink">{{ event.Designation }}</a>
+</div>
+<div class="date">
+  <span *ngIf="event.dateFrom && event.dateTo"
+    >{{ event.dateFrom | date: "dd.MM.yyyy" }}–<wbr />{{
+      event.dateTo | date: "dd.MM.yyyy"
+    }}</span
+  >
+</div>
+<div class="registrations">
+  {{ event.studentCount }}
+  <span class="registrations-label">{{
+    (event.studentCount === 1 ? "events.registration" : "events.registrations")
+      | translate
+  }}</span>
+</div>
+<div class="rating" *ngIf="withRatings && event.evaluationText">
+  <a
+    *ngIf="!event.evaluationLink"
+    class="d-flex"
+    [routerLink]="[event.id, 'tests']"
+  >
+    <i class="material-icons">arrow_right_alt</i>
+    <span class="ps-1">{{ event.evaluationText }}</span>
+  </a>
+  <a *ngIf="event.evaluationLink" class="d-flex" [href]="event.evaluationLink">
+    <i class="material-icons">arrow_right_alt</i>
+    <span class="ps-1">{{ event.evaluationText }} </span>
+  </a>
+</div>

src/app/events/components/events-list-entry/events-list-entry.component.scss

@@ -0,0 +1,66 @@
+@import "../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
+
+:host {
+  display: grid;
+  padding: $spacer;
+  border-bottom: 1px solid $border-color;
+  grid-template-areas: "designation date registrations rating";
+  grid-template-columns: 4fr 2fr 2fr 3fr;
+}
+
+.designation {
+  grid-area: designation;
+  padding-right: $spacer;
+}
+
+.date {
+  grid-area: date;
+  padding-right: $spacer;
+}
+
+.registrations {
+  grid-area: registrations;
+  padding-right: $spacer;
+}
+
+.rating {
+  grid-area: rating;
+
+  a {
+    text-decoration: none;
+  }
+
+  span {
+    text-decoration: underline;
+  }
+
+  span:hover {
+    text-decoration-color: $accent;
+  }
+}
+
+.registrations-label {
+  display: none;
+}
+
+@include media-breakpoint-down(sm) {
+  .registrations-label {
+    display: inline;
+  }
+
+  .designation,
+  .date,
+  .registrations {
+    padding-right: 0;
+  }
+
+  :host {
+    grid-template-areas:
+      "designation"
+      "date"
+      "registrations"
+      "rating";
+    grid-template-columns: 1fr;
+  }
+}

src/app/events/components/events-list-entry/events-list-entry.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { buildEvent } from "src/spec-builders";
+import { buildTestModuleMetadata } from "src/spec-helpers";
+import { EventsListEntryComponent } from "./events-list-entry.component";
+
+describe("EventsListEntryComponent", () => {
+  let component: EventsListEntryComponent;
+  let fixture: ComponentFixture<EventsListEntryComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(
+      buildTestModuleMetadata({
+        imports: [EventsListEntryComponent],
+      }),
+    ).compileComponents();
+
+    fixture = TestBed.createComponent(EventsListEntryComponent);
+    component = fixture.componentInstance;
+    element = fixture.debugElement.nativeElement;
+
+    component.event = buildEvent(1);
+    component.event.evaluationText = "Lorem ipsum";
+  });
+
+  it("renders entry without ratings column", () => {
+    component.withRatings = false;
+
+    fixture.detectChanges();
+    expect(element.querySelector(".rating")).toBeNull();
+    expect(element.textContent).not.toContain("Lorem ipsum");
+  });
+
+  it("renders entry with ratings column", () => {
+    component.withRatings = true;
+
+    fixture.detectChanges();
+    expect(element.querySelector(".rating")).toBeTruthy();
+    expect(element.textContent).toContain("Lorem ipsum");
+  });
+});

src/app/events/components/events-list-entry/events-list-entry.component.ts

@@ -0,0 +1,17 @@
+import { DatePipe, NgIf } from "@angular/common";
+import { Component, Input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { TranslateModule } from "@ngx-translate/core";
+import { Event } from "../../services/events-state.service";
+
+@Component({
+  selector: "bkd-events-list-entry",
+  standalone: true,
+  imports: [NgIf, RouterLink, DatePipe, TranslateModule],
+  templateUrl: "./events-list-entry.component.html",
+  styleUrl: "./events-list-entry.component.scss",
+})
+export class EventsListEntryComponent {
+  @Input() event: Event;
+  @Input() withRatings: boolean = true;
+}

src/app/events/components/events-list/events-list.component.html

@@ -8,7 +8,7 @@
     [placeholder]="'events.search-by' | translate"
     [label]="'events.search' | translate"
     [disabled]="!data.events"
-    (valueChange)="state.search$.next($event)"
+    (valueChange)="state.setSearch($event)"
   ></bkd-resettable-input>
 
   <ng-container *ngIf="(state.loading$ | async) === false; else loading">
@@ -23,45 +23,11 @@
           {{ "events.rating" | translate }}
         </div>
       </div>
-      <div class="event-entry" *ngFor="let event of data.events">
-        <div class="designation">
-          <a [href]="event.detailLink">{{ event.Designation }}</a>
-        </div>
-        <div class="date">
-          <span *ngIf="event.dateFrom && event.dateTo"
-            >{{ event.dateFrom | date: "dd.MM.yyyy" }}–<wbr />{{
-              event.dateTo | date: "dd.MM.yyyy"
-            }}</span
-          >
-        </div>
-        <div class="registrations">
-          {{ event.studentCount }}
-          <span class="registrations-label">{{
-            (event.studentCount === 1
-              ? "events.registration"
-              : "events.registrations"
-            ) | translate
-          }}</span>
-        </div>
-        <div class="rating" *ngIf="withRatings && event.evaluationText">
-          <a
-            *ngIf="!event.evaluationLink"
-            class="d-flex"
-            [routerLink]="[event.id, 'tests']"
-          >
-            <i class="material-icons">arrow_right_alt</i>
-            <span class="ps-1">{{ event.evaluationText }}</span>
-          </a>
-          <a
-            *ngIf="event.evaluationLink"
-            class="d-flex"
-            [href]="event.evaluationLink"
-          >
-            <i class="material-icons">arrow_right_alt</i>
-            <span class="ps-1">{{ event.evaluationText }} </span>
-          </a>
-        </div>
-      </div>
+      <bkd-events-list-entry
+        *ngFor="let event of data.events"
+        [event]="event"
+        [withRatings]="withRatings"
+      ></bkd-events-list-entry>
     </ng-container>
 
     <ng-template #noEvents>

src/app/events/components/events-list/events-list.component.scss

@@ -13,70 +13,8 @@
   grid-template-columns: 4fr 2fr 2fr 3fr;
 }
 
-.event-entry {
-  display: grid;
-  padding: $spacer;
-  border-bottom: 1px solid $border-color;
-  grid-template-areas: "designation date registrations rating";
-  grid-template-columns: 4fr 2fr 2fr 3fr;
-}
-
-.designation {
-  grid-area: designation;
-  padding-right: $spacer;
-}
-
-.date {
-  grid-area: date;
-  padding-right: $spacer;
-}
-
-.registrations {
-  grid-area: registrations;
-  padding-right: $spacer;
-}
-
-.rating {
-  grid-area: rating;
-
-  a {
-    text-decoration: none;
-  }
-
-  span {
-    text-decoration: underline;
-  }
-
-  span:hover {
-    text-decoration-color: $accent;
-  }
-}
-
-.registrations-label {
-  display: none;
-}
-
 @include media-breakpoint-down(sm) {
   .event-header {
     display: none;
   }
-
-  .registrations-label {
-    display: inline;
-  }
-
-  .designation,
-  .date,
-  .registrations {
-    padding-right: 0;
-  }
-
-  .event-entry {
-    grid-template-areas:
-      "designation"
-      "date"
-      "registrations"
-      "rating";
-    grid-template-columns: 1fr;
-  }
 }

src/app/events/components/events-list/events-list.component.spec.ts

@@ -20,6 +20,9 @@ describe("EventsListComponent", () => {
       events$: of([buildEvent(1)]),
       search$: of(""),
       roles$,
+      setRoles(roles: Option<ReadonlyArray<string>>) {
+        roles$.next(roles);
+      },
       getEvents: () => of([buildEvent(1)]),
     } as unknown as EventsStateService;
 
@@ -48,18 +51,14 @@ describe("EventsListComponent", () => {
     fixture.detectChanges();
   });
 
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-
-  it("should not show the ratings column", () => {
+  it("renders entry without ratings column", () => {
     component.withRatings = false;
 
     fixture.detectChanges();
     expect(element.textContent).not.toContain("events.rating");
   });
 
-  it("should show the ratings column", () => {
+  it("renders entry with ratings column", () => {
     component.withRatings = true;
 
     fixture.detectChanges();

src/app/events/components/events-list/events-list.component.ts

@@ -1,12 +1,12 @@
-import { AsyncPipe, DatePipe, NgFor, NgIf } from "@angular/common";
+import { AsyncPipe, NgFor, NgIf } from "@angular/common";
 import { Component, Input } from "@angular/core";
-import { RouterLink } from "@angular/router";
 import { TranslateModule } from "@ngx-translate/core";
 import { ResettableInputComponent } from "../../../shared/components/resettable-input/resettable-input.component";
 import { SpinnerComponent } from "../../../shared/components/spinner/spinner.component";
 import { LetDirective } from "../../../shared/directives/let.directive";
 import { StorageService } from "../../../shared/services/storage.service";
 import { EventsStateService } from "../../services/events-state.service";
+import { EventsListEntryComponent } from "../events-list-entry/events-list-entry.component";
 
 @Component({
   selector: "bkd-events-list",
@@ -18,11 +18,10 @@ import { EventsStateService } from "../../services/events-state.service";
     ResettableInputComponent,
     NgIf,
     NgFor,
-    RouterLink,
     SpinnerComponent,
     AsyncPipe,
-    DatePipe,
     TranslateModule,
+    EventsListEntryComponent,
   ],
 })
 export class EventsListComponent {
@@ -31,6 +30,6 @@ export class EventsListComponent {
     public state: EventsStateService,
     private storage: StorageService,
   ) {
-    this.state.roles$.next(this.storage.getPayload()?.roles);
+    this.state.setRoles(this.storage.getPayload()?.roles ?? null);
   }
 }

src/app/events/components/tests-header/tests-header.component.ts

@@ -10,11 +10,11 @@ import {
   startWith,
   switchMap,
 } from "rxjs";
-import { EventsRestService } from "src/app/shared/services/events-rest.service";
 import { BacklinkComponent } from "../../../shared/components/backlink/backlink.component";
 import { ReportsLinkComponent } from "../../../shared/components/reports-link/reports-link.component";
 import { Course } from "../../../shared/models/course.model";
 import { ReportsService } from "../../../shared/services/reports.service";
+import { getCourseDesignation } from "../../utils/events";
 
 @Component({
   selector: "bkd-tests-header",
@@ -44,10 +44,7 @@ export class TestsHeaderComponent implements OnChanges {
     startWith([]),
   );
 
-  constructor(
-    private reportsService: ReportsService,
-    private eventsRestService: EventsRestService,
-  ) {}
+  constructor(private reportsService: ReportsService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes["course"]) {
@@ -56,6 +53,6 @@ export class TestsHeaderComponent implements OnChanges {
   }
 
   getDesignation() {
-    return this.eventsRestService.getDesignation(this.course);
+    return getCourseDesignation(this.course);
   }
 }