Test: Bulk Status Update with Custom Statuses

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

Requirements:

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

Summary

Status: ✓ IMPLEMENTATION COMPLETE

All requirements have been implemented:

Next Steps: Manual testing in the application to verify functionality