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 { Card } from '../types'
|
||
|
|
|
||
|
|
type CardPatch = Partial<Pick<Card, 'text' | 'complete' | 'position'>>
|
||
|
|
|
||
|
|
export const useCardsStore = defineStore('cards', () => {
|
||
|
|
// Held in project order (by position); mutated in place by drag-and-drop.
|
||
|
|
const cards = ref<Card[]>([])
|
||
|
|
const projectId = ref<number | null>(null)
|
||
|
|
const loading = ref(false)
|
||
|
|
const loaded = ref(false)
|
||
|
|
|
||
|
|
const completedCount = () => cards.value.filter((c) => c.complete).length
|
||
|
|
|
||
|
|
async function load(id: number): Promise<void> {
|
||
|
|
projectId.value = id
|
||
|
|
loaded.value = false
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const { cards: fetched } = await apiRequest<{ cards: Card[] }>(`/projects/${id}/cards`, {
|
||
|
|
auth: true,
|
||
|
|
})
|
||
|
|
cards.value = fetched
|
||
|
|
loaded.value = true
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function add(text: string): Promise<void> {
|
||
|
|
const { card } = await apiRequest<{ card: Card }>(`/projects/${projectId.value}/cards`, {
|
||
|
|
method: 'POST',
|
||
|
|
auth: true,
|
||
|
|
body: { text },
|
||
|
|
})
|
||
|
|
// The API appends the card, so the end of the array is its correct place.
|
||
|
|
cards.value.push(card)
|
||
|
|
}
|
||
|
|
|
||
|
|
async function patch(card: Card, fields: CardPatch): Promise<void> {
|
||
|
|
const { card: updated } = await apiRequest<{ card: Card }>(
|
||
|
|
`/projects/${projectId.value}/cards/${card.id}`,
|
||
|
|
{ method: 'PATCH', auth: true, body: fields },
|
||
|
|
)
|
||
|
|
const i = cards.value.findIndex((x) => x.id === updated.id)
|
||
|
|
if (i !== -1) cards.value[i] = updated
|
||
|
|
}
|
||
|
|
|
||
|
|
const setComplete = (card: Card, complete: boolean) => patch(card, { complete })
|
||
|
|
const setText = (card: Card, text: string) => patch(card, { text })
|
||
|
|
|
||
|
|
async function remove(card: Card): Promise<void> {
|
||
|
|
await apiRequest(`/projects/${projectId.value}/cards/${card.id}`, { method: 'DELETE', auth: true })
|
||
|
|
cards.value = cards.value.filter((c) => c.id !== card.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Persist the current array order (call after a drag ends). */
|
||
|
|
async function persistOrder(): Promise<void> {
|
||
|
|
const { cards: fresh } = await apiRequest<{ cards: Card[] }>(
|
||
|
|
`/projects/${projectId.value}/cards/order`,
|
||
|
|
{ method: 'PUT', auth: true, body: { card_ids: cards.value.map((c) => c.id) } },
|
||
|
|
)
|
||
|
|
cards.value = fresh
|
||
|
|
}
|
||
|
|
|
||
|
|
function reset(): void {
|
||
|
|
cards.value = []
|
||
|
|
projectId.value = null
|
||
|
|
loaded.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
cards,
|
||
|
|
projectId,
|
||
|
|
loading,
|
||
|
|
loaded,
|
||
|
|
completedCount,
|
||
|
|
load,
|
||
|
|
add,
|
||
|
|
setComplete,
|
||
|
|
setText,
|
||
|
|
remove,
|
||
|
|
persistOrder,
|
||
|
|
reset,
|
||
|
|
}
|
||
|
|
})
|