98 lines
4.0 KiB
Markdown
98 lines
4.0 KiB
Markdown
# Task 18: EditableTaskStatus Custom Status Support Implementation
|
|
|
|
## Overview
|
|
Updated all EditableTaskStatus components (task, shot, and asset) to support custom task statuses with color indicators.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Task EditableTaskStatus Component (`frontend/src/components/task/EditableTaskStatus.vue`)
|
|
- Added `projectId` prop to fetch custom statuses
|
|
- Fetches both system and custom statuses from the API
|
|
- Displays color indicators next to each status option
|
|
- Supports both TaskStatus enum and custom status strings
|
|
- Uses TaskStatusBadge component with custom color support
|
|
|
|
### 2. Shot EditableTaskStatus Component (`frontend/src/components/shot/EditableTaskStatus.vue`)
|
|
- Added `projectId` prop to fetch custom statuses
|
|
- Fetches both system and custom statuses from the API
|
|
- Displays color indicators next to each status option
|
|
- Supports both TaskStatus enum and custom status strings
|
|
- Updated to use task TaskStatusBadge for custom color support
|
|
|
|
### 3. Asset EditableTaskStatus Component (`frontend/src/components/asset/EditableTaskStatus.vue`)
|
|
- Added `projectId` prop to fetch custom statuses
|
|
- Fetches both system and custom statuses from the API
|
|
- Displays color indicators next to each status option
|
|
- Supports both TaskStatus enum and custom status strings
|
|
- Updated to use task TaskStatusBadge for custom color support
|
|
|
|
### 4. Task Columns (`frontend/src/components/task/columns.ts`)
|
|
- Updated to pass `projectId` to EditableTaskStatus component
|
|
- Task object already contains `project_id` field
|
|
|
|
### 5. Shot Columns (`frontend/src/components/shot/columns.ts`)
|
|
- Updated `ShotColumnMeta` interface to include `projectId`
|
|
- Updated column creation to pass `projectId` to EditableTaskStatus component
|
|
|
|
### 6. Shot Browser (`frontend/src/components/shot/ShotBrowser.vue`)
|
|
- Updated `shotColumns` computed to include `projectId` in meta
|
|
|
|
### 7. Asset Browser (`frontend/src/components/asset/AssetBrowser.vue`)
|
|
- Updated all EditableTaskStatus usages to pass `projectId` prop
|
|
- Updated `handleTaskStatusUpdate` to accept string instead of TaskStatus enum
|
|
|
|
## Features
|
|
|
|
### Custom Status Display
|
|
- All three EditableTaskStatus components now fetch and display custom statuses
|
|
- Custom statuses are shown alongside system statuses in the dropdown
|
|
- Each status option shows a color indicator (small colored circle) next to the badge
|
|
|
|
### Status Object Support
|
|
- Components now support both string status IDs and status objects
|
|
- Status objects include: `id`, `name`, `color`, and `is_system` properties
|
|
- TaskStatusBadge component handles custom colors automatically
|
|
|
|
### Loading States
|
|
- Shows loading indicator while fetching custom statuses
|
|
- Disables dropdown during status updates and status loading
|
|
|
|
### Error Handling
|
|
- Gracefully handles API errors when fetching statuses
|
|
- Reverts to original status if update fails
|
|
- Logs errors to console for debugging
|
|
|
|
## API Integration
|
|
|
|
### Endpoints Used
|
|
- `GET /projects/{projectId}/task-statuses` - Fetches all statuses (system + custom)
|
|
- `PUT /tasks/{taskId}/status` - Updates task status
|
|
|
|
### Response Format
|
|
```typescript
|
|
{
|
|
statuses: CustomTaskStatus[] // Custom statuses
|
|
system_statuses: SystemTaskStatus[] // System statuses
|
|
default_status_id: string // Default status ID
|
|
}
|
|
```
|
|
|
|
## Type Safety
|
|
- All components properly typed with TypeScript
|
|
- StatusOption interface for unified status representation
|
|
- Proper type conversions between TaskStatus enum and string
|
|
|
|
## Requirements Validated
|
|
- ✅ 7.1: Fetch custom statuses for current project
|
|
- ✅ 7.2: Display both system and custom statuses in dropdown
|
|
- ✅ 7.3: Show color indicator next to each status option
|
|
- ✅ 7.4: Update task status via API
|
|
|
|
## Testing Recommendations
|
|
1. Create a project with custom statuses
|
|
2. Verify custom statuses appear in all three contexts (tasks, shots, assets)
|
|
3. Verify color indicators display correctly
|
|
4. Verify status updates work with both system and custom statuses
|
|
5. Test with projects that have no custom statuses
|
|
6. Test loading states and error handling
|