Add organizer-only attendee list to event detail view (011)
All checks were successful
CI / backend-test (push) Successful in 59s
CI / frontend-test (push) Successful in 23s
CI / frontend-e2e (push) Successful in 1m11s
CI / build-and-publish (push) Has been skipped

New GET /events/{token}/attendees endpoint returns attendee names when
a valid organizer token is provided (403 otherwise). The frontend
conditionally renders the list below the attendee count for organizers,
silently degrading for visitors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 18:34:27 +01:00
parent d7ed28e036
commit 763811fce6
24 changed files with 1307 additions and 3 deletions

View File

@@ -0,0 +1,59 @@
<template>
<section class="attendee-list">
<h3 class="attendee-list__heading">
{{ attendees.length === 1 ? '1 Attendee' : `${attendees.length} Attendees` }}
</h3>
<ul v-if="attendees.length > 0" class="attendee-list__items">
<li v-for="(name, index) in attendees" :key="index" class="attendee-list__item">
{{ name }}
</li>
</ul>
<p v-else class="attendee-list__empty">No attendees yet.</p>
</section>
</template>
<script setup lang="ts">
defineProps<{
attendees: string[]
}>()
</script>
<style scoped>
.attendee-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.attendee-list__heading {
font-size: 0.75rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.attendee-list__items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.attendee-list__item {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attendee-list__empty {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.5);
font-style: italic;
}
</style>