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>
|
||||
|
|
@ -44,73 +44,73 @@
|
|||
</div>
|
||||
<button
|
||||
@click="showCreateModal = true"
|
||||
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"
|
||||
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"
|
||||
>
|
||||
Create Event
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Events Table -->
|
||||
<div class="bg-elevated rounded-lg shadow overflow-hidden">
|
||||
<div class="bg-guild-900 rounded-lg shadow overflow-hidden">
|
||||
<div v-if="pending" class="p-8 text-center">
|
||||
<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-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Title
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Start Date
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Registration
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
class="px-6 py-3 text-left 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"
|
||||
>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-sm font-medium text-highlighted">
|
||||
<div class="text-sm font-medium text-guild-100">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="text-sm text-dimmed">
|
||||
<div class="text-sm text-guild-500">
|
||||
{{ event.description.substring(0, 100) }}...
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
{{ event.eventType }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
|
||||
{{ formatDateTime(event.startDate) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
|
|
@ -137,31 +137,31 @@
|
|||
<span
|
||||
:class="
|
||||
event.registrationRequired
|
||||
? 'bg-blue-100 text-blue-800'
|
||||
: 'bg-accented text-default'
|
||||
? 'bg-candlelight-900/20 text-candlelight-400'
|
||||
: 'bg-guild-800 text-guild-300'
|
||||
"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||
>
|
||||
{{ event.registrationRequired ? "Required" : "Open" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-default">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-100">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="editEvent(event)"
|
||||
class="text-primary hover:text-primary"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
@click="duplicateEvent(event)"
|
||||
class="text-primary hover:text-primary"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Duplicate
|
||||
</button>
|
||||
<button
|
||||
@click="deleteEvent(event)"
|
||||
class="text-red-600 hover:text-red-900"
|
||||
class="text-ember-400 hover:text-ember-300"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
|
|
@ -173,7 +173,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>
|
||||
|
|
@ -185,9 +185,9 @@
|
|||
v-if="showCreateModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto"
|
||||
>
|
||||
<div class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
|
||||
<div class="px-6 py-4 border-b">
|
||||
<h3 class="text-lg font-semibold">
|
||||
<div class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
|
||||
<div class="px-6 py-4 border-b border-guild-700">
|
||||
<h3 class="text-display-sm font-semibold text-guild-100">
|
||||
{{ editingEvent ? "Edit Event" : "Create New Event" }}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
<form @submit.prevent="saveEvent" class="p-6 space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Event Title</label
|
||||
>
|
||||
<UInput
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Event Type</label
|
||||
>
|
||||
<USelect
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Location</label
|
||||
>
|
||||
<UInput
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Start Date & Time</label
|
||||
>
|
||||
<UInput
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>End Date & Time</label
|
||||
>
|
||||
<UInput
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Max Attendees</label
|
||||
>
|
||||
<UInput
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Registration Deadline</label
|
||||
>
|
||||
<UInput
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Description</label
|
||||
>
|
||||
<UTextarea
|
||||
|
|
@ -296,7 +296,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-default mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Additional Content</label
|
||||
>
|
||||
<UTextarea
|
||||
|
|
@ -312,17 +312,17 @@
|
|||
<input
|
||||
v-model="eventForm.isOnline"
|
||||
type="checkbox"
|
||||
class="rounded border-default text-blue-600 focus:ring-blue-500"
|
||||
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-default">Online Event</span>
|
||||
<span class="ml-2 text-sm text-guild-100">Online Event</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
v-model="eventForm.registrationRequired"
|
||||
type="checkbox"
|
||||
class="rounded border-default text-blue-600 focus:ring-blue-500"
|
||||
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-default"
|
||||
<span class="ml-2 text-sm text-guild-100"
|
||||
>Registration Required</span
|
||||
>
|
||||
</label>
|
||||
|
|
@ -332,14 +332,14 @@
|
|||
<button
|
||||
type="button"
|
||||
@click="cancelEdit"
|
||||
class="px-4 py-2 text-muted hover:text-highlighted"
|
||||
class="px-4 py-2 text-guild-400 hover:text-guild-100 font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="creating"
|
||||
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{
|
||||
creating
|
||||
|
|
@ -411,12 +411,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) => {
|
||||
|
|
@ -432,11 +432,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