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

162
frontend/e2e/cancel-event.spec.ts Normal file
View File

@@ -0,0 +1,162 @@
import { http, HttpResponse } from 'msw'
import { test, expect } from './msw-setup'
import type { StoredEvent } from '../src/composables/useEventStorage'
const STORAGE_KEY = 'fete:events'
const fullEvent = {
eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
title: 'Summer BBQ',
description: 'Bring your own drinks!',
dateTime: '2026-03-15T20:00:00+01:00',
timezone: 'Europe/Berlin',
location: 'Central Park, NYC',
attendeeCount: 12,
cancelled: false,
cancellationReason: null,
}
const organizerToken = '550e8400-e29b-41d4-a716-446655440001'
function seedEvents(events: StoredEvent[]): string {
return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
}
function organizerSeed(): StoredEvent {
return {
eventToken: fullEvent.eventToken,
organizerToken,
title: fullEvent.title,
dateTime: fullEvent.dateTime,
}
}
test.describe('US1: Organizer cancels event with reason', () => {
test('organizer opens cancel bottom sheet, enters reason, confirms — event shows as cancelled on reload', async ({
page,
network,
}) => {
let cancelled = false
network.use(
http.get('*/api/events/:token', () => {
if (cancelled) {
return HttpResponse.json({
...fullEvent,
cancelled: true,
cancellationReason: 'Venue closed',
})
}
return HttpResponse.json(fullEvent)
}),
http.patch('*/api/events/:token', ({ request }) => {
const url = new URL(request.url)
const token = url.searchParams.get('organizerToken')
if (token === organizerToken) {
cancelled = true
return new HttpResponse(null, { status: 204 })
}
return HttpResponse.json(
{ type: 'urn:problem-type:invalid-organizer-token', title: 'Forbidden', status: 403 },
{ status: 403 },
)
}),
)
await page.addInitScript(seedEvents([organizerSeed()]))
await page.goto(`/events/${fullEvent.eventToken}`)
// Cancel button visible for organizer
const cancelBtn = page.getByRole('button', { name: /Cancel event/i })
await expect(cancelBtn).toBeVisible()
// Open cancel bottom sheet
await cancelBtn.click()
// Fill in reason
const reasonField = page.getByLabel(/reason/i)
await expect(reasonField).toBeVisible()
await reasonField.fill('Venue closed')
// Confirm cancellation
await page.getByRole('button', { name: /Confirm cancellation/i }).click()
// Event should show as cancelled
await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
await expect(page.getByText('Venue closed')).toBeVisible()
// Cancel button should be gone
await expect(cancelBtn).not.toBeVisible()
})
})
test.describe('US1: Organizer cancels event without reason', () => {
test('organizer cancels without reason — event shows as cancelled', async ({
page,
network,
}) => {
let cancelled = false
network.use(
http.get('*/api/events/:token', () => {
if (cancelled) {
return HttpResponse.json({
...fullEvent,
cancelled: true,
cancellationReason: null,
})
}
return HttpResponse.json(fullEvent)
}),
http.patch('*/api/events/:token', ({ request }) => {
const url = new URL(request.url)
const token = url.searchParams.get('organizerToken')
if (token === organizerToken) {
cancelled = true
return new HttpResponse(null, { status: 204 })
}
return HttpResponse.json({}, { status: 403 })
}),
)
await page.addInitScript(seedEvents([organizerSeed()]))
await page.goto(`/events/${fullEvent.eventToken}`)
await page.getByRole('button', { name: /Cancel event/i }).click()
// Don't fill in reason, just confirm
await page.getByRole('button', { name: /Confirm cancellation/i }).click()
// Event should show as cancelled without reason text
await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
})
})
test.describe('US1: Cancel API failure', () => {
test('cancel API fails — error displayed in bottom sheet, button re-enabled for retry', async ({
page,
network,
}) => {
network.use(
http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
http.patch('*/api/events/:token', () => {
return HttpResponse.json(
{
type: 'about:blank',
title: 'Internal Server Error',
status: 500,
detail: 'Something went wrong',
},
{ status: 500, headers: { 'Content-Type': 'application/problem+json' } },
)
}),
)
await page.addInitScript(seedEvents([organizerSeed()]))
await page.goto(`/events/${fullEvent.eventToken}`)
await page.getByRole('button', { name: /Cancel event/i }).click()
await page.getByRole('button', { name: /Confirm cancellation/i }).click()
// Error message in bottom sheet
await expect(page.getByText(/Could not cancel event/i)).toBeVisible()
// Confirm button should be re-enabled
await expect(page.getByRole('button', { name: /Confirm cancellation/i })).toBeEnabled()
})
})

74
frontend/e2e/cancelled-event-visitor.spec.ts Normal file
View File

@@ -0,0 +1,74 @@
import { http, HttpResponse } from 'msw'
import { test, expect } from './msw-setup'
const cancelledEventWithReason = {
eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
title: 'Summer BBQ',
description: 'Bring your own drinks!',
dateTime: '2026-03-15T20:00:00+01:00',
timezone: 'Europe/Berlin',
location: 'Central Park, NYC',
attendeeCount: 12,
cancelled: true,
cancellationReason: 'Venue no longer available',
}
const cancelledEventWithoutReason = {
...cancelledEventWithReason,
cancellationReason: null,
}
test.describe('US2: Visitor sees cancelled event with reason', () => {
test('visitor sees red banner with cancellation reason on cancelled event', async ({
page,
network,
}) => {
network.use(
http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithReason)),
)
await page.goto(`/events/${cancelledEventWithReason.eventToken}`)
await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
await expect(page.getByText('Venue no longer available')).toBeVisible()
})
})
test.describe('US2: Visitor sees cancelled event without reason', () => {
test('visitor sees red banner without reason when no reason was provided', async ({
page,
network,
}) => {
network.use(
http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithoutReason)),
)
await page.goto(`/events/${cancelledEventWithoutReason.eventToken}`)
await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
// No reason text shown
await expect(page.getByText('Venue no longer available')).not.toBeVisible()
})
})
test.describe('US2: RSVP buttons hidden on cancelled event', () => {
test('RSVP buttons hidden on cancelled event, other details remain visible', async ({
page,
network,
}) => {
network.use(
http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithReason)),
)
await page.goto(`/events/${cancelledEventWithReason.eventToken}`)
// Event details are still visible
await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
await expect(page.getByText('Bring your own drinks!')).toBeVisible()
await expect(page.getByText('Central Park, NYC')).toBeVisible()
await expect(page.getByText('12 going')).toBeVisible()
// RSVP bar is NOT visible
await expect(page.getByRole('button', { name: "I'm attending" })).not.toBeVisible()
})
})

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>