feat: load shows from frontend API

frontend/src/app/pages/show-list-page.component.ts

@@ -1,42 +1,67 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-type DemoShow = {
-  slug: string;
-  title: string;
-  summary: string;
-  venue: string;
-  startsAt: string;
-};
+import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
 
 @Component({
   standalone: true,
-  imports: [RouterLink, MatButtonModule, MatCardModule, MatChipsModule],
+  imports: [RouterLink, MatButtonModule, MatCardModule, MatIconModule, MatProgressSpinnerModule],
   template: `
     <section class="page">
       <header class="page-header">
         <div>
           <p class="eyebrow">Public shows</p>
-          <h1>Show list placeholder</h1>
+          <h1>Shows</h1>
         </div>
         <p class="supporting">
-          This page is ready to bind to <code>GET /api/shows/</code> and <code>GET /api/performances/</code>.
+          Browse current productions published from the AzioneLab backend.
         </p>
       </header>
 
+      @if (isLoading()) {
+        <div class="status-panel" aria-live="polite">
+          <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
+          <p>Loading shows...</p>
+        </div>
+      } @else if (errorMessage()) {
+        <mat-card class="status-card" aria-live="assertive">
+          <mat-card-content>
+            <div class="status-copy">
+              <mat-icon>error</mat-icon>
+              <div>
+                <h2>Could not load shows</h2>
+                <p>{{ errorMessage() }}</p>
+              </div>
+            </div>
+          </mat-card-content>
+          <mat-card-actions>
+            <button mat-flat-button type="button" (click)="reload()">Try again</button>
+          </mat-card-actions>
+        </mat-card>
+      } @else if (shows().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 shows published yet</h2>
+                <p>Published productions will appear here as soon as they are available.</p>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      } @else {
         <div class="show-grid">
-        @for (show of demoShows; track show.slug) {
+          @for (show of shows(); track show.slug) {
           <mat-card class="show-card">
             <mat-card-title>{{ show.title }}</mat-card-title>
-            <mat-card-subtitle>{{ show.venue }}</mat-card-subtitle>
             <mat-card-content>
               <p>{{ show.summary }}</p>
-              <mat-chip-set>
-                <mat-chip>{{ show.startsAt }}</mat-chip>
-              </mat-chip-set>
             </mat-card-content>
             <mat-card-actions>
               <a mat-button [routerLink]="['/shows', show.slug]">Open detail</a>
@@ -44,6 +69,7 @@ type DemoShow = {
           </mat-card>
           }
         </div>
+      }
     </section>
   `,
   styles: [`
@@ -85,13 +111,56 @@ type DemoShow = {
       gap: 20px;
     }
 
-    .show-card {
+    .status-panel,
+    .status-copy {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .status-panel {
+      min-height: 220px;
+      justify-content: center;
+      color: var(--azionelab-muted);
+    }
+
+    .status-card {
+      max-width: 680px;
       border-radius: 8px;
       border: 1px solid var(--azionelab-border);
       background: var(--azionelab-surface);
       box-shadow: var(--azionelab-shadow);
     }
 
+    .status-copy {
+      align-items: flex-start;
+    }
+
+    .status-copy h2 {
+      margin: 0 0 8px;
+      font-size: 1.2rem;
+    }
+
+    .status-copy p {
+      margin: 0;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    .show-card {
+      display: flex;
+      flex-direction: column;
+      min-height: 220px;
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    .show-card mat-card-content {
+      flex: 1;
+    }
+
     .show-card p {
       color: var(--azionelab-muted);
       line-height: 1.6;
@@ -106,20 +175,37 @@ type DemoShow = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShowListPageComponent {
-  protected readonly demoShows: DemoShow[] = [
-    {
-      slug: 'open-stage',
-      title: 'Open Stage',
-      summary: 'Placeholder list item for the first published production.',
-      venue: 'AzioneLab Theatre',
-      startsAt: 'May 15, 20:30',
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly showsApi = inject(ShowsApiService);
+
+  protected readonly shows = signal<ShowListItem[]>([]);
+  protected readonly isLoading = signal(true);
+  protected readonly errorMessage = signal('');
+
+  constructor() {
+    this.loadShows();
+  }
+
+  protected reload(): void {
+    this.loadShows();
+  }
+
+  private loadShows(): void {
+    this.isLoading.set(true);
+    this.errorMessage.set('');
+
+    this.showsApi.listShows()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: ({ results }) => {
+          this.shows.set(results);
+          this.isLoading.set(false);
         },
-    {
-      slug: 'city-echoes',
-      title: 'City Echoes',
-      summary: 'Second sample entry showing how cards will map to live API data.',
-      venue: 'Studio Nuovo',
-      startsAt: 'May 22, 18:00',
+        error: () => {
+          this.shows.set([]);
+          this.errorMessage.set('Please try again in a moment.');
+          this.isLoading.set(false);
         },
-  ];
+      });
+  }
 }

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

@@ -0,0 +1,29 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { API_BASE_URL } from './api-config.token';
+
+export type ShowListItem = {
+  id: number;
+  title: string;
+  slug: string;
+  summary: string;
+  poster_image: string;
+};
+
+type ShowListResponse = {
+  results: ShowListItem[];
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ShowsApiService {
+  private readonly http = inject(HttpClient);
+  private readonly apiBaseUrl = inject(API_BASE_URL);
+
+  listShows(): Observable<ShowListResponse> {
+    return this.http.get<ShowListResponse>(`${this.apiBaseUrl}/shows/`);
+  }
+}