LinkDesk/frontend/docs/task-status-filter-custom-integration.md

Task Status Filter - Custom Status Integration

Overview

Updated the TaskStatusFilter and ShotTaskStatusFilter components to support custom task statuses alongside system statuses. The filters now dynamically load custom statuses from the backend and display them with their custom colors.

Implementation Date

December 7, 2025

Components Modified

1. TaskStatusFilter.vue (Asset Filter)

Location: frontend/src/components/asset/TaskStatusFilter.vue

Changes:

• Added projectId?: number prop to receive the current project ID
• Integrated customTaskStatusService to fetch custom statuses
• Added reactive state for customStatuses and systemStatuses
• Created allStatuses computed property that combines system and custom statuses
• Implemented loadStatuses() function to fetch statuses from API
• Added lifecycle hooks to load statuses on mount and when projectId changes
• Updated template to use combined status list with color indicators
• Maintained fallback to default system statuses when no projectId is provided

Key Features:

• Dynamically loads custom statuses for the current project
• Displays custom status colors using TaskStatusBadge component
• Graceful fallback to system statuses only
• Reactive updates when projectId changes

2. ShotTaskStatusFilter.vue (Shot Filter)

Location: frontend/src/components/shot/ShotTaskStatusFilter.vue

Changes:

• Added projectId?: number prop to receive the current project ID
• Integrated customTaskStatusService to fetch custom statuses
• Added reactive state for customStatuses and systemStatuses
• Created allStatuses computed property that combines system and custom statuses
• Implemented loadStatuses() function to fetch statuses from API
• Added lifecycle hooks to load statuses on mount and when projectId changes
• Updated template to use combined status list with color indicators
• Maintained fallback to default system statuses when no projectId is provided

Key Features:

• Dynamically loads custom statuses for the current project
• Displays custom status colors using TaskStatusBadge component
• Works with multiple task types (layout, animation, lighting, etc.)
• Graceful fallback to system statuses only
• Reactive updates when projectId changes

3. AssetBrowser.vue

Location: frontend/src/components/asset/AssetBrowser.vue

Changes:

• Updated TaskStatusFilter usage to pass projectId prop
• Ensures filter has access to project context for loading custom statuses

4. ShotBrowser.vue

Location: frontend/src/components/shot/ShotBrowser.vue

Changes:

• Updated ShotTaskStatusFilter usage to pass projectId prop
• Ensures filter has access to project context for loading custom statuses

Technical Details

Status Object Format

Both system and custom statuses are normalized to the following format:

{
  id: string,           // e.g., "not_started" or "custom_status_123"
  name: string,         // Display name
  color: string,        // Hex color code (empty for system statuses)
  is_system: boolean    // true for system statuses, false for custom
}

API Integration

The components use the customTaskStatusService.getAllStatuses(projectId) method which returns:

{
  statuses: CustomTaskStatus[],        // Custom statuses for the project
  system_statuses: SystemTaskStatus[], // System statuses
  default_status_id: string            // ID of the default status
}

Filter Value Format

Filter values follow the format: taskType:statusId

Examples:

• modeling:not_started - System status
• modeling:custom_status_123 - Custom status
• all - No filter (show all)

Loading Behavior

1. Component mounts → Load statuses if projectId is available
2. projectId changes → Reload statuses for new project
3. No projectId → Use default system statuses only
4. API error → Log error and continue with empty custom statuses

User Experience

Filter Dropdown Display

• System Statuses: Displayed first with default theme colors

  • Not Started
  • In Progress
  • Submitted
  • Approved
  • Retake

• Custom Statuses: Displayed after system statuses with custom colors

  • Each custom status shows its configured color
  • Color is displayed using the TaskStatusBadge component

Filtering Behavior

1. User opens filter dropdown
2. Sees all available statuses (system + custom) for each task type
3. Selects a status to filter by
4. Only assets/shots with tasks in that status are shown
5. Clear button (X) appears to reset filter
6. Clicking clear shows all items again

Requirements Satisfied

✅ Requirement 7.4: Custom statuses in filter options

• Modified frontend/src/components/asset/TaskStatusFilter.vue
• Modified frontend/src/components/shot/ShotTaskStatusFilter.vue
• Include custom statuses in filter options
• Show color indicators in filter dropdown
• Apply filters correctly with custom statuses

Testing

Manual Testing Steps

1. Test Asset Filter:

   • Navigate to project Assets tab
   • Switch to list view
   • Open Task Status Filter dropdown
   • Verify system and custom statuses appear
   • Verify custom colors are displayed
   • Select a custom status and verify filtering works

2. Test Shot Filter:

   • Navigate to project Shots tab
   • Switch to table view
   • Open Task Status Filter dropdown
   • Verify system and custom statuses appear for each task type
   • Verify custom colors are displayed
   • Select a custom status and verify filtering works

3. Test Dynamic Updates:

   • Create a new custom status in Project Settings
   • Return to Assets/Shots view
   • Open filter dropdown
   • Verify new status appears with correct color

4. Test Edge Cases:

   • Project with no custom statuses → Only system statuses shown
   • Project with many custom statuses → All displayed correctly
   • Switching between projects → Statuses update correctly

Test File

Created frontend/test-task-status-filter-custom.html with comprehensive test documentation.

Error Handling

• No projectId: Falls back to default system statuses
• API failure: Logs error and continues with empty custom statuses
• Invalid status data: Component handles gracefully with type safety

Performance Considerations

• Statuses are loaded once on mount and cached
• Statuses reload only when projectId changes
• No unnecessary API calls during filtering operations
• Efficient computed property for combining statuses

Backward Compatibility

• Components work without projectId (system statuses only)
• Existing projects without custom statuses continue to work
• Filter format remains compatible with backend API
• No breaking changes to parent components

Future Enhancements

Potential improvements for future iterations:

1. Caching: Cache custom statuses in Pinia store to avoid repeated API calls
2. Real-time Updates: Listen for custom status changes via WebSocket
3. Status Groups: Group custom statuses by category or workflow stage
4. Search: Add search functionality for projects with many custom statuses
5. Favorites: Allow users to mark frequently used statuses as favorites

Related Files

• frontend/src/services/customTaskStatus.ts - API service for custom statuses
• frontend/src/components/task/TaskStatusBadge.vue - Badge component with custom color support
• frontend/src/components/asset/AssetBrowser.vue - Parent component for asset filter
• frontend/src/components/shot/ShotBrowser.vue - Parent component for shot filter

Notes

• The implementation maintains consistency with the existing EditableTaskStatus components
• Custom status colors are applied using the same logic as TaskStatusBadge
• The filter components are now fully integrated with the custom task status system
• Both filters support the same status format for consistency across the application