283 lines
9.9 KiB
HTML
283 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Frame Columns Fix Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.issue {
|
|
background-color: #ffebee;
|
|
border-color: #f44336;
|
|
}
|
|
.fix {
|
|
background-color: #e8f5e8;
|
|
border-color: #4caf50;
|
|
}
|
|
.code {
|
|
background-color: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 10px 0;
|
|
}
|
|
.before-after {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.before, .after {
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
}
|
|
.before {
|
|
background-color: #ffebee;
|
|
border: 1px solid #f44336;
|
|
}
|
|
.after {
|
|
background-color: #e8f5e8;
|
|
border: 1px solid #4caf50;
|
|
}
|
|
.test-steps {
|
|
background-color: #e3f2fd;
|
|
border: 1px solid #2196f3;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 20px 0;
|
|
}
|
|
.test-steps ol {
|
|
margin: 10px 0;
|
|
padding-left: 20px;
|
|
}
|
|
.test-steps li {
|
|
margin: 5px 0;
|
|
}
|
|
.critical {
|
|
background-color: #fff3e0;
|
|
border: 1px solid #ff9800;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 20px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔧 Frame Columns & Sort Icons Fix</h1>
|
|
|
|
<div class="test-section issue">
|
|
<h2>❌ Issues Identified</h2>
|
|
<p><strong>Multiple Problems Found:</strong></p>
|
|
<ol>
|
|
<li><strong>Sort Icons Broken:</strong> getSortIcon function was corrupted by autofix - showing wrong icons</li>
|
|
<li><strong>Frame Range Sortable:</strong> Frame Range column should not be sortable (display only)</li>
|
|
<li><strong>Frame Count Sort Wrong:</strong> Frames column was sorting by frame_end instead of calculated frame count</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="critical">
|
|
<h2>🚨 Critical: getSortIcon Function Was Corrupted</h2>
|
|
<p>The autofix completely broke the sort icon logic:</p>
|
|
<div class="code">
|
|
❌ BROKEN (after autofix):
|
|
if (sortDirection === 'asc') {
|
|
return h(ArrowUp, { class: 'ml-2 h-4 w-4' }) // ✅ Correct
|
|
} else if (sortDirection === 'desc') {
|
|
return h(ArrowUp, { class: 'ml-2 h-4 w-4' }) // ❌ Wrong! Should be ArrowDown
|
|
} else {
|
|
return h(ArrowDown, { class: 'ml-2 h-4 w-4' }) // ❌ Wrong! Should be ArrowUpDown
|
|
}
|
|
</div>
|
|
<p>This made all sort icons show incorrectly!</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Technical Analysis</h2>
|
|
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h3>❌ Before (Multiple Issues)</h3>
|
|
<div class="code">
|
|
// 1. Broken sort icons
|
|
getSortIcon: ArrowUp for both asc AND desc
|
|
|
|
// 2. Frame Range sortable
|
|
accessorKey: 'frame_start'
|
|
onClick: () => column.toggleSorting(...)
|
|
|
|
// 3. Frame Count wrong sort
|
|
accessorKey: 'frame_end' // Sorts by end frame, not count
|
|
</div>
|
|
<p><strong>Problems:</strong></p>
|
|
<ul>
|
|
<li>Sort icons completely wrong</li>
|
|
<li>Frame Range should be display-only</li>
|
|
<li>Frame Count sorting by wrong value</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="after">
|
|
<h3>✅ After (All Fixed)</h3>
|
|
<div class="code">
|
|
// 1. Fixed sort icons
|
|
asc: ArrowUp, desc: ArrowDown, none: ArrowUpDown
|
|
|
|
// 2. Frame Range not sortable
|
|
header: 'Frame Range' // No button, no onClick
|
|
enableSorting: false
|
|
|
|
// 3. Frame Count sorts by calculated value
|
|
accessorFn: (row) => row.frame_end - row.frame_start + 1
|
|
</div>
|
|
<p><strong>Solutions:</strong></p>
|
|
<ul>
|
|
<li>Correct sort icons for all states</li>
|
|
<li>Frame Range is display-only</li>
|
|
<li>Frame Count sorts by actual count</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔧 Fix Details</h2>
|
|
|
|
<h3>1. Sort Icons Fixed</h3>
|
|
<div class="code">
|
|
const getSortIcon = (sortDirection: false | 'asc' | 'desc') => {
|
|
if (sortDirection === 'asc') {
|
|
return h(ArrowUp, { class: 'ml-2 h-4 w-4' }) // ↑ Ascending
|
|
} else if (sortDirection === 'desc') {
|
|
return h(ArrowDown, { class: 'ml-2 h-4 w-4' }) // ↓ Descending
|
|
} else {
|
|
return h(ArrowUpDown, { class: 'ml-2 h-4 w-4' }) // ↕ No sort
|
|
}
|
|
}
|
|
</div>
|
|
|
|
<h3>2. Frame Range Made Non-Sortable</h3>
|
|
<div class="code">
|
|
{
|
|
id: 'frameRange',
|
|
header: 'Frame Range', // Simple string, no button
|
|
enableSorting: false, // Explicitly disabled
|
|
cell: ({ row }) => {
|
|
const shot = row.original
|
|
return h('span', { class: 'text-sm' }, `${shot.frame_start}-${shot.frame_end}`)
|
|
},
|
|
}
|
|
</div>
|
|
|
|
<h3>3. Frame Count Sorting Fixed</h3>
|
|
<div class="code">
|
|
{
|
|
id: 'frames',
|
|
accessorFn: (row) => row.frame_end - row.frame_start + 1, // Sort by calculated count
|
|
header: ({ column }) => {
|
|
return h(Button, {
|
|
variant: 'ghost',
|
|
onClick: () => column.toggleSorting(column.getIsSorted() === 'desc'),
|
|
}, () => ['Frames', getSortIcon(column.getIsSorted())])
|
|
},
|
|
cell: ({ row }) => {
|
|
const frameCount = row.original.frame_end - row.original.frame_start + 1
|
|
return h('span', { class: 'text-sm font-medium' }, frameCount.toString())
|
|
},
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section fix">
|
|
<h2>✅ All Fixes Applied</h2>
|
|
<p>Updated <code>frontend/src/components/shot/columns.ts</code>:</p>
|
|
<ul>
|
|
<li>✅ <strong>Sort Icons:</strong> Fixed getSortIcon function - correct icons for all states</li>
|
|
<li>✅ <strong>Frame Range:</strong> Made non-sortable with enableSorting: false</li>
|
|
<li>✅ <strong>Frame Count:</strong> Now sorts by calculated frame count using accessorFn</li>
|
|
<li>✅ <strong>All Other Columns:</strong> Maintain correct sorting behavior</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-steps">
|
|
<h2>🧪 Testing Instructions</h2>
|
|
<p>To verify all fixes work correctly:</p>
|
|
<ol>
|
|
<li><strong>Navigate to Shot Table:</strong> Go to any project's shots page in table view</li>
|
|
<li><strong>Test Sort Icons:</strong> Click any sortable column header and verify:
|
|
<ul>
|
|
<li>No sort: ↕ (up-down arrow)</li>
|
|
<li>Ascending: ↑ (up arrow)</li>
|
|
<li>Descending: ↓ (down arrow)</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Test Frame Range:</strong> Verify "Frame Range" column header has no sort button/icon</li>
|
|
<li><strong>Test Frame Count Sort:</strong> Click "Frames" column and verify it sorts by frame count (120, 240, 360...) not by end frame numbers</li>
|
|
<li><strong>Test All Columns:</strong> Verify Shot Name, Episode, Status, Description all sort correctly</li>
|
|
<li><strong>Visual Verification:</strong> All sort icons should match the actual sort direction</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Expected Behavior</h2>
|
|
|
|
<h3>Sortable Columns (with icons):</h3>
|
|
<ul>
|
|
<li><strong>Shot Name:</strong> Alphabetical A→Z, Z→A</li>
|
|
<li><strong>Episode:</strong> By episode name alphabetically</li>
|
|
<li><strong>Frames:</strong> By frame count numerically (24, 48, 120...)</li>
|
|
<li><strong>Status:</strong> By status name alphabetically</li>
|
|
<li><strong>Description:</strong> Alphabetically</li>
|
|
<li><strong>Task Columns:</strong> By status name</li>
|
|
</ul>
|
|
|
|
<h3>Non-Sortable Columns (no icons):</h3>
|
|
<ul>
|
|
<li><strong>Select:</strong> Checkbox column</li>
|
|
<li><strong>Thumbnail:</strong> Image placeholder</li>
|
|
<li><strong>Frame Range:</strong> Display only (1001-1120)</li>
|
|
<li><strong>Actions:</strong> Dropdown menu</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📊 Frame Count Example</h2>
|
|
<p>Frame Count sorting should work like this:</p>
|
|
<div class="code">
|
|
Shot A: frames 1001-1024 → Count: 24 frames
|
|
Shot B: frames 2001-2120 → Count: 120 frames
|
|
Shot C: frames 3001-3048 → Count: 48 frames
|
|
|
|
Ascending sort by Frames: Shot A (24), Shot C (48), Shot B (120)
|
|
Descending sort by Frames: Shot B (120), Shot C (48), Shot A (24)
|
|
|
|
NOT sorting by end frame: 1024, 2120, 3048 ❌
|
|
BUT sorting by count: 24, 48, 120 ✅
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section fix">
|
|
<h2>✅ Fix Summary</h2>
|
|
<p><strong>Issues Fixed:</strong></p>
|
|
<ol>
|
|
<li><strong>Sort Icons:</strong> Restored correct icon logic (↑ asc, ↓ desc, ↕ none)</li>
|
|
<li><strong>Frame Range:</strong> Made non-sortable as requested</li>
|
|
<li><strong>Frame Count:</strong> Now sorts by calculated frame count, not end frame</li>
|
|
</ol>
|
|
<p><strong>Result:</strong> All column sorting now works correctly with proper visual feedback</p>
|
|
<p><strong>Status:</strong> Ready for testing</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |