crewli/apps/app/src/pages/events/index.vue

<script setup lang="ts">
import { useEvents } from '@/composables/useEvents'

const { events, pagination, organisationId, isLoading, error, fetchEvents } = useEvents()

const page = ref(1)
const itemsPerPage = ref(10)

watch([page, itemsPerPage, organisationId], () => {
  if (!organisationId.value) {
    return
  }
  fetchEvents({
    page: page.value,
    per_page: itemsPerPage.value,
  })
}, { immediate: true })

function getStatusColor(status: string): string {
  const colors: Record<string, string> = {
    draft: 'secondary',
    published: 'info',
    registration_open: 'success',
    buildup: 'warning',
    showday: 'primary',
    teardown: 'warning',
    closed: 'secondary',
  }
  return colors[status] || 'secondary'
}

function formatStatusLabel(status: string): string {
  return status.replaceAll('_', ' ')
}
</script>

<template>
  <div>
    <VAlert
      v-if="!organisationId"
      type="warning"
      class="mb-4"
    >
      You need to belong to an organisation to see events. Ask an administrator to invite you.
    </VAlert>

    <VCard>
      <VCardTitle>
        <h4 class="text-h4 mb-1">
          Events
        </h4>
        <p class="text-body-2 text-medium-emphasis">
          Events for your organisation
        </p>
      </VCardTitle>

      <VDivider />

      <div
        v-if="isLoading"
        class="d-flex justify-center align-center py-12"
      >
        <VProgressCircular
          indeterminate
          color="primary"
        />
      </div>

      <VAlert
        v-else-if="error"
        type="error"
        class="ma-4"
      >
        {{ error.message }}
      </VAlert>

      <div
        v-else-if="events.length > 0"
        class="pa-4"
      >
        <VRow>
          <VCol
            v-for="event in events"
            :key="event.id"
            cols="12"
            md="6"
            lg="4"
          >
            <VCard>
              <VCardTitle>
                <RouterLink
                  :to="{ name: 'events-view-id', params: { id: event.id } }"
                  class="text-decoration-none text-high-emphasis"
                >
                  {{ event.name }}
                </RouterLink>
              </VCardTitle>

              <VCardText>
                <div class="mb-2">
                  <VChip
                    :color="getStatusColor(event.status)"
                    size="small"
                    class="mr-2"
                  >
                    {{ formatStatusLabel(event.status) }}
                  </VChip>
                </div>
                <div class="text-body-2">
                  {{ new Date(event.start_date).toLocaleDateString() }}
                  –
                  {{ new Date(event.end_date).toLocaleDateString() }}
                </div>
                <div class="text-body-2 text-medium-emphasis">
                  {{ event.timezone }}
                </div>
              </VCardText>

              <VCardActions>
                <VBtn
                  :to="{ name: 'events-view-id', params: { id: event.id } }"
                  variant="text"
                >
                  View details
                </VBtn>
              </VCardActions>
            </VCard>
          </VCol>
        </VRow>

        <div
          v-if="pagination && pagination.last_page > 1"
          class="d-flex justify-center mt-4"
        >
          <VPagination
            v-model="page"
            :length="pagination.last_page"
            :total-visible="7"
          />
        </div>
      </div>

      <VCardText
        v-else
        class="text-center py-12"
      >
        <VIcon
          icon="tabler-calendar-off"
          size="64"
          class="text-medium-emphasis mb-4"
        />
        <p class="text-h6 text-medium-emphasis">
          No events yet
        </p>
      </VCardText>
    </VCard>
  </div>
</template>