Project configuration view: manage a project's statuses

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>
2026-09-04 20:31:10 +01:00
parent 21e148aa4d
commit dd7d217e8e
13 changed files with 995 additions and 126 deletions
@@ -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>
@@ -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>