LinkDesk/frontend/docs/bulk-status-update-implementation.md

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

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.