LinkDesk/frontend/test-custom-asset-task-colu...

215 lines
7.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Asset Task Columns Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.test-section {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.success { color: #22c55e; }
.error { color: #ef4444; }
.info { color: #3b82f6; }
.warning { color: #f59e0b; }
pre {
background: #f5f5f5;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>Custom Asset Task Columns Test</h1>
<p class="info">This test verifies that custom asset task columns are properly displayed in the asset browser table.</p>
<div class="test-section">
<h2>🔍 Test Setup</h2>
<p>Testing with project ID 2 ("Dragon Quest") which has custom asset task types:</p>
<ul>
<li><strong>grooming</strong> - Hair and fur grooming tasks</li>
<li><strong>lookdev</strong> - Look development tasks</li>
<li><strong>fx</strong> - Effects tasks</li>
</ul>
</div>
<div class="test-section">
<h2>📊 API Test Results</h2>
<div id="api-results">Testing API...</div>
</div>
<div class="test-section">
<h2>🎯 Expected Columns</h2>
<p>The asset table should display these columns:</p>
<table>
<thead>
<tr>
<th>Column Type</th>
<th>Column Name</th>
<th>Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td>Standard</td>
<td>Select</td>
<td>✓ Always visible</td>
</tr>
<tr>
<td>Standard</td>
<td>Asset Name</td>
<td>✓ Always visible</td>
</tr>
<tr>
<td>Standard</td>
<td>Category</td>
<td>✓ Always visible</td>
</tr>
<tr>
<td>Standard</td>
<td>Status</td>
<td>✓ Always visible</td>
</tr>
<tr>
<td>Standard Task</td>
<td>Modeling</td>
<td>✓ Visible by default</td>
</tr>
<tr>
<td>Standard Task</td>
<td>Surfacing</td>
<td>✓ Visible by default</td>
</tr>
<tr>
<td>Standard Task</td>
<td>Rigging</td>
<td>✓ Visible by default</td>
</tr>
<tr>
<td>Custom Task</td>
<td>Grooming</td>
<td>✓ Should be visible</td>
</tr>
<tr>
<td>Custom Task</td>
<td>Lookdev</td>
<td>✓ Should be visible</td>
</tr>
<tr>
<td>Custom Task</td>
<td>Fx</td>
<td>✓ Should be visible</td>
</tr>
<tr>
<td>Standard</td>
<td>Description</td>
<td>✓ Visible by default</td>
</tr>
<tr>
<td>Standard</td>
<td>Updated</td>
<td>✓ Visible by default</td>
</tr>
<tr>
<td>Standard</td>
<td>Actions</td>
<td>✓ Always visible</td>
</tr>
</tbody>
</table>
</div>
<div class="test-section">
<h2>🧪 Frontend Test Instructions</h2>
<ol>
<li>Open the VFX Project Management frontend at <a href="http://localhost:5174" target="_blank">http://localhost:5174</a></li>
<li>Login with your credentials</li>
<li>Navigate to the "Dragon Quest" project (ID: 2)</li>
<li>Go to the Assets tab</li>
<li>Switch to Table view if not already selected</li>
<li>Verify that the custom task columns (Grooming, Lookdev, Fx) are visible</li>
<li>Check that you can toggle these columns in the column visibility control</li>
<li>Verify that the custom task status can be edited inline</li>
</ol>
</div>
<div class="test-section">
<h2>🔧 Troubleshooting</h2>
<div id="troubleshooting">
<p><strong>If custom columns are not showing:</strong></p>
<ul>
<li>Check browser console for JavaScript errors</li>
<li>Verify that the project API returns custom_asset_task_types</li>
<li>Check that the loadCustomTaskTypes function is being called</li>
<li>Ensure the computed properties are reactive to customTaskTypes changes</li>
</ul>
</div>
</div>
<script>
async function testAPI() {
try {
// Test project API
const projectResponse = await fetch('http://localhost:8000/api/projects/2');
if (!projectResponse.ok) {
throw new Error(`Project API failed: ${projectResponse.status}`);
}
const project = await projectResponse.json();
document.getElementById('api-results').innerHTML = `
<div class="success">✅ Project API working!</div>
<p><strong>Project:</strong> ${project.name}</p>
<p><strong>Custom Asset Task Types:</strong> ${JSON.stringify(project.custom_asset_task_types)}</p>
<pre>${JSON.stringify(project, null, 2)}</pre>
`;
// Test assets API
const assetsResponse = await fetch('http://localhost:8000/api/assets/?project_id=2');
if (!assetsResponse.ok) {
throw new Error(`Assets API failed: ${assetsResponse.status}`);
}
const assets = await assetsResponse.json();
document.getElementById('api-results').innerHTML += `
<div class="success">✅ Assets API working!</div>
<p><strong>Assets found:</strong> ${assets.length}</p>
${assets.length > 0 ? `
<p><strong>First asset task status:</strong></p>
<pre>${JSON.stringify(assets[0].task_status, null, 2)}</pre>
` : '<p class="warning">No assets found in project</p>'}
`;
} catch (error) {
document.getElementById('api-results').innerHTML =
`<div class="error">❌ API Error: ${error.message}</div>`;
}
}
// Run test when page loads
testAPI();
</script>
</body>
</html>