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

13
src/composables/useEvents.ts
View file

@ -4,7 +4,7 @@ import type { Event } from '@/lib/types/event'
import { fetchEvents } from '@/lib/api/events'
export function useEvents() {
const { state: events, isLoading, error, execute: refresh } = useAsyncState(
const { state: events, isLoading, error: asyncError, execute: refresh } = useAsyncState(
fetchEvents,
[] as Event[],
{
@ -13,6 +13,17 @@ export function useEvents() {
}
)
const error = computed(() => {
if (asyncError.value) {
return {
message: asyncError.value instanceof Error
? asyncError.value.message
: 'An error occurred while fetching events'
}
}
return null
})
const sortedEvents = computed(() => {
return [...events.value].sort((a, b) =>
new Date(b.time).getTime() - new Date(a.time).getTime()

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>