feat(frontend): Refactor Kanban board to focus on Story management
Refactored the Kanban board from a mixed Epic/Story/Task view to focus exclusively on Stories, which are the right granularity for Kanban management. Changes: - Created StoryCard component with Epic breadcrumb, priority badges, and estimated hours display - Updated KanbanColumn to use Story type and display epic names - Created CreateStoryDialog for story creation with epic selection - Added useProjectStories hook to fetch all stories across epics for a project - Refactored Kanban page to show Stories only with drag-and-drop status updates - Updated SignalR event handlers to focus on Story events only - Changed UI text from 'New Issue' to 'New Story' and 'update issue status' to 'update story status' - Implemented story status change via useChangeStoryStatus hook 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
@@ -8,18 +8,18 @@ import {
|
||||
DragStartEvent,
|
||||
closestCorners,
|
||||
} from '@dnd-kit/core';
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useProjectStories } from '@/lib/hooks/use-stories';
|
||||
import { useEpics } from '@/lib/hooks/use-epics';
|
||||
import { useStories } from '@/lib/hooks/use-stories';
|
||||
import { useTasks } from '@/lib/hooks/use-tasks';
|
||||
import { useChangeStoryStatus } from '@/lib/hooks/use-stories';
|
||||
import { useSignalREvents, useSignalRConnection } from '@/lib/signalr/SignalRContext';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Plus, Loader2 } from 'lucide-react';
|
||||
import { KanbanColumn } from '@/components/features/kanban/KanbanColumn';
|
||||
import { IssueCard } from '@/components/features/kanban/IssueCard';
|
||||
import { CreateIssueDialog } from '@/components/features/issues/CreateIssueDialog';
|
||||
import type { Epic, Story, Task } from '@/types/project';
|
||||
import { StoryCard } from '@/components/features/kanban/StoryCard';
|
||||
import { CreateStoryDialog } from '@/components/features/stories/CreateStoryDialog';
|
||||
import type { Story, WorkItemStatus } from '@/types/project';
|
||||
|
||||
const COLUMNS = [
|
||||
{ id: 'Backlog', title: 'Backlog', color: 'bg-gray-100' },
|
||||
@@ -28,144 +28,77 @@ const COLUMNS = [
|
||||
{ id: 'Done', title: 'Done', color: 'bg-green-100' },
|
||||
];
|
||||
|
||||
// Unified work item type for Kanban
|
||||
type WorkItemType = 'Epic' | 'Story' | 'Task';
|
||||
interface KanbanWorkItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string; // Optional to match API response
|
||||
status: string;
|
||||
priority: string;
|
||||
type: WorkItemType;
|
||||
// Epic properties
|
||||
projectId?: string;
|
||||
// Story properties
|
||||
epicId?: string;
|
||||
// Task properties
|
||||
storyId?: string;
|
||||
// Metadata
|
||||
estimatedHours?: number;
|
||||
actualHours?: number;
|
||||
ownerId?: string;
|
||||
createdAt?: string;
|
||||
updatedAt?: string;
|
||||
}
|
||||
|
||||
export default function KanbanPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.id as string;
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [activeItem, setActiveItem] = useState<KanbanWorkItem | null>(null);
|
||||
const [activeStory, setActiveStory] = useState<Story | null>(null);
|
||||
|
||||
// Fetch Epic/Story/Task from ProjectManagement API
|
||||
const { data: epics, isLoading: epicsLoading } = useEpics(projectId);
|
||||
const { data: stories, isLoading: storiesLoading } = useStories();
|
||||
const { data: tasks, isLoading: tasksLoading } = useTasks();
|
||||
// Fetch all stories for the project and epics for name mapping
|
||||
const { data: stories = [], isLoading: storiesLoading } = useProjectStories(projectId);
|
||||
const { data: epics = [], isLoading: epicsLoading } = useEpics(projectId);
|
||||
|
||||
const isLoading = epicsLoading || storiesLoading || tasksLoading;
|
||||
const isLoading = storiesLoading || epicsLoading;
|
||||
|
||||
// SignalR real-time updates
|
||||
const queryClient = useQueryClient();
|
||||
const { isConnected } = useSignalRConnection();
|
||||
const changeStatusMutation = useChangeStoryStatus();
|
||||
|
||||
// Subscribe to SignalR events for real-time updates (Simplified with useSignalREvents)
|
||||
// Subscribe to SignalR events for real-time updates
|
||||
useSignalREvents(
|
||||
{
|
||||
// Epic events (6 events)
|
||||
'EpicCreated': (event: any) => {
|
||||
console.log('[Kanban] Epic created:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
|
||||
},
|
||||
'EpicUpdated': (event: any) => {
|
||||
console.log('[Kanban] Epic updated:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
|
||||
},
|
||||
'EpicDeleted': (event: any) => {
|
||||
console.log('[Kanban] Epic deleted:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
|
||||
},
|
||||
|
||||
// Story events (3 events)
|
||||
'StoryCreated': (event: any) => {
|
||||
console.log('[Kanban] Story created:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['stories'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['project-stories', projectId] });
|
||||
},
|
||||
'StoryUpdated': (event: any) => {
|
||||
console.log('[Kanban] Story updated:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['stories'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['project-stories', projectId] });
|
||||
},
|
||||
'StoryDeleted': (event: any) => {
|
||||
console.log('[Kanban] Story deleted:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['stories'] });
|
||||
},
|
||||
|
||||
// Task events (4 events)
|
||||
'TaskCreated': (event: any) => {
|
||||
console.log('[Kanban] Task created:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
},
|
||||
'TaskUpdated': (event: any) => {
|
||||
console.log('[Kanban] Task updated:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
},
|
||||
'TaskDeleted': (event: any) => {
|
||||
console.log('[Kanban] Task deleted:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
},
|
||||
'TaskAssigned': (event: any) => {
|
||||
console.log('[Kanban] Task assigned:', event);
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['project-stories', projectId] });
|
||||
},
|
||||
},
|
||||
[projectId, queryClient]
|
||||
);
|
||||
|
||||
// Combine all work items into unified format
|
||||
const allWorkItems = useMemo(() => {
|
||||
const items: KanbanWorkItem[] = [
|
||||
...(epics || []).map((e) => ({
|
||||
...e,
|
||||
title: e.name, // Epic uses 'name', map to 'title' for unified interface
|
||||
type: 'Epic' as const,
|
||||
})),
|
||||
...(stories || []).map((s) => ({
|
||||
...s,
|
||||
type: 'Story' as const,
|
||||
})),
|
||||
...(tasks || []).map((t) => ({
|
||||
...t,
|
||||
type: 'Task' as const,
|
||||
})),
|
||||
];
|
||||
return items;
|
||||
}, [epics, stories, tasks]);
|
||||
// Create epic name mapping for displaying in story cards
|
||||
const epicNames = useMemo(() => {
|
||||
const nameMap: Record<string, string> = {};
|
||||
epics.forEach((epic) => {
|
||||
nameMap[epic.id] = epic.name;
|
||||
});
|
||||
return nameMap;
|
||||
}, [epics]);
|
||||
|
||||
// Group work items by status
|
||||
const itemsByStatus = useMemo(() => ({
|
||||
Backlog: allWorkItems.filter((i) => i.status === 'Backlog'),
|
||||
Todo: allWorkItems.filter((i) => i.status === 'Todo'),
|
||||
InProgress: allWorkItems.filter((i) => i.status === 'InProgress'),
|
||||
Done: allWorkItems.filter((i) => i.status === 'Done'),
|
||||
}), [allWorkItems]);
|
||||
// Group stories by status
|
||||
const storiesByStatus = useMemo(() => ({
|
||||
Backlog: stories.filter((s) => s.status === 'Backlog'),
|
||||
Todo: stories.filter((s) => s.status === 'Todo'),
|
||||
InProgress: stories.filter((s) => s.status === 'InProgress'),
|
||||
Done: stories.filter((s) => s.status === 'Done'),
|
||||
}), [stories]);
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
const item = allWorkItems.find((i) => i.id === event.active.id);
|
||||
setActiveItem(item || null);
|
||||
const story = stories.find((s) => s.id === event.active.id);
|
||||
setActiveStory(story || null);
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
setActiveItem(null);
|
||||
setActiveStory(null);
|
||||
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const newStatus = over.id as string;
|
||||
const item = allWorkItems.find((i) => i.id === active.id);
|
||||
const newStatus = over.id as WorkItemStatus;
|
||||
const story = stories.find((s) => s.id === active.id);
|
||||
|
||||
if (item && item.status !== newStatus) {
|
||||
// TODO: Implement status change mutation for Epic/Story/Task
|
||||
// For now, we'll skip the mutation as we need to implement these hooks
|
||||
console.log(`TODO: Change ${item.type} ${item.id} status to ${newStatus}`);
|
||||
if (story && story.status !== newStatus) {
|
||||
console.log(`[Kanban] Changing story ${story.id} status to ${newStatus}`);
|
||||
changeStatusMutation.mutate({ id: story.id, status: newStatus });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -183,12 +116,12 @@ export default function KanbanPage() {
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Kanban Board</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Drag and drop to update issue status
|
||||
Drag and drop to update story status
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Issue
|
||||
New Story
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -203,17 +136,23 @@ export default function KanbanPage() {
|
||||
key={column.id}
|
||||
id={column.id}
|
||||
title={column.title}
|
||||
issues={itemsByStatus[column.id as keyof typeof itemsByStatus] as any}
|
||||
stories={storiesByStatus[column.id as keyof typeof storiesByStatus]}
|
||||
epicNames={epicNames}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<DragOverlay>
|
||||
{activeItem && <IssueCard issue={activeItem as any} />}
|
||||
{activeStory && (
|
||||
<StoryCard
|
||||
story={activeStory}
|
||||
epicName={epicNames[activeStory.epicId]}
|
||||
/>
|
||||
)}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
||||
<CreateIssueDialog
|
||||
<CreateStoryDialog
|
||||
projectId={projectId}
|
||||
open={isCreateDialogOpen}
|
||||
onOpenChange={setIsCreateDialogOpen}
|
||||
|
||||
Reference in New Issue
Block a user