ghostguild-org/app/pages/admin/events-working.vue

<template>
  <div>
    <div class="bg-elevated border-b">
      <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">
            Create, manage, and monitor Ghost Guild events and workshops
          </p>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- Search and Actions -->
      <div class="mb-6 flex justify-between items-center">
        <div class="flex gap-4 items-center">
          <UInput
            v-model="searchQuery"
            placeholder="Search events..."
            class="w-80"
          />
          <USelect
            v-model="typeFilter"
            :items="[
              { label: 'All Types', value: '' },
              { label: 'Community', value: 'community' },
              { label: 'Workshop', value: 'workshop' },
              { label: 'Social', value: 'social' },
              { label: 'Showcase', value: 'showcase' },
            ]"
            class="w-full"
          />
          <USelect
            v-model="statusFilter"
            :items="[
              { label: 'All Status', value: '' },
              { label: 'Upcoming', value: 'upcoming' },
              { label: 'Ongoing', value: 'ongoing' },
              { label: 'Past', value: 'past' },
            ]"
            class="w-full"
          />
        </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"
        >
          Create Event
        </button>
      </div>

      <!-- Events Table -->
      <div class="bg-elevated 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"
            ></div>
            Loading events...
          </div>
        </div>

        <div v-else-if="error" class="p-8 text-center text-red-600">
          Error loading events: {{ error }}
        </div>

        <table v-else class="w-full">
          <thead class="bg-muted">
            <tr>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Title
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Type
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Start Date
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Status
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Registration
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody class="bg-elevated divide-y divide-default">
            <tr
              v-for="event in filteredEvents"
              :key="event._id"
              class="hover:bg-muted"
            >
              <td class="px-6 py-4">
                <div class="text-sm font-medium text-highlighted">
                  {{ event.title }}
                </div>
                <div class="text-sm text-dimmed">
                  {{ event.description.substring(0, 100) }}...
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="getEventTypeClasses(event.eventType)"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ event.eventType }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
                {{ formatDateTime(event.startDate) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="getStatusClasses(event)"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ getEventStatus(event) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="
                    event.registrationRequired
                      ? 'bg-blue-100 text-blue-800'
                      : 'bg-accented text-default'
                  "
                  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">
                <div class="flex gap-2">
                  <button
                    @click="editEvent(event)"
                    class="text-primary hover:text-primary"
                  >
                    Edit
                  </button>
                  <button
                    @click="duplicateEvent(event)"
                    class="text-primary hover:text-primary"
                  >
                    Duplicate
                  </button>
                  <button
                    @click="deleteEvent(event)"
                    class="text-red-600 hover:text-red-900"
                  >
                    Delete
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

        <div
          v-if="!pending && !error && filteredEvents.length === 0"
          class="p-8 text-center text-dimmed"
        >
          No events found matching your criteria
        </div>
      </div>
    </div>

    <!-- Create/Edit Event Modal -->
    <div
      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">
            {{ editingEvent ? "Edit Event" : "Create New Event" }}
          </h3>
        </div>

        <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"
                >Event Title</label
              >
              <UInput
                v-model="eventForm.title"
                placeholder="Enter event title"
                required
                class="w-full"
              />
            </div>

            <div>
              <label class="block text-sm font-medium text-default mb-1"
                >Event Type</label
              >
              <USelect
                v-model="eventForm.eventType"
                :items="[
                  { label: 'Community Meetup', value: 'community' },
                  { label: 'Workshop', value: 'workshop' },
                  { label: 'Social Event', value: 'social' },
                  { label: 'Showcase', value: 'showcase' },
                ]"
                class="w-full"
              />
            </div>

            <div>
              <label class="block text-sm font-medium text-default mb-1"
                >Location</label
              >
              <UInput
                v-model="eventForm.location"
                placeholder="Event location"
                class="w-full"
              />
            </div>

            <div>
              <label class="block text-sm font-medium text-default mb-1"
                >Start Date & Time</label
              >
              <UInput
                v-model="eventForm.startDate"
                type="datetime-local"
                required
                class="w-full"
              />
            </div>

            <div>
              <label class="block text-sm font-medium text-default mb-1"
                >End Date & Time</label
              >
              <UInput
                v-model="eventForm.endDate"
                type="datetime-local"
                required
                class="w-full"
              />
            </div>

            <div>
              <label class="block text-sm font-medium text-default mb-1"
                >Max Attendees</label
              >
              <UInput
                v-model="eventForm.maxAttendees"
                type="number"
                placeholder="Optional"
                class="w-full"
              />
            </div>

            <div>
              <label class="block text-sm font-medium text-default mb-1"
                >Registration Deadline</label
              >
              <UInput
                v-model="eventForm.registrationDeadline"
                type="datetime-local"
                placeholder="Optional"
                class="w-full"
              />
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-default mb-1"
              >Description</label
            >
            <UTextarea
              v-model="eventForm.description"
              placeholder="Event description"
              required
              :rows="3"
              class="w-full"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-default mb-1"
              >Additional Content</label
            >
            <UTextarea
              v-model="eventForm.content"
              placeholder="Detailed event information, agenda, etc."
              :rows="4"
              class="w-full"
            />
          </div>

          <div class="flex items-center gap-6">
            <label class="flex items-center">
              <input
                v-model="eventForm.isOnline"
                type="checkbox"
                class="rounded border-default text-blue-600 focus:ring-blue-500"
              />
              <span class="ml-2 text-sm text-default">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"
              />
              <span class="ml-2 text-sm text-default"
                >Registration Required</span
              >
            </label>
          </div>

          <div class="flex justify-end gap-3 pt-4">
            <button
              type="button"
              @click="cancelEdit"
              class="px-4 py-2 text-muted hover:text-highlighted"
            >
              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"
            >
              {{
                creating
                  ? "Saving..."
                  : editingEvent
                    ? "Update Event"
                    : "Create Event"
              }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: "admin",
});

const {
  data: events,
  pending,
  error,
  refresh,
} = await useFetch("/api/admin/events");

const searchQuery = ref("");
const typeFilter = ref("");
const statusFilter = ref("");
const showCreateModal = ref(false);
const creating = ref(false);
const editingEvent = ref(null);

const eventForm = reactive({
  title: "",
  description: "",
  content: "",
  startDate: "",
  endDate: "",
  eventType: "community",
  location: "",
  isOnline: false,
  maxAttendees: "",
  registrationRequired: false,
  registrationDeadline: "",
});

const filteredEvents = computed(() => {
  if (!events.value) return [];

  return events.value.filter((event) => {
    const matchesSearch =
      !searchQuery.value ||
      event.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      event.description.toLowerCase().includes(searchQuery.value.toLowerCase());

    const matchesType =
      !typeFilter.value || event.eventType === typeFilter.value;

    const eventStatus = getEventStatus(event);
    const matchesStatus =
      !statusFilter.value || eventStatus.toLowerCase() === statusFilter.value;

    return matchesSearch && matchesType && matchesStatus;
  });
});

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",
  };
  return classes[type] || "bg-gray-100 text-gray-800";
};

const getEventStatus = (event) => {
  const now = new Date();
  const startDate = new Date(event.startDate);
  const endDate = new Date(event.endDate);

  if (now < startDate) return "Upcoming";
  if (now >= startDate && now <= endDate) return "Ongoing";
  return "Past";
};

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",
  };
  return classes[status] || "bg-gray-100 text-gray-800";
};

const formatDateTime = (dateString) => {
  return new Date(dateString).toLocaleString();
};

const saveEvent = async () => {
  creating.value = true;
  try {
    if (editingEvent.value) {
      await $fetch(`/api/admin/events/${editingEvent.value._id}`, {
        method: "PUT",
        body: eventForm,
      });
    } else {
      await $fetch("/api/admin/events", {
        method: "POST",
        body: eventForm,
      });
    }

    cancelEdit();
    await refresh();
    alert("Event saved successfully!");
  } catch (error) {
    console.error("Failed to save event:", error);
    alert("Failed to save event");
  } finally {
    creating.value = false;
  }
};

const editEvent = (event) => {
  editingEvent.value = event;
  Object.assign(eventForm, {
    title: event.title,
    description: event.description,
    content: event.content || "",
    startDate: new Date(event.startDate).toISOString().slice(0, 16),
    endDate: new Date(event.endDate).toISOString().slice(0, 16),
    eventType: event.eventType,
    location: event.location || "",
    isOnline: event.isOnline,
    maxAttendees: event.maxAttendees || "",
    registrationRequired: event.registrationRequired,
    registrationDeadline: event.registrationDeadline
      ? new Date(event.registrationDeadline).toISOString().slice(0, 16)
      : "",
  });
  showCreateModal.value = true;
};

const duplicateEvent = (event) => {
  editingEvent.value = null;
  Object.assign(eventForm, {
    title: `${event.title} (Copy)`,
    description: event.description,
    content: event.content || "",
    startDate: "",
    endDate: "",
    eventType: event.eventType,
    location: event.location || "",
    isOnline: event.isOnline,
    maxAttendees: event.maxAttendees || "",
    registrationRequired: event.registrationRequired,
    registrationDeadline: "",
  });
  showCreateModal.value = true;
};

const cancelEdit = () => {
  showCreateModal.value = false;
  editingEvent.value = null;
  Object.assign(eventForm, {
    title: "",
    description: "",
    content: "",
    startDate: "",
    endDate: "",
    eventType: "community",
    location: "",
    isOnline: false,
    maxAttendees: "",
    registrationRequired: false,
    registrationDeadline: "",
  });
};

const deleteEvent = async (event) => {
  if (confirm(`Are you sure you want to delete "${event.title}"?`)) {
    try {
      await $fetch(`/api/admin/events/${event._id}`, {
        method: "DELETE",
      });
      await refresh();
      alert("Event deleted successfully!");
    } catch (error) {
      console.error("Failed to delete event:", error);
      alert("Failed to delete event");
    }
  }
};
</script>