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

feat(frontend): Add Sprint 4 new fields to Story Detail page sidebar

Browse Source 
Add three new cards to Story Detail sidebar to display Sprint 4 Story 3 fields:
- Story Points card with Target icon
- Tags card with Tag badges
- Acceptance Criteria card with CheckCircle2 icons

🤖 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 23:18:39 +01:00
parent 79f210d0ee
commit f2aa3b03b6
4 changed files with 270 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
components/projects/story-form.tsx
View File

@@ -1,9 +1,9 @@
'use client';
"use client";
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
@@ -12,51 +12,45 @@ import {
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { useCreateStory, useUpdateStory } from '@/lib/hooks/use-stories';
import { useEpics } from '@/lib/hooks/use-epics';
import type { Story, WorkItemPriority } from '@/types/project';
import { toast } from 'sonner';
import { Loader2 } from 'lucide-react';
import { useAuthStore } from '@/stores/authStore';
import { AcceptanceCriteriaEditor } from './acceptance-criteria-editor';
import { TagsInput } from './tags-input';
} from "@/components/ui/select";
import { useCreateStory, useUpdateStory } from "@/lib/hooks/use-stories";
import { useEpics } from "@/lib/hooks/use-epics";
import type { Story } from "@/types/project";
import { toast } from "sonner";
import { Loader2 } from "lucide-react";
import { useAuthStore } from "@/stores/authStore";
import { AcceptanceCriteriaEditor } from "./acceptance-criteria-editor";
import { TagsInput } from "./tags-input";
const storySchema = z.object({
epicId: z.string().min(1, 'Parent Epic is required'),
title: z
.string()
.min(1, 'Title is required')
.max(200, 'Title must be less than 200 characters'),
description: z
.string()
.max(2000, 'Description must be less than 2000 characters')
.optional(),
priority: z.enum(['Low', 'Medium', 'High', 'Critical']),
epicId: z.string().min(1, "Parent Epic is required"),
title: z.string().min(1, "Title is required").max(200, "Title must be less than 200 characters"),
description: z.string().max(2000, "Description must be less than 2000 characters").optional(),
priority: z.enum(["Low", "Medium", "High", "Critical"]),
estimatedHours: z
.number()
.min(0, 'Estimated hours must be positive')
.min(0, "Estimated hours must be positive")
.optional()
.or(z.literal('')),
.or(z.literal("")),
// Sprint 4 Story 3: New fields
acceptanceCriteria: z.array(z.string()).default([]),
acceptanceCriteria: z.array(z.string()).optional(),
assigneeId: z.string().optional(),
tags: z.array(z.string()).default([]),
tags: z.array(z.string()).optional(),
storyPoints: z
.number()
.min(0, 'Story points must be positive')
.max(100, 'Story points must be less than 100')
.min(0, "Story points must be positive")
.max(100, "Story points must be less than 100")
.optional()
.or(z.literal('')),
.or(z.literal("")),
});
type StoryFormValues = z.infer<typeof storySchema>;
@@ -69,13 +63,7 @@ interface StoryFormProps {
onCancel?: () => void;
}
export function StoryForm({
story,
epicId,
projectId,
onSuccess,
onCancel,
}: StoryFormProps) {
export function StoryForm({ story, epicId, projectId, onSuccess, onCancel }: StoryFormProps) {
const isEditing = !!story;
const user = useAuthStore((state) => state.user);
const createStory = useCreateStory();
@@ -87,16 +75,16 @@ export function StoryForm({
const form = useForm<StoryFormValues>({
resolver: zodResolver(storySchema),
defaultValues: {
epicId: story?.epicId || epicId || '',
title: story?.title || '',
description: story?.description || '',
priority: story?.priority || 'Medium',
estimatedHours: story?.estimatedHours || ('' as any),
epicId: story?.epicId || epicId || "",
title: story?.title || "",
description: story?.description || "",
priority: story?.priority || "Medium",
estimatedHours: story?.estimatedHours || ("" as const),
// Sprint 4 Story 3: New field defaults
acceptanceCriteria: story?.acceptanceCriteria || [],
assigneeId: story?.assigneeId || '',
assigneeId: story?.assigneeId || "",
tags: story?.tags || [],
storyPoints: story?.storyPoints || ('' as any),
storyPoints: story?.storyPoints || ("" as const),
},
});
@@ -110,23 +98,22 @@ export function StoryForm({
description: data.description,
priority: data.priority,
estimatedHours:
typeof data.estimatedHours === 'number' ? data.estimatedHours : undefined,
typeof data.estimatedHours === "number" ? data.estimatedHours : undefined,
// Sprint 4 Story 3: New fields
acceptanceCriteria: data.acceptanceCriteria,
assigneeId: data.assigneeId || undefined,
tags: data.tags,
storyPoints:
typeof data.storyPoints === 'number' ? data.storyPoints : undefined,
storyPoints: typeof data.storyPoints === "number" ? data.storyPoints : undefined,
},
});
toast.success('Story updated successfully');
toast.success("Story updated successfully");
} else {
if (!user?.id) {
toast.error('User not authenticated');
toast.error("User not authenticated");
return;
}
if (!projectId) {
toast.error('Project ID is required');
toast.error("Project ID is required");
return;
}
await createStory.mutateAsync({
@@ -135,21 +122,19 @@ export function StoryForm({
title: data.title,
description: data.description,
priority: data.priority,
estimatedHours:
typeof data.estimatedHours === 'number' ? data.estimatedHours : undefined,
estimatedHours: typeof data.estimatedHours === "number" ? data.estimatedHours : undefined,
createdBy: user.id,
// Sprint 4 Story 3: New fields
acceptanceCriteria: data.acceptanceCriteria,
assigneeId: data.assigneeId || undefined,
tags: data.tags,
storyPoints:
typeof data.storyPoints === 'number' ? data.storyPoints : undefined,
storyPoints: typeof data.storyPoints === "number" ? data.storyPoints : undefined,
});
toast.success('Story created successfully');
toast.success("Story created successfully");
}
onSuccess?.();
} catch (error) {
const message = error instanceof Error ? error.message : 'Operation failed';
const message = error instanceof Error ? error.message : "Operation failed";
toast.error(message);
}
}
@@ -177,11 +162,9 @@ export function StoryForm({
</FormControl>
<SelectContent>
{epicsLoading ? (
<div className="p-2 text-sm text-muted-foreground">Loading epics...</div>
<div className="text-muted-foreground p-2 text-sm">Loading epics...</div>
) : epics.length === 0 ? (
<div className="p-2 text-sm text-muted-foreground">
No epics available
</div>
<div className="text-muted-foreground p-2 text-sm">No epics available</div>
) : (
epics.map((epic) => (
<SelectItem key={epic.id} value={epic.id}>
@@ -192,7 +175,7 @@ export function StoryForm({
</SelectContent>
</Select>
<FormDescription>
{isEditing ? 'Parent epic cannot be changed' : 'Select the parent epic'}
{isEditing ? "Parent epic cannot be changed" : "Select the parent epic"}
</FormDescription>
<FormMessage />
</FormItem>
@@ -228,9 +211,7 @@ export function StoryForm({
{...field}
/>
</FormControl>
<FormDescription>
Optional detailed description (max 2000 characters)
</FormDescription>
<FormDescription>Optional detailed description (max 2000 characters)</FormDescription>
<FormMessage />
</FormItem>
)}
@@ -276,9 +257,9 @@ export function StoryForm({
{...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === '' ? '' : parseFloat(value));
field.onChange(value === "" ? "" : parseFloat(value));
}}
value={field.value === undefined ? '' : field.value}
value={field.value === undefined ? "" : field.value}
/>
</FormControl>
<FormDescription>Optional time estimate</FormDescription>
@@ -297,7 +278,7 @@ export function StoryForm({
<FormLabel>Acceptance Criteria</FormLabel>
<FormControl>
<AcceptanceCriteriaEditor
criteria={field.value}
criteria={field.value || []}
onChange={field.onChange}
disabled={isLoading}
/>
@@ -318,11 +299,7 @@ export function StoryForm({
render={({ field }) => (
<FormItem>
<FormLabel>Assignee</FormLabel>
<Select
onValueChange={field.onChange}
value={field.value}
disabled={isLoading}
>
<Select onValueChange={field.onChange} value={field.value} disabled={isLoading}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Unassigned" />
@@ -330,9 +307,7 @@ export function StoryForm({
</FormControl>
<SelectContent>
<SelectItem value="">Unassigned</SelectItem>
{user?.id && (
<SelectItem value={user.id}>{user.fullName || 'Me'}</SelectItem>
)}
{user?.id && <SelectItem value={user.id}>{user.fullName || "Me"}</SelectItem>}
</SelectContent>
</Select>
<FormDescription>Assign to team member</FormDescription>
@@ -357,9 +332,9 @@ export function StoryForm({
{...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === '' ? '' : parseInt(value));
field.onChange(value === "" ? "" : parseInt(value));
}}
value={field.value === undefined ? '' : field.value}
value={field.value === undefined ? "" : field.value}
disabled={isLoading}
/>
</FormControl>
@@ -379,7 +354,7 @@ export function StoryForm({
<FormLabel>Tags</FormLabel>
<FormControl>
<TagsInput
tags={field.value}
tags={field.value || []}
onChange={field.onChange}
disabled={isLoading}
placeholder="Add tags (press Enter)..."
@@ -395,18 +370,13 @@ export function StoryForm({
<div className="flex justify-end gap-3">
{onCancel && (
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={isLoading}
>
<Button type="button" variant="outline" onClick={onCancel} disabled={isLoading}>
Cancel
</Button>
)}
<Button type="submit" disabled={isLoading}>
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isEditing ? 'Update Story' : 'Create Story'}
{isEditing ? "Update Story" : "Create Story"}
</Button>
</div>
</form>