130 lines
5.2 KiB
HTML
130 lines
5.2 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 Task Status Optimization Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
border-color: #c3e6cb;
|
|
}
|
|
.warning {
|
|
background-color: #fff3cd;
|
|
border-color: #ffeaa7;
|
|
}
|
|
.error {
|
|
background-color: #f8d7da;
|
|
border-color: #f5c6cb;
|
|
}
|
|
.code {
|
|
background-color: #f8f9fa;
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Custom Task Status Optimization Test</h1>
|
|
|
|
<div class="test-section success">
|
|
<h2>✅ Optimization Implemented</h2>
|
|
<p>The following components have been updated to use the shared <code>useTaskStatusesStore</code> instead of making direct API calls:</p>
|
|
<ul>
|
|
<li><strong>EditableTaskStatus.vue</strong> (task, shot, asset versions)</li>
|
|
<li><strong>TaskBulkActionsMenu.vue</strong></li>
|
|
<li><strong>ShotTaskStatusFilter.vue</strong></li>
|
|
<li><strong>TaskStatusFilter.vue</strong> (asset version)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔧 How the Optimization Works</h2>
|
|
<p>The optimization eliminates N+1 API calls by:</p>
|
|
<ol>
|
|
<li><strong>Shared Store</strong>: All components now use <code>useTaskStatusesStore</code></li>
|
|
<li><strong>Caching</strong>: Task statuses are cached for 5 minutes per project</li>
|
|
<li><strong>Single Request</strong>: Only one API call per project instead of one per component</li>
|
|
<li><strong>Cache Invalidation</strong>: Cache is invalidated when statuses are modified</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🧪 Testing Instructions</h2>
|
|
<p>To verify the optimization is working:</p>
|
|
<ol>
|
|
<li>Open browser Developer Tools (F12)</li>
|
|
<li>Go to the Network tab</li>
|
|
<li>Navigate to a page with multiple EditableTaskStatus components (e.g., shots table)</li>
|
|
<li>Look for requests to <code>/projects/{id}/task-statuses</code></li>
|
|
<li><strong>Before optimization</strong>: You would see multiple identical requests</li>
|
|
<li><strong>After optimization</strong>: You should see only ONE request per project</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📊 Expected Performance Improvement</h2>
|
|
<p>For a shots table with 20 rows (each with multiple task status dropdowns):</p>
|
|
<div class="code">
|
|
Before: 20+ API calls to /projects/7/task-statuses
|
|
After: 1 API call to /projects/7/task-statuses
|
|
|
|
Improvement: ~95% reduction in API calls
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔄 Cache Behavior</h2>
|
|
<p>The store implements intelligent caching:</p>
|
|
<ul>
|
|
<li><strong>Cache Duration</strong>: 5 minutes per project</li>
|
|
<li><strong>Automatic Invalidation</strong>: When statuses are created/updated/deleted</li>
|
|
<li><strong>Concurrent Request Handling</strong>: Multiple components requesting the same data will share the same API call</li>
|
|
<li><strong>Per-Project Isolation</strong>: Each project has its own cache entry</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section warning">
|
|
<h2>⚠️ Components That Still Use Direct API Calls</h2>
|
|
<p>The following component continues to use direct API calls (by design):</p>
|
|
<ul>
|
|
<li><strong>CustomTaskStatusManager.vue</strong>: Management interface that creates/updates/deletes statuses</li>
|
|
</ul>
|
|
<p>This component invalidates the store cache after making changes to ensure other components get fresh data.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Key Benefits</h2>
|
|
<ul>
|
|
<li><strong>Performance</strong>: Dramatically reduced API calls</li>
|
|
<li><strong>User Experience</strong>: Faster page loads and interactions</li>
|
|
<li><strong>Server Load</strong>: Reduced backend load from redundant requests</li>
|
|
<li><strong>Consistency</strong>: All components use the same cached data</li>
|
|
<li><strong>Maintainability</strong>: Centralized status management logic</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
console.log('Custom Task Status Optimization Test Page Loaded');
|
|
console.log('Check the Network tab to verify API call reduction');
|
|
|
|
// Log current URL for easy navigation
|
|
console.log('Frontend URL: http://localhost:5174/');
|
|
console.log('Backend URL: http://localhost:8000/');
|
|
</script>
|
|
</body>
|
|
</html> |