305 lines
14 KiB
HTML
305 lines
14 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 Toolbar Task Columns Test</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.column-item {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.column-item:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
.checkbox {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.checkbox.checked {
|
|
background-color: #3b82f6;
|
|
border-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: white;
|
|
min-width: 200px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 6px;
|
|
z-index: 1;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.dropdown.open .dropdown-content {
|
|
display: block;
|
|
}
|
|
.log {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 p-8">
|
|
<div id="app">
|
|
<div class="max-w-4xl mx-auto space-y-6">
|
|
<h1 class="text-2xl font-bold mb-6">Shot Toolbar Task Columns Test</h1>
|
|
|
|
<!-- Debug Info -->
|
|
<div class="bg-white rounded-lg border p-4">
|
|
<h2 class="text-lg font-semibold mb-3">Debug Information</h2>
|
|
<div class="space-y-2 text-sm">
|
|
<div><strong>All Task Types:</strong> {{ JSON.stringify(allTaskTypes) }}</div>
|
|
<div><strong>All Columns Count:</strong> {{ allColumns.length }}</div>
|
|
<div><strong>Task Columns Count:</strong> {{ taskColumns.length }}</div>
|
|
<div><strong>Column Visibility:</strong> {{ JSON.stringify(columnVisibility) }}</div>
|
|
<div><strong>Hidden Columns Count:</strong> {{ hiddenColumnsCount }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simulated Toolbar -->
|
|
<div class="bg-white rounded-lg border p-4">
|
|
<h2 class="text-lg font-semibold mb-3">Simulated Shot Table Toolbar</h2>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<!-- View Toggle -->
|
|
<div class="flex items-center border rounded-md h-8 p-0.5">
|
|
<button class="h-7 px-2 bg-gray-100 rounded">Table</button>
|
|
</div>
|
|
|
|
<!-- Column Visibility Control -->
|
|
<div class="dropdown" :class="{ 'open': dropdownOpen }">
|
|
<button
|
|
@click="dropdownOpen = !dropdownOpen"
|
|
class="flex items-center gap-2 px-3 py-1 border border-dashed rounded text-sm hover:bg-gray-50"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
View
|
|
<span v-if="hiddenColumnsCount > 0" class="bg-gray-200 text-gray-800 px-1 rounded text-xs">
|
|
{{ hiddenColumnsCount }}
|
|
</span>
|
|
</button>
|
|
|
|
<div class="dropdown-content">
|
|
<div class="p-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Search columns..."
|
|
class="w-full px-2 py-1 border rounded text-sm"
|
|
v-model="searchColumns"
|
|
/>
|
|
</div>
|
|
<div v-if="filteredColumns.length === 0" class="p-4 text-center text-gray-500 text-sm">
|
|
No columns found.
|
|
</div>
|
|
<div v-else>
|
|
<div
|
|
v-for="column in filteredColumns"
|
|
:key="column.id"
|
|
class="column-item"
|
|
@click="toggleColumn(column.id)"
|
|
>
|
|
<div class="checkbox" :class="{ 'checked': columnVisibility[column.id] !== false }">
|
|
<svg v-if="columnVisibility[column.id] !== false" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<span>{{ column.label }}</span>
|
|
<span v-if="taskColumns.some(tc => tc.id === column.id)" class="text-xs bg-blue-100 text-blue-800 px-1 rounded">Task</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task Types Loader -->
|
|
<button @click="loadTaskTypes" class="px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600">
|
|
Load Task Types
|
|
</button>
|
|
|
|
<!-- Clear Task Types -->
|
|
<button @click="clearTaskTypes" class="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600">
|
|
Clear Task Types
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event Log -->
|
|
<div class="bg-white rounded-lg border p-4">
|
|
<h2 class="text-lg font-semibold mb-3">Event Log</h2>
|
|
<div class="log" id="eventLog">
|
|
<div class="text-gray-500">Events will be logged here...</div>
|
|
</div>
|
|
<button @click="clearLog" class="mt-2 px-3 py-1 bg-gray-500 text-white rounded text-sm hover:bg-gray-600">
|
|
Clear Log
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Expected vs Actual -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<h3 class="font-semibold text-green-900 mb-2">✅ Expected Behavior</h3>
|
|
<ul class="text-green-800 text-sm space-y-1">
|
|
<li>• Task type columns should appear in the View dropdown</li>
|
|
<li>• Both default and custom task types should be listed</li>
|
|
<li>• Task columns should be toggleable</li>
|
|
<li>• Column visibility should be preserved</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-4">
|
|
<h3 class="font-semibold text-red-900 mb-2">❌ Current Issue</h3>
|
|
<ul class="text-red-800 text-sm space-y-1">
|
|
<li>• Task type columns not showing in View dropdown</li>
|
|
<li>• Only basic columns (name, episode, etc.) visible</li>
|
|
<li>• Custom task types not being loaded</li>
|
|
<li>• Column visibility control incomplete</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp } = Vue
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
allTaskTypes: [],
|
|
columnVisibility: {},
|
|
dropdownOpen: false,
|
|
searchColumns: '',
|
|
// Simulate basic columns
|
|
basicColumns: [
|
|
{ id: 'thumbnail', label: 'Thumbnail' },
|
|
{ id: 'name', label: 'Shot Name' },
|
|
{ id: 'episode', label: 'Episode' },
|
|
{ id: 'frameRange', label: 'Frame Range' },
|
|
{ id: 'frames', label: 'Frames' },
|
|
{ id: 'status', label: 'Status' },
|
|
{ id: 'description', label: 'Description' }
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
taskColumns() {
|
|
return this.allTaskTypes.map(taskType => ({
|
|
id: taskType,
|
|
label: taskType.charAt(0).toUpperCase() + taskType.slice(1)
|
|
}))
|
|
},
|
|
allColumns() {
|
|
return [...this.basicColumns, ...this.taskColumns]
|
|
},
|
|
filteredColumns() {
|
|
if (!this.searchColumns) return this.allColumns
|
|
return this.allColumns.filter(col =>
|
|
col.label.toLowerCase().includes(this.searchColumns.toLowerCase())
|
|
)
|
|
},
|
|
hiddenColumnsCount() {
|
|
return this.allColumns.filter(col => this.columnVisibility[col.id] === false).length
|
|
}
|
|
},
|
|
methods: {
|
|
loadTaskTypes() {
|
|
// Simulate loading task types
|
|
this.logEvent('🔄 Loading task types...')
|
|
|
|
setTimeout(() => {
|
|
// Simulate both default and custom task types
|
|
this.allTaskTypes = [
|
|
'modeling', 'texturing', 'rigging', 'animation',
|
|
'lighting', 'compositing', 'fx', 'rendering',
|
|
'custom_review', 'custom_approval' // Custom task types
|
|
]
|
|
|
|
// Initialize column visibility for new task types
|
|
this.allTaskTypes.forEach(taskType => {
|
|
if (!(taskType in this.columnVisibility)) {
|
|
this.columnVisibility[taskType] = true
|
|
}
|
|
})
|
|
|
|
this.logEvent(`✅ Loaded ${this.allTaskTypes.length} task types: ${this.allTaskTypes.join(', ')}`)
|
|
this.logEvent(`📊 Total columns now: ${this.allColumns.length}`)
|
|
}, 1000)
|
|
},
|
|
|
|
clearTaskTypes() {
|
|
this.allTaskTypes = []
|
|
this.logEvent('🗑️ Cleared all task types')
|
|
},
|
|
|
|
toggleColumn(columnId) {
|
|
this.columnVisibility[columnId] = !(this.columnVisibility[columnId] !== false)
|
|
this.logEvent(`🔄 Toggled column "${columnId}" to ${this.columnVisibility[columnId] ? 'visible' : 'hidden'}`)
|
|
},
|
|
|
|
logEvent(message) {
|
|
const log = document.getElementById('eventLog')
|
|
const timestamp = new Date().toLocaleTimeString()
|
|
const entry = document.createElement('div')
|
|
entry.innerHTML = `<span class="text-gray-500">[${timestamp}]</span> ${message}`
|
|
|
|
// Remove placeholder text
|
|
const placeholder = log.querySelector('.text-gray-500')
|
|
if (placeholder && placeholder.textContent.includes('Events will be logged here')) {
|
|
placeholder.remove()
|
|
}
|
|
|
|
log.appendChild(entry)
|
|
log.scrollTop = log.scrollHeight
|
|
},
|
|
|
|
clearLog() {
|
|
const log = document.getElementById('eventLog')
|
|
log.innerHTML = '<div class="text-gray-500">Event log cleared...</div>'
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
// Initialize basic column visibility
|
|
this.basicColumns.forEach(col => {
|
|
this.columnVisibility[col.id] = true
|
|
})
|
|
|
|
this.logEvent('🚀 Test initialized')
|
|
this.logEvent('💡 Click "Load Task Types" to simulate loading task columns')
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', (event) => {
|
|
if (!event.target.closest('.dropdown')) {
|
|
this.dropdownOpen = false
|
|
}
|
|
})
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |