178 lines
7.0 KiB
HTML
178 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shot Table Sort Direction 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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔧 Shot Table Sort Direction Fix</h1>
|
|
|
|
<div class="test-section issue">
|
|
<h2>❌ Issue Identified</h2>
|
|
<p><strong>Problem:</strong> Shot table header sorting direction only goes down (descending) and never goes up (ascending).</p>
|
|
<p><strong>Root Cause:</strong> Incorrect logic in <code>toggleSorting</code> parameter in <code>frontend/src/components/shot/columns.ts</code></p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Technical Analysis</h2>
|
|
<p>The issue was in the TanStack Table <code>toggleSorting</code> method call:</p>
|
|
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h3>❌ Before (Broken)</h3>
|
|
<div class="code">
|
|
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
|
|
</div>
|
|
<p><strong>Logic:</strong></p>
|
|
<ul>
|
|
<li>When currently ascending → passes <code>true</code> → forces descending</li>
|
|
<li>When currently descending → passes <code>false</code> → should go ascending but doesn't work properly</li>
|
|
<li>When no sort → passes <code>false</code> → goes ascending (this worked)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="after">
|
|
<h3>✅ After (Fixed)</h3>
|
|
<div class="code">
|
|
onClick: () => column.toggleSorting(column.getIsSorted() === 'desc')
|
|
</div>
|
|
<p><strong>Logic:</strong></p>
|
|
<ul>
|
|
<li>When currently ascending → passes <code>false</code> → toggles to descending</li>
|
|
<li>When currently descending → passes <code>true</code> → toggles to ascending</li>
|
|
<li>When no sort → passes <code>false</code> → goes ascending</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📝 TanStack Table toggleSorting Method</h2>
|
|
<p>According to TanStack Table documentation:</p>
|
|
<div class="code">
|
|
toggleSorting(desc?: boolean)
|
|
- toggleSorting() - cycles: none → asc → desc → none
|
|
- toggleSorting(false) - cycles: none → asc → desc → none
|
|
- toggleSorting(true) - cycles: none → desc → asc → none
|
|
</div>
|
|
<p>The parameter <code>desc</code> indicates whether to prefer descending sort when toggling from no sort.</p>
|
|
</div>
|
|
|
|
<div class="test-section fix">
|
|
<h2>✅ Files Fixed</h2>
|
|
<p>Updated <code>frontend/src/components/shot/columns.ts</code> - Fixed all sortable columns:</p>
|
|
<ul>
|
|
<li>✅ Shot Name column</li>
|
|
<li>✅ Episode column</li>
|
|
<li>✅ Frame Range column</li>
|
|
<li>✅ Frames column (frame count)</li>
|
|
<li>✅ Status column</li>
|
|
<li>✅ Description column</li>
|
|
</ul>
|
|
<p><strong>Note:</strong> Task status columns are dynamically generated and inherit the same pattern, so they're also fixed.</p>
|
|
</div>
|
|
|
|
<div class="test-steps">
|
|
<h2>🧪 Testing Instructions</h2>
|
|
<p>To verify the fix works correctly:</p>
|
|
<ol>
|
|
<li><strong>Navigate to Shot Table:</strong> Go to any project's shots page and switch to table view</li>
|
|
<li><strong>Test Sort Cycle:</strong> Click on any sortable column header (e.g., "Shot Name")</li>
|
|
<li><strong>Verify Ascending:</strong> First click should sort ascending (A→Z, 1→9) with up arrow ↑</li>
|
|
<li><strong>Verify Descending:</strong> Second click should sort descending (Z→A, 9→1) with down arrow ↓</li>
|
|
<li><strong>Verify Clear:</strong> Third click should clear sort (original order) with up-down arrow ↕</li>
|
|
<li><strong>Test Multiple Columns:</strong> Repeat for Episode, Frame Range, Frames, Status, Description</li>
|
|
<li><strong>Visual Feedback:</strong> Confirm icons change correctly: ↕ → ↑ → ↓ → ↕</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Expected Behavior</h2>
|
|
<p>After the fix, clicking column headers should cycle through:</p>
|
|
<div class="code">
|
|
1. No Sort (↕ up-down arrow) → Original data order
|
|
2. Ascending (↑ up arrow) → A-Z, 1-9, earliest-latest
|
|
3. Descending (↓ down arrow) → Z-A, 9-1, latest-earliest
|
|
4. Back to No Sort (↕ up-down arrow)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔄 Related Issue</h2>
|
|
<p><strong>Note:</strong> The same issue exists in <code>frontend/src/components/task/columns.ts</code> and should be fixed there as well for consistency.</p>
|
|
<p>This affects the task table sorting behavior in the same way.</p>
|
|
</div>
|
|
|
|
<div class="test-section fix">
|
|
<h2>✅ Fix Summary</h2>
|
|
<p><strong>Changed:</strong> <code>column.getIsSorted() === 'asc'</code> → <code>column.getIsSorted() === 'desc'</code></p>
|
|
<p><strong>Result:</strong> Proper sort direction cycling with correct visual feedback</p>
|
|
<p><strong>Impact:</strong> All sortable columns in shot table now work correctly</p>
|
|
<p><strong>Status:</strong> Ready for testing</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |