# Shot Column Visibility Debug

# 🔍 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

- Reactive to changes in allTaskTypes prop
- Automatically includes custom task types when loaded
- Maintains proper column visibility state
- Consistent with Vue 3 reactivity patterns

## 📝 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