project-manager/web/src/stores/cards.ts

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'>>

export const useCardsStore = defineStore('cards', () => {
  // Every card in the project, grouped by column (inbox first) then position.
  // Views re-sort as needed (the "all tasks" list is alphabetical).
  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)
  }

  /**
   * Set the contents and order of one status column (`null` = inbox). Cards
   * dragged in from another column are re-parented server-side; the response is
   * the whole project's cards, which replaces local state.
   */
  async function reorderColumn(statusId: number | null, cardIds: number[]): Promise<void> {
    const { cards: fresh } = await apiRequest<{ cards: Card[] }>(
      `/projects/${projectId.value}/cards/order`,
      { method: 'PUT', auth: true, body: { status_id: statusId, card_ids: cardIds } },
    )
    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,
    reorderColumn,
    reset,
  }
})