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>
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { ref } from 'vue'
|
|
import { apiRequest } from '../lib/api'
|
|
import type { TodoItem } from '../types'
|
|
|
|
type ItemPatch = Partial<Pick<TodoItem, 'text' | 'complete' | 'position'>>
|
|
|
|
export const useItemsStore = defineStore('items', () => {
|
|
// Held in list order (by position); mutated in place by drag-and-drop.
|
|
const items = ref<TodoItem[]>([])
|
|
const listId = ref<number | null>(null)
|
|
const loading = ref(false)
|
|
const loaded = ref(false)
|
|
|
|
const completedCount = () => items.value.filter((i) => i.complete).length
|
|
|
|
async function load(id: number): Promise<void> {
|
|
listId.value = id
|
|
loaded.value = false
|
|
loading.value = true
|
|
try {
|
|
const { items: fetched } = await apiRequest<{ items: TodoItem[] }>(`/lists/${id}/items`, {
|
|
auth: true,
|
|
})
|
|
items.value = fetched
|
|
loaded.value = true
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function add(text: string): Promise<void> {
|
|
const { item } = await apiRequest<{ item: TodoItem }>(`/lists/${listId.value}/items`, {
|
|
method: 'POST',
|
|
auth: true,
|
|
body: { text },
|
|
})
|
|
// The API appends the item, so the end of the array is its correct place.
|
|
items.value.push(item)
|
|
}
|
|
|
|
async function patch(item: TodoItem, fields: ItemPatch): Promise<void> {
|
|
const { item: updated } = await apiRequest<{ item: TodoItem }>(
|
|
`/lists/${listId.value}/items/${item.id}`,
|
|
{ method: 'PATCH', auth: true, body: fields },
|
|
)
|
|
const i = items.value.findIndex((x) => x.id === updated.id)
|
|
if (i !== -1) items.value[i] = updated
|
|
}
|
|
|
|
const setComplete = (item: TodoItem, complete: boolean) => patch(item, { complete })
|
|
const setText = (item: TodoItem, text: string) => patch(item, { text })
|
|
|
|
async function remove(item: TodoItem): Promise<void> {
|
|
await apiRequest(`/lists/${listId.value}/items/${item.id}`, { method: 'DELETE', auth: true })
|
|
items.value = items.value.filter((i) => i.id !== item.id)
|
|
}
|
|
|
|
/** Persist the current array order (call after a drag ends). */
|
|
async function persistOrder(): Promise<void> {
|
|
const { items: fresh } = await apiRequest<{ items: TodoItem[] }>(
|
|
`/lists/${listId.value}/items/order`,
|
|
{ method: 'PUT', auth: true, body: { item_ids: items.value.map((i) => i.id) } },
|
|
)
|
|
items.value = fresh
|
|
}
|
|
|
|
function reset(): void {
|
|
items.value = []
|
|
listId.value = null
|
|
loaded.value = false
|
|
}
|
|
|
|
return {
|
|
items,
|
|
listId,
|
|
loading,
|
|
loaded,
|
|
completedCount,
|
|
load,
|
|
add,
|
|
setComplete,
|
|
setText,
|
|
remove,
|
|
persistOrder,
|
|
reset,
|
|
}
|
|
})
|