padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(events): Improve error handling and UI text styling

Browse source 
- Enhance error handling in useEvents composable with computed error message
- Add text-foreground class to improve event card text visibility
- Update Button variant and size for better visual consistency
- Refactor event card text styling to use foreground color classes
This commit is contained in:
padreug 2025-03-09 18:09:35 +01:00
parent b8c881dea2
commit 933b2f3af1
2 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/pages/events.vue
View file

@ -17,8 +17,8 @@ function formatDate(dateStr: string) {
<template>
<div class="container mx-auto py-8 px-4">
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-bold">Events</h1>
<Button variant="outline" @click="refresh" :disabled="isLoading">
<h1 class="text-3xl font-bold text-foreground">Events</h1>
<Button variant="secondary" size="sm" @click="refresh" :disabled="isLoading">
<i-heroicons-arrow-path class="w-4 h-4 mr-2" :class="{ 'animate-spin': isLoading }" />
Refresh
</Button>
@ -39,31 +39,31 @@ function formatDate(dateStr: string) {
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card v-for="event in upcomingEvents" :key="event.id" class="flex flex-col">
<CardHeader>
<CardTitle>{{ event.name }}</CardTitle>
<CardTitle class="text-foreground">{{ event.name }}</CardTitle>
<CardDescription>{{ event.info }}</CardDescription>
</CardHeader>
<CardContent class="flex-grow">
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-muted-foreground">Start Date:</span>
<span>{{ formatDate(event.event_start_date) }}</span>
<span class="text-foreground">{{ formatDate(event.event_start_date) }}</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">End Date:</span>
<span>{{ formatDate(event.event_end_date) }}</span>
<span class="text-foreground">{{ formatDate(event.event_end_date) }}</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Tickets Available:</span>
<span>{{ event.amount_tickets - event.sold }}</span>
<span class="text-foreground">{{ event.amount_tickets - event.sold }}</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Price:</span>
<span>{{ event.price_per_ticket }} {{ event.currency }}</span>
<span class="text-foreground">{{ event.price_per_ticket }} {{ event.currency }}</span>
</div>
</div>
</CardContent>
<CardFooter>
<Button class="w-full" :disabled="event.amount_tickets <= event.sold">
<Button class="w-full" variant="default" :disabled="event.amount_tickets <= event.sold">
Buy Ticket
</Button>
</CardFooter>
@ -80,26 +80,26 @@ function formatDate(dateStr: string) {
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card v-for="event in pastEvents" :key="event.id" class="flex flex-col opacity-75">
<CardHeader>
<CardTitle>{{ event.name }}</CardTitle>
<CardTitle class="text-foreground">{{ event.name }}</CardTitle>
<CardDescription>{{ event.info }}</CardDescription>
</CardHeader>
<CardContent class="flex-grow">
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-muted-foreground">Start Date:</span>
<span>{{ formatDate(event.event_start_date) }}</span>
<span class="text-foreground">{{ formatDate(event.event_start_date) }}</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">End Date:</span>
<span>{{ formatDate(event.event_end_date) }}</span>
<span class="text-foreground">{{ formatDate(event.event_end_date) }}</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Total Tickets:</span>
<span>{{ event.amount_tickets }}</span>
<span class="text-foreground">{{ event.amount_tickets }}</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Tickets Sold:</span>
<span>{{ event.sold }}</span>
<span class="text-foreground">{{ event.sold }}</span>
</div>
</div>
</CardContent>