🔍 Shot Column Visibility Debug

Issue: Column Visibility Control in ShotTableToolbar is using direct popover but not showing all task type columns including custom task types.

📋 Current Implementation Analysis

ShotTableToolbar.vue Column Visibility

// Current allColumns computed property const allColumns = [ { id: 'thumbnail', label: 'Thumbnail' }, { id: 'name', label: 'Shot Name' }, { id: 'episode', label: 'Episode' }, { id: 'frameRange', label: 'Frame Range' }, { id: 'frames', label: 'Frames' }, { id: 'status', label: 'Status' }, { id: 'description', label: 'Description' }, ...props.allTaskTypes.map(taskType => ({ id: taskType, label: taskType.charAt(0).toUpperCase() + taskType.slice(1) })) ]

Data Flow

  1. ShotBrowser.vue: Loads task types via customTaskTypeService.getAllTaskTypes()
  2. Sets allTaskTypes: allTaskTypes.value = data.shot_task_types || []
  3. Passes to ShotTableToolbar: :all-task-types="allTaskTypes"
  4. ShotTableToolbar: Creates columns from props.allTaskTypes

🔧 Potential Issues

Issue Description Impact
Timing Issue Custom task types not loaded when component renders Missing columns in visibility control
Reactivity Issue allColumns not updating when allTaskTypes changes Static column list
API Response Issue shot_task_types not including custom types Only standard types shown
Prop Passing Issue allTaskTypes not properly passed to toolbar Empty or incomplete task types

🔍 Debug Steps

1. Check API Response

// In ShotBrowser.vue loadTaskTypes method, add logging: const loadTaskTypes = async () => { if (!props.projectId) return try { const data = await customTaskTypeService.getAllTaskTypes(props.projectId) console.log('🔍 API Response:', data) console.log('🔍 Shot Task Types:', data.shot_task_types) allTaskTypes.value = data.shot_task_types || [] console.log('🔍 Final allTaskTypes:', allTaskTypes.value) } catch (err) { console.error('Failed to load task types:', err) } }

2. Check Prop Passing

// In ShotTableToolbar.vue, add logging in setup: console.log('🔍 ShotTableToolbar allTaskTypes prop:', props.allTaskTypes) // Watch for changes watch(() => props.allTaskTypes, (newTypes) => { console.log('🔍 allTaskTypes changed:', newTypes) }, { immediate: true })

3. Check Column Generation

// In ShotTableToolbar.vue, make allColumns reactive: const allColumns = computed(() => { const columns = [ { id: 'thumbnail', label: 'Thumbnail' }, { id: 'name', label: 'Shot Name' }, { id: 'episode', label: 'Episode' }, { id: 'frameRange', label: 'Frame Range' }, { id: 'frames', label: 'Frames' }, { id: 'status', label: 'Status' }, { id: 'description', label: 'Description' }, ...props.allTaskTypes.map(taskType => ({ id: taskType, label: taskType.charAt(0).toUpperCase() + taskType.slice(1) })) ] console.log('🔍 Generated columns:', columns) return columns })

🛠️ Proposed Fix

The issue is likely that allColumns is not reactive to changes in props.allTaskTypes. It should be a computed property instead of a static array.

Updated ShotTableToolbar.vue

// Change from static array to computed property const allColumns = computed(() => [ { id: 'thumbnail', label: 'Thumbnail' }, { id: 'name', label: 'Shot Name' }, { id: 'episode', label: 'Episode' }, { id: 'frameRange', label: 'Frame Range' }, { id: 'frames', label: 'Frames' }, { id: 'status', label: 'Status' }, { id: 'description', label: 'Description' }, ...props.allTaskTypes.map(taskType => ({ id: taskType, label: taskType.charAt(0).toUpperCase() + taskType.slice(1) })) ])

Benefits

📝 Implementation Plan

  1. Update ShotTableToolbar.vue: Make allColumns a computed property
  2. Add Debug Logging: Verify task types are loaded correctly
  3. Test Column Visibility: Ensure all task types appear in popover
  4. Verify Reactivity: Check that adding custom task types updates columns