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:
2026-09-03 18:59:51 +01:00
co-authored by Claude Sonnet 5
parent dd2ab5b7d3
commit b506b83b1e
16 changed files with 568 additions and 15 deletions
+3
View File
@@ -1,15 +1,18 @@
<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import { useAuthStore } from './stores/auth'
import { useItemsStore } from './stores/items'
import { useListsStore } from './stores/lists'
const auth = useAuthStore()
const lists = useListsStore()
const items = useItemsStore()
const router = useRouter()
async function onLogout() {
auth.logout()
lists.reset()
items.reset()
await router.push({ name: 'login' })
}
</script>