127 lines
4.3 KiB
Markdown
127 lines
4.3 KiB
Markdown
# Bulk Status Update Implementation
|
|
|
|
## Overview
|
|
Implemented the bulk status update action for the TaskBrowser component, allowing users to update the status of multiple selected tasks simultaneously through a context menu.
|
|
|
|
## Implementation Details
|
|
|
|
### Frontend Changes
|
|
|
|
#### TaskBrowser.vue
|
|
Added the `handleBulkStatusUpdate` method that:
|
|
1. **Extracts selected task IDs** from the selection state
|
|
2. **Shows loading state** during the operation by setting `isLoading.value = true`
|
|
3. **Calls the service method** `taskService.bulkUpdateStatus(taskIds, status)`
|
|
4. **Displays success toast** with the count of updated tasks
|
|
5. **Handles errors** and displays error toast with appropriate message
|
|
6. **Refreshes task list** after successful update by calling `fetchTasks()`
|
|
7. **Closes context menu** and **clears selection** after completion
|
|
|
|
#### Key Features
|
|
- **Atomic updates**: All tasks are updated together or none are updated (handled by backend)
|
|
- **Loading state**: Prevents duplicate operations during processing
|
|
- **User feedback**: Clear success/error messages with task counts
|
|
- **Automatic refresh**: Task list updates to reflect changes
|
|
- **Clean UI**: Context menu closes and selection clears after action
|
|
|
|
### Code Structure
|
|
|
|
```typescript
|
|
const handleBulkStatusUpdate = async (status: TaskStatus) => {
|
|
try {
|
|
// Extract selected task IDs
|
|
const taskIds = selectedTasks.value.map(task => task.id)
|
|
|
|
if (taskIds.length === 0) {
|
|
return
|
|
}
|
|
|
|
// Show loading state during operation
|
|
isLoading.value = true
|
|
|
|
// Call bulk update service
|
|
const result = await taskService.bulkUpdateStatus(taskIds, status)
|
|
|
|
// Display success toast with count of updated tasks
|
|
toast({
|
|
title: 'Success',
|
|
description: `${result.success_count} ${result.success_count === 1 ? 'task' : 'tasks'} updated`,
|
|
})
|
|
|
|
// Refresh task list after successful update
|
|
await fetchTasks()
|
|
|
|
// Close context menu and clear selection after completion
|
|
closeContextMenu()
|
|
rowSelection.value = {}
|
|
} catch (error) {
|
|
// Handle errors and display error toast
|
|
console.error('Failed to update task status:', error)
|
|
toast({
|
|
title: 'Error',
|
|
description: 'Failed to update tasks. Please try again.',
|
|
variant: 'destructive',
|
|
})
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
```
|
|
|
|
### Integration
|
|
- Connected to `TaskBulkActionsMenu` via `@status-selected` event
|
|
- Uses existing `taskService.bulkUpdateStatus` method (already implemented in task 2)
|
|
- Leverages existing selection state from `rowSelection` ref
|
|
- Uses existing toast notification system
|
|
|
|
## Requirements Satisfied
|
|
|
|
✅ **Requirement 4.2**: Update all selected tasks to chosen status
|
|
✅ **Requirement 4.3**: Display success notification with count
|
|
✅ **Requirement 4.4**: Display error notification on failure
|
|
✅ **Requirement 4.5**: Refresh task list after update
|
|
✅ **Requirement 6.1**: Close context menu after action
|
|
✅ **Requirement 6.3**: Clear selections after action
|
|
|
|
## Testing
|
|
|
|
### Manual Testing
|
|
A test HTML file was created at `frontend/test-bulk-status-update.html` that allows:
|
|
1. Login as admin
|
|
2. Fetch tasks from a project
|
|
3. Select multiple tasks by clicking
|
|
4. Update status of selected tasks
|
|
5. Verify the update was successful
|
|
|
|
### Backend Testing
|
|
Existing test file at `backend/test_bulk_actions.py` verifies:
|
|
- Bulk status updates work correctly
|
|
- Atomicity is maintained (all or nothing)
|
|
- Error handling for invalid task IDs
|
|
- Permission checks
|
|
|
|
## User Flow
|
|
|
|
1. User selects multiple tasks using checkboxes
|
|
2. User right-clicks on a selected task
|
|
3. Context menu appears with "Set Status" option
|
|
4. User hovers over "Set Status" to see status submenu
|
|
5. User clicks desired status (e.g., "In Progress")
|
|
6. Loading state activates
|
|
7. Backend updates all tasks atomically
|
|
8. Success toast appears: "X tasks updated"
|
|
9. Task list refreshes to show new statuses
|
|
10. Context menu closes and selection clears
|
|
|
|
## Error Handling
|
|
|
|
- **No tasks selected**: Method returns early without action
|
|
- **Network failure**: Error toast displayed, original state maintained
|
|
- **Partial failure**: Backend handles atomically (all or nothing)
|
|
- **Permission denied**: Error toast with appropriate message
|
|
- **Loading state**: Prevents duplicate operations
|
|
|
|
## Next Steps
|
|
|
|
Task 10 will implement the bulk assignment action using a similar pattern.
|