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>
This commit is contained in:
+15
-6
@@ -35,14 +35,23 @@ 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/lib/api.ts fetch wrapper, bearer token, typed ApiError
|
||||
src/views/ HomeView (lists + create form), LoginView, RegisterView
|
||||
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`
|
||||
|
||||
Reference in New Issue
Block a user