feat: enhance accessibility and testing with data-test attributes and improve error handling
This commit is contained in:
@@ -16,6 +16,7 @@ import { Badge } from '@kit/ui/badge';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
||||
|
||||
import { AccountNotFound } from '~/components/account-not-found';
|
||||
import { CmsPageShell } from '~/components/cms-page-shell';
|
||||
|
||||
interface PageProps {
|
||||
@@ -52,12 +53,12 @@ export default async function CourseDetailPage({ params }: PageProps) {
|
||||
api.getSessions(courseId),
|
||||
]);
|
||||
|
||||
if (!course) return <div>Kurs nicht gefunden</div>;
|
||||
if (!course) return <AccountNotFound />;
|
||||
|
||||
const c = course as Record<string, unknown>;
|
||||
const courseData = course as Record<string, unknown>;
|
||||
|
||||
return (
|
||||
<CmsPageShell account={account} title={String(c.name)}>
|
||||
<CmsPageShell account={account} title={String(courseData.name)}>
|
||||
<div className="flex w-full flex-col gap-6">
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@@ -66,7 +67,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
|
||||
<GraduationCap className="text-primary h-5 w-5" />
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Name</p>
|
||||
<p className="font-semibold">{String(c.name)}</p>
|
||||
<p className="font-semibold">{String(courseData.name)}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -76,9 +77,12 @@ export default async function CourseDetailPage({ params }: PageProps) {
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Status</p>
|
||||
<Badge
|
||||
variant={STATUS_VARIANT[String(c.status)] ?? 'secondary'}
|
||||
variant={
|
||||
STATUS_VARIANT[String(courseData.status)] ?? 'secondary'
|
||||
}
|
||||
>
|
||||
{STATUS_LABEL[String(c.status)] ?? String(c.status)}
|
||||
{STATUS_LABEL[String(courseData.status)] ??
|
||||
String(courseData.status)}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -89,7 +93,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Dozent</p>
|
||||
<p className="font-semibold">
|
||||
{String(c.instructor_id ?? '—')}
|
||||
{String(courseData.instructor_id ?? '—')}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -100,9 +104,9 @@ export default async function CourseDetailPage({ params }: PageProps) {
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Beginn – Ende</p>
|
||||
<p className="font-semibold">
|
||||
{formatDate(c.start_date as string)}
|
||||
{formatDate(courseData.start_date as string)}
|
||||
{' – '}
|
||||
{formatDate(c.end_date as string)}
|
||||
{formatDate(courseData.end_date as string)}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -113,7 +117,9 @@ export default async function CourseDetailPage({ params }: PageProps) {
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Gebühr</p>
|
||||
<p className="font-semibold">
|
||||
{c.fee != null ? `${Number(c.fee).toFixed(2)} €` : '—'}
|
||||
{courseData.fee != null
|
||||
? `${Number(courseData.fee).toFixed(2)} €`
|
||||
: '—'}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -124,7 +130,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Teilnehmer</p>
|
||||
<p className="font-semibold">
|
||||
{participants.length} / {String(c.capacity ?? '∞')}
|
||||
{participants.length} / {String(courseData.capacity ?? '∞')}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user