Readying for design
This commit is contained in:
parent
d73256ca2b
commit
fadf473dde
50 changed files with 1478 additions and 1259 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="bg-elevated border-b">
|
||||
<div class="bg-guild-900 border-b border-guild-700">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="py-6">
|
||||
<h1 class="text-2xl font-bold text-highlighted">Event Management</h1>
|
||||
<p class="text-muted">
|
||||
<h1 class="text-display font-bold text-guild-100">Event Management</h1>
|
||||
<p class="text-guild-400">
|
||||
Create, manage, and monitor Ghost Guild events and workshops
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</div>
|
||||
<NuxtLink
|
||||
to="/admin/events/create"
|
||||
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 inline-flex items-center"
|
||||
class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2 inline-flex items-center"
|
||||
>
|
||||
<Icon name="heroicons:plus" class="w-4 h-4 mr-2" />
|
||||
Create Event
|
||||
|
|
@ -61,65 +61,65 @@
|
|||
</div>
|
||||
|
||||
<!-- Events Table -->
|
||||
<div class="bg-elevated rounded-lg shadow overflow-hidden">
|
||||
<div v-if="pending" class="p-8 text-center">
|
||||
<div class="bg-guild-900 rounded-lg shadow overflow-hidden">
|
||||
<div v-if="pending" class="p-8 text-center text-guild-100">
|
||||
<div class="inline-flex items-center">
|
||||
<div
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mr-3"
|
||||
></div>
|
||||
Loading events...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="p-8 text-center text-red-600">
|
||||
<div v-else-if="error" class="p-8 text-center text-ember-400">
|
||||
Error loading events: {{ error }}
|
||||
</div>
|
||||
|
||||
<table v-else class="w-full">
|
||||
<thead class="bg-muted">
|
||||
<thead class="bg-guild-950">
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Title
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Registration
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Tickets
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-right text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-4 text-right text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-elevated divide-y divide-default">
|
||||
<tbody class="bg-guild-900 divide-y divide-guild-700">
|
||||
<tr
|
||||
v-for="event in filteredEvents"
|
||||
:key="event._id"
|
||||
class="hover:bg-muted"
|
||||
class="hover:bg-guild-800"
|
||||
>
|
||||
<!-- Title Column -->
|
||||
<td class="px-6 py-6">
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
v-if="
|
||||
event.featureImage?.url && !event.featureImage?.publicId
|
||||
"
|
||||
class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg overflow-hidden"
|
||||
class="flex-shrink-0 w-12 h-12 bg-guild-800 rounded-lg overflow-hidden"
|
||||
>
|
||||
<img
|
||||
:src="event.featureImage.url"
|
||||
|
|
@ -139,26 +139,26 @@
|
|||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg flex items-center justify-center"
|
||||
class="flex-shrink-0 w-12 h-12 bg-guild-800 rounded-lg flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:calendar-days"
|
||||
class="w-6 h-6 text-muted"
|
||||
class="w-6 h-6 text-guild-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-semibold text-highlighted mb-1">
|
||||
<div class="text-sm font-semibold text-guild-100 mb-1">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="text-sm text-dimmed line-clamp-2">
|
||||
<div class="text-sm text-guild-500 line-clamp-2">
|
||||
{{ event.description.substring(0, 100) }}...
|
||||
</div>
|
||||
<div v-if="event.series?.isSeriesEvent" class="mt-2 mb-2">
|
||||
<div
|
||||
class="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded-full"
|
||||
class="inline-flex items-center gap-1 px-2 py-1 bg-earth-900/20 text-earth-400 text-xs font-medium rounded-full"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-purple-200 text-purple-700 rounded-full flex items-center justify-center text-xs font-bold"
|
||||
class="w-4 h-4 bg-earth-800 text-earth-400 rounded-full flex items-center justify-center text-xs font-bold"
|
||||
>
|
||||
{{ event.series.position }}
|
||||
</div>
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
<div class="flex items-center space-x-4 mt-2">
|
||||
<div
|
||||
v-if="event.membersOnly"
|
||||
class="flex items-center text-xs text-purple-600"
|
||||
class="flex items-center text-xs text-earth-400"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:lock-closed"
|
||||
|
|
@ -184,15 +184,15 @@
|
|||
>
|
||||
<Icon
|
||||
name="heroicons:user-group"
|
||||
class="w-3 h-3 text-muted"
|
||||
class="w-3 h-3 text-guild-400"
|
||||
/>
|
||||
<span class="text-xs text-dimmed">{{
|
||||
<span class="text-xs text-guild-500">{{
|
||||
event.targetCircles.join(", ")
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="!event.isVisible"
|
||||
class="flex items-center text-xs text-dimmed"
|
||||
class="flex items-center text-xs text-guild-500"
|
||||
>
|
||||
<Icon name="heroicons:eye-slash" class="w-3 h-3 mr-1" />
|
||||
Hidden
|
||||
|
|
@ -213,12 +213,12 @@
|
|||
</td>
|
||||
|
||||
<!-- Date Column -->
|
||||
<td class="px-4 py-6 whitespace-nowrap text-sm text-muted">
|
||||
<td class="px-4 py-6 whitespace-nowrap text-sm text-guild-400">
|
||||
<div class="space-y-1">
|
||||
<div class="font-medium">
|
||||
{{ formatDate(event.startDate) }}
|
||||
</div>
|
||||
<div class="text-xs text-dimmed">
|
||||
<div class="text-xs text-guild-500">
|
||||
{{ formatTime(event.startDate) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
</span>
|
||||
<div
|
||||
v-if="event.isCancelled"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-ember-900/20 text-ember-400"
|
||||
>
|
||||
Cancelled
|
||||
</div>
|
||||
|
|
@ -247,17 +247,17 @@
|
|||
<div class="space-y-2">
|
||||
<div
|
||||
v-if="event.registrationRequired"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-candlelight-900/20 text-candlelight-400"
|
||||
>
|
||||
Required
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-accented text-default"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-guild-800 text-guild-300"
|
||||
>
|
||||
Optional
|
||||
</div>
|
||||
<div v-if="event.maxAttendees" class="text-xs text-dimmed">
|
||||
<div v-if="event.maxAttendees" class="text-xs text-guild-500">
|
||||
{{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -270,20 +270,20 @@
|
|||
<div class="flex items-center gap-1 text-xs">
|
||||
<Icon
|
||||
name="heroicons:ticket"
|
||||
class="w-3.5 h-3.5 text-blue-600"
|
||||
class="w-3.5 h-3.5 text-candlelight-400"
|
||||
/>
|
||||
<span class="font-medium text-default">Ticketing On</span>
|
||||
<span class="font-medium text-guild-100">Ticketing On</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="event.tickets?.requiresSeriesTicket"
|
||||
class="text-xs text-purple-600"
|
||||
class="text-xs text-earth-400"
|
||||
>
|
||||
Series Pass Required
|
||||
</div>
|
||||
<div v-else class="space-y-0.5">
|
||||
<div
|
||||
v-if="event.tickets.member?.available"
|
||||
class="text-xs text-dimmed"
|
||||
class="text-xs text-guild-500"
|
||||
>
|
||||
Member:
|
||||
{{
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
</div>
|
||||
<div
|
||||
v-if="event.tickets.public?.available"
|
||||
class="text-xs text-dimmed"
|
||||
class="text-xs text-guild-500"
|
||||
>
|
||||
Public: ${{ event.tickets.public.price || 0 }}
|
||||
<span v-if="event.tickets.public.quantity" class="ml-1">
|
||||
|
|
@ -305,7 +305,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-xs text-dimmed">No tickets</div>
|
||||
<div v-else class="text-xs text-guild-500">No tickets</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
|
@ -314,28 +314,28 @@
|
|||
<div class="flex items-center justify-end space-x-2">
|
||||
<NuxtLink
|
||||
:to="`/events/${event.slug || String(event._id)}`"
|
||||
class="p-2 text-dimmed hover:text-default hover:bg-accented rounded-full transition-colors"
|
||||
class="p-2 text-guild-500 hover:text-guild-100 hover:bg-guild-800 rounded-full transition-colors"
|
||||
title="View Event"
|
||||
>
|
||||
<Icon name="heroicons:eye" class="w-4 h-4" />
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="editEvent(event)"
|
||||
class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
|
||||
class="p-2 text-candlelight-400 hover:text-candlelight-300 hover:bg-candlelight-900/20 rounded-full transition-colors"
|
||||
title="Edit Event"
|
||||
>
|
||||
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="duplicateEvent(event)"
|
||||
class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
|
||||
class="p-2 text-candlelight-400 hover:text-candlelight-300 hover:bg-candlelight-900/20 rounded-full transition-colors"
|
||||
title="Duplicate Event"
|
||||
>
|
||||
<Icon name="heroicons:document-duplicate" class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="deleteEvent(event)"
|
||||
class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-full transition-colors"
|
||||
class="p-2 text-ember-400 hover:text-ember-300 hover:bg-ember-900/20 rounded-full transition-colors"
|
||||
title="Delete Event"
|
||||
>
|
||||
<Icon name="heroicons:trash" class="w-4 h-4" />
|
||||
|
|
@ -348,7 +348,7 @@
|
|||
|
||||
<div
|
||||
v-if="!pending && !error && filteredEvents.length === 0"
|
||||
class="p-8 text-center text-dimmed"
|
||||
class="p-8 text-center text-guild-500"
|
||||
>
|
||||
No events found matching your criteria
|
||||
</div>
|
||||
|
|
@ -402,12 +402,12 @@ const filteredEvents = computed(() => {
|
|||
|
||||
const getEventTypeClasses = (type) => {
|
||||
const classes = {
|
||||
community: "bg-blue-100 text-blue-800",
|
||||
workshop: "bg-green-100 text-green-800",
|
||||
social: "bg-purple-100 text-purple-800",
|
||||
showcase: "bg-orange-100 text-orange-800",
|
||||
community: "bg-candlelight-900/20 text-candlelight-400",
|
||||
workshop: "bg-candlelight-900/20 text-candlelight-400",
|
||||
social: "bg-earth-900/20 text-earth-400",
|
||||
showcase: "bg-ember-900/20 text-ember-400",
|
||||
};
|
||||
return classes[type] || "bg-gray-100 text-gray-800";
|
||||
return classes[type] || "bg-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const getEventStatus = (event) => {
|
||||
|
|
@ -423,11 +423,11 @@ const getEventStatus = (event) => {
|
|||
const getStatusClasses = (event) => {
|
||||
const status = getEventStatus(event);
|
||||
const classes = {
|
||||
Upcoming: "bg-blue-100 text-blue-800",
|
||||
Ongoing: "bg-green-100 text-green-800",
|
||||
Past: "bg-gray-100 text-gray-800",
|
||||
Upcoming: "bg-candlelight-900/20 text-candlelight-400",
|
||||
Ongoing: "bg-candlelight-900/20 text-candlelight-400",
|
||||
Past: "bg-guild-800 text-guild-300",
|
||||
};
|
||||
return classes[status] || "bg-gray-100 text-gray-800";
|
||||
return classes[status] || "bg-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue