feat(sprint): edit-icoon op PBI (Product Backlog) en story (Sprint Backlog)
- PBI-rij in Product Backlog-kolom: ✎-icoon rechts uitgelijnd, opent PbiDialog (rij is nu div role=button i.p.v. nested-button) - Story-rij in Sprint Backlog-kolom: ✎-icoon vóór de Trash, opent StoryDialog - SprintStory + PbiWithStories verrijkt met velden die de dialogen lezen (description / acceptance_criteria / pbi_id / created_at op story; priority / status / description op PBI) - pbi.status via pbiStatusToApi → PbiStatusApi (DB UPPER_SNAKE → API lowercase) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
cc6baeebc1
commit
6a76bc0f8c
3 changed files with 70 additions and 6 deletions
|
|
@ -3,6 +3,7 @@ import { notFound, redirect } from 'next/navigation'
|
|||
import { getSession } from '@/lib/auth'
|
||||
import { getAccessibleProduct } from '@/lib/product-access'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { pbiStatusToApi } from '@/lib/task-status'
|
||||
import { SprintBoardClient } from '@/components/sprint/sprint-board-client'
|
||||
import { SprintHeader } from '@/components/sprint/sprint-header'
|
||||
import type { SprintStory, PbiWithStories, ProductMember } from '@/components/sprint/sprint-backlog'
|
||||
|
|
@ -69,6 +70,10 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
|
|||
id: s.id,
|
||||
code: s.code,
|
||||
title: s.title,
|
||||
description: s.description,
|
||||
acceptance_criteria: s.acceptance_criteria,
|
||||
pbi_id: s.pbi_id,
|
||||
created_at: s.created_at,
|
||||
priority: s.priority,
|
||||
status: s.status,
|
||||
taskCount: s.tasks.length,
|
||||
|
|
@ -108,10 +113,17 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
|
|||
id: pbi.id,
|
||||
code: pbi.code,
|
||||
title: pbi.title,
|
||||
priority: pbi.priority,
|
||||
status: pbiStatusToApi(pbi.status),
|
||||
description: pbi.description,
|
||||
stories: pbi.stories.map(s => ({
|
||||
id: s.id,
|
||||
code: s.code,
|
||||
title: s.title,
|
||||
description: s.description,
|
||||
acceptance_criteria: s.acceptance_criteria,
|
||||
pbi_id: s.pbi_id,
|
||||
created_at: s.created_at,
|
||||
priority: s.priority,
|
||||
status: s.status,
|
||||
taskCount: 0,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition, useEffect } from 'react'
|
||||
import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter } from 'lucide-react'
|
||||
import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter, Pencil } from 'lucide-react'
|
||||
import { useDroppable, useDraggable } from '@dnd-kit/core'
|
||||
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
|
|
@ -22,6 +22,9 @@ import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
|
|||
import { PRIORITY_COLORS } from '@/components/shared/priority-select'
|
||||
import { useSprintStore } from '@/stores/sprint-store'
|
||||
import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
|
||||
import { PbiDialog, type PbiDialogState } from '@/components/backlog/pbi-dialog'
|
||||
import { StoryDialog, type StoryDialogState } from '@/components/backlog/story-dialog'
|
||||
import type { PbiStatusApi } from '@/lib/task-status'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
|
|
@ -35,6 +38,10 @@ export interface SprintStory {
|
|||
id: string
|
||||
code: string | null
|
||||
title: string
|
||||
description: string | null
|
||||
acceptance_criteria: string | null
|
||||
pbi_id: string
|
||||
created_at: Date
|
||||
priority: number
|
||||
status: string
|
||||
taskCount: number
|
||||
|
|
@ -52,19 +59,23 @@ export interface PbiWithStories {
|
|||
id: string
|
||||
code: string | null
|
||||
title: string
|
||||
priority: number
|
||||
status: PbiStatusApi
|
||||
description: string | null
|
||||
stories: SprintStory[]
|
||||
}
|
||||
|
||||
// --- Left panel: Sprint Backlog ---
|
||||
|
||||
function SortableSprintRow({
|
||||
story, isDemo, onRemove, onSelect, isSelected,
|
||||
story, isDemo, onRemove, onSelect, onEdit, isSelected,
|
||||
currentUserId, productId, members, onAssigneeChange,
|
||||
}: {
|
||||
story: SprintStory
|
||||
isDemo: boolean
|
||||
onRemove: () => void
|
||||
onSelect: () => void
|
||||
onEdit: () => void
|
||||
isSelected: boolean
|
||||
currentUserId: string
|
||||
productId: string
|
||||
|
|
@ -192,6 +203,16 @@ function SortableSprintRow({
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</DemoTooltip>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); if (!isDemo) onEdit() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
aria-label="Bewerk story"
|
||||
disabled={isDemo}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
</DemoTooltip>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); if (!isDemo) onRemove() }}
|
||||
|
|
@ -230,6 +251,7 @@ export function SprintBacklogLeft({
|
|||
const { sprintStoryOrder } = useSprintStore()
|
||||
const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [storyDialogState, setStoryDialogState] = useState<StoryDialogState | null>(null)
|
||||
|
||||
const unassignedCount = stories.filter(s => s.assignee_id === null).length
|
||||
const currentUserUsername = members.find(m => m.userId === currentUserId)?.username ?? null
|
||||
|
|
@ -291,6 +313,7 @@ export function SprintBacklogLeft({
|
|||
isDemo={isDemo}
|
||||
onRemove={() => onRemove(story.id)}
|
||||
onSelect={() => onSelect(story.id)}
|
||||
onEdit={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
isSelected={selectedStoryId === story.id}
|
||||
currentUserId={currentUserId}
|
||||
productId={productId}
|
||||
|
|
@ -301,6 +324,11 @@ export function SprintBacklogLeft({
|
|||
</SortableContext>
|
||||
)}
|
||||
</div>
|
||||
<StoryDialog
|
||||
state={storyDialogState}
|
||||
onClose={() => setStoryDialogState(null)}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -433,10 +461,11 @@ interface SprintBacklogRightProps {
|
|||
pbisWithStories: PbiWithStories[]
|
||||
sprintStoryIds: Set<string>
|
||||
isDemo: boolean
|
||||
productId: string
|
||||
onAdd: (storyId: string) => void
|
||||
}
|
||||
|
||||
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
|
||||
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, productId, onAdd }: SprintBacklogRightProps) {
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(() => {
|
||||
const auto = new Set<string>()
|
||||
for (const pbi of pbisWithStories) {
|
||||
|
|
@ -449,6 +478,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
const [filterPriority, setFilterPriority] = useState<number | 'all'>('all')
|
||||
const [filterStatus, setFilterStatus] = useState<StoryStatusFilter>('all')
|
||||
const [prefsLoaded, setPrefsLoaded] = useState(false)
|
||||
const [pbiDialogState, setPbiDialogState] = useState<PbiDialogState | null>(null)
|
||||
const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
|
||||
|
||||
// Hydrate filter prefs from localStorage post-mount (avoids SSR mismatch).
|
||||
|
|
@ -611,9 +641,12 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
>
|
||||
{filteredPbis.map(pbi => (
|
||||
<div key={pbi.id}>
|
||||
<button
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => toggle(pbi.id)}
|
||||
className="w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left select-none"
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(pbi.id) } }}
|
||||
className="group w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left select-none cursor-pointer"
|
||||
>
|
||||
<span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
|
||||
<span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
|
||||
|
|
@ -621,7 +654,20 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
<span className="text-xs text-muted-foreground">
|
||||
{pbi.stories.filter(s => s.status === 'DONE').length}/{pbi.stories.length} klaar
|
||||
</span>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
if (!isDemo) setPbiDialogState({ mode: 'edit', productId, pbi: { id: pbi.id, title: pbi.title, code: pbi.code, priority: pbi.priority, status: pbi.status, description: pbi.description } })
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
aria-label="Bewerk PBI"
|
||||
disabled={isDemo}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
</DemoTooltip>
|
||||
</div>
|
||||
|
||||
{!collapsed.has(pbi.id) && pbi.stories.map(story => {
|
||||
const inSprint = sprintStoryIds.has(story.id)
|
||||
|
|
@ -654,6 +700,11 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
<PbiDialog
|
||||
state={pbiDialogState}
|
||||
onClose={() => setPbiDialogState(null)}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -210,6 +210,7 @@ export function SprintBoardClient({
|
|||
pbisWithStories={pbisWithStories}
|
||||
sprintStoryIds={sprintStoryIds}
|
||||
isDemo={isDemo}
|
||||
productId={productId}
|
||||
onAdd={handleAdd}
|
||||
/>,
|
||||
<SprintBacklogLeft
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue