Add a "new card" form to each kanban column

Each column gets its own form at the bottom (styled like the sidebar
inbox's), creating the card directly in that status, appended after
its existing cards.

- API: POST /projects/{id}/cards takes an optional status_id, which
  must belong to the project (422 otherwise); omitted, it still
  defaults to the project's first status as before. Position is
  already "end of that status" for free -- createInProject() already
  ranks by (owner, project, status).
- cards store: add() takes an optional statusId, forwarded as
  status_id when given.
- ProjectView: one draft string per status (keyed by status id) so
  typing in one column doesn't touch another's, mirroring the
  per-status independence the columns already have for reordering.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-05 00:10:52 +01:00
co-authored by Claude Sonnet 5
parent e598d4ef57
commit 19ccb8f881
5 changed files with 111 additions and 8 deletions
+33
View File
@@ -134,6 +134,24 @@ async function onCreate() {
submitting.value = false
}
}
// --- add a card directly into one kanban column -- one draft per status, so
// typing in one column's form doesn't touch another's.
const newColumnCardText = ref<Record<number, string>>({})
const addingToStatusId = ref<number | null>(null)
async function onCreateInColumn(column: Column) {
addingToStatusId.value = column.statusId
actionError.value = null
try {
await cards.add(newColumnCardText.value[column.statusId] ?? '', column.statusId)
newColumnCardText.value[column.statusId] = ''
} catch (e) {
actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
} finally {
addingToStatusId.value = null
}
}
</script>
<template>
@@ -223,6 +241,21 @@ async function onCreate() {
<KanbanCard :card="element" />
</template>
</draggable>
<form class="kanban__new" @submit.prevent="onCreateInColumn(column)">
<input
v-model="newColumnCardText[column.statusId]"
class="field field--compact"
type="text"
maxlength="1000"
required
placeholder="New card"
:aria-label="`New card in ${column.title}`"
/>
<button type="submit" :disabled="addingToStatusId === column.statusId">
{{ addingToStatusId === column.statusId ? 'Adding…' : 'Add' }}
</button>
</form>
</section>
</div>
</div>