Enhance market module with new chat and events features
- Introduce chat module with components, services, and composables for real-time messaging. - Implement events module with API service, components, and ticket purchasing functionality. - Update app configuration to include new modules and their respective settings. - Refactor existing components to integrate with the new chat and events features. - Enhance market store and services to support new functionalities and improve order management. - Update routing to accommodate new views for chat and events, ensuring seamless navigation.
This commit is contained in:
parent
519a9003d4
commit
e40ac91417
46 changed files with 6305 additions and 3264 deletions
168
src/modules/events/views/EventsPage.vue
Normal file
168
src/modules/events/views/EventsPage.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useEvents } from '../composables/useEvents'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { format } from 'date-fns'
|
||||
import PurchaseTicketDialog from '../components/PurchaseTicketDialog.vue'
|
||||
import { RefreshCw, User, LogIn } from 'lucide-vue-next'
|
||||
import { formatEventPrice } from '@/lib/utils/formatting'
|
||||
|
||||
const { upcomingEvents, pastEvents, isLoading, error, refresh } = useEvents()
|
||||
const { isAuthenticated, userDisplay } = useAuth()
|
||||
const showPurchaseDialog = ref(false)
|
||||
const selectedEvent = ref<{
|
||||
id: string
|
||||
name: string
|
||||
price_per_ticket: number
|
||||
currency: string
|
||||
} | null>(null)
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
return format(new Date(dateStr), 'PPP')
|
||||
}
|
||||
|
||||
function handlePurchaseClick(event: {
|
||||
id: string
|
||||
name: string
|
||||
price_per_ticket: number
|
||||
currency: string
|
||||
}) {
|
||||
if (!isAuthenticated.value) {
|
||||
// Show login prompt or redirect to login
|
||||
// You could emit an event to show login dialog here
|
||||
return
|
||||
}
|
||||
|
||||
selectedEvent.value = event
|
||||
showPurchaseDialog.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto py-8 px-4">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="space-y-1">
|
||||
<h1 class="text-3xl font-bold text-foreground">Events</h1>
|
||||
<div v-if="isAuthenticated && userDisplay" class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<User class="w-4 h-4" />
|
||||
<span>Logged in as {{ userDisplay.name }}</span>
|
||||
<Badge variant="outline" class="text-xs">{{ userDisplay.shortId }}</Badge>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<LogIn class="w-4 h-4" />
|
||||
<span>Please log in to purchase tickets</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary" size="sm" @click="refresh" :disabled="isLoading">
|
||||
<RefreshCw class="w-4 h-4 mr-2" :class="{ 'animate-spin': isLoading }" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs default-value="upcoming" class="w-full">
|
||||
<TabsList class="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="upcoming">Upcoming Events</TabsTrigger>
|
||||
<TabsTrigger value="past">Past Events</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div v-if="error" class="mt-4 p-4 bg-destructive/15 text-destructive rounded-lg">
|
||||
{{ error.message }}
|
||||
</div>
|
||||
|
||||
<TabsContent value="upcoming">
|
||||
<!-- {{ upcomingEvents }} -->
|
||||
<ScrollArea class="h-[600px] w-full pr-4" v-if="upcomingEvents.length">
|
||||
<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 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 class="text-foreground">{{ formatDate(event.event_start_date) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground">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 class="text-foreground">{{ event.amount_tickets - event.sold }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground">Price:</span>
|
||||
<span class="text-foreground">{{ formatEventPrice(event.price_per_ticket, event.currency) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
class="w-full"
|
||||
variant="default"
|
||||
:disabled="event.amount_tickets <= event.sold || !isAuthenticated"
|
||||
@click="handlePurchaseClick(event)"
|
||||
>
|
||||
<span v-if="!isAuthenticated" class="flex items-center gap-2">
|
||||
<LogIn class="w-4 h-4" />
|
||||
Login to Purchase
|
||||
</span>
|
||||
<span v-else>Buy Ticket</span>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div v-else-if="!isLoading" class="text-center py-8 text-muted-foreground">
|
||||
No upcoming events found
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="past">
|
||||
<ScrollArea class="h-[600px] w-full pr-4" v-if="pastEvents.length">
|
||||
<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 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 class="text-foreground">{{ formatDate(event.event_start_date) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground">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 class="text-foreground">{{ event.amount_tickets }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground">Tickets Sold:</span>
|
||||
<span class="text-foreground">{{ event.sold }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div v-else-if="!isLoading" class="text-center py-8 text-muted-foreground">
|
||||
No past events found
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<PurchaseTicketDialog v-if="selectedEvent" :event="selectedEvent" v-model:is-open="showPurchaseDialog" />
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue