7.1 KiB

Raw Blame History

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

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
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)
Validation
- Delete button disabled until reassignment is selected (when required)
- Prevents deletion without reassignment when tasks exist
- Shows loading state during deletion
Error Handling
- Handles "last status" error
- Handles "status not found" error
- Displays backend error messages
- Shows user-friendly toast notifications
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:

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

const isDeleteDialogOpen = ref(false)
const deletingStatus = ref<CustomTaskStatus | null>(null)
const deletingStatusTaskCount = ref(0)

New Methods

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

User clicks delete button on a custom status
Dialog shows simple confirmation message
User clicks "Delete Status"
Status is deleted immediately
Success toast appears
Status list refreshes

Scenario 2: Delete Status In Use

User clicks delete button on a custom status
Dialog shows warning with task count
Reassignment dropdown appears
User must select a status to reassign tasks to
Delete button is disabled until selection is made
User selects reassignment status
User clicks "Delete Status"
Status is deleted and tasks are reassigned
Success toast shows deletion and reassignment count
Status list refreshes

Scenario 3: Error Cases

Last Status: Backend returns 422 error, dialog shows error toast
Status Not Found: Backend returns 404 error, dialog shows error toast
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):

{
  "message": "Status deleted successfully",
  "all_statuses": {
    "statuses": [...],
    "system_statuses": [...],
    "default_status_id": "..."
  }
}

Error Response (422 Unprocessable Entity):

{
  "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

Bulk Delete: Delete multiple statuses at once
Undo Delete: Soft delete with restore capability
Usage Analytics: Show which tasks use the status before deletion
Confirmation Checkbox: "I understand this action cannot be undone"
Preview: Show task list that will be affected

Files Modified

frontend/src/services/customTaskStatus.ts
- Updated deleteStatus method signature
- Changed to use query parameters
frontend/src/components/settings/CustomTaskStatusManager.vue
- Added delete dialog state
- Implemented handleDelete method
- Integrated CustomTaskStatusDeleteDialog
frontend/src/components/settings/CustomTaskStatusDeleteDialog.vue (NEW)
- Complete delete confirmation dialog
- Task count display
- Reassignment dropdown
- Error handling
frontend/test-delete-custom-status.html (NEW)
- Test documentation
- Manual testing guide
frontend/docs/custom-task-status-delete-implementation.md (NEW)
- This documentation file

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

7.1 KiB Raw Blame History