feat: ST-301-ST-312 M3 Sprint Backlog en Sprint Planning
- useSprintStore met sprintStoryOrder/taskOrder (ST-301) - Sprint aanmaken modal met Sprint Goal validatie (ST-302) - Sprint Backlog pagina SplitPane layout met Sprint Goal header (ST-303) - Stories toevoegen aan Sprint via knop in rechterpaneel (ST-304) - Sprint Backlog volgorde aanpassen via dnd-kit (ST-305) - Story uit Sprint verwijderen met status terug naar OPEN (ST-306) - Sprint Planning pagina SplitPane met story selectie (ST-307) - Taken aanmaken inline in rechterpaneel (ST-308) - Taak drag-and-drop verticaal met optimistische update (ST-309) - Taakstatus toggle TO_DO/IN_PROGRESS/DONE met voortgangsindicator (ST-310) - Taak inline bewerken en verwijderen (ST-311) - Sprint afronden dialoog met per-story Done/Terug keuze (ST-312) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4dd62c199c
commit
d92e548f88
12 changed files with 1480 additions and 6 deletions
|
|
@ -7,6 +7,7 @@ import { SplitPane } from '@/components/split-pane/split-pane'
|
|||
import { PbiList } from '@/components/backlog/pbi-list'
|
||||
import { StoryPanel } from '@/components/backlog/story-panel'
|
||||
import type { Story } from '@/components/backlog/story-panel'
|
||||
import { StartSprintButton } from '@/components/sprint/start-sprint-button'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -22,6 +23,10 @@ export default async function ProductBacklogPage({ params }: Props) {
|
|||
})
|
||||
if (!product) notFound()
|
||||
|
||||
const activeSprint = await prisma.sprint.findFirst({
|
||||
where: { product_id: id, status: 'ACTIVE' },
|
||||
})
|
||||
|
||||
const pbis = await prisma.pbi.findMany({
|
||||
where: { product_id: id },
|
||||
orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
|
||||
|
|
@ -60,12 +65,21 @@ export default async function ProductBacklogPage({ params }: Props) {
|
|||
<p className="text-xs text-muted-foreground mt-0.5">{product.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
href={`/products/${id}/settings`}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Instellingen
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
{activeSprint ? (
|
||||
<Link href={`/products/${id}/sprint`} className="text-xs text-primary hover:underline font-medium">
|
||||
Sprint actief →
|
||||
</Link>
|
||||
) : (
|
||||
!isDemo && <StartSprintButton productId={id} />
|
||||
)}
|
||||
<Link
|
||||
href={`/products/${id}/settings`}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Instellingen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Split pane */}
|
||||
|
|
|
|||
119
app/(app)/products/[id]/sprint/page.tsx
Normal file
119
app/(app)/products/[id]/sprint/page.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import { notFound, redirect } from 'next/navigation'
|
||||
import { cookies } from 'next/headers'
|
||||
import { getIronSession } from 'iron-session'
|
||||
import { SessionData, sessionOptions } from '@/lib/session'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { SplitPane } from '@/components/split-pane/split-pane'
|
||||
import { SprintBacklogLeft, SprintBacklogRight } from '@/components/sprint/sprint-backlog'
|
||||
import { SprintHeader } from '@/components/sprint/sprint-header'
|
||||
import type { SprintStory, PbiWithStories } from '@/components/sprint/sprint-backlog'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export default async function SprintBacklogPage({ params }: Props) {
|
||||
const { id } = await params
|
||||
const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
|
||||
|
||||
const product = await prisma.product.findFirst({
|
||||
where: { id, user_id: session.userId },
|
||||
})
|
||||
if (!product) notFound()
|
||||
|
||||
const sprint = await prisma.sprint.findFirst({
|
||||
where: { product_id: id, status: 'ACTIVE' },
|
||||
})
|
||||
if (!sprint) redirect(`/products/${id}`)
|
||||
|
||||
// Stories in this sprint
|
||||
const sprintStories = await prisma.story.findMany({
|
||||
where: { sprint_id: sprint.id },
|
||||
orderBy: { sort_order: 'asc' },
|
||||
include: { tasks: { select: { id: true, status: true } } },
|
||||
})
|
||||
|
||||
const sprintStoryItems: SprintStory[] = sprintStories.map(s => ({
|
||||
id: s.id,
|
||||
title: s.title,
|
||||
priority: s.priority,
|
||||
status: s.status,
|
||||
taskCount: s.tasks.length,
|
||||
doneCount: s.tasks.filter(t => t.status === 'DONE').length,
|
||||
}))
|
||||
|
||||
// All PBIs with their non-sprint stories for the right panel
|
||||
const pbis = await prisma.pbi.findMany({
|
||||
where: { product_id: id },
|
||||
orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
|
||||
include: {
|
||||
stories: {
|
||||
orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const pbisWithStories: PbiWithStories[] = pbis
|
||||
.filter(pbi => pbi.stories.length > 0)
|
||||
.map(pbi => ({
|
||||
id: pbi.id,
|
||||
title: pbi.title,
|
||||
stories: pbi.stories.map(s => ({
|
||||
id: s.id,
|
||||
title: s.title,
|
||||
priority: s.priority,
|
||||
status: s.status,
|
||||
taskCount: 0,
|
||||
doneCount: 0,
|
||||
})),
|
||||
}))
|
||||
|
||||
const sprintStoryIds = new Set(sprintStories.map(s => s.id))
|
||||
const isDemo = session.isDemo ?? false
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<SprintHeader
|
||||
productId={id}
|
||||
productName={product.name}
|
||||
sprint={sprint}
|
||||
isDemo={isDemo}
|
||||
sprintStories={sprintStoryItems}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<SplitPane
|
||||
storageKey={`sprint-${id}`}
|
||||
left={
|
||||
<SprintBacklogLeft
|
||||
sprintId={sprint.id}
|
||||
stories={sprintStoryItems}
|
||||
isDemo={isDemo}
|
||||
selectedStoryId={null}
|
||||
onSelectStory={() => {}}
|
||||
/>
|
||||
}
|
||||
right={
|
||||
<SprintBacklogRight
|
||||
sprintId={sprint.id}
|
||||
pbisWithStories={pbisWithStories}
|
||||
sprintStoryIds={sprintStoryIds}
|
||||
isDemo={isDemo}
|
||||
onStoryAdded={() => {}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border px-4 py-2 bg-surface-container-low shrink-0 flex items-center gap-4">
|
||||
<Link href={`/products/${id}/sprint/planning`} className="text-sm text-primary hover:underline">
|
||||
Sprint Planning →
|
||||
</Link>
|
||||
<Link href={`/products/${id}`} className="text-sm text-muted-foreground hover:text-foreground">
|
||||
← Product Backlog
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
135
app/(app)/products/[id]/sprint/planning/page.tsx
Normal file
135
app/(app)/products/[id]/sprint/planning/page.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import { notFound, redirect } from 'next/navigation'
|
||||
import { cookies } from 'next/headers'
|
||||
import { getIronSession } from 'iron-session'
|
||||
import { SessionData, sessionOptions } from '@/lib/session'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { SplitPane } from '@/components/split-pane/split-pane'
|
||||
import { PlanningLeft } from '@/components/sprint/planning-left'
|
||||
import { TaskList } from '@/components/sprint/task-list'
|
||||
import type { Task } from '@/components/sprint/task-list'
|
||||
import { SprintHeader } from '@/components/sprint/sprint-header'
|
||||
import type { SprintStory } from '@/components/sprint/sprint-backlog'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export default async function SprintPlanningPage({ params }: Props) {
|
||||
const { id } = await params
|
||||
const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
|
||||
|
||||
const product = await prisma.product.findFirst({
|
||||
where: { id, user_id: session.userId },
|
||||
})
|
||||
if (!product) notFound()
|
||||
|
||||
const sprint = await prisma.sprint.findFirst({
|
||||
where: { product_id: id, status: 'ACTIVE' },
|
||||
})
|
||||
if (!sprint) redirect(`/products/${id}`)
|
||||
|
||||
const sprintStories = await prisma.story.findMany({
|
||||
where: { sprint_id: sprint.id },
|
||||
orderBy: { sort_order: 'asc' },
|
||||
include: {
|
||||
tasks: {
|
||||
orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const sprintStoryItems: SprintStory[] = sprintStories.map(s => ({
|
||||
id: s.id,
|
||||
title: s.title,
|
||||
priority: s.priority,
|
||||
status: s.status,
|
||||
taskCount: s.tasks.length,
|
||||
doneCount: s.tasks.filter(t => t.status === 'DONE').length,
|
||||
}))
|
||||
|
||||
// Tasks by story
|
||||
const tasksByStory: Record<string, Task[]> = {}
|
||||
for (const story of sprintStories) {
|
||||
tasksByStory[story.id] = story.tasks.map(t => ({
|
||||
id: t.id,
|
||||
title: t.title,
|
||||
description: t.description,
|
||||
priority: t.priority,
|
||||
status: t.status,
|
||||
story_id: t.story_id,
|
||||
sprint_id: t.sprint_id,
|
||||
}))
|
||||
}
|
||||
|
||||
const isDemo = session.isDemo ?? false
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<SprintHeader
|
||||
productId={id}
|
||||
productName={product.name}
|
||||
sprint={sprint}
|
||||
isDemo={isDemo}
|
||||
sprintStories={sprintStoryItems}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<SplitPane
|
||||
storageKey={`planning-${id}`}
|
||||
left={
|
||||
<PlanningLeft
|
||||
stories={sprintStoryItems}
|
||||
/>
|
||||
}
|
||||
right={
|
||||
<PlanningRight
|
||||
sprintId={sprint.id}
|
||||
productId={id}
|
||||
stories={sprintStoryItems}
|
||||
tasksByStory={tasksByStory}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border px-4 py-2 bg-surface-container-low shrink-0">
|
||||
<Link href={`/products/${id}/sprint`} className="text-sm text-muted-foreground hover:text-foreground">
|
||||
← Sprint Backlog
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Right panel — shows tasks of selected story
|
||||
function PlanningRight({
|
||||
sprintId,
|
||||
productId,
|
||||
stories,
|
||||
tasksByStory,
|
||||
isDemo,
|
||||
}: {
|
||||
sprintId: string
|
||||
productId: string
|
||||
stories: SprintStory[]
|
||||
tasksByStory: Record<string, Task[]>
|
||||
isDemo: boolean
|
||||
}) {
|
||||
// This is a Server Component wrapper — PlanningLeft manages selection via URL/store
|
||||
// We render TaskList for the first story if only one, or show instruction
|
||||
// The actual selection is client-side via PlanningLeft
|
||||
return (
|
||||
<PlanningRightClient
|
||||
sprintId={sprintId}
|
||||
productId={productId}
|
||||
stories={stories}
|
||||
tasksByStory={tasksByStory}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// We need a client component for the right side that reads selection store
|
||||
import { PlanningRightClient } from '@/components/sprint/planning-right-client'
|
||||
Loading…
Add table
Add a link
Reference in a new issue