68 lines
2.1 KiB
Markdown
68 lines
2.1 KiB
Markdown
# 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:
|
|
```typescript
|
|
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:
|
|
```typescript
|
|
// 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
|