235 lines
7.1 KiB
Markdown
235 lines
7.1 KiB
Markdown
# Custom Task Status Delete Implementation
|
|
|
|
## Overview
|
|
Implemented the delete functionality for custom task statuses with comprehensive confirmation dialogs, task reassignment support, and error handling.
|
|
|
|
## Components Created
|
|
|
|
### CustomTaskStatusDeleteDialog.vue
|
|
A specialized AlertDialog component for confirming custom task status deletion with the following features:
|
|
|
|
#### Features
|
|
1. **Task Count Display**
|
|
- Shows how many tasks are currently using the status
|
|
- Displays warning when status is in use
|
|
- Shows simple confirmation when status is unused
|
|
|
|
2. **Reassignment Dropdown**
|
|
- Only shown when status is in use
|
|
- Lists all available system statuses
|
|
- Lists all custom statuses except the one being deleted
|
|
- Shows color indicators for each status
|
|
- Formats status names (replaces underscores with spaces)
|
|
|
|
3. **Validation**
|
|
- Delete button disabled until reassignment is selected (when required)
|
|
- Prevents deletion without reassignment when tasks exist
|
|
- Shows loading state during deletion
|
|
|
|
4. **Error Handling**
|
|
- Handles "last status" error
|
|
- Handles "status not found" error
|
|
- Displays backend error messages
|
|
- Shows user-friendly toast notifications
|
|
|
|
5. **Success Feedback**
|
|
- Shows success message with status name
|
|
- Includes reassignment count in message
|
|
- Emits success event to parent
|
|
- Closes dialog automatically
|
|
|
|
## Service Updates
|
|
|
|
### customTaskStatus.ts
|
|
Updated the `deleteStatus` method to use query parameters instead of request body:
|
|
|
|
```typescript
|
|
async deleteStatus(
|
|
projectId: number,
|
|
statusId: string,
|
|
reassignToStatusId?: string
|
|
): Promise<CustomTaskStatusResponse>
|
|
```
|
|
|
|
**Changes:**
|
|
- Changed from `deleteData` object to `reassignToStatusId` string parameter
|
|
- Uses `params` in axios delete request (query parameters)
|
|
- Matches backend API contract: `?reassign_to_status_id=<status_id>`
|
|
|
|
## CustomTaskStatusManager Updates
|
|
|
|
### New State
|
|
```typescript
|
|
const isDeleteDialogOpen = ref(false)
|
|
const deletingStatus = ref<CustomTaskStatus | null>(null)
|
|
const deletingStatusTaskCount = ref(0)
|
|
```
|
|
|
|
### New Methods
|
|
```typescript
|
|
const handleDelete = (customStatus: CustomTaskStatus) => {
|
|
// Opens delete dialog with status and task count
|
|
}
|
|
|
|
const handleDeleteSuccess = async () => {
|
|
// Reloads statuses and emits updated event
|
|
}
|
|
```
|
|
|
|
### UI Changes
|
|
- Added delete button (trash icon) to each custom status row
|
|
- Delete button shows in red color
|
|
- Integrated CustomTaskStatusDeleteDialog component
|
|
|
|
## User Flow
|
|
|
|
### Scenario 1: Delete Unused Status
|
|
1. User clicks delete button on a custom status
|
|
2. Dialog shows simple confirmation message
|
|
3. User clicks "Delete Status"
|
|
4. Status is deleted immediately
|
|
5. Success toast appears
|
|
6. Status list refreshes
|
|
|
|
### Scenario 2: Delete Status In Use
|
|
1. User clicks delete button on a custom status
|
|
2. Dialog shows warning with task count
|
|
3. Reassignment dropdown appears
|
|
4. User must select a status to reassign tasks to
|
|
5. Delete button is disabled until selection is made
|
|
6. User selects reassignment status
|
|
7. User clicks "Delete Status"
|
|
8. Status is deleted and tasks are reassigned
|
|
9. Success toast shows deletion and reassignment count
|
|
10. Status list refreshes
|
|
|
|
### Scenario 3: Error Cases
|
|
1. **Last Status**: Backend returns 422 error, dialog shows error toast
|
|
2. **Status Not Found**: Backend returns 404 error, dialog shows error toast
|
|
3. **Network Error**: Dialog shows generic error toast
|
|
|
|
## API Integration
|
|
|
|
### DELETE Endpoint
|
|
```
|
|
DELETE /projects/{project_id}/task-statuses/{status_id}?reassign_to_status_id={status_id}
|
|
```
|
|
|
|
**Query Parameters:**
|
|
- `reassign_to_status_id` (optional): Status ID to reassign tasks to
|
|
|
|
**Response (200 OK):**
|
|
```json
|
|
{
|
|
"message": "Status deleted successfully",
|
|
"all_statuses": {
|
|
"statuses": [...],
|
|
"system_statuses": [...],
|
|
"default_status_id": "..."
|
|
}
|
|
}
|
|
```
|
|
|
|
**Error Response (422 Unprocessable Entity):**
|
|
```json
|
|
{
|
|
"detail": {
|
|
"error": "Cannot delete status 'X' because it is currently in use by N task(s)",
|
|
"status_id": "custom_abc123",
|
|
"status_name": "In Review",
|
|
"task_count": 5,
|
|
"task_ids": [1, 2, 3, 4, 5]
|
|
}
|
|
}
|
|
```
|
|
|
|
## Requirements Coverage
|
|
|
|
✅ **3.1**: Check if status is in use by any tasks
|
|
- Task count is passed to dialog
|
|
- Warning shown when tasks exist
|
|
|
|
✅ **3.2**: Show confirmation dialog with task count
|
|
- CustomTaskStatusDeleteDialog displays task count
|
|
- Different UI for used vs unused statuses
|
|
|
|
✅ **3.3**: If status in use, show reassignment dropdown
|
|
- Dropdown appears only when taskCount > 0
|
|
- Shows all available statuses (system + custom)
|
|
- Excludes the status being deleted
|
|
|
|
✅ **3.4**: Implement reassignment logic
|
|
- Reassignment status ID sent as query parameter
|
|
- Backend handles task updates
|
|
- Success message includes reassignment count
|
|
|
|
✅ **3.5**: Handle deletion success and errors
|
|
- Success toast with detailed message
|
|
- Error handling for all backend error cases
|
|
- User-friendly error messages
|
|
|
|
✅ **Update UI after deletion**
|
|
- Status list reloads after successful deletion
|
|
- Parent component receives 'updated' event
|
|
- Dialog closes automatically on success
|
|
|
|
## Testing Checklist
|
|
|
|
### Manual Testing
|
|
- [ ] Delete unused custom status
|
|
- [ ] Delete status with 1 task (singular message)
|
|
- [ ] Delete status with multiple tasks (plural message)
|
|
- [ ] Try to delete without selecting reassignment (should be disabled)
|
|
- [ ] Delete with reassignment to system status
|
|
- [ ] Delete with reassignment to custom status
|
|
- [ ] Try to delete last custom status (should fail)
|
|
- [ ] Delete default status (should auto-assign new default)
|
|
- [ ] Cancel deletion dialog
|
|
- [ ] Verify status list updates after deletion
|
|
- [ ] Verify tasks are reassigned correctly
|
|
|
|
### Edge Cases
|
|
- [ ] Network error during deletion
|
|
- [ ] Status deleted by another user (404 error)
|
|
- [ ] Last status protection
|
|
- [ ] Dialog state resets when closed
|
|
|
|
## Future Enhancements
|
|
|
|
1. **Bulk Delete**: Delete multiple statuses at once
|
|
2. **Undo Delete**: Soft delete with restore capability
|
|
3. **Usage Analytics**: Show which tasks use the status before deletion
|
|
4. **Confirmation Checkbox**: "I understand this action cannot be undone"
|
|
5. **Preview**: Show task list that will be affected
|
|
|
|
## Files Modified
|
|
|
|
1. `frontend/src/services/customTaskStatus.ts`
|
|
- Updated deleteStatus method signature
|
|
- Changed to use query parameters
|
|
|
|
2. `frontend/src/components/settings/CustomTaskStatusManager.vue`
|
|
- Added delete dialog state
|
|
- Implemented handleDelete method
|
|
- Integrated CustomTaskStatusDeleteDialog
|
|
|
|
3. `frontend/src/components/settings/CustomTaskStatusDeleteDialog.vue` (NEW)
|
|
- Complete delete confirmation dialog
|
|
- Task count display
|
|
- Reassignment dropdown
|
|
- Error handling
|
|
|
|
4. `frontend/test-delete-custom-status.html` (NEW)
|
|
- Test documentation
|
|
- Manual testing guide
|
|
|
|
5. `frontend/docs/custom-task-status-delete-implementation.md` (NEW)
|
|
- This documentation file
|
|
|
|
## Related Documentation
|
|
|
|
- Backend: `backend/docs/custom-task-status-delete-endpoint.md`
|
|
- Backend Tests: `backend/test_delete_custom_task_status.py`
|
|
- Requirements: `.kiro/specs/vfx-project-management/custom-task-status-requirements.md`
|
|
- Design: `.kiro/specs/vfx-project-management/custom-task-status-design.md`
|