feat(frontend): Integrate TaskList component into Story detail page - Sprint 4 Story 2

Integrated the TaskList component into the Story detail page to enable
full Task CRUD functionality within Stories.

Changes:
- Import TaskList component in Story detail page
- Replace placeholder "Coming Soon" card with TaskList component
- Pass storyId prop to TaskList for data fetching
- Remove temporary "Task management will be available" message

Sprint 4 Story 2 is now COMPLETE:
 TaskList, TaskCard, TaskQuickAdd components created (commit 8fe6d64)
 All Task CRUD operations working with optimistic updates
 Filters: All/Active/Completed
 Sorting: Recent/Alphabetical/Status
 Progress bar showing task completion
 Quick add inline form for creating tasks
 Checkbox toggle for task status
 Full integration with Story detail page

Backend API: All Task endpoints verified working
Frontend compilation:  No errors
Dev server:  Running on http://localhost:3000
Story page:  Loading successfully (200 status)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-05 22:38:08 +01:00
parent 8fe6d64e2e
commit 8022c0517f

View File

@@ -51,6 +51,7 @@ import { useStory, useUpdateStory, useDeleteStory, useChangeStoryStatus } from '
import { useEpic } from '@/lib/hooks/use-epics';
import { useProject } from '@/lib/hooks/use-projects';
import { StoryForm } from '@/components/projects/story-form';
import { TaskList } from '@/components/tasks/task-list';
import { formatDistanceToNow } from 'date-fns';
import { toast } from 'sonner';
import type { WorkItemStatus, WorkItemPriority } from '@/types/project';
@@ -267,22 +268,8 @@ export default function StoryDetailPage({ params }: StoryDetailPageProps) {
</CardContent>
</Card>
{/* Tasks Section - Placeholder for Story 2 */}
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>Tasks</CardTitle>
<Button size="sm" disabled>
Coming Soon
</Button>
</div>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Task management will be available in the next update.
</p>
</CardContent>
</Card>
{/* Tasks Section - Sprint 4 Story 2 */}
<TaskList storyId={storyId} />
</div>
{/* Metadata Sidebar (1/3 width) */}