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,
|
||
|
|
}
|
||
|
|
})
|