186 lines
7.5 KiB
HTML
186 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 Column Visibility - Unified with Task Page</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 Column Visibility - Unified with Task Page ✅</h1>
|
|
|
|
<div class="section">
|
|
<h2 class="success">✅ Implementation Complete</h2>
|
|
<p>The shot page column visibility filter now uses the same UI pattern as the task page, providing a consistent user experience across the application.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🔄 Changes Made</h2>
|
|
<ul class="checklist">
|
|
<li><strong>Replaced ShotColumnVisibilityControl</strong> - Removed custom Select-based component</li>
|
|
<li><strong>Added Popover + Command Pattern</strong> - Same as task page implementation</li>
|
|
<li><strong>Updated ShotTableToolbar.vue</strong> - Integrated column visibility directly</li>
|
|
<li><strong>Added Missing Imports</strong> - Settings2 icon and proper component imports</li>
|
|
<li><strong>Added Column Definitions</strong> - Comprehensive list of all shot table columns</li>
|
|
<li><strong>Added Helper Methods</strong> - toggleColumn and hiddenColumnsCount computed</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🎨 UI Pattern Comparison</h2>
|
|
<div class="comparison">
|
|
<div class="before">
|
|
<h3>❌ Before (Shot Page)</h3>
|
|
<div class="code">
|
|
<Select>
|
|
<SelectTrigger>
|
|
<Columns icon /> Columns
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem>
|
|
<input type="checkbox" />
|
|
Column Name
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<p><strong>Issues:</strong></p>
|
|
<ul>
|
|
<li>Different UI pattern from task page</li>
|
|
<li>Select component with checkboxes</li>
|
|
<li>Inconsistent user experience</li>
|
|
</ul>
|
|
</div>
|
|
<div class="after">
|
|
<h3>✅ After (Unified Pattern)</h3>
|
|
<div class="code">
|
|
<Popover>
|
|
<PopoverTrigger>
|
|
<Settings2 icon /> View
|
|
<Badge>{{ hiddenCount }}</Badge>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<Command>
|
|
<CommandInput />
|
|
<CommandItem>
|
|
<Check icon /> Column Name
|
|
</CommandItem>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
<p><strong>Benefits:</strong></p>
|
|
<ul>
|
|
<li>Consistent with task page</li>
|
|
<li>Popover + Command pattern</li>
|
|
<li>Search functionality</li>
|
|
<li>Visual feedback with badge</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🏗️ Technical Implementation</h2>
|
|
<div class="code">
|
|
// Column definitions (same pattern as task page)
|
|
const allColumns = [
|
|
{ id: 'thumbnail', label: 'Thumbnail' },
|
|
{ id: 'name', label: 'Shot Name' },
|
|
{ id: 'episode', label: 'Episode' },
|
|
{ id: 'frameRange', label: 'Frame Range' },
|
|
{ id: 'status', label: 'Status' },
|
|
{ id: 'description', label: 'Description' },
|
|
// Dynamic task type columns
|
|
...props.allTaskTypes.map(taskType => ({
|
|
id: taskType,
|
|
label: taskType.charAt(0).toUpperCase() + taskType.slice(1)
|
|
}))
|
|
]
|
|
|
|
// Hidden columns count (same as task page)
|
|
const hiddenColumnsCount = computed(() => {
|
|
return allColumns.filter(col => props.columnVisibility[col.id] === false).length
|
|
})
|
|
|
|
// Toggle method (same as task page)
|
|
const toggleColumn = (columnId: string, value: any) => {
|
|
const newVisibility = { ...props.columnVisibility, [columnId]: value as boolean }
|
|
emit('update:column-visibility', newVisibility)
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🎯 Features Unified</h2>
|
|
<ul class="checklist">
|
|
<li><strong>Consistent UI Pattern</strong> - Popover with Command components</li>
|
|
<li><strong>Search Functionality</strong> - Filter columns by name</li>
|
|
<li><strong>Visual Feedback</strong> - Badge showing hidden column count</li>
|
|
<li><strong>Check Icons</strong> - Clear visual indication of selected columns</li>
|
|
<li><strong>Proper Alignment</strong> - Right-aligned popover like task page</li>
|
|
<li><strong>Dynamic Columns</strong> - Task type columns generated dynamically</li>
|
|
<li><strong>Keyboard Navigation</strong> - Full accessibility support</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📁 Files Modified</h2>
|
|
<div class="code">
|
|
frontend/src/components/shot/ShotTableToolbar.vue (UPDATED)
|
|
├── Removed ShotColumnVisibilityControl import
|
|
├── Added Settings2 icon import
|
|
├── Added allColumns definition
|
|
├── Added hiddenColumnsCount computed
|
|
├── Added toggleColumn method
|
|
└── Replaced column visibility section with Popover pattern
|
|
|
|
frontend/src/components/shot/ShotColumnVisibilityControl.vue (DEPRECATED)
|
|
└── No longer used - can be removed in future cleanup
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🧪 Testing Checklist</h2>
|
|
<p class="info">To verify the unified column visibility works correctly:</p>
|
|
<ul>
|
|
<li>Navigate to a project's shots page</li>
|
|
<li>Switch to table view mode</li>
|
|
<li>Click the "View" button (with Settings2 icon)</li>
|
|
<li>Verify popover opens with searchable column list</li>
|
|
<li>Toggle various columns on/off</li>
|
|
<li>Verify badge shows hidden column count</li>
|
|
<li>Test search functionality in column list</li>
|
|
<li>Verify task type columns appear dynamically</li>
|
|
<li>Compare with task page column visibility (should be identical)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>🎨 UI Consistency Achieved</h2>
|
|
<p>Both shot page and task page now use the identical pattern:</p>
|
|
<div class="code">
|
|
Task Page: Settings2 icon + "View" + Badge + Popover + Command + Search
|
|
Shot Page: Settings2 icon + "View" + Badge + Popover + Command + Search
|
|
</div>
|
|
<p>This provides a consistent, familiar experience for users switching between different data tables in the application.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="success">✅ Status: Complete</h2>
|
|
<p>The shot page column visibility filter now uses the same view filter component pattern as the task page. Users will experience consistent UI behavior across all data tables in the application.</p>
|
|
</div>
|
|
</body>
|
|
</html> |