cloud/project-manager
3
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Add per-project card statuses and a kanban board

Browse Source 
Statuses
- Migration 006: card_statuses table (project-scoped) and cards.status_id, a
  nullable FK with ON DELETE SET NULL. Every new project is seeded with
  "To do" / "Doing" / "Done"; GET /api/projects/{id}/statuses lists them.
- New cards have no status -- they sit in an "inbox" until moved.

Project view
- Full-width and tabbed: "All tasks" (a flat list, sorted by name
  case-insensitively) and "Kanban" (Inbox plus one column per status).
- Drag a card within or between columns to reorder / restatus; the Inbox
  column has its own name + Add form.

Ordering
- Migration 007: `position` is now a dense 0..n-1 rank within a
  (project_id, status_id) column, not a project-wide order. New composite
  index idx_cards_project_status_position; existing rows re-ranked.
- PUT /api/projects/{id}/cards/order takes { status_id, card_ids } and sets one
  column's contents and order, re-parenting moved-in cards and re-packing their
  source column in a single transaction. PATCH status_id appends the card to the
  end of the destination column.

58 phpunit tests pass; the frontend type-checks and builds.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
aneurin
2026-09-04 13:37:17 +01:00
co-authored by Claude Sonnet 5
parent d9db4a3a30
commit c47c800d01
21 changed files with 1389 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/README.md
+39 -23
View File
@@ -2,7 +2,7 @@
Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.
## Develop on the host
## Develop
```bash
npm install
@@ -14,17 +14,6 @@ run `docker compose up -d` in the parent directory first). Override the target
with `VITE_PROXY_TARGET`, or point the app at a different API entirely with
`VITE_API_BASE_URL` (see [.env.example](.env.example)).
## Develop in Docker
From the parent directory:
```bash
docker compose --profile frontend up -d
```
Runs this dev server alongside the API. `/api` is proxied to the `app` container.
After changing `package.json`, rebuild: `docker compose build web`.
## Build
```bash
@@ -32,6 +21,11 @@ npm run build # type-checks, then emits dist/
npm run preview
```
The parent `Dockerfile` runs this build in a Node stage and copies `dist/` into
the PHP image's `public/`, so the `app` container serves the compiled SPA at `/`.
There is no separate frontend container — a production image is `docker compose
build app` from the parent directory.
## Layout
```
@@ -39,25 +33,47 @@ src/main.ts App bootstrap; resolves the stored session before mount
src/router/index.ts Routes + guard (redirects to /login when unauthenticated)
src/stores/auth.ts Pinia store: token in localStorage, register/login/fetchMe
src/stores/projects.ts Pinia store: the user's projects (fetch + create)
src/stores/cards.ts Pinia store: one project's cards (CRUD + drag reorder)
src/stores/cards.ts Pinia store: one project's cards (CRUD + reorderColumn)
src/lib/api.ts fetch wrapper, bearer token, typed ApiError
src/components/CardRow.vue checkbox + editable text + delete, one card
src/components/CardRow.vue editable text + status chip + delete, one card
src/components/KanbanCard.vue small draggable card for the board columns
src/views/ HomeView, ProjectView, LoginView, RegisterView,
ProfileView, VerifyEmailView
```
## Project detail
`/projects/:id` shows one project. The title and description are inline-editable
(saved on blur via `PATCH /api/projects/:id`; the description shows an "Add a
description" placeholder when empty). A **Manage** menu (top right) has a
**Delete project** action that opens a confirmation modal; confirming calls
`DELETE /api/projects/:id` and returns to the all-projects view.
`/projects/:id` shows one project. It renders on a **full-width** layout (the
route sets `meta.wide`, which widens `.app__main` in `App.vue`). The title and
description are inline-editable (saved on blur via `PATCH /api/projects/:id`; the
description shows an "Add a description" placeholder when empty). A **Manage**
menu (top right) has a **Delete project** action that opens a confirmation modal;
confirming calls `DELETE /api/projects/:id` and returns to the all-projects view.
Each card row is a checkbox, an inline-editable text field (saved on blur), a
delete button, and a drag handle. Reordering uses `vuedraggable`; on drop the
whole new order is persisted via `PUT /api/projects/:id/cards/order`, and the
server response replaces local state.
Below the header are two tabs (local `activeTab` state, `v-show` so both stay
mounted):
### All tasks
The flat card list, **sorted by name (case-insensitive)** via a `sortedCards`
computed — there is no manual order here. Each row is an inline-editable text
field (saved on blur), a status chip (`card.status.name` or "No status"), and a
delete button.
### Kanban
Columns, left to right: **Inbox** (cards with no status) then each project
status in `position` order. `board` is derived from `cards.cards` + the
project's statuses and rebuilt by a `watch` whenever either changes.
Every drop — whether reordering within a column (`moved`) or dragging in from
another (`added`) — calls `cards.reorderColumn(column.statusId, ids)` →
`PUT /api/projects/:id/cards/order` with `{ status_id, card_ids }`. The server
re-parents any moved-in card, re-packs the source column, and returns the whole
project's cards, which replaces local state; on failure the board reloads.
The Inbox column has a small name + **Add** form at the bottom (`cards.add`);
new cards have no status, so they land straight in it.
## Auth flow
web/src/App.vue
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import { useAuthStore } from './stores/auth'
import { useCardsStore } from './stores/cards'
import { useProjectsStore } from './stores/projects'
@@ -8,6 +8,7 @@ const auth = useAuthStore()
const projects = useProjectsStore()
const cards = useCardsStore()
const router = useRouter()
const route = useRoute()
async function onLogout() {
auth.logout()
@@ -31,7 +32,7 @@ async function onLogout() {
</div>
</header>
<main class="app__main">
<main class="app__main" :class="{ 'app__main--wide': route.meta.wide }">
<RouterView />
</main>
</div>
web/src/components/CardRow.vue
+5 -12
View File
@@ -4,7 +4,6 @@ import type { Card } from '../types'
const props = defineProps<{ card: Card }>()
const emit = defineEmits<{
toggle: [complete: boolean]
'save-text': [text: string]
delete: []
}>()
@@ -28,17 +27,7 @@ function commit() {
</script>
<template>
<li class="card-row" :class="{ 'card-row--done': card.complete }">
<span class="card-row__handle" aria-hidden="true" title="Drag to reorder">⠿</span>
<input
class="card-row__check"
type="checkbox"
:checked="card.complete"
:aria-label="card.complete ? 'Mark as not done' : 'Mark as done'"
@change="emit('toggle', ($event.target as HTMLInputElement).checked)"
/>
<li class="card-row">
<input
v-model="text"
class="card-row__text"
@@ -49,6 +38,10 @@ function commit() {
@keyup.enter="($event.target as HTMLInputElement).blur()"
/>
<span class="card-row__status" :class="{ 'card-row__status--none': !card.status }">
{{ card.status?.name ?? 'No status' }}
</span>
<button type="button" class="card-row__delete" aria-label="Delete card" @click="emit('delete')">
✕
</button>
web/src/components/KanbanCard.vue
+9
View File
@@ -0,0 +1,9 @@
<script setup lang="ts">
import type { Card } from '../types'
defineProps<{ card: Card }>()
</script>
<template>
<div class="kanban-card">{{ card.text }}</div>
</template>
web/src/router/index.ts
+1 -1
View File
@@ -14,7 +14,7 @@ const router = createRouter({
path: '/projects/:id(\\d+)',
name: 'project',
component: () => import('../views/ProjectView.vue'),
meta: { requiresAuth: true },
meta: { requiresAuth: true, wide: true },
},
{
path: '/profile',
web/src/stores/cards.ts
+11 -6
View File
@@ -3,10 +3,11 @@ import { ref } from 'vue'
import { apiRequest } from '../lib/api'
import type { Card } from '../types'
type CardPatch = Partial<Pick<Card, 'text' | 'complete' | 'position'>>
type CardPatch = Partial<Pick<Card, 'text' | 'complete'>>
export const useCardsStore = defineStore('cards', () => {
// Held in project order (by position); mutated in place by drag-and-drop.
// 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)
@@ -56,11 +57,15 @@ export const useCardsStore = defineStore('cards', () => {
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> {
/**
* 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: { card_ids: cards.value.map((c) => c.id) } },
{ method: 'PUT', auth: true, body: { status_id: statusId, card_ids: cardIds } },
)
cards.value = fresh
}
@@ -82,7 +87,7 @@ export const useCardsStore = defineStore('cards', () => {
setComplete,
setText,
remove,
persistOrder,
reorderColumn,
reset,
}
})
web/src/style.css
+137 -20
View File
@@ -75,6 +75,12 @@ a.badge {
padding: 0 1.25rem;
}
/* Full-bleed layout for views that need the room (e.g. the project board). */
.app__main--wide {
max-width: none;
margin: 1.5rem auto;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
@@ -174,22 +180,21 @@ h1 {
background: var(--surface);
}
.card-row--ghost {
opacity: 0.5;
}
.card-row__handle {
cursor: grab;
color: var(--muted);
user-select: none;
padding: 0 0.15rem;
line-height: 1;
}
.card-row__check {
.card-row__status {
flex: none;
width: 1.1rem;
height: 1.1rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid var(--border);
background: var(--bg);
color: var(--muted);
}
.card-row__status--none {
font-weight: 400;
font-style: italic;
}
.card-row__text {
@@ -213,11 +218,6 @@ h1 {
background: var(--bg);
}
.card-row--done .card-row__text {
text-decoration: line-through;
color: var(--muted);
}
.card-row__delete {
flex: none;
border: none;
@@ -348,6 +348,123 @@ h1 {
color: var(--error);
}
/* --- project detail: keep the header/prose readable on the wide layout -- */
.project__chrome {
max-width: 42rem;
}
/* --- tabs -------------------------------------------------------------- */
.tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--border);
margin: 1.25rem 0 1rem;
}
.tabs__tab {
border: none;
background: none;
font: inherit;
color: var(--muted);
cursor: pointer;
padding: 0.5rem 0.9rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tabs__tab:hover {
color: var(--text);
}
.tabs__tab--active {
color: var(--text);
font-weight: 600;
border-bottom-color: var(--accent);
}
.tabs__panel--narrow {
max-width: 42rem;
}
/* --- kanban board ---------------------------------------------------- */
.kanban {
display: flex;
gap: 1rem;
align-items: flex-start;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.kanban__col {
flex: 0 0 16rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.75rem;
}
.kanban__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.6rem;
font-size: 0.85rem;
font-weight: 600;
}
.kanban__count {
color: var(--muted);
font-weight: 400;
}
.kanban__cards {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 3rem;
}
.kanban-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.55rem 0.65rem;
font-size: 0.9rem;
cursor: grab;
}
.kanban-card--ghost {
opacity: 0.5;
}
.kanban__new {
display: flex;
gap: 0.4rem;
margin-top: 0.6rem;
}
.kanban__new input {
flex: 1;
min-width: 0;
font: inherit;
font-size: 0.9rem;
padding: 0.4rem 0.5rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
}
.kanban__new button[type="submit"] {
flex: none;
padding: 0.4rem 0.7rem;
font-size: 0.9rem;
border-radius: 6px;
}
/* --- confirmation modal --------------------------------------------------- */
.modal {
web/src/types.ts
+8
View File
@@ -25,12 +25,20 @@ export interface Project {
updated_at: string
}
/** A project-specific card status ("To do", "Doing", "Done", …). */
export interface CardStatus {
id: number
name: string
}
export interface Card {
id: number
project_id: number
text: string
complete: boolean
position: number
status_id: number | null
status: CardStatus | null
created_at: string
updated_at: string
}
web/src/views/ProjectView.vue
+213 -87
View File
@@ -3,10 +3,11 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import draggable from 'vuedraggable'
import CardRow from '../components/CardRow.vue'
import KanbanCard from '../components/KanbanCard.vue'
import { ApiError, apiRequest } from '../lib/api'
import { useCardsStore } from '../stores/cards'
import { useProjectsStore } from '../stores/projects'
import type { Card, Project } from '../types'
import type { Card, CardStatus, Project } from '../types'
const route = useRoute()
const router = useRouter()
@@ -15,9 +16,16 @@ const projects = useProjectsStore()
const projectId = Number(route.params.id)
const project = ref<Project | null>(null)
const statuses = ref<CardStatus[]>([])
const loadError = ref<string | null>(null)
const actionError = ref<string | null>(null)
const tabs = [
{ key: 'all', label: 'All tasks' },
{ key: 'kanban', label: 'Kanban' },
] as const
const activeTab = ref<(typeof tabs)[number]['key']>('all')
const titleDraft = ref('')
const descriptionDraft = ref('')
@@ -30,12 +38,63 @@ const cancelButton = ref<HTMLButtonElement>()
const newText = ref('')
const submitting = ref(false)
const newInboxText = ref('')
const addingToInbox = ref(false)
const summary = computed(() => {
const total = cards.cards.length
if (total === 0) return 'No cards yet.'
return `${cards.completedCount()} of ${total} done.`
return `${total} card${total === 1 ? '' : 's'}.`
})
// The "all tasks" list has no manual order — sort by name, case-insensitively.
const sortedCards = computed(() =>
[...cards.cards].sort((a, b) => a.text.localeCompare(b.text, undefined, { sensitivity: 'base' })),
)
// --- Kanban board --------------------------------------------------------
interface Column {
key: string
title: string
statusId: number | null
cards: Card[]
}
type ColumnChange = {
added?: { element: Card; newIndex: number }
removed?: { element: Card; oldIndex: number }
moved?: { element: Card; oldIndex: number; newIndex: number }
}
const board = ref<Column[]>([])
function buildColumns(): Column[] {
const defs: Omit<Column, 'cards'>[] = [
{ key: 'inbox', title: 'Inbox', statusId: null },
...statuses.value.map((s) => ({ key: `status-${s.id}`, title: s.name, statusId: s.id })),
]
return defs.map((def) => ({
...def,
cards: cards.cards.filter((card) => card.status_id === def.statusId),
}))
}
function rebuildBoard() {
board.value = buildColumns()
}
// Re-derive the columns whenever the underlying cards or the status set change
// (e.g. after a move is persisted, or a failed move is rolled back).
watch([() => cards.cards, statuses], rebuildBoard, { deep: true })
function onColumnChange(change: ColumnChange, column: Column) {
// `added` (card dragged in from another column) or `moved` (reordered within
// this one): persist this column's new id order. The source column, if any,
// is re-packed server-side. `removed` needs no action here.
if (change.added || change.moved) {
void run(cards.reorderColumn(column.statusId, column.cards.map((c) => c.id)))
}
}
watch(project, (value) => {
if (value) {
titleDraft.value = value.title
@@ -65,11 +124,14 @@ function onKeydown(event: KeyboardEvent) {
async function load() {
loadError.value = null
try {
const [{ project: fetched }] = await Promise.all([
const [{ project: fetched }, { statuses: fetchedStatuses }] = await Promise.all([
apiRequest<{ project: Project }>(`/projects/${projectId}`, { auth: true }),
apiRequest<{ statuses: CardStatus[] }>(`/projects/${projectId}/statuses`, { auth: true }),
cards.load(projectId),
])
project.value = fetched
statuses.value = fetchedStatuses
rebuildBoard()
} catch (e) {
if (e instanceof ApiError && e.status === 404) {
loadError.value = 'That project does not exist.'
@@ -144,11 +206,6 @@ async function run(op: Promise<unknown>) {
}
}
function onReorder(event: { oldIndex?: number; newIndex?: number }) {
if (event.oldIndex === event.newIndex) return
void run(cards.persistOrder())
}
async function onCreate() {
submitting.value = true
actionError.value = null
@@ -161,101 +218,170 @@ async function onCreate() {
submitting.value = false
}
}
// New cards always land in the inbox (no status), so this just adds one.
async function onCreateInbox() {
if (!newInboxText.value.trim()) return
addingToInbox.value = true
actionError.value = null
try {
await cards.add(newInboxText.value)
newInboxText.value = ''
} catch (e) {
actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
} finally {
addingToInbox.value = false
}
}
</script>
<template>
<section class="card">
<section class="card project">
<p><RouterLink to="/">&larr; All projects</RouterLink></p>
<p v-if="loadError" class="form-error">{{ loadError }}</p>
<template v-else-if="project">
<div class="project-head">
<h1 class="project-head__title">
<input
v-model="titleDraft"
type="text"
maxlength="255"
aria-label="Project title"
@blur="saveTitle"
@keyup.enter="($event.target as HTMLInputElement).blur()"
/>
</h1>
<div class="project__chrome">
<div class="project-head">
<h1 class="project-head__title">
<input
v-model="titleDraft"
type="text"
maxlength="255"
aria-label="Project title"
@blur="saveTitle"
@keyup.enter="($event.target as HTMLInputElement).blur()"
/>
</h1>
<div class="menu">
<button
type="button"
class="menu__toggle"
aria-haspopup="true"
:aria-expanded="menuOpen"
@click="menuOpen = !menuOpen"
>
Manage &#9662;
</button>
<div class="menu">
<button
type="button"
class="menu__toggle"
aria-haspopup="true"
:aria-expanded="menuOpen"
@click="menuOpen = !menuOpen"
>
Manage &#9662;
</button>
<template v-if="menuOpen">
<div class="menu__backdrop" @click="menuOpen = false" />
<ul class="menu__list" role="menu">
<li role="none">
<button
type="button"
role="menuitem"
class="menu__item menu__item--danger"
@click="askDelete"
>
Delete project
</button>
</li>
</ul>
</template>
<template v-if="menuOpen">
<div class="menu__backdrop" @click="menuOpen = false" />
<ul class="menu__list" role="menu">
<li role="none">
<button
type="button"
role="menuitem"
class="menu__item menu__item--danger"
@click="askDelete"
>
Delete project
</button>
</li>
</ul>
</template>
</div>
</div>
<textarea
v-model="descriptionDraft"
class="project-head__desc"
rows="2"
maxlength="2000"
placeholder="Add a description"
aria-label="Project description"
@blur="saveDescription"
/>
</div>
<textarea
v-model="descriptionDraft"
class="project-head__desc"
rows="2"
maxlength="2000"
placeholder="Add a description"
aria-label="Project description"
@blur="saveDescription"
/>
<p class="muted">{{ summary }}</p>
<p v-if="actionError" class="form-error">{{ actionError }}</p>
<p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
<draggable
v-else-if="cards.cards.length"
:list="cards.cards"
item-key="id"
tag="ul"
class="cards"
handle=".card-row__handle"
ghost-class="card-row--ghost"
:animation="150"
@end="onReorder"
>
<template #item="{ element }: { element: Card }">
<CardRow
:card="element"
@toggle="(v) => run(cards.setComplete(element, v))"
@save-text="(v) => run(cards.setText(element, v))"
@delete="run(cards.remove(element))"
/>
</template>
</draggable>
<form class="form form--new-card" @submit.prevent="onCreate">
<label>
<span>New card</span>
<input v-model="newText" type="text" maxlength="1000" required />
</label>
<button type="submit" :disabled="submitting">
{{ submitting ? 'Adding…' : 'Add card' }}
<div class="tabs" role="tablist">
<button
v-for="tab in tabs"
:key="tab.key"
type="button"
role="tab"
:aria-selected="activeTab === tab.key"
class="tabs__tab"
:class="{ 'tabs__tab--active': activeTab === tab.key }"
@click="activeTab = tab.key"
>
{{ tab.label }}
</button>
</form>
</div>
<!-- Tab: All tasks -->
<div v-show="activeTab === 'all'" class="tabs__panel tabs__panel--narrow" role="tabpanel">
<p class="muted">{{ summary }}</p>
<p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
<ul v-else-if="sortedCards.length" class="cards">
<CardRow
v-for="card in sortedCards"
:key="card.id"
:card="card"
@save-text="(v) => run(cards.setText(card, v))"
@delete="run(cards.remove(card))"
/>
</ul>
<form class="form form--new-card" @submit.prevent="onCreate">
<label>
<span>New card</span>
<input v-model="newText" type="text" maxlength="1000" required />
</label>
<button type="submit" :disabled="submitting">
{{ submitting ? 'Adding…' : 'Add card' }}
</button>
</form>
</div>
<!-- Tab: Kanban -->
<div v-show="activeTab === 'kanban'" class="tabs__panel" role="tabpanel">
<p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
<div v-else class="kanban">
<section v-for="column in board" :key="column.key" class="kanban__col">
<header class="kanban__head">
<span class="kanban__title">{{ column.title }}</span>
<span class="kanban__count">{{ column.cards.length }}</span>
</header>
<draggable
:list="column.cards"
:group="{ name: 'kanban' }"
item-key="id"
class="kanban__cards"
ghost-class="kanban-card--ghost"
:animation="150"
@change="(e: ColumnChange) => onColumnChange(e, column)"
>
<template #item="{ element }: { element: Card }">
<KanbanCard :card="element" />
</template>
</draggable>
<form
v-if="column.statusId === null"
class="kanban__new"
@submit.prevent="onCreateInbox"
>
<input
v-model="newInboxText"
type="text"
maxlength="1000"
required
placeholder="New card"
aria-label="New card"
/>
<button type="submit" :disabled="addingToInbox">Add</button>
</form>
</section>
</div>
</div>
</template>
</section>