feat(frontend): Implement Epic/Story/Task Management UI (Story 2)
Complete implementation of Sprint 1 Story 2 with full CRUD operations for Epic/Story/Task entities including forms, hierarchy visualization, and breadcrumb navigation. Changes: - Add EpicForm, StoryForm, TaskForm components with Zod validation - Implement HierarchyTree component with expand/collapse functionality - Add WorkItemBreadcrumb for Epic → Story → Task navigation - Create centralized exports in components/projects/index.ts - Fix Project form schemas to match UpdateProjectDto types - Update dashboard to remove non-existent Project.status field API Client & Hooks (already completed): - epicsApi, storiesApi, tasksApi with full CRUD operations - React Query hooks with optimistic updates and invalidation - Error handling and JWT authentication integration Technical Implementation: - TypeScript type safety throughout - Zod schema validation for all forms - React Query optimistic updates - Hierarchical data loading (lazy loading on expand) - Responsive UI with Tailwind CSS - Loading states and error handling Story Points: 8 SP Estimated Hours: 16h Status: Completed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -31,9 +31,15 @@ const updateProjectSchema = z.object({
|
||||
.string()
|
||||
.min(1, 'Project name is required')
|
||||
.max(200, 'Project name cannot exceed 200 characters'),
|
||||
key: z
|
||||
.string()
|
||||
.min(2, 'Project key must be at least 2 characters')
|
||||
.max(10, 'Project key cannot exceed 10 characters')
|
||||
.regex(/^[A-Z]+$/, 'Project key must contain only uppercase letters'),
|
||||
description: z
|
||||
.string()
|
||||
.max(2000, 'Description cannot exceed 2000 characters'),
|
||||
.max(2000, 'Description cannot exceed 2000 characters')
|
||||
.optional(),
|
||||
});
|
||||
|
||||
type UpdateProjectFormData = z.infer<typeof updateProjectSchema>;
|
||||
@@ -55,6 +61,7 @@ export function EditProjectDialog({
|
||||
resolver: zodResolver(updateProjectSchema),
|
||||
defaultValues: {
|
||||
name: project.name,
|
||||
key: project.key,
|
||||
description: project.description,
|
||||
},
|
||||
});
|
||||
@@ -99,6 +106,29 @@ export function EditProjectDialog({
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="key"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="MAP"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
field.onChange(e.target.value.toUpperCase());
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
A unique identifier for the project (2-10 uppercase letters).
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
|
||||
Reference in New Issue
Block a user