Shot Column Visibility Fix

🔧 Problem Identified

The issue was that allColumns was defined as a static array that used props.allTaskTypes at component initialization time. Since task types are loaded asynchronously, the initial allTaskTypes was empty, and the static array never updated when the task types were loaded.

Root Cause

Timing Issue: Component renders before task types are loaded
Reactivity Issue: Static array doesn't react to prop changes
Async Loading: Task types loaded after component initialization

🛠️ Solution Applied

Changed allColumns from Static Array to Computed Property

// Before: Static array (non-reactive) const allColumns = [ { id: 'thumbnail', label: 'Thumbnail' }, { id: 'name', label: 'Shot Name' }, // ... other columns ...props.allTaskTypes.map(taskType => ({ id: taskType, label: taskType.charAt(0).toUpperCase() + taskType.slice(1) })) ]

// After: Computed property (reactive) const allColumns = computed(() => [ { id: 'thumbnail', label: 'Thumbnail' }, { id: 'name', label: 'Shot Name' }, // ... other columns ...props.allTaskTypes.map(taskType => ({ id: taskType, label: taskType.charAt(0).toUpperCase() + taskType.slice(1) })) ])

Updated hiddenColumnsCount Computed Property

// Before: Using static allColumns const hiddenColumnsCount = computed(() => { return allColumns.filter(col => props.columnVisibility[col.id] === false).length })

// After: Using computed allColumns.value const hiddenColumnsCount = computed(() => { return allColumns.value.filter(col => props.columnVisibility[col.id] === false).length })

🎯 Benefits of the Fix

Reactive Updates: Column list updates when task types are loaded
Custom Task Types: All custom task types now appear in column visibility control
Real-time Changes: Adding/removing custom task types updates columns immediately
Proper Initialization: Works correctly regardless of loading timing
Vue 3 Best Practices: Uses computed properties for reactive data

🔄 Data Flow (Fixed)

Component Initialization: ShotTableToolbar renders with empty allTaskTypes
Computed Property: allColumns computed returns basic columns only
Async Loading: ShotBrowser loads task types via API
Prop Update: allTaskTypes prop updates with loaded task types
Reactive Update: allColumns computed automatically recalculates
UI Update: Column visibility popover shows all columns including custom types

🧪 Testing Scenarios

Test Cases to Verify

Initial Load: Column visibility shows all standard columns
After Task Types Load: Custom task type columns appear in visibility control
Add Custom Task Type: New columns appear immediately in visibility control
Remove Custom Task Type: Columns are removed from visibility control
Column Toggle: All columns (standard + custom) can be toggled on/off

Expected Behavior

Column visibility popover shows all available columns
Custom task type columns appear with proper capitalization
Column visibility state is preserved correctly
Badge shows correct count of hidden columns

📁 Files Modified

frontend/src/components/shot/ShotTableToolbar.vue
├── Changed allColumns from static array to computed property
├── Updated hiddenColumnsCount to use allColumns.value
└── Maintained existing template structure (no changes needed)
        

✅ Shot Column Visibility Fix