kai/ColaFlow-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): Refactor Kanban board to focus on Story management

Browse Source 
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
2025-11-05 15:03:12 +01:00
parent 2a0394b5ab
commit 90e3d2416c
6 changed files with 493 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
components/features/stories/CreateStoryDialog.tsx Normal file
View File

@@ -0,0 +1,234 @@
'use client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useCreateStory } from '@/lib/hooks/use-stories';
import { useEpics } from '@/lib/hooks/use-epics';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { Loader2 } from 'lucide-react';
const createStorySchema = z.object({
epicId: z.string().min(1, 'Epic is required'),
title: z.string().min(1, 'Title is required'),
description: z.string().optional(),
priority: z.enum(['Low', 'Medium', 'High', 'Critical']),
estimatedHours: z.number().min(0).optional(),
});
interface CreateStoryDialogProps {
projectId: string;
open: boolean;
onOpenChange: (open: boolean) => void;
}
export function CreateStoryDialog({
projectId,
open,
onOpenChange,
}: CreateStoryDialogProps) {
const form = useForm({
resolver: zodResolver(createStorySchema),
defaultValues: {
epicId: '',
title: '',
description: '',
priority: 'Medium' as const,
estimatedHours: 0,
},
});
const { data: epics, isLoading: epicsLoading } = useEpics(projectId);
const createMutation = useCreateStory();
const onSubmit = (data: z.infer<typeof createStorySchema>) => {
createMutation.mutate(data, {
onSuccess: () => {
form.reset();
onOpenChange(false);
},
});
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Create New Story</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{/* Epic Selection */}
<FormField
control={form.control}
name="epicId"
render={({ field }) => (
<FormItem>
<FormLabel>Epic</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
disabled={epicsLoading}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select an epic..." />
</SelectTrigger>
</FormControl>
<SelectContent>
{epicsLoading ? (
<div className="flex items-center justify-center p-2">
<Loader2 className="h-4 w-4 animate-spin" />
</div>
) : epics && epics.length > 0 ? (
epics.map((epic) => (
<SelectItem key={epic.id} value={epic.id}>
{epic.name}
</SelectItem>
))
) : (
<div className="p-2 text-sm text-muted-foreground">
No epics available. Create an epic first.
</div>
)}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
{/* Title */}
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Title</FormLabel>
<FormControl>
<Input placeholder="Story title..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* Description */}
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Textarea
placeholder="Describe the story..."
rows={4}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* Priority and Estimated Hours */}
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="priority"
render={({ field }) => (
<FormItem>
<FormLabel>Priority</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Low">Low</SelectItem>
<SelectItem value="Medium">Medium</SelectItem>
<SelectItem value="High">High</SelectItem>
<SelectItem value="Critical">Critical</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="estimatedHours"
render={({ field }) => (
<FormItem>
<FormLabel>Estimated Hours</FormLabel>
<FormControl>
<Input
type="number"
min="0"
step="0.5"
placeholder="0"
{...field}
onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* Actions */}
<div className="flex justify-end gap-2">
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
>
Cancel
</Button>
<Button type="submit" disabled={createMutation.isPending}>
{createMutation.isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Creating...
</>
) : (
'Create Story'
)}
</Button>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
);
}