PROJECT-CONTORL/openspec/changes/archive/2026-01-05-add-gantt-view/tasks.md

Tasks: Add Gantt View

Backend Tasks

1. Add start_date to Task model

• Add start_date column to Task model
• Create Alembic migration
• Update TaskCreate/TaskUpdate schemas to include start_date
• Update TaskResponse schema
• 驗證: Migration 成功，API 可設定 start_date

2. Create TaskDependency model

• Create backend/app/models/task_dependency.py
• Define predecessor_id, successor_id, dependency_type, lag_days
• Update backend/app/models/__init__.py
• Create Alembic migration
• 驗證: Migration 成功

3. Implement dependency CRUD API

• Create backend/app/api/task_dependencies/router.py
• Implement POST /api/tasks/{task_id}/dependencies - 新增依賴
• Implement GET /api/tasks/{task_id}/dependencies - 取得依賴
• Implement DELETE /api/task-dependencies/{dependency_id} - 刪除依賴
• Add circular dependency detection
• Register router in main.py
• 驗證: 依賴關係 CRUD 可正常操作，循環依賴被拒絕

4. Add date validation

• Validate start_date <= due_date
• Validate dependency constraints on date change
• Add validation tests
• 驗證: 不合理日期被拒絕

5. Add backend tests

• Test TaskDependency CRUD
• Test circular dependency detection
• Test date validation
• 驗證: 所有測試通過

Frontend Tasks

6. Install and configure Gantt library

• Install Frappe Gantt (or chosen library)
• Create wrapper component for React integration
• Configure styling to match application theme
• 驗證: Gantt 元件可正常渲染

7. Create GanttChart component

• Create frontend/src/components/GanttChart.tsx
• Load tasks with start_date and due_date
• Display tasks as horizontal bars on timeline
• Show task title, assignee, progress
• Support zoom levels (day, week, month)
• 驗證: 任務正確顯示在時間軸上

8. Implement drag-to-edit dates

• Handle bar drag to move task dates
• Handle bar resize to change duration
• Call API to update task dates
• Show optimistic update, rollback on error
• 驗證: 拖拉調整日期可正確更新

9. Implement dependency visualization

• Add dependency arrows between tasks
• Create dependency API service
• Implement add/remove dependency UI (right-click or toolbar)
• Validate and show error for circular dependencies
• 驗證: 依賴關係正確顯示和編輯

10. Integrate Gantt view into Tasks page

• Add "Gantt" option to view toggle
• Store view preference in localStorage
• Handle view switching
• 驗證: 可在 List/Kanban/Gantt 之間切換

Task Dependencies

[1] start_date 欄位
      ↓
[2] TaskDependency Model → [3] Dependency API → [4] Date Validation → [5] Tests
                                    ↓
[6] Gantt Library Setup → [7] GanttChart Component
                                    ↓
                          [8] Drag Edit → [9] Dependency UI
                                    ↓
                          [10] View Integration

• Tasks 1-5 (Backend) 可平行於 Tasks 6-10 (Frontend) 開發
• Task 7 需要 Task 1 完成（需要 start_date 欄位）
• Task 9 需要 Task 3 完成（需要依賴 API）