aneurinandClaude Sonnet 5
6c7b78ad4b
One-directional drag support, joining the shared "kanban" group: put: false and sort: false mean a card can leave Explore's list (to unfile it via the sidebar's inbox) but the list can't receive a drop itself (there's no status to assign an incoming card) or be reordered by dragging (it's sorted by name regardless). sortedCards moves from a computed to a ref rebuilt by a watch -- <draggable> splices its bound list in place as the user drags, which a plain computed would just discard on its next recomputation. No local @change handler is needed: the splice already happens locally, and the inbox's own handler (AppSidebar) persists the move and reloads this project's cards regardless of which side of the drag it's reacting to. AppSidebar: widened the "is a project open" check for the post-drag cards refresh back to both project routes (Explore's list is now also a place a card can leave from), and reused the same route-name set already defined for the sidebar's project switcher. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
98 lines
3.1 KiB
Vue
98 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import draggable from 'vuedraggable'
|
|
import CardRow from '../components/CardRow.vue'
|
|
import { ApiError } from '../lib/api'
|
|
import { useCardsStore } from '../stores/cards'
|
|
import type { Card } from '../types'
|
|
|
|
// The project's cards, flat and sorted by name -- ProjectView (the parent
|
|
// layout) has already loaded them into this store, keyed to the current
|
|
// project, so there's nothing to fetch here.
|
|
const cards = useCardsStore()
|
|
|
|
const actionError = ref<string | null>(null)
|
|
const newText = ref('')
|
|
const submitting = ref(false)
|
|
|
|
const summary = computed(() => {
|
|
const total = cards.cards.length
|
|
if (total === 0) return 'No cards yet.'
|
|
return `${total} card${total === 1 ? '' : 's'}.`
|
|
})
|
|
|
|
// No manual order here -- sorted by name, case-insensitively -- but a plain
|
|
// computed can't be handed to <draggable> (it splices its bound list in
|
|
// place as the user drags; a computed would just be recalculated over that
|
|
// and discard it). A ref rebuilt on every underlying change gives it
|
|
// something real to mutate, the same way the kanban board's columns do.
|
|
const sortedCards = ref<Card[]>([])
|
|
function rebuildSortedCards() {
|
|
sortedCards.value = [...cards.cards].sort((a, b) => a.text.localeCompare(b.text, undefined, { sensitivity: 'base' }))
|
|
}
|
|
watch(() => cards.cards, rebuildSortedCards, { deep: true, immediate: true })
|
|
|
|
async function onCreate() {
|
|
submitting.value = true
|
|
actionError.value = null
|
|
try {
|
|
await cards.add(newText.value)
|
|
newText.value = ''
|
|
} catch (e) {
|
|
actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<p v-if="actionError" class="form-error">{{ actionError }}</p>
|
|
|
|
<p class="muted">{{ summary }}</p>
|
|
|
|
<p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
|
|
|
|
<!-- No handler needed: dragging a card out (the only thing possible --
|
|
put: false, sort: false) splices it out of `sortedCards` locally, and
|
|
wherever it lands (the sidebar's inbox) persists the move and
|
|
reloads this project's cards, which rebuilds this list from the
|
|
authoritative result either way. -->
|
|
<draggable
|
|
v-else-if="sortedCards.length"
|
|
:list="sortedCards"
|
|
:group="{ name: 'kanban', put: false }"
|
|
:sort="false"
|
|
item-key="id"
|
|
tag="ul"
|
|
class="cards"
|
|
ghost-class="card-row--ghost"
|
|
:animation="150"
|
|
>
|
|
<template #item="{ element: card }: { element: Card }">
|
|
<CardRow :card="card" />
|
|
</template>
|
|
</draggable>
|
|
|
|
<form class="kanban__new form--new-card" @submit.prevent="onCreate">
|
|
<input
|
|
v-model="newText"
|
|
class="field field--compact"
|
|
type="text"
|
|
maxlength="1000"
|
|
required
|
|
placeholder="New card"
|
|
aria-label="New card"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="btn-icon"
|
|
:disabled="submitting"
|
|
:title="submitting ? 'Adding…' : 'Add card'"
|
|
:aria-label="submitting ? 'Adding…' : 'Add card'"
|
|
>+</button>
|
|
</form>
|
|
</div>
|
|
</template>
|