Add event list feature (009-list-events) #17
250
frontend/e2e/home-events.spec.ts
Normal file
250
frontend/e2e/home-events.spec.ts
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
import { test, expect } from './msw-setup'
|
||||||
|
import type { StoredEvent } from '../src/composables/useEventStorage'
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'fete:events'
|
||||||
|
|
||||||
|
const futureEvent1: StoredEvent = {
|
||||||
|
eventToken: 'future-aaa',
|
||||||
|
title: 'Summer BBQ',
|
||||||
|
dateTime: '2027-06-15T18:00:00Z',
|
||||||
|
expiryDate: '2027-06-16T00:00:00Z',
|
||||||
|
organizerToken: 'org-token-1',
|
||||||
|
}
|
||||||
|
|
||||||
|
const futureEvent2: StoredEvent = {
|
||||||
|
eventToken: 'future-bbb',
|
||||||
|
title: 'Team Meeting',
|
||||||
|
dateTime: '2027-01-10T09:00:00Z',
|
||||||
|
expiryDate: '2027-01-11T00:00:00Z',
|
||||||
|
rsvpToken: 'rsvp-token-1',
|
||||||
|
rsvpName: 'Alice',
|
||||||
|
}
|
||||||
|
|
||||||
|
const pastEvent: StoredEvent = {
|
||||||
|
eventToken: 'past-ccc',
|
||||||
|
title: 'New Year Party',
|
||||||
|
dateTime: '2025-01-01T00:00:00Z',
|
||||||
|
expiryDate: '2025-01-02T00:00:00Z',
|
||||||
|
}
|
||||||
|
|
||||||
|
function seedEvents(events: StoredEvent[]): string {
|
||||||
|
return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
|
||||||
|
}
|
||||||
|
|
||||||
|
test.describe('US2: Empty State', () => {
|
||||||
|
test('shows empty state when no events are stored', async ({ page }) => {
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
await expect(page.getByText('No events yet')).toBeVisible()
|
||||||
|
await expect(page.getByRole('link', { name: /Create Event/ })).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('empty state links to create page', async ({ page }) => {
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const link = page.getByRole('link', { name: /Create Event/ })
|
||||||
|
await expect(link).toHaveAttribute('href', '/create')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('empty state is hidden when events exist', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
await expect(page.getByText('No events yet')).not.toBeVisible()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test.describe('US4: Past Events Appear Faded', () => {
|
||||||
|
test('past events have the faded modifier class', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1, pastEvent]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const cards = page.locator('.event-card')
|
||||||
|
await expect(cards).toHaveCount(2)
|
||||||
|
|
||||||
|
// Future event should NOT have past class
|
||||||
|
const futureCard = cards.filter({ hasText: 'Summer BBQ' })
|
||||||
|
await expect(futureCard).not.toHaveClass(/event-card--past/)
|
||||||
|
|
||||||
|
// Past event should have past class
|
||||||
|
const pastCard = cards.filter({ hasText: 'New Year Party' })
|
||||||
|
await expect(pastCard).toHaveClass(/event-card--past/)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('past events remain clickable', async ({ page, network }) => {
|
||||||
|
await page.addInitScript(seedEvents([pastEvent]))
|
||||||
|
|
||||||
|
const { http, HttpResponse } = await import('msw')
|
||||||
|
network.use(
|
||||||
|
http.get('*/api/events/:token', () => {
|
||||||
|
return HttpResponse.json({
|
||||||
|
eventToken: pastEvent.eventToken,
|
||||||
|
title: pastEvent.title,
|
||||||
|
dateTime: pastEvent.dateTime,
|
||||||
|
description: '',
|
||||||
|
location: '',
|
||||||
|
timezone: 'UTC',
|
||||||
|
attendeeCount: 0,
|
||||||
|
expired: true,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
await page.goto('/')
|
||||||
|
await page.getByText('New Year Party').click()
|
||||||
|
await expect(page).toHaveURL(`/events/${pastEvent.eventToken}`)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test.describe('US3: Remove Event from List', () => {
|
||||||
|
test('delete icon triggers confirmation dialog, confirm removes event', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1, futureEvent2]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
// Both events visible
|
||||||
|
await expect(page.getByText('Summer BBQ')).toBeVisible()
|
||||||
|
await expect(page.getByText('Team Meeting')).toBeVisible()
|
||||||
|
|
||||||
|
// Click delete on Summer BBQ
|
||||||
|
await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
|
||||||
|
|
||||||
|
// Confirmation dialog appears
|
||||||
|
await expect(page.getByText('Remove event?')).toBeVisible()
|
||||||
|
|
||||||
|
// Confirm removal
|
||||||
|
await page.getByRole('button', { name: 'Remove', exact: true }).click()
|
||||||
|
|
||||||
|
// Event is gone, other remains
|
||||||
|
await expect(page.getByText('Summer BBQ')).not.toBeVisible()
|
||||||
|
await expect(page.getByText('Team Meeting')).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('cancel keeps the event in the list', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
|
||||||
|
await expect(page.getByText('Remove event?')).toBeVisible()
|
||||||
|
|
||||||
|
// Cancel
|
||||||
|
await page.getByRole('button', { name: 'Cancel' }).click()
|
||||||
|
|
||||||
|
// Dialog gone, event still there
|
||||||
|
await expect(page.getByText('Remove event?')).not.toBeVisible()
|
||||||
|
await expect(page.getByText('Summer BBQ')).toBeVisible()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test.describe('US5: Visual Distinction for Event Roles', () => {
|
||||||
|
test('shows organizer badge for events with organizerToken', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const card = page.locator('.event-card').filter({ hasText: 'Summer BBQ' })
|
||||||
|
const badge = card.locator('.event-card__badge')
|
||||||
|
await expect(badge).toBeVisible()
|
||||||
|
await expect(badge).toHaveText('Organizer')
|
||||||
|
await expect(badge).toHaveClass(/event-card__badge--organizer/)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('shows attendee badge for events with rsvpToken only', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent2]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const card = page.locator('.event-card').filter({ hasText: 'Team Meeting' })
|
||||||
|
const badge = card.locator('.event-card__badge')
|
||||||
|
await expect(badge).toBeVisible()
|
||||||
|
await expect(badge).toHaveText('Attendee')
|
||||||
|
await expect(badge).toHaveClass(/event-card__badge--attendee/)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('shows no badge for events without organizerToken or rsvpToken', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([pastEvent]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const card = page.locator('.event-card').filter({ hasText: 'New Year Party' })
|
||||||
|
await expect(card.locator('.event-card__badge')).toHaveCount(0)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test.describe('FAB: Create Event Button', () => {
|
||||||
|
test('FAB is visible when events exist', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const fab = page.getByRole('link', { name: 'Create event' })
|
||||||
|
await expect(fab).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('FAB navigates to create page', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const fab = page.getByRole('link', { name: 'Create event' })
|
||||||
|
await expect(fab).toHaveAttribute('href', '/create')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('FAB is not visible on empty state (empty state has its own CTA)', async ({ page }) => {
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
await expect(page.locator('.fab')).toHaveCount(0)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test.describe('US1: View My Events', () => {
|
||||||
|
test('displays all stored events with title and relative time', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1, futureEvent2, pastEvent]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
await expect(page.getByText('Summer BBQ')).toBeVisible()
|
||||||
|
await expect(page.getByText('Team Meeting')).toBeVisible()
|
||||||
|
await expect(page.getByText('New Year Party')).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('events are sorted: upcoming ascending, then past', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1, futureEvent2, pastEvent]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
const titles = page.locator('.event-card__title')
|
||||||
|
await expect(titles).toHaveCount(3)
|
||||||
|
// Team Meeting (Jan 2027) before Summer BBQ (Jun 2027), then past event
|
||||||
|
await expect(titles.nth(0)).toHaveText('Team Meeting')
|
||||||
|
await expect(titles.nth(1)).toHaveText('Summer BBQ')
|
||||||
|
await expect(titles.nth(2)).toHaveText('New Year Party')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('clicking an event navigates to its detail page', async ({ page, network }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1]))
|
||||||
|
|
||||||
|
// Mock the event detail API so navigation doesn't fail
|
||||||
|
const { http, HttpResponse } = await import('msw')
|
||||||
|
network.use(
|
||||||
|
http.get('*/api/events/:token', () => {
|
||||||
|
return HttpResponse.json({
|
||||||
|
eventToken: futureEvent1.eventToken,
|
||||||
|
title: futureEvent1.title,
|
||||||
|
dateTime: futureEvent1.dateTime,
|
||||||
|
description: '',
|
||||||
|
location: '',
|
||||||
|
timezone: 'UTC',
|
||||||
|
attendeeCount: 0,
|
||||||
|
expired: false,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
await page.goto('/')
|
||||||
|
await page.getByText('Summer BBQ').click()
|
||||||
|
await expect(page).toHaveURL(`/events/${futureEvent1.eventToken}`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('each event shows a relative time label', async ({ page }) => {
|
||||||
|
await page.addInitScript(seedEvents([futureEvent1]))
|
||||||
|
await page.goto('/')
|
||||||
|
|
||||||
|
// The relative time element should exist and contain text (exact value depends on current time)
|
||||||
|
const timeLabel = page.locator('.event-card__time')
|
||||||
|
await expect(timeLabel).toHaveCount(1)
|
||||||
|
await expect(timeLabel.first()).not.toBeEmpty()
|
||||||
|
})
|
||||||
|
})
|
||||||
151
frontend/src/components/ConfirmDialog.vue
Normal file
151
frontend/src/components/ConfirmDialog.vue
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition name="confirm-dialog">
|
||||||
|
<div v-if="open" class="confirm-dialog__overlay" @click.self="$emit('cancel')">
|
||||||
|
<div
|
||||||
|
class="confirm-dialog"
|
||||||
|
role="alertdialog"
|
||||||
|
aria-modal="true"
|
||||||
|
:aria-label="title"
|
||||||
|
@keydown.escape="$emit('cancel')"
|
||||||
|
>
|
||||||
|
<p class="confirm-dialog__title">{{ title }}</p>
|
||||||
|
<p class="confirm-dialog__message">{{ message }}</p>
|
||||||
|
<div class="confirm-dialog__actions">
|
||||||
|
<button
|
||||||
|
ref="cancelBtn"
|
||||||
|
class="confirm-dialog__btn confirm-dialog__btn--cancel"
|
||||||
|
type="button"
|
||||||
|
@click="$emit('cancel')"
|
||||||
|
>
|
||||||
|
{{ cancelLabel }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="confirm-dialog__btn confirm-dialog__btn--confirm"
|
||||||
|
type="button"
|
||||||
|
@click="$emit('confirm')"
|
||||||
|
>
|
||||||
|
{{ confirmLabel }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, nextTick } from 'vue'
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
open: boolean
|
||||||
|
title?: string
|
||||||
|
message?: string
|
||||||
|
confirmLabel?: string
|
||||||
|
cancelLabel?: string
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
title: 'Are you sure?',
|
||||||
|
message: '',
|
||||||
|
confirmLabel: 'Remove',
|
||||||
|
cancelLabel: 'Cancel',
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
confirm: []
|
||||||
|
cancel: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const cancelBtn = ref<HTMLButtonElement | null>(null)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.open,
|
||||||
|
async (isOpen) => {
|
||||||
|
if (isOpen) {
|
||||||
|
await nextTick()
|
||||||
|
cancelBtn.value?.focus()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.confirm-dialog__overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog {
|
||||||
|
background: var(--color-card);
|
||||||
|
border-radius: var(--radius-card);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
max-width: 320px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog__title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog__message {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog__btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-button);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog__btn:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog__btn--cancel {
|
||||||
|
background: #e8e8e8;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog__btn--confirm {
|
||||||
|
background: #d32f2f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog-enter-active,
|
||||||
|
.confirm-dialog-leave-active {
|
||||||
|
transition: opacity 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog-enter-from,
|
||||||
|
.confirm-dialog-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
49
frontend/src/components/CreateEventFab.vue
Normal file
49
frontend/src/components/CreateEventFab.vue
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<template>
|
||||||
|
<RouterLink to="/create" class="fab" aria-label="Create event">
|
||||||
|
<span class="fab__icon" aria-hidden="true">+</span>
|
||||||
|
</RouterLink>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fab {
|
||||||
|
position: fixed;
|
||||||
|
bottom: calc(1.2rem + env(safe-area-inset-bottom));
|
||||||
|
right: 1.2rem;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--color-accent);
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
text-decoration: none;
|
||||||
|
z-index: 100;
|
||||||
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:hover {
|
||||||
|
transform: scale(1.08);
|
||||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:focus-visible {
|
||||||
|
outline: 2px solid #fff;
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab__icon {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
31
frontend/src/components/EmptyState.vue
Normal file
31
frontend/src/components/EmptyState.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div class="empty-state">
|
||||||
|
<p class="empty-state__message">No events yet.<br />Create your first one!</p>
|
||||||
|
<RouterLink to="/create" class="btn-primary empty-state__cta">+ Create Event</RouterLink>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state__message {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--color-text-on-gradient);
|
||||||
|
opacity: 0.9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state__cta {
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
172
frontend/src/components/EventCard.vue
Normal file
172
frontend/src/components/EventCard.vue
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="event-card"
|
||||||
|
:class="{ 'event-card--past': isPast, 'event-card--swiping': isSwiping }"
|
||||||
|
:style="swipeStyle"
|
||||||
|
@touchstart="onTouchStart"
|
||||||
|
@touchmove="onTouchMove"
|
||||||
|
@touchend="onTouchEnd"
|
||||||
|
>
|
||||||
|
<RouterLink :to="`/events/${eventToken}`" class="event-card__link">
|
||||||
|
<span class="event-card__title">{{ title }}</span>
|
||||||
|
<span class="event-card__time">{{ relativeTime }}</span>
|
||||||
|
</RouterLink>
|
||||||
|
<span v-if="eventRole" class="event-card__badge" :class="`event-card__badge--${eventRole}`">
|
||||||
|
{{ eventRole === 'organizer' ? 'Organizer' : 'Attendee' }}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
class="event-card__delete"
|
||||||
|
type="button"
|
||||||
|
:aria-label="`Remove ${title}`"
|
||||||
|
@click.stop="$emit('delete', eventToken)"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
eventToken: string
|
||||||
|
title: string
|
||||||
|
relativeTime: string
|
||||||
|
isPast: boolean
|
||||||
|
eventRole?: 'organizer' | 'attendee'
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
delete: [eventToken: string]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const SWIPE_THRESHOLD = 80
|
||||||
|
|
||||||
|
const startX = ref(0)
|
||||||
|
const deltaX = ref(0)
|
||||||
|
const isSwiping = ref(false)
|
||||||
|
|
||||||
|
const swipeStyle = computed(() => {
|
||||||
|
if (deltaX.value === 0) return {}
|
||||||
|
return { transform: `translateX(${deltaX.value}px)` }
|
||||||
|
})
|
||||||
|
|
||||||
|
function onTouchStart(e: TouchEvent) {
|
||||||
|
const touch = e.touches[0]
|
||||||
|
if (!touch) return
|
||||||
|
startX.value = touch.clientX
|
||||||
|
deltaX.value = 0
|
||||||
|
isSwiping.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTouchMove(e: TouchEvent) {
|
||||||
|
const touch = e.touches[0]
|
||||||
|
if (!touch) return
|
||||||
|
const diff = touch.clientX - startX.value
|
||||||
|
// Only allow leftward swipe
|
||||||
|
if (diff < 0) {
|
||||||
|
deltaX.value = diff
|
||||||
|
isSwiping.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTouchEnd() {
|
||||||
|
if (deltaX.value < -SWIPE_THRESHOLD) {
|
||||||
|
emit('delete', props.eventToken)
|
||||||
|
}
|
||||||
|
deltaX.value = 0
|
||||||
|
isSwiping.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.event-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--color-card);
|
||||||
|
border-radius: var(--radius-card);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
padding: var(--spacing-md) var(--spacing-lg);
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card--past {
|
||||||
|
opacity: 0.6;
|
||||||
|
filter: saturate(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card:not(.event-card--swiping) {
|
||||||
|
transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__link {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.15rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__title {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__time {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.15rem 0.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__badge--organizer {
|
||||||
|
background: var(--color-accent);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__badge--attendee {
|
||||||
|
background: #e0e0e0;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__delete {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #bbb;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: color 0.15s ease, background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__delete:hover {
|
||||||
|
color: #d32f2f;
|
||||||
|
background: rgba(211, 47, 47, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__delete:focus-visible {
|
||||||
|
outline: 2px solid var(--color-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
frontend/src/components/EventList.vue
Normal file
79
frontend/src/components/EventList.vue
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div class="event-list" role="list" aria-label="Your events">
|
||||||
|
<div v-for="event in sortedEvents" :key="event.eventToken" role="listitem">
|
||||||
|
<EventCard
|
||||||
|
:event-token="event.eventToken"
|
||||||
|
:title="event.title"
|
||||||
|
:relative-time="formatRelativeTime(event.dateTime)"
|
||||||
|
:is-past="isPast(event.dateTime)"
|
||||||
|
:event-role="getRole(event)"
|
||||||
|
@delete="requestDelete"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ConfirmDialog
|
||||||
|
:open="!!pendingDeleteToken"
|
||||||
|
title="Remove event?"
|
||||||
|
message="This event will be removed from your list."
|
||||||
|
confirm-label="Remove"
|
||||||
|
cancel-label="Cancel"
|
||||||
|
@confirm="confirmDelete"
|
||||||
|
@cancel="cancelDelete"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { useEventStorage, isValidStoredEvent } from '../composables/useEventStorage'
|
||||||
|
import { formatRelativeTime } from '../composables/useRelativeTime'
|
||||||
|
import EventCard from './EventCard.vue'
|
||||||
|
import ConfirmDialog from './ConfirmDialog.vue'
|
||||||
|
import type { StoredEvent } from '../composables/useEventStorage'
|
||||||
|
|
||||||
|
const { getStoredEvents, removeEvent } = useEventStorage()
|
||||||
|
|
||||||
|
const pendingDeleteToken = ref<string | null>(null)
|
||||||
|
|
||||||
|
function requestDelete(eventToken: string) {
|
||||||
|
pendingDeleteToken.value = eventToken
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmDelete() {
|
||||||
|
if (pendingDeleteToken.value) {
|
||||||
|
removeEvent(pendingDeleteToken.value)
|
||||||
|
}
|
||||||
|
pendingDeleteToken.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelDelete() {
|
||||||
|
pendingDeleteToken.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPast(dateTime: string): boolean {
|
||||||
|
return new Date(dateTime) < new Date()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRole(event: StoredEvent): 'organizer' | 'attendee' | undefined {
|
||||||
|
if (event.organizerToken) return 'organizer'
|
||||||
|
if (event.rsvpToken) return 'attendee'
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const sortedEvents = computed(() => {
|
||||||
|
const valid = getStoredEvents().filter(isValidStoredEvent)
|
||||||
|
const now = new Date()
|
||||||
|
const upcoming = valid.filter((e) => new Date(e.dateTime) >= now)
|
||||||
|
const past = valid.filter((e) => new Date(e.dateTime) < now)
|
||||||
|
upcoming.sort((a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime())
|
||||||
|
past.sort((a, b) => new Date(b.dateTime).getTime() - new Date(a.dateTime).getTime())
|
||||||
|
return [...upcoming, ...past]
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.event-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
111
frontend/src/components/__tests__/ConfirmDialog.spec.ts
Normal file
111
frontend/src/components/__tests__/ConfirmDialog.spec.ts
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
import { describe, it, expect, afterEach } from 'vitest'
|
||||||
|
import { mount, VueWrapper } from '@vue/test-utils'
|
||||||
|
import ConfirmDialog from '../ConfirmDialog.vue'
|
||||||
|
|
||||||
|
let wrapper: VueWrapper
|
||||||
|
|
||||||
|
function mountDialog(props: Record<string, unknown> = {}) {
|
||||||
|
wrapper = mount(ConfirmDialog, {
|
||||||
|
props: {
|
||||||
|
open: true,
|
||||||
|
...props,
|
||||||
|
},
|
||||||
|
attachTo: document.body,
|
||||||
|
})
|
||||||
|
return wrapper
|
||||||
|
}
|
||||||
|
|
||||||
|
function dialog() {
|
||||||
|
return document.body.querySelector('.confirm-dialog')
|
||||||
|
}
|
||||||
|
|
||||||
|
function overlay() {
|
||||||
|
return document.body.querySelector('.confirm-dialog__overlay')
|
||||||
|
}
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
wrapper?.unmount()
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('ConfirmDialog', () => {
|
||||||
|
it('renders when open is true', () => {
|
||||||
|
mountDialog()
|
||||||
|
expect(dialog()).not.toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not render when open is false', () => {
|
||||||
|
mountDialog({ open: false })
|
||||||
|
expect(dialog()).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('displays default title', () => {
|
||||||
|
mountDialog()
|
||||||
|
expect(dialog()!.querySelector('.confirm-dialog__title')!.textContent).toBe('Are you sure?')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('displays custom title and message', () => {
|
||||||
|
mountDialog({
|
||||||
|
title: 'Remove event?',
|
||||||
|
message: 'This cannot be undone.',
|
||||||
|
})
|
||||||
|
expect(dialog()!.querySelector('.confirm-dialog__title')!.textContent).toBe('Remove event?')
|
||||||
|
expect(dialog()!.querySelector('.confirm-dialog__message')!.textContent).toBe('This cannot be undone.')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('displays custom button labels', () => {
|
||||||
|
mountDialog({
|
||||||
|
confirmLabel: 'Delete',
|
||||||
|
cancelLabel: 'Keep',
|
||||||
|
})
|
||||||
|
const buttons = dialog()!.querySelectorAll('.confirm-dialog__btn')
|
||||||
|
expect(buttons[0]!.textContent!.trim()).toBe('Keep')
|
||||||
|
expect(buttons[1]!.textContent!.trim()).toBe('Delete')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits confirm when confirm button is clicked', async () => {
|
||||||
|
mountDialog()
|
||||||
|
const btn = dialog()!.querySelector('.confirm-dialog__btn--confirm') as HTMLElement
|
||||||
|
btn.click()
|
||||||
|
await wrapper.vm.$nextTick()
|
||||||
|
expect(wrapper.emitted('confirm')).toHaveLength(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits cancel when cancel button is clicked', async () => {
|
||||||
|
mountDialog()
|
||||||
|
const btn = dialog()!.querySelector('.confirm-dialog__btn--cancel') as HTMLElement
|
||||||
|
btn.click()
|
||||||
|
await wrapper.vm.$nextTick()
|
||||||
|
expect(wrapper.emitted('cancel')).toHaveLength(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits cancel when overlay is clicked', async () => {
|
||||||
|
mountDialog()
|
||||||
|
const el = overlay() as HTMLElement
|
||||||
|
el.click()
|
||||||
|
await wrapper.vm.$nextTick()
|
||||||
|
expect(wrapper.emitted('cancel')).toHaveLength(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits cancel when Escape key is pressed', async () => {
|
||||||
|
mountDialog()
|
||||||
|
const el = dialog() as HTMLElement
|
||||||
|
el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
|
||||||
|
await wrapper.vm.$nextTick()
|
||||||
|
expect(wrapper.emitted('cancel')).toHaveLength(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('focuses cancel button when opened', async () => {
|
||||||
|
mountDialog({ open: false })
|
||||||
|
await wrapper.setProps({ open: true })
|
||||||
|
await wrapper.vm.$nextTick()
|
||||||
|
const cancelBtn = dialog()!.querySelector('.confirm-dialog__btn--cancel')
|
||||||
|
expect(document.activeElement).toBe(cancelBtn)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('has alertdialog role and aria-modal', () => {
|
||||||
|
mountDialog()
|
||||||
|
const el = dialog() as HTMLElement
|
||||||
|
expect(el.getAttribute('role')).toBe('alertdialog')
|
||||||
|
expect(el.getAttribute('aria-modal')).toBe('true')
|
||||||
|
})
|
||||||
|
})
|
||||||
35
frontend/src/components/__tests__/EmptyState.spec.ts
Normal file
35
frontend/src/components/__tests__/EmptyState.spec.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import { createRouter, createMemoryHistory } from 'vue-router'
|
||||||
|
import EmptyState from '../EmptyState.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createMemoryHistory(),
|
||||||
|
routes: [
|
||||||
|
{ path: '/', component: { template: '<div />' } },
|
||||||
|
{ path: '/create', name: 'create', component: { template: '<div />' } },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
function mountEmptyState() {
|
||||||
|
return mount(EmptyState, {
|
||||||
|
global: {
|
||||||
|
plugins: [router],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('EmptyState', () => {
|
||||||
|
it('renders an inviting message', () => {
|
||||||
|
const wrapper = mountEmptyState()
|
||||||
|
expect(wrapper.text()).toContain('No events yet')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders a Create Event link', () => {
|
||||||
|
const wrapper = mountEmptyState()
|
||||||
|
const link = wrapper.find('a')
|
||||||
|
expect(link.exists()).toBe(true)
|
||||||
|
expect(link.text()).toContain('Create Event')
|
||||||
|
expect(link.attributes('href')).toBe('/create')
|
||||||
|
})
|
||||||
|
})
|
||||||
76
frontend/src/components/__tests__/EventCard.spec.ts
Normal file
76
frontend/src/components/__tests__/EventCard.spec.ts
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import { createRouter, createMemoryHistory } from 'vue-router'
|
||||||
|
import EventCard from '../EventCard.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createMemoryHistory(),
|
||||||
|
routes: [
|
||||||
|
{ path: '/', component: { template: '<div />' } },
|
||||||
|
{ path: '/events/:eventToken', name: 'event', component: { template: '<div />' } },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
function mountCard(props: Record<string, unknown> = {}) {
|
||||||
|
return mount(EventCard, {
|
||||||
|
props: {
|
||||||
|
eventToken: 'abc-123',
|
||||||
|
title: 'Birthday Party',
|
||||||
|
relativeTime: 'in 3 days',
|
||||||
|
isPast: false,
|
||||||
|
...props,
|
||||||
|
},
|
||||||
|
global: {
|
||||||
|
plugins: [router],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('EventCard', () => {
|
||||||
|
it('renders the event title', () => {
|
||||||
|
const wrapper = mountCard()
|
||||||
|
expect(wrapper.text()).toContain('Birthday Party')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders relative time', () => {
|
||||||
|
const wrapper = mountCard({ relativeTime: 'yesterday' })
|
||||||
|
expect(wrapper.text()).toContain('yesterday')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('links to the event detail page', () => {
|
||||||
|
const wrapper = mountCard({ eventToken: 'xyz-789' })
|
||||||
|
const link = wrapper.find('a')
|
||||||
|
expect(link.attributes('href')).toBe('/events/xyz-789')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('applies past modifier class when isPast is true', () => {
|
||||||
|
const wrapper = mountCard({ isPast: true })
|
||||||
|
expect(wrapper.find('.event-card--past').exists()).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not apply past modifier class when isPast is false', () => {
|
||||||
|
const wrapper = mountCard({ isPast: false })
|
||||||
|
expect(wrapper.find('.event-card--past').exists()).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders organizer badge when eventRole is organizer', () => {
|
||||||
|
const wrapper = mountCard({ eventRole: 'organizer' })
|
||||||
|
expect(wrapper.text()).toContain('Organizer')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders attendee badge when eventRole is attendee', () => {
|
||||||
|
const wrapper = mountCard({ eventRole: 'attendee' })
|
||||||
|
expect(wrapper.text()).toContain('Attendee')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders no badge when eventRole is undefined', () => {
|
||||||
|
const wrapper = mountCard({ eventRole: undefined })
|
||||||
|
expect(wrapper.find('.event-card__badge').exists()).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits delete event with eventToken when delete button is clicked', async () => {
|
||||||
|
const wrapper = mountCard({ eventToken: 'abc-123' })
|
||||||
|
await wrapper.find('.event-card__delete').trigger('click')
|
||||||
|
expect(wrapper.emitted('delete')).toEqual([['abc-123']])
|
||||||
|
})
|
||||||
|
})
|
||||||
79
frontend/src/components/__tests__/EventList.spec.ts
Normal file
79
frontend/src/components/__tests__/EventList.spec.ts
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import { createRouter, createMemoryHistory } from 'vue-router'
|
||||||
|
import EventList from '../EventList.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createMemoryHistory(),
|
||||||
|
routes: [
|
||||||
|
{ path: '/', component: { template: '<div />' } },
|
||||||
|
{ path: '/events/:eventToken', name: 'event', component: { template: '<div />' } },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
const mockEvents = [
|
||||||
|
{ eventToken: 'past-1', title: 'Past Event', dateTime: '2025-01-01T10:00:00Z', expiryDate: '' },
|
||||||
|
{ eventToken: 'future-1', title: 'Future Event', dateTime: '2027-06-15T10:00:00Z', expiryDate: '' },
|
||||||
|
{ eventToken: 'future-2', title: 'Soon Event', dateTime: '2027-01-01T10:00:00Z', expiryDate: '' },
|
||||||
|
]
|
||||||
|
|
||||||
|
vi.mock('../../composables/useEventStorage', () => ({
|
||||||
|
isValidStoredEvent: (e: unknown) => {
|
||||||
|
if (typeof e !== 'object' || e === null) return false
|
||||||
|
const obj = e as Record<string, unknown>
|
||||||
|
return typeof obj.eventToken === 'string' && obj.eventToken.length > 0
|
||||||
|
&& typeof obj.title === 'string' && obj.title.length > 0
|
||||||
|
&& typeof obj.dateTime === 'string' && obj.dateTime.length > 0
|
||||||
|
},
|
||||||
|
useEventStorage: () => ({
|
||||||
|
getStoredEvents: () => mockEvents,
|
||||||
|
removeEvent: vi.fn(),
|
||||||
|
}),
|
||||||
|
}))
|
||||||
|
|
||||||
|
vi.mock('../../composables/useRelativeTime', () => ({
|
||||||
|
formatRelativeTime: (dateTime: string) => {
|
||||||
|
if (dateTime.startsWith('2025')) return '1 year ago'
|
||||||
|
if (dateTime.includes('06-15')) return 'in 1 year'
|
||||||
|
return 'in 10 months'
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
function mountList() {
|
||||||
|
return mount(EventList, {
|
||||||
|
global: { plugins: [router] },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('EventList', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.useFakeTimers()
|
||||||
|
vi.setSystemTime(new Date('2026-03-08T12:00:00Z'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders all valid events', () => {
|
||||||
|
const wrapper = mountList()
|
||||||
|
const cards = wrapper.findAll('.event-card')
|
||||||
|
expect(cards).toHaveLength(3)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('sorts upcoming events before past events', () => {
|
||||||
|
const wrapper = mountList()
|
||||||
|
const titles = wrapper.findAll('.event-card__title').map((el) => el.text())
|
||||||
|
// Upcoming events first (sorted ascending), then past events
|
||||||
|
expect(titles[0]).toBe('Soon Event')
|
||||||
|
expect(titles[1]).toBe('Future Event')
|
||||||
|
expect(titles[2]).toBe('Past Event')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('marks past events with isPast class', () => {
|
||||||
|
const wrapper = mountList()
|
||||||
|
const cards = wrapper.findAll('.event-card')
|
||||||
|
expect(cards).toHaveLength(3)
|
||||||
|
// Last card should be past
|
||||||
|
expect(cards[2]!.classes()).toContain('event-card--past')
|
||||||
|
// First two should not be past
|
||||||
|
expect(cards[0]!.classes()).not.toContain('event-card--past')
|
||||||
|
expect(cards[1]!.classes()).not.toContain('event-card--past')
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -164,4 +164,120 @@ describe('useEventStorage', () => {
|
|||||||
const { getRsvp } = useEventStorage()
|
const { getRsvp } = useEventStorage()
|
||||||
expect(getRsvp('unknown')).toBeUndefined()
|
expect(getRsvp('unknown')).toBeUndefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('removes an event by token', () => {
|
||||||
|
const { saveCreatedEvent, getStoredEvents, removeEvent } = useEventStorage()
|
||||||
|
|
||||||
|
saveCreatedEvent({
|
||||||
|
eventToken: 'event-1',
|
||||||
|
title: 'First',
|
||||||
|
dateTime: '2026-06-15T20:00:00+02:00',
|
||||||
|
expiryDate: '2026-07-15',
|
||||||
|
})
|
||||||
|
|
||||||
|
saveCreatedEvent({
|
||||||
|
eventToken: 'event-2',
|
||||||
|
title: 'Second',
|
||||||
|
dateTime: '2026-07-15T20:00:00+02:00',
|
||||||
|
expiryDate: '2026-08-15',
|
||||||
|
})
|
||||||
|
|
||||||
|
removeEvent('event-1')
|
||||||
|
|
||||||
|
const events = getStoredEvents()
|
||||||
|
expect(events).toHaveLength(1)
|
||||||
|
expect(events[0]!.eventToken).toBe('event-2')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('removeEvent does nothing for unknown token', () => {
|
||||||
|
const { saveCreatedEvent, getStoredEvents, removeEvent } = useEventStorage()
|
||||||
|
|
||||||
|
saveCreatedEvent({
|
||||||
|
eventToken: 'event-1',
|
||||||
|
title: 'First',
|
||||||
|
dateTime: '2026-06-15T20:00:00+02:00',
|
||||||
|
expiryDate: '2026-07-15',
|
||||||
|
})
|
||||||
|
|
||||||
|
removeEvent('nonexistent')
|
||||||
|
|
||||||
|
expect(getStoredEvents()).toHaveLength(1)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('isValidStoredEvent', () => {
|
||||||
|
// Import directly since it's an exported function
|
||||||
|
let isValidStoredEvent: (e: unknown) => boolean
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
const mod = await import('../useEventStorage')
|
||||||
|
isValidStoredEvent = mod.isValidStoredEvent
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns true for a valid event', () => {
|
||||||
|
expect(
|
||||||
|
isValidStoredEvent({
|
||||||
|
eventToken: 'abc-123',
|
||||||
|
title: 'Birthday',
|
||||||
|
dateTime: '2026-06-15T20:00:00+02:00',
|
||||||
|
expiryDate: '2026-07-15',
|
||||||
|
}),
|
||||||
|
).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false for null', () => {
|
||||||
|
expect(isValidStoredEvent(null)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false for non-object', () => {
|
||||||
|
expect(isValidStoredEvent('string')).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false when eventToken is missing', () => {
|
||||||
|
expect(
|
||||||
|
isValidStoredEvent({
|
||||||
|
title: 'Birthday',
|
||||||
|
dateTime: '2026-06-15T20:00:00+02:00',
|
||||||
|
}),
|
||||||
|
).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false when eventToken is empty', () => {
|
||||||
|
expect(
|
||||||
|
isValidStoredEvent({
|
||||||
|
eventToken: '',
|
||||||
|
title: 'Birthday',
|
||||||
|
dateTime: '2026-06-15T20:00:00+02:00',
|
||||||
|
}),
|
||||||
|
).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false when title is missing', () => {
|
||||||
|
expect(
|
||||||
|
isValidStoredEvent({
|
||||||
|
eventToken: 'abc-123',
|
||||||
|
dateTime: '2026-06-15T20:00:00+02:00',
|
||||||
|
}),
|
||||||
|
).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false when dateTime is invalid', () => {
|
||||||
|
expect(
|
||||||
|
isValidStoredEvent({
|
||||||
|
eventToken: 'abc-123',
|
||||||
|
title: 'Birthday',
|
||||||
|
dateTime: 'not-a-date',
|
||||||
|
}),
|
||||||
|
).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false when dateTime is empty', () => {
|
||||||
|
expect(
|
||||||
|
isValidStoredEvent({
|
||||||
|
eventToken: 'abc-123',
|
||||||
|
title: 'Birthday',
|
||||||
|
dateTime: '',
|
||||||
|
}),
|
||||||
|
).toBe(false)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
72
frontend/src/composables/__tests__/useRelativeTime.spec.ts
Normal file
72
frontend/src/composables/__tests__/useRelativeTime.spec.ts
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
import { formatRelativeTime } from '../useRelativeTime'
|
||||||
|
|
||||||
|
describe('formatRelativeTime', () => {
|
||||||
|
const now = new Date('2026-06-15T12:00:00Z')
|
||||||
|
|
||||||
|
it('formats seconds ago', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-15T11:59:30Z', now)
|
||||||
|
expect(result).toMatch(/30 seconds ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats minutes ago', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-15T11:55:00Z', now)
|
||||||
|
expect(result).toMatch(/5 minutes ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats hours ago', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-15T09:00:00Z', now)
|
||||||
|
expect(result).toMatch(/3 hours ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats days ago', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-13T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/2 days ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats weeks ago', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-01T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/2 weeks ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats months ago', () => {
|
||||||
|
const result = formatRelativeTime('2026-03-15T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/3 months ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats years ago', () => {
|
||||||
|
const result = formatRelativeTime('2024-06-15T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/2 years ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats future seconds', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-15T12:00:30Z', now)
|
||||||
|
expect(result).toMatch(/in 30 seconds/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats future days', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-18T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/in 3 days/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats future months', () => {
|
||||||
|
const result = formatRelativeTime('2026-09-15T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/in 3 months/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats "now" for zero difference', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-15T12:00:00Z', now)
|
||||||
|
// Intl.RelativeTimeFormat with numeric: 'auto' returns "now" for 0 seconds
|
||||||
|
expect(result).toMatch(/now/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats yesterday', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-14T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/yesterday|1 day ago/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('formats tomorrow', () => {
|
||||||
|
const result = formatRelativeTime('2026-06-16T12:00:00Z', now)
|
||||||
|
expect(result).toMatch(/tomorrow|in 1 day/)
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -8,8 +8,26 @@ export interface StoredEvent {
|
|||||||
rsvpName?: string
|
rsvpName?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
const STORAGE_KEY = 'fete:events'
|
const STORAGE_KEY = 'fete:events'
|
||||||
|
|
||||||
|
const version = ref(0)
|
||||||
|
|
||||||
|
export function isValidStoredEvent(e: unknown): e is StoredEvent {
|
||||||
|
if (typeof e !== 'object' || e === null) return false
|
||||||
|
const obj = e as Record<string, unknown>
|
||||||
|
return (
|
||||||
|
typeof obj.eventToken === 'string' &&
|
||||||
|
obj.eventToken.length > 0 &&
|
||||||
|
typeof obj.title === 'string' &&
|
||||||
|
obj.title.length > 0 &&
|
||||||
|
typeof obj.dateTime === 'string' &&
|
||||||
|
obj.dateTime.length > 0 &&
|
||||||
|
!isNaN(new Date(obj.dateTime).getTime())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function readEvents(): StoredEvent[] {
|
function readEvents(): StoredEvent[] {
|
||||||
try {
|
try {
|
||||||
const raw = localStorage.getItem(STORAGE_KEY)
|
const raw = localStorage.getItem(STORAGE_KEY)
|
||||||
@@ -21,6 +39,7 @@ function readEvents(): StoredEvent[] {
|
|||||||
|
|
||||||
function writeEvents(events: StoredEvent[]): void {
|
function writeEvents(events: StoredEvent[]): void {
|
||||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(events))
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(events))
|
||||||
|
version.value++
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useEventStorage() {
|
export function useEventStorage() {
|
||||||
@@ -31,6 +50,7 @@ export function useEventStorage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getStoredEvents(): StoredEvent[] {
|
function getStoredEvents(): StoredEvent[] {
|
||||||
|
void version.value
|
||||||
return readEvents()
|
return readEvents()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -59,5 +79,10 @@ export function useEventStorage() {
|
|||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp }
|
function removeEvent(eventToken: string): void {
|
||||||
|
const events = readEvents().filter((e) => e.eventToken !== eventToken)
|
||||||
|
writeEvents(events)
|
||||||
|
}
|
||||||
|
|
||||||
|
return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeEvent }
|
||||||
}
|
}
|
||||||
|
|||||||
23
frontend/src/composables/useRelativeTime.ts
Normal file
23
frontend/src/composables/useRelativeTime.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
|
||||||
|
['year', 365 * 24 * 60 * 60],
|
||||||
|
['month', 30 * 24 * 60 * 60],
|
||||||
|
['week', 7 * 24 * 60 * 60],
|
||||||
|
['day', 24 * 60 * 60],
|
||||||
|
['hour', 60 * 60],
|
||||||
|
['minute', 60],
|
||||||
|
['second', 1],
|
||||||
|
]
|
||||||
|
|
||||||
|
export function formatRelativeTime(dateTime: string, now: Date = new Date()): string {
|
||||||
|
const target = new Date(dateTime)
|
||||||
|
const diffSeconds = Math.round((target.getTime() - now.getTime()) / 1000)
|
||||||
|
|
||||||
|
for (const [unit, secondsInUnit] of UNITS) {
|
||||||
|
if (Math.abs(diffSeconds) >= secondsInUnit) {
|
||||||
|
const value = Math.round(diffSeconds / secondsInUnit)
|
||||||
|
return new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' }).format(value, unit)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' }).format(0, 'second')
|
||||||
|
}
|
||||||
@@ -15,7 +15,7 @@ const router = createRouter({
|
|||||||
component: () => import('../views/EventCreateView.vue'),
|
component: () => import('../views/EventCreateView.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/events/:token',
|
path: '/events/:eventToken',
|
||||||
name: 'event',
|
name: 'event',
|
||||||
component: () => import('../views/EventDetailView.vue'),
|
component: () => import('../views/EventDetailView.vue'),
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -215,7 +215,7 @@ async function handleSubmit() {
|
|||||||
expiryDate: data.expiryDate,
|
expiryDate: data.expiryDate,
|
||||||
})
|
})
|
||||||
|
|
||||||
router.push({ name: 'event', params: { token: data.eventToken } })
|
router.push({ name: 'event', params: { eventToken: data.eventToken } })
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
submitting.value = false
|
submitting.value = false
|
||||||
|
|||||||
@@ -131,7 +131,7 @@ async function fetchEvent() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const { data, error, response } = await api.GET('/events/{token}', {
|
const { data, error, response } = await api.GET('/events/{token}', {
|
||||||
params: { path: { token: route.params.token as string } },
|
params: { path: { token: route.params.eventToken as string } },
|
||||||
})
|
})
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
@@ -173,7 +173,7 @@ async function submitRsvp() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const { data, error } = await api.POST('/events/{token}/rsvps', {
|
const { data, error } = await api.POST('/events/{token}/rsvps', {
|
||||||
params: { path: { token: route.params.token as string } },
|
params: { path: { token: route.params.eventToken as string } },
|
||||||
body: { name: nameInput.value },
|
body: { name: nameInput.value },
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ const route = useRoute()
|
|||||||
const copyState = ref<'idle' | 'copied' | 'failed'>('idle')
|
const copyState = ref<'idle' | 'copied' | 'failed'>('idle')
|
||||||
|
|
||||||
const eventUrl = computed(() => {
|
const eventUrl = computed(() => {
|
||||||
return window.location.origin + '/events/' + route.params.token
|
return window.location.origin + '/events/' + route.params.eventToken
|
||||||
})
|
})
|
||||||
|
|
||||||
const copyLabel = computed(() => {
|
const copyLabel = computed(() => {
|
||||||
|
|||||||
@@ -1,13 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="home">
|
<main class="home">
|
||||||
<h1 class="home__title">fete</h1>
|
<h1 class="home__title">fete</h1>
|
||||||
<p class="home__subtitle">No events yet.<br />Create your first one!</p>
|
<template v-if="events.length > 0">
|
||||||
<RouterLink to="/create" class="btn-primary home__cta">+ Create Event</RouterLink>
|
<EventList />
|
||||||
|
<CreateEventFab />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<EmptyState />
|
||||||
|
</template>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterLink } from 'vue-router'
|
import { computed } from 'vue'
|
||||||
|
import { useEventStorage, isValidStoredEvent } from '../composables/useEventStorage'
|
||||||
|
import EventList from '../components/EventList.vue'
|
||||||
|
import EmptyState from '../components/EmptyState.vue'
|
||||||
|
import CreateEventFab from '../components/CreateEventFab.vue'
|
||||||
|
|
||||||
|
const { getStoredEvents } = useEventStorage()
|
||||||
|
|
||||||
|
const events = computed(() => getStoredEvents().filter(isValidStoredEvent))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -15,27 +28,15 @@ import { RouterLink } from 'vue-router'
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: var(--spacing-lg);
|
gap: var(--spacing-lg);
|
||||||
text-align: center;
|
padding-top: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home__title {
|
.home__title {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--color-text-on-gradient);
|
color: var(--color-text-on-gradient);
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home__subtitle {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--color-text-on-gradient);
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__cta {
|
|
||||||
margin-top: var(--spacing-md);
|
|
||||||
max-width: 280px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ function createTestRouter() {
|
|||||||
routes: [
|
routes: [
|
||||||
{ path: '/', name: 'home', component: { template: '<div />' } },
|
{ path: '/', name: 'home', component: { template: '<div />' } },
|
||||||
{ path: '/create', name: 'create-event', component: EventCreateView },
|
{ path: '/create', name: 'create-event', component: EventCreateView },
|
||||||
{ path: '/events/:token', name: 'event', component: { template: '<div />' } },
|
{ path: '/events/:eventToken', name: 'event', component: { template: '<div />' } },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -169,6 +169,7 @@ describe('EventCreateView', () => {
|
|||||||
getOrganizerToken: vi.fn(),
|
getOrganizerToken: vi.fn(),
|
||||||
saveRsvp: vi.fn(),
|
saveRsvp: vi.fn(),
|
||||||
getRsvp: vi.fn(),
|
getRsvp: vi.fn(),
|
||||||
|
removeEvent: vi.fn(),
|
||||||
})
|
})
|
||||||
|
|
||||||
vi.mocked(api.POST).mockResolvedValueOnce({
|
vi.mocked(api.POST).mockResolvedValueOnce({
|
||||||
@@ -221,7 +222,7 @@ describe('EventCreateView', () => {
|
|||||||
|
|
||||||
expect(pushSpy).toHaveBeenCalledWith({
|
expect(pushSpy).toHaveBeenCalledWith({
|
||||||
name: 'event',
|
name: 'event',
|
||||||
params: { token: 'abc-123' },
|
params: { eventToken: 'abc-123' },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ vi.mock('@/composables/useEventStorage', () => ({
|
|||||||
getOrganizerToken: mockGetOrganizerToken,
|
getOrganizerToken: mockGetOrganizerToken,
|
||||||
saveRsvp: mockSaveRsvp,
|
saveRsvp: mockSaveRsvp,
|
||||||
getRsvp: mockGetRsvp,
|
getRsvp: mockGetRsvp,
|
||||||
|
removeEvent: vi.fn(),
|
||||||
})),
|
})),
|
||||||
}))
|
}))
|
||||||
|
|
||||||
@@ -30,7 +31,7 @@ function createTestRouter(_token?: string) {
|
|||||||
history: createMemoryHistory(),
|
history: createMemoryHistory(),
|
||||||
routes: [
|
routes: [
|
||||||
{ path: '/', name: 'home', component: { template: '<div />' } },
|
{ path: '/', name: 'home', component: { template: '<div />' } },
|
||||||
{ path: '/events/:token', name: 'event', component: EventDetailView },
|
{ path: '/events/:eventToken', name: 'event', component: EventDetailView },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ function createTestRouter() {
|
|||||||
history: createMemoryHistory(),
|
history: createMemoryHistory(),
|
||||||
routes: [
|
routes: [
|
||||||
{ path: '/', name: 'home', component: { template: '<div />' } },
|
{ path: '/', name: 'home', component: { template: '<div />' } },
|
||||||
{ path: '/events/:token', name: 'event', component: EventStubView },
|
{ path: '/events/:eventToken', name: 'event', component: EventStubView },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
35
specs/009-list-events/checklists/requirements.md
Normal file
35
specs/009-list-events/checklists/requirements.md
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
# Specification Quality Checklist: Event List on Home Page
|
||||||
|
|
||||||
|
**Purpose**: Validate specification completeness and quality before proceeding to planning
|
||||||
|
**Created**: 2026-03-08
|
||||||
|
**Feature**: [spec.md](../spec.md)
|
||||||
|
|
||||||
|
## Content Quality
|
||||||
|
|
||||||
|
- [x] No implementation details (languages, frameworks, APIs)
|
||||||
|
- [x] Focused on user value and business needs
|
||||||
|
- [x] Written for non-technical stakeholders
|
||||||
|
- [x] All mandatory sections completed
|
||||||
|
|
||||||
|
## Requirement Completeness
|
||||||
|
|
||||||
|
- [x] No [NEEDS CLARIFICATION] markers remain
|
||||||
|
- [x] Requirements are testable and unambiguous
|
||||||
|
- [x] Success criteria are measurable
|
||||||
|
- [x] Success criteria are technology-agnostic (no implementation details)
|
||||||
|
- [x] All acceptance scenarios are defined
|
||||||
|
- [x] Edge cases are identified
|
||||||
|
- [x] Scope is clearly bounded
|
||||||
|
- [x] Dependencies and assumptions identified
|
||||||
|
|
||||||
|
## Feature Readiness
|
||||||
|
|
||||||
|
- [x] All functional requirements have clear acceptance criteria
|
||||||
|
- [x] User scenarios cover primary flows
|
||||||
|
- [x] Feature meets measurable outcomes defined in Success Criteria
|
||||||
|
- [x] No implementation details leak into specification
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- All items pass validation. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
|
||||||
|
- Assumptions section documents that no backend changes are needed — this is a frontend-only feature using existing localStorage data.
|
||||||
99
specs/009-list-events/data-model.md
Normal file
99
specs/009-list-events/data-model.md
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
# Data Model: Event List on Home Page
|
||||||
|
|
||||||
|
**Feature**: 009-list-events | **Date**: 2026-03-08
|
||||||
|
|
||||||
|
## Entities
|
||||||
|
|
||||||
|
### StoredEvent (existing — no changes)
|
||||||
|
|
||||||
|
The `StoredEvent` interface in `frontend/src/composables/useEventStorage.ts` already contains all fields needed for the event list feature.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface StoredEvent {
|
||||||
|
eventToken: string // Required — UUID, used for navigation
|
||||||
|
organizerToken?: string // Present if user created this event
|
||||||
|
title: string // Required — displayed on card
|
||||||
|
dateTime: string // Required — ISO 8601, used for sorting + relative time
|
||||||
|
expiryDate: string // Stored but not displayed in list view
|
||||||
|
rsvpToken?: string // Present if user RSVP'd to this event
|
||||||
|
rsvpName?: string // User's name at RSVP time
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Validation Rules
|
||||||
|
|
||||||
|
An event entry is considered **valid** for display if all of:
|
||||||
|
- `eventToken` is a non-empty string
|
||||||
|
- `title` is a non-empty string
|
||||||
|
- `dateTime` is a non-empty string that parses to a valid `Date`
|
||||||
|
|
||||||
|
Invalid entries are silently excluded from the list (FR-010).
|
||||||
|
|
||||||
|
### Derived Properties (computed at render time)
|
||||||
|
|
||||||
|
| Property | Derivation |
|
||||||
|
|----------|-----------|
|
||||||
|
| `isPast` | `new Date(dateTime) < new Date()` |
|
||||||
|
| `isOrganizer` | `organizerToken !== undefined` |
|
||||||
|
| `isAttendee` | `rsvpToken !== undefined && organizerToken === undefined` |
|
||||||
|
| `relativeTime` | `Intl.RelativeTimeFormat` applied to `dateTime` vs now |
|
||||||
|
| `detailRoute` | `/events/${eventToken}` |
|
||||||
|
|
||||||
|
### Sorting Order
|
||||||
|
|
||||||
|
1. **Upcoming events** (`dateTime >= now`): ascending by `dateTime` (soonest first)
|
||||||
|
2. **Past events** (`dateTime < now`): descending by `dateTime` (most recently passed first)
|
||||||
|
|
||||||
|
### Composable Extension
|
||||||
|
|
||||||
|
The `useEventStorage` composable needs one new function:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
function removeEvent(eventToken: string): void {
|
||||||
|
const events = readEvents().filter((e) => e.eventToken !== eventToken)
|
||||||
|
writeEvents(events)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Returned alongside existing functions from `useEventStorage()`.
|
||||||
|
|
||||||
|
## State Transitions
|
||||||
|
|
||||||
|
```
|
||||||
|
localStorage read
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Parse JSON ──(error)──► empty array
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Validate entries ──(invalid)──► silently excluded
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Split: upcoming / past
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Sort each group
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Concatenate ──► rendered list
|
||||||
|
```
|
||||||
|
|
||||||
|
### Remove Event Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
User taps delete icon / swipes left
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
ConfirmDialog opens
|
||||||
|
│
|
||||||
|
┌────┴────┐
|
||||||
|
│ Cancel │ Confirm
|
||||||
|
│ │ │
|
||||||
|
│ ▼ ▼
|
||||||
|
│ removeEvent(token)
|
||||||
|
│ │
|
||||||
|
│ ▼
|
||||||
|
│ Event removed from localStorage
|
||||||
|
│ List re-renders (event disappears)
|
||||||
|
└────────────────────────────────┘
|
||||||
|
```
|
||||||
86
specs/009-list-events/plan.md
Normal file
86
specs/009-list-events/plan.md
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
# Implementation Plan: Event List on Home Page
|
||||||
|
|
||||||
|
**Branch**: `009-list-events` | **Date**: 2026-03-08 | **Spec**: `specs/009-list-events/spec.md`
|
||||||
|
**Input**: Feature specification from `/specs/009-list-events/spec.md`
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
Transform the home page from a static empty-state placeholder into a dynamic event list that shows all events stored in the browser's localStorage. Each event card displays title, relative time, and role indicator (organizer/attendee). Events are sorted chronologically (upcoming first), past events appear faded, and users can remove events via delete icon or swipe gesture. A FAB provides persistent access to event creation.
|
||||||
|
|
||||||
|
This is a **frontend-only** feature — no backend or API changes required. The existing `useEventStorage` composable already provides all necessary data access.
|
||||||
|
|
||||||
|
## Technical Context
|
||||||
|
|
||||||
|
**Language/Version**: TypeScript 5.9, Vue 3.5
|
||||||
|
**Primary Dependencies**: Vue 3, Vue Router 5, Vite
|
||||||
|
**Storage**: Browser localStorage via `useEventStorage` composable
|
||||||
|
**Testing**: Vitest (unit), Playwright + MSW (E2E)
|
||||||
|
**Target Platform**: Mobile-first PWA (centered 480px column on desktop)
|
||||||
|
**Project Type**: Web application (frontend-only changes)
|
||||||
|
**Performance Goals**: Event list renders within 1 second (SC-001) — trivial given localStorage read
|
||||||
|
**Constraints**: No external dependencies, no tracking, WCAG AA, keyboard navigable
|
||||||
|
**Scale/Scope**: Typically <50 events in localStorage; no pagination needed
|
||||||
|
|
||||||
|
## Constitution Check
|
||||||
|
|
||||||
|
*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
|
||||||
|
|
||||||
|
| Principle | Status | Notes |
|
||||||
|
|-----------|--------|-------|
|
||||||
|
| I. Privacy by Design | ✅ PASS | Purely client-side. No data leaves the browser. No analytics. |
|
||||||
|
| II. Test-Driven Methodology | ✅ PASS | Unit tests for composable, E2E for each user story. TDD enforced. |
|
||||||
|
| III. API-First Development | ✅ N/A | No API changes — this feature reads only from localStorage. |
|
||||||
|
| IV. Simplicity & Quality | ✅ PASS | Minimal approach: extend existing composable + new components. No over-engineering. |
|
||||||
|
| V. Dependency Discipline | ✅ PASS | No new dependencies. Swipe gesture implemented with native Touch API. Relative time via built-in `Intl.RelativeTimeFormat`. |
|
||||||
|
| VI. Accessibility | ✅ PASS | Semantic list markup, ARIA labels, keyboard navigation, WCAG AA contrast on faded past events. |
|
||||||
|
|
||||||
|
**Gate result: PASS** — no violations.
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
### Documentation (this feature)
|
||||||
|
|
||||||
|
```text
|
||||||
|
specs/009-list-events/
|
||||||
|
├── plan.md # This file
|
||||||
|
├── spec.md # Feature specification
|
||||||
|
├── research.md # Phase 0 output
|
||||||
|
├── data-model.md # Phase 1 output
|
||||||
|
└── tasks.md # Phase 2 output (/speckit.tasks command)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Source Code (repository root)
|
||||||
|
|
||||||
|
```text
|
||||||
|
frontend/
|
||||||
|
├── src/
|
||||||
|
│ ├── composables/
|
||||||
|
│ │ ├── useEventStorage.ts # MODIFY: add removeEvent()
|
||||||
|
│ │ ├── useRelativeTime.ts # NEW: Intl.RelativeTimeFormat wrapper
|
||||||
|
│ │ └── __tests__/
|
||||||
|
│ │ ├── useEventStorage.spec.ts # MODIFY: add removeEvent tests
|
||||||
|
│ │ └── useRelativeTime.spec.ts # NEW: relative time formatting tests
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── EventCard.vue # NEW: individual event list item
|
||||||
|
│ │ ├── EventList.vue # NEW: sorted event list container
|
||||||
|
│ │ ├── EmptyState.vue # NEW: extracted empty state
|
||||||
|
│ │ ├── CreateEventFab.vue # NEW: floating action button
|
||||||
|
│ │ ├── ConfirmDialog.vue # NEW: reusable confirmation prompt
|
||||||
|
│ │ └── __tests__/
|
||||||
|
│ │ ├── EventCard.spec.ts # NEW
|
||||||
|
│ │ ├── EventList.spec.ts # NEW
|
||||||
|
│ │ ├── EmptyState.spec.ts # NEW
|
||||||
|
│ │ └── ConfirmDialog.spec.ts # NEW
|
||||||
|
│ ├── views/
|
||||||
|
│ │ └── HomeView.vue # MODIFY: compose list/empty/fab
|
||||||
|
│ └── assets/
|
||||||
|
│ └── main.css # MODIFY: add event card, faded, fab styles
|
||||||
|
└── e2e/
|
||||||
|
└── home-events.spec.ts # NEW: E2E tests for all user stories
|
||||||
|
```
|
||||||
|
|
||||||
|
**Structure Decision**: Frontend-only changes. New components in `components/`, composable extensions in `composables/`, styles in existing `main.css`. No backend changes.
|
||||||
|
|
||||||
|
## Complexity Tracking
|
||||||
|
|
||||||
|
No constitution violations — this section is intentionally empty.
|
||||||
110
specs/009-list-events/research.md
Normal file
110
specs/009-list-events/research.md
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
# Research: Event List on Home Page
|
||||||
|
|
||||||
|
**Feature**: 009-list-events | **Date**: 2026-03-08
|
||||||
|
|
||||||
|
## Research Questions
|
||||||
|
|
||||||
|
### 1. Relative Time Formatting with `Intl.RelativeTimeFormat`
|
||||||
|
|
||||||
|
**Decision**: Use the built-in `Intl.RelativeTimeFormat` API directly — no library needed.
|
||||||
|
|
||||||
|
**Rationale**: The API is supported in all modern browsers (97%+ coverage). It handles locale-aware output natively (e.g., "in 3 days", "vor 2 Tagen" for German). The spec requires exactly this (FR-002).
|
||||||
|
|
||||||
|
**Implementation approach**: Create a `useRelativeTime` composable that:
|
||||||
|
1. Takes a date string (ISO 8601) and computes the difference from `now`
|
||||||
|
2. Selects the appropriate unit (seconds → minutes → hours → days → weeks → months → years)
|
||||||
|
3. Returns a formatted string via `Intl.RelativeTimeFormat(navigator.language, { numeric: 'auto' })`
|
||||||
|
4. Exposes a reactive `label` that updates (optional — can be static since the list re-reads on mount)
|
||||||
|
|
||||||
|
**Alternatives considered**:
|
||||||
|
- `date-fns/formatDistance`: Would add a dependency for something the platform already does. Rejected per Principle V.
|
||||||
|
- `dayjs/relativeTime`: Same reasoning — unnecessary dependency.
|
||||||
|
|
||||||
|
### 2. Swipe-to-Delete Gesture (FR-006b)
|
||||||
|
|
||||||
|
**Decision**: Implement with native Touch API (`touchstart`, `touchmove`, `touchend`) — no gesture library.
|
||||||
|
|
||||||
|
**Rationale**: The gesture is simple (horizontal swipe on a single element). A library like Hammer.js or @vueuse/gesture would be overkill for one swipe direction on one component type. Per Principle V, dependencies must provide substantial value.
|
||||||
|
|
||||||
|
**Implementation approach**:
|
||||||
|
1. Track `touchstart` X position on the event card
|
||||||
|
2. On `touchmove`, calculate delta-X; if leftward and exceeds threshold (~80px), reveal delete action
|
||||||
|
3. On `touchend`, either snap back or trigger confirmation
|
||||||
|
4. CSS `transform: translateX()` with `transition` for smooth animation
|
||||||
|
5. Desktop users use the visible delete icon (no swipe needed)
|
||||||
|
|
||||||
|
**Alternatives considered**:
|
||||||
|
- `@vueuse/gesture`: Wraps Hammer.js, adds ~15KB. Rejected — too heavy for one gesture.
|
||||||
|
- CSS `scroll-snap` trick: Clever but brittle and poor accessibility. Rejected.
|
||||||
|
|
||||||
|
### 3. Past Event Visual Fading (FR-009)
|
||||||
|
|
||||||
|
**Decision**: Use CSS `opacity` reduction + `filter: saturate()` for faded appearance.
|
||||||
|
|
||||||
|
**Rationale**: The spec says "subtle reduction in contrast and saturation" — not a blunt grey-out. Combining `opacity: 0.6` with `filter: saturate(0.5)` achieves this while keeping text readable. Must verify WCAG AA contrast on the faded state.
|
||||||
|
|
||||||
|
**Implementation approach**:
|
||||||
|
- Add a `.event-card--past` modifier class
|
||||||
|
- Apply `opacity: 0.55; filter: saturate(0.4)` (tune exact values for WCAG AA)
|
||||||
|
- Keep `pointer-events: auto` and normal hover/focus styles so the card remains interactive
|
||||||
|
- The card still navigates to the event detail page on click
|
||||||
|
|
||||||
|
**Contrast verification**: The card text (`#1C1C1E` on `#FFFFFF`) has a contrast ratio of ~17:1. At `opacity: 0.55`, effective contrast drops to ~9:1, which still passes WCAG AA (4.5:1 minimum). Safe.
|
||||||
|
|
||||||
|
### 4. Confirmation Dialog (FR-007)
|
||||||
|
|
||||||
|
**Decision**: Custom modal component (reusing the existing `BottomSheet.vue` pattern) rather than `window.confirm()`.
|
||||||
|
|
||||||
|
**Rationale**: `window.confirm()` is blocking, non-stylable, and inconsistent across browsers. A custom dialog matches the app's design system and provides a better UX. The existing `BottomSheet.vue` already handles teleportation, focus trapping, and Escape-key dismissal — the confirm dialog can reuse this or follow the same pattern.
|
||||||
|
|
||||||
|
**Implementation approach**:
|
||||||
|
- Create a `ConfirmDialog.vue` component
|
||||||
|
- Props: `open`, `title`, `message`, `confirmLabel`, `cancelLabel`
|
||||||
|
- Emits: `confirm`, `cancel`
|
||||||
|
- Uses the same teleport-to-body pattern as `BottomSheet.vue`
|
||||||
|
- Focus trapping and keyboard navigation (Tab, Escape, Enter)
|
||||||
|
|
||||||
|
### 5. localStorage Validation (FR-010)
|
||||||
|
|
||||||
|
**Decision**: Validate entries during read — filter out invalid events silently.
|
||||||
|
|
||||||
|
**Rationale**: The spec says "silently excluded from the list." The `readEvents()` function already handles parse errors with a try/catch. We need to add field-level validation: an event is valid only if it has `eventToken`, `title`, and `dateTime` (all non-empty strings).
|
||||||
|
|
||||||
|
**Implementation approach**:
|
||||||
|
- Add a `isValidStoredEvent(e: unknown): e is StoredEvent` type guard
|
||||||
|
- Apply it in `getStoredEvents()` as a filter
|
||||||
|
- Invalid entries remain in localStorage (no destructive cleanup) but are not displayed
|
||||||
|
|
||||||
|
### 6. FAB Placement (FR-011)
|
||||||
|
|
||||||
|
**Decision**: Fixed-position button at bottom-right with safe-area padding.
|
||||||
|
|
||||||
|
**Rationale**: Standard Material Design pattern for primary actions. The existing `RsvpBar.vue` already uses `padding-bottom: env(safe-area-inset-bottom)` for mobile notch avoidance — reuse the same approach.
|
||||||
|
|
||||||
|
**Implementation approach**:
|
||||||
|
- `position: fixed; bottom: calc(1.2rem + env(safe-area-inset-bottom)); right: 1.2rem`
|
||||||
|
- Circular button with `+` icon, accent color background
|
||||||
|
- `z-index` above content, shadow for elevation
|
||||||
|
- Navigates to `/create` on click
|
||||||
|
|
||||||
|
### 7. Event Sorting (FR-004)
|
||||||
|
|
||||||
|
**Decision**: Sort in-memory after reading from localStorage.
|
||||||
|
|
||||||
|
**Rationale**: The list is small (<100 events typically). Sorting on every render is negligible. Sort by `dateTime` ascending (nearest upcoming first), then past events after.
|
||||||
|
|
||||||
|
**Implementation approach**:
|
||||||
|
- Split events into `upcoming` (dateTime >= now) and `past` (dateTime < now)
|
||||||
|
- Sort upcoming ascending (soonest first), past descending (most recent past first)
|
||||||
|
- Concatenate: `[...upcoming, ...past]`
|
||||||
|
|
||||||
|
### 8. Role Distinction (FR-008 / US-5)
|
||||||
|
|
||||||
|
**Decision**: Small badge/label on the event card indicating "Organizer" or "Attendee."
|
||||||
|
|
||||||
|
**Rationale**: The data is already available — `organizerToken` present means organizer, `rsvpToken` present (without `organizerToken`) means attendee. A subtle text badge is sufficient; no need for icons or colors.
|
||||||
|
|
||||||
|
**Implementation approach**:
|
||||||
|
- If `organizerToken` is set → show "Organizer" badge (accent-colored)
|
||||||
|
- If `rsvpToken` is set (no `organizerToken`) → show "Attendee" badge (muted)
|
||||||
|
- If neither → show no badge (edge case: event stored but no role — could happen with manual localStorage manipulation)
|
||||||
145
specs/009-list-events/spec.md
Normal file
145
specs/009-list-events/spec.md
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
# Feature Specification: Event List on Home Page
|
||||||
|
|
||||||
|
**Feature Branch**: `009-list-events`
|
||||||
|
**Created**: 2026-03-08
|
||||||
|
**Status**: Draft
|
||||||
|
**Input**: User description: "man kann auf der hauptseite eine liste an events sehen, sofern sie im localstorage gespeichert sind"
|
||||||
|
|
||||||
|
## User Scenarios & Testing *(mandatory)*
|
||||||
|
|
||||||
|
### User Story 1 - View My Events (Priority: P1)
|
||||||
|
|
||||||
|
As a returning user, I want to see a list of events I have previously created or interacted with (RSVP'd to) on the home page, so I can quickly navigate back to them without needing to remember or bookmark individual event links.
|
||||||
|
|
||||||
|
The home page displays all events stored in the browser's local storage. Each event entry shows the event title and date/time. Tapping an event navigates to its detail page.
|
||||||
|
|
||||||
|
**Why this priority**: This is the core value of the feature — without the list, the home page remains a dead end for returning users.
|
||||||
|
|
||||||
|
**Independent Test**: Can be fully tested by creating an event (or simulating localStorage entries), returning to the home page, and verifying all stored events appear in a list with correct titles and dates.
|
||||||
|
|
||||||
|
**Acceptance Scenarios**:
|
||||||
|
|
||||||
|
1. **Given** the user has 3 events stored in localStorage, **When** they visit the home page, **Then** all 3 events are displayed in a list showing title and date/time for each.
|
||||||
|
2. **Given** the user has events stored in localStorage, **When** they tap on an event in the list, **Then** they are navigated to the event detail page (`/events/:eventToken`).
|
||||||
|
3. **Given** the user has events stored in localStorage, **When** they visit the home page, **Then** events are sorted by date/time (nearest upcoming event first, past events last).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### User Story 2 - Empty State (Priority: P2)
|
||||||
|
|
||||||
|
As a new user with no stored events, I see an inviting empty state on the home page that encourages me to create my first event or explains how to get started.
|
||||||
|
|
||||||
|
**Why this priority**: First-time users need clear guidance. The empty state is the first impression for new users.
|
||||||
|
|
||||||
|
**Independent Test**: Can be tested by clearing localStorage and visiting the home page — the empty state message and "Create Event" call-to-action should be visible.
|
||||||
|
|
||||||
|
**Acceptance Scenarios**:
|
||||||
|
|
||||||
|
1. **Given** no events are stored in localStorage, **When** the user visits the home page, **Then** an empty state message is displayed (e.g., "No events yet") with a prominent "Create Event" button.
|
||||||
|
2. **Given** the user has at least one event stored, **When** they visit the home page, **Then** the empty state message is not shown — the event list is displayed instead.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### User Story 3 - Remove Event from List (Priority: P3)
|
||||||
|
|
||||||
|
As a user, I want to remove an event from my personal list so I can keep my home page tidy and only show events I still care about.
|
||||||
|
|
||||||
|
**Why this priority**: Housekeeping capability. Without removal, the list grows indefinitely and becomes cluttered over time.
|
||||||
|
|
||||||
|
**Independent Test**: Can be tested by having multiple events in localStorage, removing one from the list, and verifying it disappears from the home page while the others remain.
|
||||||
|
|
||||||
|
**Acceptance Scenarios**:
|
||||||
|
|
||||||
|
1. **Given** the user has events in their list, **When** they tap the delete icon on an event card, **Then** a confirmation prompt appears asking if they are sure.
|
||||||
|
1b. **Given** the user has events in their list, **When** they swipe an event card to the left, **Then** a confirmation prompt appears asking if they are sure.
|
||||||
|
2. **Given** the confirmation prompt is shown, **When** the user confirms removal, **Then** the event is removed from localStorage and disappears from the list immediately.
|
||||||
|
3. **Given** the confirmation prompt is shown, **When** the user cancels, **Then** the event remains in the list unchanged.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### User Story 4 - Past Events Appear Faded (Priority: P2)
|
||||||
|
|
||||||
|
As a user, I want events whose date/time has passed to appear visually faded or muted in the list, so I can immediately focus on upcoming events without past events cluttering my attention.
|
||||||
|
|
||||||
|
The fading should feel modern and polished — not a blunt grey-out, but a subtle reduction in contrast and saturation that makes past events recede visually while remaining readable and tappable.
|
||||||
|
|
||||||
|
**Why this priority**: Without this, past and upcoming events look identical, making the list harder to scan. This is essential for usability once a user has accumulated several events.
|
||||||
|
|
||||||
|
**Independent Test**: Can be tested by having both future and past events in localStorage and verifying that past events display with reduced visual prominence while remaining interactive.
|
||||||
|
|
||||||
|
**Acceptance Scenarios**:
|
||||||
|
|
||||||
|
1. **Given** the user has a past event (dateTime before now) in localStorage, **When** they view the home page, **Then** the event appears with reduced visual prominence (muted colors, lower contrast) compared to upcoming events.
|
||||||
|
2. **Given** the user has a past event in the list, **When** they tap on it, **Then** it still navigates to the event detail page — it remains fully interactive.
|
||||||
|
3. **Given** the user has both past and upcoming events, **When** they view the home page, **Then** upcoming events appear first (full visual prominence), followed by past events (faded), creating a clear visual hierarchy.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### User Story 5 - Visual Distinction for Event Roles (Priority: P3)
|
||||||
|
|
||||||
|
As a user, I want to see at a glance whether I am the organizer of an event or just an attendee, so I can quickly identify my responsibilities.
|
||||||
|
|
||||||
|
**Why this priority**: Nice-to-have clarity. The data is already available in localStorage (presence of `organizerToken`), so surfacing it improves usability at low effort.
|
||||||
|
|
||||||
|
**Independent Test**: Can be tested by having both created events (with organizerToken) and RSVP'd events (with rsvpToken) in localStorage, and verifying they display different visual indicators.
|
||||||
|
|
||||||
|
**Acceptance Scenarios**:
|
||||||
|
|
||||||
|
1. **Given** the user has a created event (organizerToken present) in localStorage, **When** they view the home page, **Then** the event shows a visual indicator marking them as the organizer (e.g., a badge or label).
|
||||||
|
2. **Given** the user has an event with an RSVP (rsvpToken present, no organizerToken) in localStorage, **When** they view the home page, **Then** the event shows a visual indicator marking them as an attendee.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Edge Cases
|
||||||
|
|
||||||
|
- What happens when localStorage data is corrupted or contains invalid entries? Events with missing required fields (eventToken, title, dateTime) are silently excluded from the list.
|
||||||
|
- What happens when localStorage is unavailable (e.g., private browsing with storage disabled)? The empty state is shown with the "Create Event" button — the app remains functional.
|
||||||
|
- What happens when an event's date/time has passed? The event remains in the list but appears visually faded.
|
||||||
|
- What happens when the user has a very large number of stored events (e.g., 50+)? The list scrolls naturally. No pagination is needed at this scale since localStorage entries are lightweight.
|
||||||
|
|
||||||
|
## Requirements *(mandatory)*
|
||||||
|
|
||||||
|
### Functional Requirements
|
||||||
|
|
||||||
|
- **FR-001**: System MUST display a list of all events stored in the browser's local storage on the home page.
|
||||||
|
- **FR-002**: Each event entry MUST show the event title and the event date/time displayed as a relative time label (e.g., "in 3 days", "yesterday") using `Intl.RelativeTimeFormat`.
|
||||||
|
- **FR-003**: Each event entry MUST be tappable/clickable and navigate to the event detail page (`/events/:eventToken`).
|
||||||
|
- **FR-004**: Events MUST be sorted by date/time with nearest upcoming events first and past events last.
|
||||||
|
- **FR-005**: System MUST display an empty state with a "Create Event" call-to-action when no events are stored.
|
||||||
|
- **FR-006a**: Users MUST be able to remove individual events from their local list via a visible delete icon on each event card (primary mechanism, implemented first).
|
||||||
|
- **FR-006b**: Users MUST be able to remove individual events via swipe-to-delete gesture (secondary mechanism, implemented separately after FR-006a).
|
||||||
|
- **FR-007**: System MUST show a confirmation prompt before removing an event from the list.
|
||||||
|
- **FR-008**: System MUST visually distinguish events where the user is the organizer from events where the user is an attendee.
|
||||||
|
- **FR-009**: System MUST display past events (dateTime before current time) with reduced visual prominence — muted colors and lower contrast — while keeping them readable and interactive.
|
||||||
|
- **FR-010**: System MUST gracefully handle corrupted or incomplete localStorage entries by excluding invalid events from the list.
|
||||||
|
- **FR-011**: The "Create Event" button MUST remain accessible on the home page even when events are listed, implemented as a Floating Action Button (FAB) fixed at the bottom-right corner.
|
||||||
|
|
||||||
|
### Key Entities
|
||||||
|
|
||||||
|
- **Stored Event**: A locally persisted reference to an event the user has interacted with. Contains: event token (unique identifier for navigation), title, date/time, expiry date, and optionally an organizer token (if created by this user) or RSVP token and name (if the user RSVP'd).
|
||||||
|
|
||||||
|
## Success Criteria *(mandatory)*
|
||||||
|
|
||||||
|
### Measurable Outcomes
|
||||||
|
|
||||||
|
- **SC-001**: Users can see all their stored events on the home page within 1 second of page load.
|
||||||
|
- **SC-002**: Users can navigate from the home page to any event detail page in a single tap/click.
|
||||||
|
- **SC-003**: Users can remove an unwanted event from their list in under 3 seconds (including confirmation).
|
||||||
|
- **SC-004**: New users (no stored events) see a clear call-to-action to create their first event.
|
||||||
|
- **SC-005**: Users can distinguish their role (organizer vs. attendee) for each event at a glance without opening the event.
|
||||||
|
|
||||||
|
## Clarifications
|
||||||
|
|
||||||
|
### Session 2026-03-08
|
||||||
|
|
||||||
|
- Q: How does the user trigger event removal? → A: Two mechanisms — visible delete icon on each event card (primary, implemented first) and swipe-to-delete gesture (secondary, implemented separately after).
|
||||||
|
- Q: Placement of "Create Event" button when events exist? → A: Floating Action Button (FAB) fixed at bottom-right corner.
|
||||||
|
- Q: Date/time display format in event list? → A: Relative time labels ("in 3 days", "yesterday") via Intl.RelativeTimeFormat.
|
||||||
|
|
||||||
|
## Assumptions
|
||||||
|
|
||||||
|
- The existing `useEventStorage` composable and `StoredEvent` interface provide all necessary data for the event list (no backend API calls needed for listing).
|
||||||
|
- The event list is purely client-side — there is no server-side "my events" endpoint. Privacy is preserved because events are only known to the user's browser.
|
||||||
|
- The event list uses `Intl.RelativeTimeFormat` for relative time labels (FR-002), while the event detail view uses `Intl.DateTimeFormat` for absolute date/time display. Both use the browser's locale (`navigator.language`).
|
||||||
|
- The "Create Event" flow (spec 006) already saves events to localStorage, so no changes to event creation are needed.
|
||||||
|
- The RSVP flow (spec 008) already saves RSVP data to localStorage, so no changes to RSVP are needed.
|
||||||
215
specs/009-list-events/tasks.md
Normal file
215
specs/009-list-events/tasks.md
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
# Tasks: Event List on Home Page
|
||||||
|
|
||||||
|
**Input**: Design documents from `/specs/009-list-events/`
|
||||||
|
**Prerequisites**: plan.md, spec.md, research.md, data-model.md
|
||||||
|
|
||||||
|
**Tests**: Unit tests (Vitest) and E2E tests (Playwright) are included per constitution (Principle II: Test-Driven Methodology).
|
||||||
|
|
||||||
|
**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
|
||||||
|
|
||||||
|
## Format: `[ID] [P?] [Story] Description`
|
||||||
|
|
||||||
|
- **[P]**: Can run in parallel (different files, no dependencies)
|
||||||
|
- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
|
||||||
|
- Include exact file paths in descriptions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 1: Setup (Shared Infrastructure)
|
||||||
|
|
||||||
|
**Purpose**: Composable extensions and utility functions shared across all user stories
|
||||||
|
|
||||||
|
- [x] T000 Rename router param `:token` to `:eventToken` in `frontend/src/router/index.ts` and update all references in `EventDetailView.vue`, `EventStubView.vue`, and their test files (consistency with `StoredEvent.eventToken` field name)
|
||||||
|
- [x] T001 Add `isValidStoredEvent` type guard and validation filter to `frontend/src/composables/useEventStorage.ts` (FR-010)
|
||||||
|
- [x] T002 Add `removeEvent(eventToken: string)` function to `frontend/src/composables/useEventStorage.ts` (needed by US3)
|
||||||
|
- [x] T003 [P] Create `useRelativeTime` composable in `frontend/src/composables/useRelativeTime.ts` (Intl.RelativeTimeFormat wrapper, FR-002)
|
||||||
|
- [x] T004 [P] Add unit tests for `isValidStoredEvent` and `removeEvent` in `frontend/src/composables/__tests__/useEventStorage.spec.ts`
|
||||||
|
- [x] T005 [P] Create unit tests for `useRelativeTime` in `frontend/src/composables/__tests__/useRelativeTime.spec.ts`
|
||||||
|
|
||||||
|
**Checkpoint**: Composable layer complete — all shared logic tested and available for components.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 2: User Story 1 — View My Events (Priority: P1) 🎯 MVP
|
||||||
|
|
||||||
|
**Goal**: Home page shows all stored events in a sorted list with title and relative time. Tapping navigates to event detail.
|
||||||
|
|
||||||
|
**Independent Test**: Simulate localStorage entries, visit home page, verify all events appear sorted with correct titles and relative times. Tap an event and verify navigation to `/events/:eventToken`.
|
||||||
|
|
||||||
|
### Unit Tests for User Story 1
|
||||||
|
|
||||||
|
- [x] T006 [P] [US1] Create unit tests for EventCard component in `frontend/src/components/__tests__/EventCard.spec.ts` — include test cases for `isPast` prop (faded styling) and role badge rendering (organizer vs. attendee)
|
||||||
|
- [x] T007 [P] [US1] Create unit tests for EventList component in `frontend/src/components/__tests__/EventList.spec.ts`
|
||||||
|
|
||||||
|
### Implementation for User Story 1
|
||||||
|
|
||||||
|
- [x] T008 [P] [US1] Create `EventCard.vue` component in `frontend/src/components/EventCard.vue` — displays title, relative time, role badge; emits click for navigation
|
||||||
|
- [x] T009 [US1] Create `EventList.vue` component in `frontend/src/components/EventList.vue` — reads events from composable, validates, sorts (upcoming asc, past desc), renders EventCard list
|
||||||
|
- [x] T010 [US1] Refactor `HomeView.vue` in `frontend/src/views/HomeView.vue` — integrate EventList, conditionally show list when events exist
|
||||||
|
- [x] T011 [US1] Add event card and list styles to `frontend/src/assets/main.css`
|
||||||
|
|
||||||
|
### E2E Tests for User Story 1
|
||||||
|
|
||||||
|
- [x] T012 [US1] Create E2E test file `frontend/e2e/home-events.spec.ts` — tests: events displayed with title and relative time, sorted correctly, click navigates to detail page
|
||||||
|
|
||||||
|
**Checkpoint**: MVP complete — returning users see their events and can navigate to details.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 3: User Story 2 — Empty State (Priority: P2)
|
||||||
|
|
||||||
|
**Goal**: New users with no stored events see an inviting empty state with a "Create Event" call-to-action.
|
||||||
|
|
||||||
|
**Independent Test**: Clear localStorage, visit home page, verify empty state message and "Create Event" button are visible.
|
||||||
|
|
||||||
|
### Unit Tests for User Story 2
|
||||||
|
|
||||||
|
- [x] T013 [P] [US2] Create unit tests for EmptyState component in `frontend/src/components/__tests__/EmptyState.spec.ts`
|
||||||
|
|
||||||
|
### Implementation for User Story 2
|
||||||
|
|
||||||
|
- [x] T014 [US2] Create `EmptyState.vue` component in `frontend/src/components/EmptyState.vue` — shows message and "Create Event" RouterLink
|
||||||
|
- [x] T015 [US2] Update `HomeView.vue` in `frontend/src/views/HomeView.vue` — show EmptyState when no valid events, show EventList otherwise
|
||||||
|
- [x] T016 [US2] Add empty state styles to `frontend/src/assets/main.css`
|
||||||
|
|
||||||
|
### E2E Tests for User Story 2
|
||||||
|
|
||||||
|
- [x] T017 [US2] Add E2E tests to `frontend/e2e/home-events.spec.ts` — tests: empty state shown when no events, hidden when events exist
|
||||||
|
|
||||||
|
**Checkpoint**: Home page handles both new and returning users.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 4: User Story 4 — Past Events Appear Faded (Priority: P2)
|
||||||
|
|
||||||
|
**Goal**: Events whose date/time has passed appear with reduced visual prominence (muted colors, lower contrast) while remaining interactive.
|
||||||
|
|
||||||
|
**Independent Test**: Have both future and past events in localStorage, verify past events display faded while remaining clickable.
|
||||||
|
|
||||||
|
### Implementation for User Story 4
|
||||||
|
|
||||||
|
- [x] T018 [US4] Add `.event-card--past` modifier class with `opacity: 0.6; filter: saturate(0.5)` to `frontend/src/components/EventCard.vue` or `frontend/src/assets/main.css`
|
||||||
|
- [x] T019 [US4] Pass `isPast` computed property to EventCard in `EventList.vue` and apply modifier class in `frontend/src/components/EventCard.vue`
|
||||||
|
|
||||||
|
### E2E Tests for User Story 4
|
||||||
|
|
||||||
|
- [x] T020 [US4] Add E2E tests to `frontend/e2e/home-events.spec.ts` — tests: past events have faded class, upcoming events do not, past events remain clickable
|
||||||
|
|
||||||
|
**Checkpoint**: Visual hierarchy distinguishes upcoming from past events.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 5: User Story 3 — Remove Event from List (Priority: P3)
|
||||||
|
|
||||||
|
**Goal**: Users can remove events from their local list via delete icon (and later swipe) with confirmation.
|
||||||
|
|
||||||
|
**Independent Test**: Have multiple events, remove one via delete icon, verify it disappears while others remain.
|
||||||
|
|
||||||
|
### Unit Tests for User Story 3
|
||||||
|
|
||||||
|
- [x] T021 [P] [US3] Create unit tests for ConfirmDialog component in `frontend/src/components/__tests__/ConfirmDialog.spec.ts`
|
||||||
|
|
||||||
|
### Implementation for User Story 3
|
||||||
|
|
||||||
|
- [x] T022 [US3] Create `ConfirmDialog.vue` component in `frontend/src/components/ConfirmDialog.vue` — teleport-to-body modal with confirm/cancel, focus trapping, Escape key
|
||||||
|
- [x] T023 [US3] Add delete icon button to `EventCard.vue` in `frontend/src/components/EventCard.vue` — emits `delete` event with eventToken (FR-006a)
|
||||||
|
- [x] T024 [US3] Wire delete flow in `EventList.vue` in `frontend/src/components/EventList.vue` — listen for delete event, show ConfirmDialog, call `removeEvent()` on confirm
|
||||||
|
- [x] T025 [US3] Add delete icon and confirm dialog styles to `frontend/src/assets/main.css`
|
||||||
|
|
||||||
|
### E2E Tests for User Story 3
|
||||||
|
|
||||||
|
- [x] T026 [US3] Add E2E tests to `frontend/e2e/home-events.spec.ts` — tests: delete icon visible, confirmation dialog appears, confirm removes event, cancel keeps event
|
||||||
|
|
||||||
|
**Checkpoint**: Users can manage their event list.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 6: User Story 5 — Visual Distinction for Event Roles (Priority: P3)
|
||||||
|
|
||||||
|
**Goal**: Events show a badge indicating whether the user is the organizer or an attendee.
|
||||||
|
|
||||||
|
**Independent Test**: Have events with organizerToken and rsvpToken in localStorage, verify different badges displayed.
|
||||||
|
|
||||||
|
### Implementation for User Story 5
|
||||||
|
|
||||||
|
- [x] T027 [US5] Add role badge (Organizer/Attendee) to `EventCard.vue` in `frontend/src/components/EventCard.vue` — derive from organizerToken/rsvpToken presence
|
||||||
|
- [x] T028 [US5] Add role badge styles to `frontend/src/assets/main.css`
|
||||||
|
|
||||||
|
### E2E Tests for User Story 5
|
||||||
|
|
||||||
|
- [x] T029 [US5] Add E2E tests to `frontend/e2e/home-events.spec.ts` — tests: organizer badge shown for events with organizerToken, attendee badge for events with rsvpToken only
|
||||||
|
|
||||||
|
**Checkpoint**: Role distinction visible at a glance.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 7: Polish & Cross-Cutting Concerns
|
||||||
|
|
||||||
|
**Purpose**: FAB, swipe gesture, accessibility, and final polish
|
||||||
|
|
||||||
|
- [x] T030 Create `CreateEventFab.vue` in `frontend/src/components/CreateEventFab.vue` — fixed FAB at bottom-right, navigates to `/create` (FR-011)
|
||||||
|
- [x] T031 Add FAB to `HomeView.vue` in `frontend/src/views/HomeView.vue` — visible when events exist (empty state has its own CTA)
|
||||||
|
- [x] T032 Add FAB styles to `frontend/src/assets/main.css`
|
||||||
|
- [x] T033 Implement swipe-to-delete gesture on EventCard in `frontend/src/components/EventCard.vue` — native Touch API (FR-006b)
|
||||||
|
- [x] T034 Accessibility review: verify ARIA labels, keyboard navigation (Tab/Enter/Escape), focus trapping in ConfirmDialog, WCAG AA contrast on faded cards
|
||||||
|
- [x] T035 Add E2E tests for FAB to `frontend/e2e/home-events.spec.ts` — tests: FAB visible when events exist, navigates to create page
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Dependencies & Execution Order
|
||||||
|
|
||||||
|
### Phase Dependencies
|
||||||
|
|
||||||
|
- **Phase 1 (Setup)**: No dependencies — start immediately
|
||||||
|
- **Phase 2 (US1)**: Depends on T001, T003 (validation + relative time composable)
|
||||||
|
- **Phase 3 (US2)**: Depends on T001 (validation); can run in parallel with US1
|
||||||
|
- **Phase 4 (US4)**: Depends on Phase 2 completion (EventCard must exist)
|
||||||
|
- **Phase 5 (US3)**: Depends on Phase 2 completion (EventList must exist) + T002 (removeEvent)
|
||||||
|
- **Phase 6 (US5)**: Depends on Phase 2 completion (EventCard must exist)
|
||||||
|
- **Phase 7 (Polish)**: Depends on Phases 2–6 completion
|
||||||
|
|
||||||
|
### User Story Dependencies
|
||||||
|
|
||||||
|
- **US1 (P1)**: Depends only on Phase 1 — no other story dependencies
|
||||||
|
- **US2 (P2)**: Depends only on Phase 1 — independent of US1 but shares HomeView
|
||||||
|
- **US4 (P2)**: Depends on US1 (extends EventCard with past styling)
|
||||||
|
- **US3 (P3)**: Depends on US1 (extends EventList with delete flow)
|
||||||
|
- **US5 (P3)**: Depends on US1 (extends EventCard with role badge)
|
||||||
|
|
||||||
|
### Parallel Opportunities
|
||||||
|
|
||||||
|
- T003 + T004 + T005 can all run in parallel (different files)
|
||||||
|
- T006 + T007 can run in parallel (different test files)
|
||||||
|
- T008 can run in parallel with T006/T007 (component vs test files)
|
||||||
|
- US4, US5 can start in parallel once US1 is done (both extend EventCard independently)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Strategy
|
||||||
|
|
||||||
|
### MVP First (User Story 1 Only)
|
||||||
|
|
||||||
|
1. Complete Phase 1: Setup composables
|
||||||
|
2. Complete Phase 2: US1 — EventCard, EventList, HomeView refactor
|
||||||
|
3. **STOP and VALIDATE**: Test the event list end-to-end
|
||||||
|
4. Deploy/demo if ready
|
||||||
|
|
||||||
|
### Incremental Delivery
|
||||||
|
|
||||||
|
1. Phase 1 → Composable layer ready
|
||||||
|
2. Phase 2 (US1) → Event list works → MVP!
|
||||||
|
3. Phase 3 (US2) → Empty state for new users
|
||||||
|
4. Phase 4 (US4) → Past events faded
|
||||||
|
5. Phase 5 (US3) → Remove events from list
|
||||||
|
6. Phase 6 (US5) → Role badges
|
||||||
|
7. Phase 7 → FAB, swipe, accessibility polish
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- [P] tasks = different files, no dependencies
|
||||||
|
- [Story] label maps task to specific user story for traceability
|
||||||
|
- This is a **frontend-only** feature — no backend changes needed
|
||||||
|
- All data comes from existing `useEventStorage` composable (localStorage)
|
||||||
|
- E2E tests consolidated in single file `home-events.spec.ts` with separate `describe` blocks per story
|
||||||
Reference in New Issue
Block a user