Shot Table - Independent Frames Column Added ✅
✅ Implementation Complete
The shot table now has a separate "Frames" column that displays only the frame count number, independent of the "Frame Range" column.
🔄 Changes Made
- Added New Frames Column - Displays frame count as a number
- Updated Frame Range Column - Now shows only "start-end" format
- Updated Column Visibility - Added "Frames" to column visibility options
- Removed Unused Import - Cleaned up TaskStatusBadge import
📊 Column Structure Comparison
❌ Before
Frame Range Column:
"1001-1120 (120 frames)"
Only one column showing both
range and count together
Issues:
- Frame count mixed with range
- No separate sortable frame count
- Harder to scan frame counts
✅ After
Frame Range Column:
"1001-1120"
Frames Column:
"120"
Two separate columns for
different information
Benefits:
- Clean separation of data
- Sortable frame count column
- Easy to scan frame counts
- Better data organization
🏗️ Technical Implementation
// Frame Range column (updated)
{
accessorKey: 'frame_start',
id: 'frameRange',
header: 'Frame Range',
cell: ({ row }) => {
const shot = row.original
return h('span', { class: 'text-sm' }, `${shot.frame_start}-${shot.frame_end}`)
},
}
// New Frames column
{
accessorKey: 'frame_end',
id: 'frames',
header: 'Frames',
cell: ({ row }) => {
const shot = row.original
const frameCount = shot.frame_end - shot.frame_start + 1
return h('span', { class: 'text-sm font-medium' }, frameCount.toString())
},
}
🎯 Column Features
- Frame Range Column - Shows "start-end" format (e.g., "1001-1120")
- Frames Column - Shows frame count as number (e.g., "120")
- Sortable - Both columns support sorting
- Toggleable - Both columns can be hidden/shown via column visibility
- Responsive - Proper text styling and formatting
- Accessible - Clear column headers and data presentation
📋 Column Visibility Options
The column visibility control now includes both columns:
Column Visibility Options:
├── Thumbnail
├── Shot Name
├── Episode
├── Frame Range ← Shows "start-end"
├── Frames ← Shows count number (NEW)
├── Status
├── Description
└── [Task Type Columns...]
💡 Use Cases
- Frame Range - Useful for understanding the specific frame numbers
- Frames - Useful for comparing shot lengths, sorting by duration
- Production Planning - Quick scanning of shot complexities by frame count
- Resource Allocation - Estimating work based on frame counts
- Data Analysis - Sorting and filtering shots by duration
📁 Files Modified
frontend/src/components/shot/columns.ts (UPDATED)
├── Added new "frames" column definition
├── Updated "frameRange" column to show only range
├── Removed unused TaskStatusBadge import
└── Improved frame count calculation
frontend/src/components/shot/ShotTableToolbar.vue (UPDATED)
├── Added "frames" to allColumns array
└── Updated column visibility options
🧪 Testing Checklist
To verify the new frames column works correctly:
- Navigate to a project's shots page
- Switch to table view mode
- Verify "Frame Range" column shows only "start-end" format
- Verify "Frames" column shows frame count as number
- Test sorting by both columns
- Test column visibility toggle for both columns
- Verify frame count calculation is correct (end - start + 1)
- Check responsive behavior on different screen sizes
📊 Example Data Display
Shot Name | Frame Range | Frames | Status
-------------|-------------|--------|----------
SH010_010 | 1001-1120 | 120 | In Progress
SH010_020 | 1121-1200 | 80 | Not Started
SH010_030 | 1201-1350 | 150 | Completed
SH020_010 | 2001-2024 | 24 | Approved
Users can now easily:
- Sort by frame count to see longest/shortest shots
- Quickly scan frame counts without parsing ranges
- Use both range and count information as needed
✅ Status: Complete
The shot table now has an independent "Frames" column that displays the frame count as a clean number, separate from the "Frame Range" column. This provides better data organization and improved usability for production teams.