Files

T

aneurinandClaude Sonnet 5 b506b83b1e Add stage 5: list detail page with items UI and drag reorder

API: new PUT /api/lists/{id}/items/order takes the full ordered id set and
rewrites positions 0..n-1 in a transaction (422 unless the set matches the
list exactly). TodoItemRepository gains idsForList() and reorder().

Frontend: lists on the home page are now links to /lists/:id (ListView).
ListView shows the list title, a "M of N done" summary, and each item as a
drag handle + checkbox + inline-editable text (saved on blur) + delete
button, with a create-item form at the bottom. Drag-and-drop uses
vuedraggable; on drop the whole order is persisted via the new endpoint and
the response replaces local state, with a resync-on-error fallback. New
items store; items store is also reset on logout.

Tests: reorder happy path, incomplete-set rejection, owner scoping. Backend
suite: 23 passing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

2026-09-03 18:59:51 +01:00

2.3 KiB

Raw Blame History

Todo List — web

Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.

Develop on the host

npm install
npm run dev            # http://localhost:5173

The dev server proxies /api to http://localhost:8080 (the Dockerised API — run docker compose up -d in the parent directory first). Override the target with VITE_PROXY_TARGET, or point the app at a different API entirely with VITE_API_BASE_URL (see .env.example).

Develop in Docker

From the parent directory:

docker compose --profile frontend up -d

Runs this dev server alongside the API. /api is proxied to the app container. After changing package.json, rebuild: docker compose build web.

Build

npm run build         # type-checks, then emits dist/
npm run preview

Layout

src/main.ts             App bootstrap; resolves the stored session before mount
src/router/index.ts     Routes + guard (redirects to /login when unauthenticated)
src/stores/auth.ts      Pinia store: token in localStorage, register/login/fetchMe
src/stores/lists.ts     Pinia store: the user's lists (fetch + create)
src/stores/items.ts     Pinia store: one list's items (CRUD + drag reorder)
src/lib/api.ts          fetch wrapper, bearer token, typed ApiError
src/components/TodoItemRow.vue  checkbox + editable text + delete, one item
src/views/              HomeView (lists), ListView (items), LoginView, RegisterView

List detail

/lists/:id shows one list's items. Each row is a checkbox, an inline-editable text field (saved on blur), a delete button, and a drag handle. Reordering uses vuedraggable; on drop the whole new order is persisted via PUT /api/lists/:id/items/order, and the server response replaces local state.

Auth flow

The token from POST /api/auth/register or /login is kept in localStorage and sent as Authorization: Bearer ….
On load, fetchMe() validates the stored token via GET /api/me; a failure clears it.
Routes with meta.requiresAuth redirect to /login (preserving the intended path) when there is no authenticated user.
Registration signs the user in immediately; the new account's email is unverified (user.email_verified === false), surfaced in the header and on the home page.

2.3 KiB Raw Blame History