Merge branch 'feature/frontend-show-detail' into develop

frontend/src/app/pages/show-detail-placeholder-page.component.ts

@@ -1,41 +1,121 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DatePipe } from '@angular/common';
-import { TitleCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { switchMap, map, of } from 'rxjs';
+
+import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-api.service';
 
 @Component({
   standalone: true,
-  imports: [TitleCasePipe, RouterLink, MatButtonModule, MatCardModule],
+  imports: [
+    DatePipe,
+    RouterLink,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+  ],
   template: `
     <section class="page">
-      <header class="page-header">
+      @if (isLoading()) {
-        <p class="eyebrow">Show detail</p>
+        <div class="status-panel" aria-live="polite">
-        <h1>{{ slug | titlecase }}</h1>
+          <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
-        <p class="supporting">
+          <p>Loading show details...</p>
-          This placeholder will bind to the public show detail and performance endpoints.
+        </div>
-        </p>
+      } @else if (errorMessage()) {
-      </header>
+        <mat-card class="status-card" aria-live="assertive">
-
-      <mat-card class="content-card">
-        <mat-card-title>Next UI step</mat-card-title>
           <mat-card-content>
-          <p>Wire show copy, upcoming performances, and booking entry points from the backend contract.</p>
+            <div class="status-copy">
+              <mat-icon>error</mat-icon>
+              <div>
+                <h1>Could not load this show</h1>
+                <p>{{ errorMessage() }}</p>
+              </div>
+            </div>
           </mat-card-content>
           <mat-card-actions>
-          <a mat-button routerLink="/book/10">Open booking placeholder</a>
+            <button mat-flat-button type="button" (click)="reload()">Try again</button>
+            <a mat-button routerLink="/shows">Back to shows</a>
           </mat-card-actions>
         </mat-card>
+      } @else if (show()) {
+        <header class="page-header">
+          <p class="eyebrow">Show detail</p>
+          <h1>{{ show()!.title }}</h1>
+          <p class="supporting">{{ show()!.description || show()!.summary }}</p>
+        </header>
+
+        <section class="section">
+          <div class="section-heading">
+            <div>
+              <h2>Upcoming performances</h2>
+              <p>Choose a performance to continue to the booking placeholder.</p>
+            </div>
+            <a mat-button routerLink="/shows">Back to show list</a>
+          </div>
+
+          @if (performances().length === 0) {
+            <mat-card class="status-card" aria-live="polite">
+              <mat-card-content>
+                <div class="status-copy">
+                  <mat-icon>theaters</mat-icon>
+                  <div>
+                    <h2>No performances published yet</h2>
+                    <p>This show is online, but there are no upcoming performances available right now.</p>
+                  </div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          } @else {
+            <div class="performance-grid">
+              @for (performance of performances(); track performance.id) {
+                <mat-card class="performance-card">
+                  <mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</mat-card-title>
+                  <mat-card-subtitle>{{ performance.venue.name }}, {{ performance.venue.city }}</mat-card-subtitle>
+                  <mat-card-content>
+                    <dl class="performance-meta">
+                      <div>
+                        <dt>Venue</dt>
+                        <dd>{{ performance.venue.name }}</dd>
+                      </div>
+                      <div>
+                        <dt>City</dt>
+                        <dd>{{ performance.venue.city }}</dd>
+                      </div>
+                      <div>
+                        <dt>Available seats</dt>
+                        <dd>{{ performance.available_seats }}</dd>
+                      </div>
+                    </dl>
+                  </mat-card-content>
+                  <mat-card-actions>
+                    @if (performance.booking_enabled) {
+                      <a mat-flat-button [routerLink]="['/book', performance.id]">Book this performance</a>
+                    } @else {
+                      <button mat-stroked-button type="button" disabled>Booking unavailable</button>
+                    }
+                  </mat-card-actions>
+                </mat-card>
+              }
+            </div>
+          }
+        </section>
+      }
     </section>
   `,
   styles: [`
     .page {
-      max-width: 960px;
+      max-width: 1080px;
       margin: 0 auto;
     }
 
     .page-header {
-      margin-bottom: 22px;
+      margin-bottom: 28px;
     }
 
     .eyebrow {
@@ -52,22 +132,170 @@ import { MatCardModule } from '@angular/material/card';
     }
 
     .supporting {
+      margin: 14px 0 0;
       color: var(--azionelab-muted);
       line-height: 1.6;
-      max-width: 52ch;
+      max-width: 64ch;
     }
 
-    .content-card {
+    .section {
+      display: grid;
+      gap: 20px;
+    }
+
+    .section-heading {
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+      align-items: end;
+    }
+
+    .section-heading h2 {
+      margin: 0 0 6px;
+      font-size: 1.4rem;
+    }
+
+    .section-heading p {
+      margin: 0;
+      color: var(--azionelab-muted);
+    }
+
+    .performance-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 20px;
+    }
+
+    .performance-card,
+    .status-card {
       border-radius: 8px;
       border: 1px solid var(--azionelab-border);
       background: var(--azionelab-surface);
       box-shadow: var(--azionelab-shadow);
     }
+
+    .performance-card {
+      min-height: 260px;
+    }
+
+    .performance-meta {
+      display: grid;
+      gap: 14px;
+      margin: 0;
+    }
+
+    .performance-meta div {
+      display: grid;
+      gap: 2px;
+    }
+
+    .performance-meta dt {
+      font-size: 0.78rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--azionelab-muted);
+    }
+
+    .performance-meta dd {
+      margin: 0;
+      font-size: 0.98rem;
+    }
+
+    .status-panel,
+    .status-copy {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .status-panel {
+      min-height: 240px;
+      justify-content: center;
+      color: var(--azionelab-muted);
+    }
+
+    .status-copy {
+      align-items: flex-start;
+    }
+
+    .status-copy h1,
+    .status-copy h2 {
+      margin: 0 0 8px;
+      font-size: 1.2rem;
+    }
+
+    .status-copy p {
+      margin: 0;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    @media (max-width: 860px) {
+      .section-heading {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+    }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShowDetailPlaceholderPageComponent {
-  protected readonly slug = this.route.snapshot.paramMap.get('slug') ?? 'show';
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly route = inject(ActivatedRoute);
+  private readonly showsApi = inject(ShowsApiService);
 
-  constructor(private readonly route: ActivatedRoute) {}
+  protected readonly show = signal<ShowDetail | null>(null);
+  protected readonly performances = signal<ShowPerformance[]>([]);
+  protected readonly isLoading = signal(true);
+  protected readonly errorMessage = signal('');
+
+  constructor() {
+    this.loadShow();
+  }
+
+  protected reload(): void {
+    this.loadShow();
+  }
+
+  private loadShow(): void {
+    const slug = this.route.snapshot.paramMap.get('slug');
+
+    if (!slug) {
+      this.errorMessage.set('The requested show is missing a valid identifier.');
+      this.show.set(null);
+      this.performances.set([]);
+      this.isLoading.set(false);
+      return;
+    }
+
+    this.isLoading.set(true);
+    this.errorMessage.set('');
+
+    this.showsApi.getShow(slug)
+      .pipe(
+        switchMap((show) => {
+          if (show.performances) {
+            return of({ show, performances: show.performances });
+          }
+
+          return this.showsApi.listPerformancesForShow(slug).pipe(
+            map(({ results }) => ({ show, performances: results })),
+          );
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe({
+        next: ({ show, performances }) => {
+          this.show.set(show);
+          this.performances.set(performances);
+          this.isLoading.set(false);
+        },
+        error: () => {
+          this.show.set(null);
+          this.performances.set([]);
+          this.errorMessage.set('Please try again in a moment.');
+          this.isLoading.set(false);
+        },
+      });
+  }
 }

frontend/src/app/services/shows-api.service.ts

@@ -12,10 +12,32 @@ export type ShowListItem = {
   poster_image: string;
 };
 
+export type VenueSummary = {
+  name: string;
+  city: string;
+};
+
+export type ShowPerformance = {
+  id: number;
+  starts_at: string;
+  venue: VenueSummary;
+  booking_enabled: boolean;
+  available_seats: number;
+};
+
+export type ShowDetail = ShowListItem & {
+  description: string;
+  performances?: ShowPerformance[];
+};
+
 type ShowListResponse = {
   results: ShowListItem[];
 };
 
+type PerformanceListResponse = {
+  results: ShowPerformance[];
+};
+
 @Injectable({
   providedIn: 'root',
 })
@@ -26,4 +48,14 @@ export class ShowsApiService {
   listShows(): Observable<ShowListResponse> {
     return this.http.get<ShowListResponse>(`${this.apiBaseUrl}/shows/`);
   }
+
+  getShow(slug: string): Observable<ShowDetail> {
+    return this.http.get<ShowDetail>(`${this.apiBaseUrl}/shows/${slug}/`);
+  }
+
+  listPerformancesForShow(slug: string): Observable<PerformanceListResponse> {
+    return this.http.get<PerformanceListResponse>(`${this.apiBaseUrl}/performances/`, {
+      params: { show: slug },
+    });
+  }
 }