# Test: Bulk Status Update with Custom Statuses

## Task 20: Frontend - Update bulk status update to support custom statuses

Requirements:

- 10.1: Modify TaskBulkActionsMenu.vue
- 10.2: Fetch custom statuses for current project
- 10.3: Include custom statuses in bulk update dropdown
- 10.4: Validate all selected tasks are from same project
- 10.5: Show color indicators in dropdown

## Implementation Changes

### 1. Component Props Updated

interface Props {
selectedTasks: Task[] // NEW: Added to validate project consistency
// ... other props
}

✓ Added selectedTasks prop to receive task data

### 2. Custom Status Fetching

const fetchStatuses = async () => {
const response = await customTaskStatusService.getAllStatuses(projectId)
systemStatuses.value = response.system_statuses
customStatuses.value = response.statuses
}

✓ Fetches both system and custom statuses from API

✓ Fetches when menu opens

✓ Refetches when project changes

### 3. Multi-Project Validation

const hasMultipleProjects = computed(() => {
const projectIds = new Set(props.selectedTasks.map(task => task.project_id))
return projectIds.size > 1
})

✓ Validates all selected tasks are from same project

✓ Disables status update when multiple projects detected

✓ Shows warning message to user

### 4. Status Display with Color Indicators

<div class="w-2 h-2 rounded-full" :style="{ backgroundColor: status.color }" />
<span>{{ status.name }}</span>

✓ Shows color indicator for each status

✓ Separates system and custom statuses with labels

✓ Uses status color from API response

### 5. Status Selection

const handleStatusSelected = (status: string) => {
emit('status-selected', status)
isOpen.value = false
}

✓ Emits status ID (string) instead of enum

✓ Supports both system and custom status IDs

### 6. Service Layer Updates

// task.ts
async bulkUpdateStatus(taskIds: number[], status: string): Promise<BulkActionResult>

✓ Updated to accept string status instead of enum

✓ Compatible with custom status IDs

## Testing Instructions

### Manual Testing Steps

1. Setup:
   - Create a project with custom task statuses
   - Create multiple tasks in the project
   - Navigate to the Tasks view
2. Test Single Project Selection:
   - Select multiple tasks from the same project
   - Right-click to open context menu
   - Click "Set Status" submenu
   - Verify system statuses appear with "System Statuses" label
   - Verify custom statuses appear with "Custom Statuses" label
   - Verify each status has a color indicator dot
   - Click a custom status
   - Verify tasks are updated successfully
3. Test Multi-Project Validation:
   - Select tasks from different projects (if possible)
   - Right-click to open context menu
   - Verify warning message: "Selected tasks are from different projects"
   - Verify "Set Status" button is disabled
   - Verify "Assign To" buttons are disabled
4. Test Status Loading:
   - Select tasks and open context menu
   - Verify "Loading statuses..." appears briefly
   - Verify statuses load correctly
5. Test Color Indicators:
   - Verify each status has a colored dot matching its configured color
   - Verify system statuses use their default colors
   - Verify custom statuses use their configured colors

## Requirements Coverage

### Requirement 10.1: Modify TaskBulkActionsMenu.vue

✓ PASS - Component modified with new props and status fetching logic

### Requirement 10.2: Fetch custom statuses for current project

✓ PASS - Fetches statuses using customTaskStatusService.getAllStatuses()

✓ PASS - Fetches when menu opens and when project changes

### Requirement 10.3: Include custom statuses in bulk update dropdown

✓ PASS - Displays both system and custom statuses

✓ PASS - Separates them with section labels

### Requirement 10.4: Validate all selected tasks are from same project

✓ PASS - Computes hasMultipleProjects from selectedTasks

✓ PASS - Disables actions when multiple projects detected

✓ PASS - Shows warning message to user

### Requirement 10.5: Show color indicators in dropdown

✓ PASS - Displays colored dot for each status

✓ PASS - Uses status.color from API response

## Files Modified

- `frontend/src/components/task/TaskBulkActionsMenu.vue` - Updated to fetch and display custom statuses
- `frontend/src/components/task/TaskBrowser.vue` - Pass selectedTasks prop to menu
- `frontend/src/services/task.ts` - Updated bulkUpdateStatus to accept string status

## Summary

Status: ✓ IMPLEMENTATION COMPLETE

All requirements have been implemented:

- ✓ Component modified to support custom statuses
- ✓ Custom statuses fetched from API for current project
- ✓ Both system and custom statuses displayed in dropdown
- ✓ Multi-project validation prevents cross-project updates
- ✓ Color indicators shown for all statuses

Next Steps: Manual testing in the application to verify functionality