219 lines
8.4 KiB
HTML
219 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Episode Sorting 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;
|
|
}
|
|
.example {
|
|
background-color: #fff3e0;
|
|
border: 1px solid #ff9800;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 20px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔧 Episode Sorting Fix</h1>
|
|
|
|
<div class="test-section issue">
|
|
<h2>❌ Issue Identified</h2>
|
|
<p><strong>Problem:</strong> Episode column sorting was not working correctly - it was sorting by episode ID instead of episode name.</p>
|
|
<p><strong>Root Cause:</strong> The column was using <code>accessorKey: 'episode_id'</code> which sorts numerically by ID, but displays episode names in the cell.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Technical Analysis</h2>
|
|
<p>The issue was a mismatch between what's displayed and what's sorted:</p>
|
|
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h3>❌ Before (Broken)</h3>
|
|
<div class="code">
|
|
accessorKey: 'episode_id'
|
|
// Sorts by: 1, 2, 3, 4...
|
|
// Displays: "Episode A", "Episode B", "Episode C"...
|
|
</div>
|
|
<p><strong>Problem:</strong></p>
|
|
<ul>
|
|
<li>Sorting by numeric ID (1, 2, 3)</li>
|
|
<li>Displaying episode names ("Episode A", "Episode B")</li>
|
|
<li>Sort order doesn't match visual order</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="after">
|
|
<h3>✅ After (Fixed)</h3>
|
|
<div class="code">
|
|
accessorFn: (row) => {
|
|
const episode = meta.episodes.find((e) => e.id === row.episode_id)
|
|
return episode ? episode.name : `Episode ${row.episode_id}`
|
|
}
|
|
// Sorts by: "Episode A", "Episode B", "Episode C"...
|
|
// Displays: "Episode A", "Episode B", "Episode C"...
|
|
</div>
|
|
<p><strong>Solution:</strong></p>
|
|
<ul>
|
|
<li>Using <code>accessorFn</code> to extract episode name</li>
|
|
<li>Sorting alphabetically by episode name</li>
|
|
<li>Sort order matches visual display</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h2>📊 Example Scenario</h2>
|
|
<p>Consider shots from these episodes:</p>
|
|
<div class="code">
|
|
Episodes:
|
|
- ID: 1, Name: "Episode C - The Final Battle"
|
|
- ID: 2, Name: "Episode A - The Beginning"
|
|
- ID: 3, Name: "Episode B - The Journey"
|
|
|
|
Shots:
|
|
- Shot_001 (Episode ID: 1) → "Episode C - The Final Battle"
|
|
- Shot_002 (Episode ID: 2) → "Episode A - The Beginning"
|
|
- Shot_003 (Episode ID: 3) → "Episode B - The Journey"
|
|
</div>
|
|
|
|
<p><strong>Before Fix (sorting by ID):</strong> Shot_001, Shot_002, Shot_003</p>
|
|
<p><strong>After Fix (sorting by name):</strong> Shot_002, Shot_003, Shot_001</p>
|
|
<p>Now the visual order matches alphabetical episode names!</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔧 TanStack Table accessorFn</h2>
|
|
<p>The fix uses TanStack Table's <code>accessorFn</code> instead of <code>accessorKey</code>:</p>
|
|
<div class="code">
|
|
// accessorKey - uses a simple property path
|
|
accessorKey: 'episode_id' // Gets row.episode_id
|
|
|
|
// accessorFn - uses a custom function to extract the sort value
|
|
accessorFn: (row) => {
|
|
const episode = meta.episodes.find((e) => e.id === row.episode_id)
|
|
return episode ? episode.name : `Episode ${row.episode_id}`
|
|
}
|
|
</div>
|
|
<p>This allows us to sort by the computed episode name while still accessing the episode_id from the data.</p>
|
|
</div>
|
|
|
|
<div class="test-section fix">
|
|
<h2>✅ Fix Applied</h2>
|
|
<p>Updated <code>frontend/src/components/shot/columns.ts</code> - Episode column:</p>
|
|
<ul>
|
|
<li>✅ Replaced <code>accessorKey: 'episode_id'</code> with <code>accessorFn</code></li>
|
|
<li>✅ Now sorts by episode name instead of episode ID</li>
|
|
<li>✅ Maintains same visual display</li>
|
|
<li>✅ Preserves all existing functionality</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-steps">
|
|
<h2>🧪 Testing Instructions</h2>
|
|
<p>To verify the episode sorting fix works correctly:</p>
|
|
<ol>
|
|
<li><strong>Navigate to Shot Table:</strong> Go to any project's shots page with multiple episodes</li>
|
|
<li><strong>Check Episode Names:</strong> Ensure you have shots from episodes with different names (not just "Episode 1", "Episode 2")</li>
|
|
<li><strong>Test Episode Sort:</strong> Click on the "Episode" column header</li>
|
|
<li><strong>Verify Ascending:</strong> First click should sort episodes alphabetically A→Z by episode name</li>
|
|
<li><strong>Verify Descending:</strong> Second click should sort episodes reverse alphabetically Z→A by episode name</li>
|
|
<li><strong>Check Visual Order:</strong> The displayed episode names should be in alphabetical order, not numeric ID order</li>
|
|
<li><strong>Test with Mixed Names:</strong> Works best with episodes like "Episode A - Intro", "Episode C - Finale", "Episode B - Middle"</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Expected Behavior</h2>
|
|
<p>After the fix, clicking the Episode column header should:</p>
|
|
<div class="code">
|
|
1. No Sort (↕) → Original data order
|
|
2. Ascending (↑) → Episodes sorted A-Z by name: "Episode A", "Episode B", "Episode C"
|
|
3. Descending (↓) → Episodes sorted Z-A by name: "Episode C", "Episode B", "Episode A"
|
|
4. Back to No Sort (↕) → Original data order
|
|
</div>
|
|
<p><strong>Note:</strong> The sort is now based on episode names, not episode IDs, so the visual order will match the alphabetical order of episode names.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔄 Related Improvements</h2>
|
|
<p>This fix also ensures:</p>
|
|
<ul>
|
|
<li><strong>Consistency:</strong> Sort behavior matches what users see</li>
|
|
<li><strong>Usability:</strong> Users can sort episodes alphabetically by name</li>
|
|
<li><strong>Flexibility:</strong> Works with any episode naming convention</li>
|
|
<li><strong>Performance:</strong> Efficient lookup using episode metadata</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section fix">
|
|
<h2>✅ Fix Summary</h2>
|
|
<p><strong>Changed:</strong> <code>accessorKey: 'episode_id'</code> → <code>accessorFn: (row) => episode.name</code></p>
|
|
<p><strong>Result:</strong> Episode column now sorts by episode name instead of episode ID</p>
|
|
<p><strong>Impact:</strong> Episode sorting now works as expected and matches visual display</p>
|
|
<p><strong>Status:</strong> Ready for testing</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |