Init Repo
This commit is contained in:
@@ -0,0 +1,305 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user