generated from bisco/codex-bootstrap
Merge branch 'feature/frontend-show-detail' into develop
This commit is contained in:
@@ -1,41 +1,121 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { TitleCasePipe } from '@angular/common';
|
||||
import { DatePipe } 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">
|
||||
<p class="eyebrow">Show detail</p>
|
||||
<h1>{{ slug | titlecase }}</h1>
|
||||
<p class="supporting">
|
||||
This placeholder will bind to the public show detail and performance endpoints.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-title>Next UI step</mat-card-title>
|
||||
@if (isLoading()) {
|
||||
<div class="status-panel" aria-live="polite">
|
||||
<mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
|
||||
<p>Loading show details...</p>
|
||||
</div>
|
||||
} @else if (errorMessage()) {
|
||||
<mat-card class="status-card" aria-live="assertive">
|
||||
<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);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user