# 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`
