201 lines
7.5 KiB
HTML
201 lines
7.5 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 - Independent Frames Column Added</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
|
|
.success { color: #22c55e; font-weight: bold; }
|
|
.info { color: #3b82f6; }
|
|
.section { margin: 20px 0; padding: 15px; border-left: 4px solid #e5e7eb; }
|
|
.code { background: #f3f4f6; padding: 10px; border-radius: 4px; font-family: monospace; }
|
|
.checklist { list-style-type: none; }
|
|
.checklist li::before { content: "✅ "; }
|
|
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
|
.before, .after { padding: 15px; border-radius: 8px; }
|
|
.before { background: #fef2f2; border: 1px solid #fecaca; }
|
|
.after { background: #f0fdf4; border: 1px solid #bbf7d0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Shot Table - Independent Frames Column Added ✅</h1>
|
|
|
|
<div class="section">
|
|
<h2 class="success">✅ Implementation Complete</h2>
|
|
<p>The shot table now has a separate "Frames" column that displays only the frame count number, independent of the "Frame Range" column.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🔄 Changes Made</h2>
|
|
<ul class="checklist">
|
|
<li><strong>Added New Frames Column</strong> - Displays frame count as a number</li>
|
|
<li><strong>Updated Frame Range Column</strong> - Now shows only "start-end" format</li>
|
|
<li><strong>Updated Column Visibility</strong> - Added "Frames" to column visibility options</li>
|
|
<li><strong>Removed Unused Import</strong> - Cleaned up TaskStatusBadge import</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📊 Column Structure Comparison</h2>
|
|
<div class="comparison">
|
|
<div class="before">
|
|
<h3>❌ Before</h3>
|
|
<div class="code">
|
|
Frame Range Column:
|
|
"1001-1120 (120 frames)"
|
|
|
|
Only one column showing both
|
|
range and count together
|
|
</div>
|
|
<p><strong>Issues:</strong></p>
|
|
<ul>
|
|
<li>Frame count mixed with range</li>
|
|
<li>No separate sortable frame count</li>
|
|
<li>Harder to scan frame counts</li>
|
|
</ul>
|
|
</div>
|
|
<div class="after">
|
|
<h3>✅ After</h3>
|
|
<div class="code">
|
|
Frame Range Column:
|
|
"1001-1120"
|
|
|
|
Frames Column:
|
|
"120"
|
|
|
|
Two separate columns for
|
|
different information
|
|
</div>
|
|
<p><strong>Benefits:</strong></p>
|
|
<ul>
|
|
<li>Clean separation of data</li>
|
|
<li>Sortable frame count column</li>
|
|
<li>Easy to scan frame counts</li>
|
|
<li>Better data organization</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🏗️ Technical Implementation</h2>
|
|
<div class="code">
|
|
// 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())
|
|
},
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🎯 Column Features</h2>
|
|
<ul class="checklist">
|
|
<li><strong>Frame Range Column</strong> - Shows "start-end" format (e.g., "1001-1120")</li>
|
|
<li><strong>Frames Column</strong> - Shows frame count as number (e.g., "120")</li>
|
|
<li><strong>Sortable</strong> - Both columns support sorting</li>
|
|
<li><strong>Toggleable</strong> - Both columns can be hidden/shown via column visibility</li>
|
|
<li><strong>Responsive</strong> - Proper text styling and formatting</li>
|
|
<li><strong>Accessible</strong> - Clear column headers and data presentation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📋 Column Visibility Options</h2>
|
|
<p>The column visibility control now includes both columns:</p>
|
|
<div class="code">
|
|
Column Visibility Options:
|
|
├── Thumbnail
|
|
├── Shot Name
|
|
├── Episode
|
|
├── Frame Range ← Shows "start-end"
|
|
├── Frames ← Shows count number (NEW)
|
|
├── Status
|
|
├── Description
|
|
└── [Task Type Columns...]
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>💡 Use Cases</h2>
|
|
<ul>
|
|
<li><strong>Frame Range</strong> - Useful for understanding the specific frame numbers</li>
|
|
<li><strong>Frames</strong> - Useful for comparing shot lengths, sorting by duration</li>
|
|
<li><strong>Production Planning</strong> - Quick scanning of shot complexities by frame count</li>
|
|
<li><strong>Resource Allocation</strong> - Estimating work based on frame counts</li>
|
|
<li><strong>Data Analysis</strong> - Sorting and filtering shots by duration</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📁 Files Modified</h2>
|
|
<div class="code">
|
|
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
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🧪 Testing Checklist</h2>
|
|
<p class="info">To verify the new frames column works correctly:</p>
|
|
<ul>
|
|
<li>Navigate to a project's shots page</li>
|
|
<li>Switch to table view mode</li>
|
|
<li>Verify "Frame Range" column shows only "start-end" format</li>
|
|
<li>Verify "Frames" column shows frame count as number</li>
|
|
<li>Test sorting by both columns</li>
|
|
<li>Test column visibility toggle for both columns</li>
|
|
<li>Verify frame count calculation is correct (end - start + 1)</li>
|
|
<li>Check responsive behavior on different screen sizes</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📊 Example Data Display</h2>
|
|
<div class="code">
|
|
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
|
|
</div>
|
|
<p>Users can now easily:</p>
|
|
<ul>
|
|
<li>Sort by frame count to see longest/shortest shots</li>
|
|
<li>Quickly scan frame counts without parsing ranges</li>
|
|
<li>Use both range and count information as needed</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="success">✅ Status: Complete</h2>
|
|
<p>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.</p>
|
|
</div>
|
|
</body>
|
|
</html> |