aneurinandClaude Sonnet 5
b506b83b1e
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>
66 lines
2.3 KiB
Markdown
66 lines
2.3 KiB
Markdown
# Todo List — web
|
|
|
|
Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.
|
|
|
|
## Develop on the host
|
|
|
|
```bash
|
|
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](.env.example)).
|
|
|
|
## Develop in Docker
|
|
|
|
From the parent directory:
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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.
|