nitrix/fete
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases 13 Wiki Activity

Implement cancel-event feature (016)

Browse Source 
Add PATCH /events/{eventToken} endpoint for organizers to cancel events,
cancellation banner for visitors, and RSVP rejection on cancelled events.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
nitrix
2026-03-12 19:52:22 +01:00
parent 3908c89998
commit 541017965f
20 changed files with 1004 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/assets/main.css
View File

@@ -18,6 +18,14 @@
--color-card: #ffffff;
--color-dark-base: #1B1730;
/* Danger / destructive actions */
--color-danger: #fca5a5;
--color-danger-bg: rgba(220, 38, 38, 0.15);
--color-danger-bg-hover: rgba(220, 38, 38, 0.25);
--color-danger-bg-strong: rgba(220, 38, 38, 0.2);
--color-danger-border: rgba(220, 38, 38, 0.3);
--color-danger-border-strong: rgba(220, 38, 38, 0.4);
/* Glass system */
--color-glass: rgba(255, 255, 255, 0.1);
--color-glass-strong: rgba(255, 255, 255, 0.15);

188
frontend/src/views/EventDetailView.vue
View File

@@ -25,6 +25,12 @@
<!-- Loaded state -->
<div v-else-if="state === 'loaded' && event" class="detail__content">
<!-- Cancellation banner -->
<div v-if="event.cancelled" class="detail__cancelled-banner" role="alert">
<p class="detail__cancelled-banner-title">This event has been cancelled</p>
<p v-if="event.cancellationReason" class="detail__cancelled-banner-reason">{{ event.cancellationReason }}</p>
</div>
<h1 class="detail__title">{{ event.title }}</h1>
<dl class="detail__meta">
@@ -70,14 +76,49 @@
</div>
</div>
<!-- Cancel error message -->
<!-- Cancel event button (organizer only, not already cancelled) -->
<div v-if="state === 'loaded' && event && isOrganizer && !event.cancelled" class="detail__cancel-event">
<button class="detail__cancel-event-btn" type="button" @click="cancelSheetOpen = true">
Cancel event
</button>
</div>
<!-- Cancel event bottom sheet -->
<BottomSheet :open="cancelSheetOpen" label="Cancel event" @close="cancelSheetOpen = false">
<h2 class="sheet-title">Cancel event</h2>
<form class="cancel-form" @submit.prevent="handleCancelEvent" novalidate>
<div class="form-group">
<label class="cancel-form__label" for="cancel-reason">Reason (optional)</label>
<textarea
id="cancel-reason"
v-model.trim="cancelReasonInput"
class="form-field glass cancel-form__textarea"
placeholder="e.g. Venue no longer available"
maxlength="2000"
rows="3"
@input="cancelEventError = ''"
/>
<span class="cancel-form__counter">{{ cancelReasonInput.length }} / 2000</span>
</div>
<button
class="cancel-form__confirm glass-inner"
type="submit"
:disabled="cancellingEvent"
>
{{ cancellingEvent ? 'Cancelling…' : 'Confirm cancellation' }}
</button>
<p v-if="cancelEventError" class="cancel-form__error" role="alert">{{ cancelEventError }}</p>
</form>
</BottomSheet>
<!-- Cancel RSVP error message -->
<div v-if="cancelError" class="detail__cancel-error" role="alert">
<p>{{ cancelError }}</p>
</div>
<!-- RSVP bar -->
<!-- RSVP bar (hidden when cancelled) -->
<RsvpBar
v-if="state === 'loaded' && event && !isOrganizer"
v-if="state === 'loaded' && event && !isOrganizer && !event.cancelled"
:has-rsvp="!!rsvpName"
@open="sheetOpen = true"
@cancel="confirmCancelOpen = true"
@@ -155,6 +196,12 @@ const cancelError = ref('')
const isOrganizer = ref(false)
const attendeeNames = ref<string[] | null>(null)
// Cancel event state
const cancelSheetOpen = ref(false)
const cancelReasonInput = ref('')
const cancelEventError = ref('')
const cancellingEvent = ref(false)
const formattedDateTime = computed(() => {
if (!event.value) return ''
const formatted = new Intl.DateTimeFormat(undefined, {
@@ -279,6 +326,40 @@ async function handleCancelRsvp() {
}
}
async function handleCancelEvent() {
cancelEventError.value = ''
cancellingEvent.value = true
const orgToken = getOrganizerToken(route.params.eventToken as string)
if (!orgToken) return
try {
const { error } = await api.PATCH('/events/{eventToken}', {
params: {
path: { eventToken: route.params.eventToken as string },
query: { organizerToken: orgToken },
},
body: {
cancelled: true,
cancellationReason: cancelReasonInput.value || undefined,
},
})
if (error) {
cancelEventError.value = 'Could not cancel event. Please try again.'
return
}
cancelSheetOpen.value = false
cancelReasonInput.value = ''
await fetchEvent()
} catch {
cancelEventError.value = 'Could not cancel event. Please try again.'
} finally {
cancellingEvent.value = false
}
}
async function fetchAttendees(eventToken: string, organizerToken: string) {
try {
const { data, error } = await api.GET('/events/{eventToken}/attendees', {
@@ -521,4 +602,105 @@ onMounted(fetchEvent)
opacity: 0.6;
cursor: not-allowed;
}
/* Cancellation banner */
.detail__cancelled-banner {
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-card);
background: var(--color-danger-bg);
border: 1px solid var(--color-danger-border-strong);
text-align: center;
}
.detail__cancelled-banner-title {
font-weight: 700;
font-size: 0.95rem;
color: var(--color-danger);
}
.detail__cancelled-banner-reason {
margin-top: var(--spacing-xs);
font-size: 0.85rem;
color: var(--color-text-soft);
word-break: break-word;
}
/* Cancel event button */
.detail__cancel-event {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-md) var(--content-padding);
padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
display: flex;
justify-content: center;
z-index: 10;
}
.detail__cancel-event-btn {
width: 100%;
max-width: var(--content-max-width);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-button);
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-danger);
background: var(--color-danger-bg);
border: 1px solid var(--color-danger-border);
cursor: pointer;
transition: background 0.15s ease;
}
.detail__cancel-event-btn:hover {
background: var(--color-danger-bg-hover);
}
/* Cancel event form (inside bottom sheet) */
.cancel-form__textarea {
resize: vertical;
min-height: 4rem;
font-family: inherit;
}
.cancel-form__counter {
display: block;
text-align: right;
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: var(--spacing-xs);
}
.cancel-form__confirm {
display: block;
width: 100%;
margin-top: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-button);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--color-danger);
background: var(--color-danger-bg-strong);
border: 1px solid var(--color-danger-border);
cursor: pointer;
transition: background 0.15s ease;
}
.cancel-form__confirm:hover {
background: var(--color-danger-bg-hover);
}
.cancel-form__confirm:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.cancel-form__error {
margin-top: var(--spacing-sm);
font-size: 0.85rem;
color: var(--color-danger);
text-align: center;
}
</style>