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

Project configuration view: manage a project's statuses

Browse Source 
New /projects/:id/configure view, linked from a new 'Configure' item on
the project view's Manage menu.

Backend:
- CardStatusRepository/CardStatusController gain full CRUD: create
  (appended at the end), reorder (dense positions, like card
  ordering), and delete.
- Deleting a status with cards attached is rejected with 409 and
  error.details.card_count, rather than hitting the existing FK
  RESTRICT constraint -- retrying with { reassign_to: <status id> }
  moves those cards to that status first (CardRepository::
  reassignStatus, appended after the destination's existing cards)
  and deletes in one transaction (CardStatusRepository::transaction,
  shared PDO connection across repositories).
- The last status in a project can't be deleted, since a project card
  is required to have one.
- Routes: POST/DELETE .../statuses(/:id), PUT .../statuses/order.
- 14 new CardStatusTest cases covering all of the above.

Frontend:
- ProjectConfigureView.vue: header (title, back-to-project link, the
  shared Manage menu) + a vuedraggable status list (reorder persists
  the whole new order) with a delete button per row and an add-status
  form. A row's plain delete either succeeds immediately or, on 409,
  opens a modal to choose a different status before retrying the
  delete with reassign_to.
- Extracted ProjectManageMenu.vue (the Manage dropdown + delete-project
  modal) out of ProjectView so both views share it; it now also has a
  Configure link (hidden on the configure page itself).
- ApiError gains a cardCount getter (details.card_count), mirroring
  the existing retryAfter getter.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
aneurin
2026-09-04 20:31:10 +01:00
co-authored by Claude Sonnet 5
parent 21e148aa4d
commit dd7d217e8e
13 changed files with 995 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/README.md
+29 -5
View File
@@ -42,8 +42,9 @@ src/components/AppSidebar.vue left nav: Dashboard link, project dropdown, Inbox
src/components/CardRow.vue editable text + status chip + delete, one card
src/components/KanbanCard.vue small draggable card for the board columns and the inbox
src/components/PasskeyNotice.vue dismissible "add a passkey" banner across the top of the page
src/views/ DashboardView, ProjectView, LoginView, ProfileView,
VerifyEmailView
src/components/ProjectManageMenu.vue "Manage" dropdown + delete-project modal, shared by ProjectView and ProjectConfigureView
src/views/ DashboardView, ProjectView, ProjectConfigureView, LoginView,
ProfileView, VerifyEmailView
```
Signed-in "app" routes (`meta.requiresAuth`) render inside a persistent shell:
@@ -82,9 +83,10 @@ under the list adds a card straight to the inbox.
`/projects/:id` shows one project. It renders on a **full-width** layout (the
route sets `meta.wide`, which widens `.app__main` in `App.vue`), so the header
spans the full width and the **Manage** menu sits top right. The title is
inline-editable (saved on blur via `PATCH /api/projects/:id`). Manage has a
**Delete project** action that opens a confirmation modal; confirming calls
`DELETE /api/projects/:id` and returns to the dashboard.
inline-editable (saved on blur via `PATCH /api/projects/:id`). Manage
(`ProjectManageMenu.vue`) has a **Configure** link (to the status-management
view below) and a **Delete project** action that opens a confirmation modal;
confirming calls `DELETE /api/projects/:id` and returns to the dashboard.
Below the header are two tabs (local `activeTab` state, `v-show` so both stay
mounted). The tab order is fixed — **All tasks** first, **Kanban** second — but
@@ -112,6 +114,28 @@ card and re-packs whatever column it left; afterwards the view always reloads
both `inbox` and this project's `cards`, since either could have been the other
side of the move.
## Project configuration
`/projects/:id/configure` (`ProjectConfigureView.vue`) manages a project's
statuses. The header mirrors the project view's — title, `ProjectManageMenu`
top right — plus a "← Back to project" link (Manage's own Configure link is
hidden here, since it would just point at the current page).
The status list is a `vuedraggable` list (its own list, no shared drag group
with the kanban board) bound directly to a local `statuses` ref; dragging
mutates it in place, and `@change` persists the whole new order via
`PUT /api/projects/:id/statuses/order`, reverting to the server's copy on
failure. A small form below it adds a status
(`POST /api/projects/:id/statuses`) at the end of the list.
Each row has a delete button. A status with no cards deletes immediately; one
still holding cards gets `409` back from `DELETE .../statuses/:statusId` with
`error.details.card_count` (surfaced as `ApiError#cardCount`) -- that opens a
modal asking which other status to move its cards to, then resubmits the same
delete with `{ reassign_to }`, which reassigns and deletes in one request. The
last remaining status can't be deleted (a project card always needs one); its
row's delete button is disabled once `statuses.length <= 1`.
## Auth flow
There is no password and no separate sign-up — `LoginView` is an email field
web/src/components/ProjectManageMenu.vue
+129
View File
@@ -0,0 +1,129 @@
<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ApiError, apiRequest } from '../lib/api'
import { useCardsStore } from '../stores/cards'
import { useProjectsStore } from '../stores/projects'
// The "Manage" dropdown + its delete-project confirmation modal, shared by
// the project view and its configuration view -- each links to the other,
// and either can delete the project.
const props = defineProps<{
projectId: number
projectTitle: string
cardCount: number
}>()
const route = useRoute()
const router = useRouter()
const projects = useProjectsStore()
const cards = useCardsStore()
const menuOpen = ref(false)
const confirmingDelete = ref(false)
const deleting = ref(false)
const deleteError = ref<string | null>(null)
const cancelButton = ref<HTMLButtonElement>()
function askDelete() {
menuOpen.value = false
deleteError.value = null
confirmingDelete.value = true
}
async function confirmDelete() {
deleting.value = true
deleteError.value = null
try {
await apiRequest(`/projects/${props.projectId}`, { method: 'DELETE', auth: true })
projects.reset()
cards.reset()
await router.push('/')
} catch (e) {
deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the project.'
deleting.value = false
}
}
watch(confirmingDelete, async (open) => {
if (open) {
await nextTick()
cancelButton.value?.focus()
}
})
function onKeydown(event: KeyboardEvent) {
if (event.key !== 'Escape') return
if (confirmingDelete.value) confirmingDelete.value = false
else if (menuOpen.value) menuOpen.value = false
}
onMounted(() => window.addEventListener('keydown', onKeydown))
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
</script>
<template>
<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 v-if="route.name !== 'project-configure'" role="none">
<RouterLink
:to="{ name: 'project-configure', params: { id: projectId } }"
role="menuitem"
class="menu__item"
@click="menuOpen = false"
>
Configure
</RouterLink>
</li>
<li role="none">
<button type="button" role="menuitem" class="menu__item menu__item--danger" @click="askDelete">
Delete project
</button>
</li>
</ul>
</template>
</div>
<div
v-if="confirmingDelete"
class="modal"
role="dialog"
aria-modal="true"
aria-labelledby="confirm-delete-title"
>
<div class="modal__backdrop" @click="confirmingDelete = false" />
<div class="modal__dialog">
<h2 id="confirm-delete-title">Delete this project?</h2>
<p class="muted">
&ldquo;{{ projectTitle }}&rdquo; and its {{ cardCount }}
card{{ cardCount === 1 ? '' : 's' }} will be permanently deleted.
</p>
<p v-if="deleteError" class="form-error">{{ deleteError }}</p>
<div class="modal__actions">
<button
ref="cancelButton"
type="button"
class="btn-secondary"
:disabled="deleting"
@click="confirmingDelete = false"
>
Cancel
</button>
<button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
{{ deleting ? 'Deleting…' : 'Delete project' }}
</button>
</div>
</div>
</div>
</template>
web/src/lib/api.ts
+6
View File
@@ -30,6 +30,12 @@ export class ApiError extends Error {
const value = (this.details as Record<string, unknown>).retry_after
return typeof value === 'number' ? value : undefined
}
/** How many cards are still using a status, when deleting one 409s pending reassignment. */
get cardCount(): number | undefined {
const value = (this.details as Record<string, unknown>).card_count
return typeof value === 'number' ? value : undefined
}
}
interface RequestOptions {
web/src/router/index.ts
+6
View File
@@ -17,6 +17,12 @@ const router = createRouter({
component: () => import('../views/ProjectView.vue'),
meta: { requiresAuth: true, wide: true },
},
{
path: '/projects/:id(\\d+)/configure',
name: 'project-configure',
component: () => import('../views/ProjectConfigureView.vue'),
meta: { requiresAuth: true, wide: true },
},
{
path: '/profile',
name: 'profile',
web/src/style.css
+110
View File
@@ -508,6 +508,13 @@ h1 {
background: var(--bg);
}
.project-head__back {
display: inline-flex;
align-items: center;
flex: none;
text-decoration: none;
}
.menu {
position: relative;
flex: none;
@@ -553,6 +560,7 @@ h1 {
display: block;
width: 100%;
text-align: left;
text-decoration: none;
border: none;
background: none;
color: var(--text);
@@ -604,6 +612,108 @@ h1 {
max-width: 42rem;
}
/* --- project configuration: status list ------------------------------- */
.config-section {
max-width: 32rem;
margin-top: 1.5rem;
}
.config-section h2 {
margin: 0 0 0.25rem;
font-size: 1.1rem;
}
.status-list {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: grid;
gap: 0.4rem;
}
.status-row {
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 0.6rem;
background: var(--surface);
cursor: grab;
}
.status-row--ghost {
opacity: 0.5;
}
.status-row__name {
flex: 1;
min-width: 0;
word-break: break-word;
}
.status-row__delete {
flex: none;
border: none;
background: none;
color: var(--muted);
cursor: pointer;
font-size: 1rem;
padding: 0.2rem 0.4rem;
border-radius: 6px;
}
.status-row__delete:hover:not(:disabled) {
color: var(--error);
}
.status-row__delete:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.status-list__new {
display: flex;
gap: 0.4rem;
margin-top: 0.75rem;
}
.status-list__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(--bg);
color: var(--text);
}
.status-list__new button[type='submit'] {
flex: none;
padding: 0.4rem 0.7rem;
font-size: 0.9rem;
border-radius: 6px;
}
.modal__field {
display: grid;
gap: 0.3rem;
font-size: 0.9rem;
margin-top: 0.75rem;
}
.modal__field select {
padding: 0.5rem 0.6rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
color: var(--text);
font: inherit;
}
/* --- kanban board ---------------------------------------------------- */
.kanban {
web/src/views/ProjectConfigureView.vue
+259
View File
@@ -0,0 +1,259 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import draggable from 'vuedraggable'
import ProjectManageMenu from '../components/ProjectManageMenu.vue'
import { ApiError, apiRequest } from '../lib/api'
import type { CardStatus, Project } from '../types'
const route = useRoute()
const projectId = Number(route.params.id)
const project = ref<Project | null>(null)
const statuses = ref<CardStatus[]>([])
const loadError = ref<string | null>(null)
const statusActionError = ref<string | null>(null)
onMounted(() => void load())
async function load() {
loadError.value = null
try {
const [{ project: fetched }, { statuses: fetchedStatuses }] = await Promise.all([
apiRequest<{ project: Project }>(`/projects/${projectId}`, { auth: true }),
apiRequest<{ statuses: CardStatus[] }>(`/projects/${projectId}/statuses`, { auth: true }),
])
project.value = fetched
statuses.value = fetchedStatuses
} catch (e) {
if (e instanceof ApiError && e.status === 404) {
loadError.value = 'That project does not exist.'
} else {
loadError.value = e instanceof ApiError ? e.message : 'Could not load the project.'
}
}
}
// --- Reorder (drag-and-drop) ----------------------------------------------
// vuedraggable mutates `statuses` in place as the user drags; @change fires
// once the drop lands, and we persist the whole new order.
async function onStatusesReordered() {
statusActionError.value = null
try {
await apiRequest(`/projects/${projectId}/statuses/order`, {
method: 'PUT',
auth: true,
body: { status_ids: statuses.value.map((s) => s.id) },
})
} catch (e) {
statusActionError.value = e instanceof ApiError ? e.message : 'Could not save the new order.'
await load() // our optimistic local order may not match the server's
}
}
// --- Add ---------------------------------------------------------------
const newStatusName = ref('')
const addingStatus = ref(false)
const addStatusError = ref<ApiError | null>(null)
async function onAddStatus() {
addingStatus.value = true
addStatusError.value = null
try {
const { status } = await apiRequest<{ status: CardStatus }>(`/projects/${projectId}/statuses`, {
method: 'POST',
auth: true,
body: { name: newStatusName.value },
})
statuses.value.push(status)
newStatusName.value = ''
} catch (e) {
addStatusError.value = e instanceof ApiError ? e : new ApiError('Could not add the status.', 0)
} finally {
addingStatus.value = false
}
}
// --- Delete, with reassignment when cards are still using the status -----
const deletingStatusId = ref<number | null>(null)
// Set once a plain delete comes back 409 -- that status has cards, so we ask
// which other status to move them to before trying again.
const pendingDelete = ref<CardStatus | null>(null)
const pendingDeleteCardCount = ref(0)
const reassignTo = ref<number | ''>('')
const reassigning = ref(false)
const reassignCancelButton = ref<HTMLButtonElement>()
const reassignOptions = computed(() => statuses.value.filter((s) => s.id !== pendingDelete.value?.id))
async function onDeleteStatus(status: CardStatus) {
statusActionError.value = null
deletingStatusId.value = status.id
try {
await apiRequest(`/projects/${projectId}/statuses/${status.id}`, { method: 'DELETE', auth: true })
statuses.value = statuses.value.filter((s) => s.id !== status.id)
} catch (e) {
if (e instanceof ApiError && e.status === 409 && e.cardCount !== undefined) {
pendingDelete.value = status
pendingDeleteCardCount.value = e.cardCount
reassignTo.value = ''
} else {
statusActionError.value = e instanceof ApiError ? e.message : 'Could not delete the status.'
}
} finally {
deletingStatusId.value = null
}
}
function cancelReassign() {
pendingDelete.value = null
}
async function confirmReassignAndDelete() {
if (!pendingDelete.value || reassignTo.value === '') return
reassigning.value = true
statusActionError.value = null
try {
await apiRequest(`/projects/${projectId}/statuses/${pendingDelete.value.id}`, {
method: 'DELETE',
auth: true,
body: { reassign_to: reassignTo.value },
})
statuses.value = statuses.value.filter((s) => s.id !== pendingDelete.value?.id)
pendingDelete.value = null
} catch (e) {
statusActionError.value = e instanceof ApiError ? e.message : 'Could not reassign and delete the status.'
} finally {
reassigning.value = false
}
}
watch(pendingDelete, async (status) => {
if (status) {
await nextTick()
reassignCancelButton.value?.focus()
}
})
function onKeydown(event: KeyboardEvent) {
if (event.key === 'Escape' && pendingDelete.value) cancelReassign()
}
onMounted(() => window.addEventListener('keydown', onKeydown))
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
</script>
<template>
<section class="card project">
<p v-if="loadError" class="form-error">{{ loadError }}</p>
<template v-else-if="project">
<div class="project-head">
<RouterLink :to="{ name: 'project', params: { id: projectId } }" class="btn-secondary project-head__back">
&larr; Back to project
</RouterLink>
<h1 class="project-head__title">{{ project.title }}</h1>
<ProjectManageMenu :project-id="projectId" :project-title="project.title" :card-count="project.card_count" />
</div>
<section class="config-section">
<h2>Statuses</h2>
<p class="muted">
Drag to reorder. Deleting a status that still has cards asks where to move them first.
</p>
<p v-if="statusActionError" class="form-error">{{ statusActionError }}</p>
<draggable
:list="statuses"
item-key="id"
tag="ul"
class="status-list"
ghost-class="status-row--ghost"
:animation="150"
@change="onStatusesReordered"
>
<template #item="{ element: status }: { element: CardStatus }">
<li class="status-row">
<span class="status-row__name">{{ status.name }}</span>
<button
type="button"
class="status-row__delete"
:disabled="statuses.length <= 1 || deletingStatusId === status.id"
:title="statuses.length <= 1 ? 'A project must have at least one status.' : 'Delete status'"
:aria-label="`Delete status ${status.name}`"
@click="onDeleteStatus(status)"
>
&#10005;
</button>
</li>
</template>
</draggable>
<form class="status-list__new" @submit.prevent="onAddStatus">
<input
v-model="newStatusName"
type="text"
maxlength="100"
required
placeholder="Status name"
aria-label="Status name"
/>
<button type="submit" :disabled="addingStatus">{{ addingStatus ? 'Adding…' : 'Add' }}</button>
</form>
<p v-if="addStatusError" class="form-error">{{ addStatusError.message }}</p>
</section>
</template>
</section>
<div
v-if="pendingDelete"
class="modal"
role="dialog"
aria-modal="true"
aria-labelledby="reassign-title"
>
<div class="modal__backdrop" @click="cancelReassign" />
<div class="modal__dialog">
<h2 id="reassign-title">Move its cards first</h2>
<p class="muted">
&ldquo;{{ pendingDelete.name }}&rdquo; still has {{ pendingDeleteCardCount }}
card{{ pendingDeleteCardCount === 1 ? '' : 's' }}. Choose another status to move
{{ pendingDeleteCardCount === 1 ? 'it' : 'them' }} to before deleting it.
</p>
<label class="modal__field">
<span>Move cards to</span>
<select v-model="reassignTo">
<option value="" disabled>Choose a status…</option>
<option v-for="s in reassignOptions" :key="s.id" :value="s.id">{{ s.name }}</option>
</select>
</label>
<p v-if="statusActionError" class="form-error">{{ statusActionError }}</p>
<div class="modal__actions">
<button
ref="reassignCancelButton"
type="button"
class="btn-secondary"
:disabled="reassigning"
@click="cancelReassign"
>
Cancel
</button>
<button
type="button"
class="btn-danger"
:disabled="reassigning || reassignTo === ''"
@click="confirmReassignAndDelete"
>
{{ reassigning ? 'Moving…' : 'Move cards & delete' }}
</button>
</div>
</div>
</div>
</template>
web/src/views/ProjectView.vue
+9 -108
View File
@@ -1,21 +1,19 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import draggable from 'vuedraggable'
import CardRow from '../components/CardRow.vue'
import KanbanCard from '../components/KanbanCard.vue'
import ProjectManageMenu from '../components/ProjectManageMenu.vue'
import { ApiError, apiRequest } from '../lib/api'
import { reorderColumn } from '../lib/cardOrder'
import { useCardsStore } from '../stores/cards'
import { useInboxStore } from '../stores/inbox'
import { useProjectsStore } from '../stores/projects'
import type { Card, CardStatus, Project } from '../types'
const route = useRoute()
const router = useRouter()
const cards = useCardsStore()
const inbox = useInboxStore()
const projects = useProjectsStore()
const projectId = Number(route.params.id)
const project = ref<Project | null>(null)
@@ -32,12 +30,6 @@ const activeTab = ref<(typeof tabs)[number]['key']>('kanban')
const titleDraft = ref('')
const menuOpen = ref(false)
const confirmingDelete = ref(false)
const deleting = ref(false)
const deleteError = ref<string | null>(null)
const cancelButton = ref<HTMLButtonElement>()
const newText = ref('')
const submitting = ref(false)
@@ -108,24 +100,7 @@ watch(project, (value) => {
if (value) titleDraft.value = value.title
})
watch(confirmingDelete, async (open) => {
if (open) {
await nextTick()
cancelButton.value?.focus()
}
})
onMounted(() => {
void load()
window.addEventListener('keydown', onKeydown)
})
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
function onKeydown(event: KeyboardEvent) {
if (event.key !== 'Escape') return
if (confirmingDelete.value) confirmingDelete.value = false
else if (menuOpen.value) menuOpen.value = false
}
onMounted(() => void load())
async function load() {
loadError.value = null
@@ -172,26 +147,6 @@ function saveTitle() {
if (next !== project.value.title) void patchProject({ title: next })
}
function askDelete() {
menuOpen.value = false
deleteError.value = null
confirmingDelete.value = true
}
async function confirmDelete() {
deleting.value = true
deleteError.value = null
try {
await apiRequest(`/projects/${projectId}`, { method: 'DELETE', auth: true })
projects.reset()
cards.reset()
await router.push('/')
} catch (e) {
deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the project.'
deleting.value = false
}
}
/** Run a store mutation, surfacing failures and resyncing from the server. */
async function run(op: Promise<unknown>) {
actionError.value = null
@@ -234,33 +189,11 @@ async function onCreate() {
/>
</h1>
<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>
</div>
<ProjectManageMenu
:project-id="projectId"
:project-title="project.title"
:card-count="cards.cards.length"
/>
</div>
<p v-if="actionError" class="form-error">{{ actionError }}</p>
@@ -336,36 +269,4 @@ async function onCreate() {
</div>
</template>
</section>
<div
v-if="confirmingDelete"
class="modal"
role="dialog"
aria-modal="true"
aria-labelledby="confirm-delete-title"
>
<div class="modal__backdrop" @click="confirmingDelete = false" />
<div class="modal__dialog">
<h2 id="confirm-delete-title">Delete this project?</h2>
<p class="muted">
&ldquo;{{ project?.title }}&rdquo; and its {{ cards.cards.length }}
card{{ cards.cards.length === 1 ? '' : 's' }} will be permanently deleted.
</p>
<p v-if="deleteError" class="form-error">{{ deleteError }}</p>
<div class="modal__actions">
<button
ref="cancelButton"
type="button"
class="btn-secondary"
:disabled="deleting"
@click="confirmingDelete = false"
>
Cancel
</button>
<button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
{{ deleting ? 'Deleting…' : 'Delete project' }}
</button>
</div>
</div>
</div>
</template>