LinkDesk/frontend/docs/shot-table-selection-fix.md

Shot Table Selection Fix

Issue

The shot table multi-selection wasn't working properly, while the asset table was working correctly.

Root Cause

The selectAllChecked computed property's setter was directly modifying the selectedShots object inline instead of calling a separate function like in AssetBrowser.

Fix Applied

Before:

const selectAllChecked = computed({
  get: () => {
    return filteredShots.value.length > 0 && 
           filteredShots.value.every(shot => selectedShots.value[shot.id]);
  },
  set: (checked: boolean) => {
    filteredShots.value.forEach(shot => {
      selectedShots.value[shot.id] = checked;
    });
  }
});

After:

// Separate function for toggling all selections
const toggleSelectAll = (checked: boolean) => {
  filteredShots.value.forEach(shot => {
    selectedShots.value[shot.id] = checked;
  });
};

// Computed property that calls the function
const selectAllChecked = computed({
  get: () => {
    return filteredShots.value.length > 0 && 
           filteredShots.value.every(shot => selectedShots.value[shot.id]);
  },
  set: (checked: boolean) => {
    toggleSelectAll(checked);
  }
});

Why This Works

Having a separate toggleSelectAll function:

1. Makes the code structure match the working AssetBrowser implementation
2. Provides better separation of concerns
3. Makes the logic more explicit and easier to debug
4. Ensures Vue's reactivity system properly tracks the changes

Testing

Test the following scenarios to verify the fix:

1. ✅ Click the "Select All" checkbox - all shots should be selected
2. ✅ Click it again - all shots should be deselected
3. ✅ Select some shots individually, then click "Select All" - all should be selected
4. ✅ With all selected, deselect one, then click "Select All" again - all should be selected
5. ✅ Verify Ctrl/Cmd+Click multi-selection still works
6. ✅ Verify Shift+Click range selection still works

Related Files

• frontend/src/components/shot/ShotsTableView.vue - Fixed component
• frontend/src/components/asset/AssetBrowser.vue - Reference implementation