247 lines
10 KiB
HTML
247 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Task Status Filter - Custom Status Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: #555;
|
|
margin-top: 0;
|
|
}
|
|
.test-case {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.success {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.error {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
.info {
|
|
color: #17a2b8;
|
|
}
|
|
code {
|
|
background: #e9ecef;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
ul {
|
|
line-height: 1.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Task Status Filter - Custom Status Integration Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Overview</h2>
|
|
<p>This test verifies that the TaskStatusFilter components correctly integrate custom task statuses from the backend.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Implementation Checklist</h2>
|
|
<div class="test-case">
|
|
<h3>TaskStatusFilter Component (Asset)</h3>
|
|
<ul>
|
|
<li class="success">✓ Added <code>projectId</code> prop to component</li>
|
|
<li class="success">✓ Integrated <code>customTaskStatusService</code> to fetch statuses</li>
|
|
<li class="success">✓ Combined system and custom statuses in dropdown</li>
|
|
<li class="success">✓ Display custom status colors in filter options</li>
|
|
<li class="success">✓ Load statuses on mount and when projectId changes</li>
|
|
<li class="success">✓ Fallback to default system statuses when no projectId</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>ShotTaskStatusFilter Component</h3>
|
|
<ul>
|
|
<li class="success">✓ Added <code>projectId</code> prop to component</li>
|
|
<li class="success">✓ Integrated <code>customTaskStatusService</code> to fetch statuses</li>
|
|
<li class="success">✓ Combined system and custom statuses in dropdown</li>
|
|
<li class="success">✓ Display custom status colors in filter options</li>
|
|
<li class="success">✓ Load statuses on mount and when projectId changes</li>
|
|
<li class="success">✓ Fallback to default system statuses when no projectId</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Parent Component Integration</h3>
|
|
<ul>
|
|
<li class="success">✓ AssetBrowser passes <code>projectId</code> to TaskStatusFilter</li>
|
|
<li class="success">✓ ShotBrowser passes <code>projectId</code> to ShotTaskStatusFilter</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Manual Testing Steps</h2>
|
|
<div class="test-case">
|
|
<h3>1. Test Asset Filter with Custom Statuses</h3>
|
|
<ol>
|
|
<li>Navigate to a project's Assets tab</li>
|
|
<li>Switch to list view</li>
|
|
<li>Click on the Task Status Filter dropdown</li>
|
|
<li>Verify that both system statuses (Not Started, In Progress, etc.) and custom statuses appear</li>
|
|
<li>Verify that custom statuses show their custom colors</li>
|
|
<li>Select a custom status filter and verify assets are filtered correctly</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>2. Test Shot Filter with Custom Statuses</h3>
|
|
<ol>
|
|
<li>Navigate to a project's Shots tab</li>
|
|
<li>Switch to table view</li>
|
|
<li>Click on the Task Status Filter dropdown</li>
|
|
<li>Verify that both system statuses and custom statuses appear for each task type</li>
|
|
<li>Verify that custom statuses show their custom colors</li>
|
|
<li>Select a custom status filter and verify shots are filtered correctly</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>3. Test Dynamic Status Updates</h3>
|
|
<ol>
|
|
<li>Open the Project Settings</li>
|
|
<li>Create a new custom task status (e.g., "Review" with a purple color)</li>
|
|
<li>Return to the Assets or Shots view</li>
|
|
<li>Open the Task Status Filter dropdown</li>
|
|
<li>Verify the new custom status appears in the filter options</li>
|
|
<li>Verify the custom color is displayed correctly</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>4. Test Filtering Functionality</h3>
|
|
<ol>
|
|
<li>Create or assign tasks with custom statuses</li>
|
|
<li>Use the Task Status Filter to filter by a custom status</li>
|
|
<li>Verify only assets/shots with tasks in that custom status are shown</li>
|
|
<li>Clear the filter and verify all items are shown again</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📋 Expected Behavior</h2>
|
|
<div class="test-case">
|
|
<h3>Filter Dropdown Display</h3>
|
|
<ul>
|
|
<li>System statuses appear first (Not Started, In Progress, Submitted, Approved, Retake)</li>
|
|
<li>Custom statuses appear after system statuses</li>
|
|
<li>Each status shows a color indicator badge</li>
|
|
<li>Custom statuses display their configured custom colors</li>
|
|
<li>System statuses use default theme colors</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Filtering Behavior</h3>
|
|
<ul>
|
|
<li>Selecting "All Tasks" shows all assets/shots</li>
|
|
<li>Selecting a specific status filters to show only items with that status</li>
|
|
<li>Filter format: <code>taskType:statusId</code> (e.g., "modeling:custom_status_123")</li>
|
|
<li>Clear button (X) appears when a filter is active</li>
|
|
<li>Clicking clear button resets to "All Tasks"</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Error Handling</h3>
|
|
<ul>
|
|
<li>If projectId is not provided, component falls back to system statuses only</li>
|
|
<li>If API call fails, component logs error and continues with empty custom statuses</li>
|
|
<li>Component handles loading state gracefully</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Requirements Validation</h2>
|
|
<div class="test-case">
|
|
<p><strong>Requirement 7.4:</strong> Custom statuses in filter options</p>
|
|
<ul>
|
|
<li class="success">✓ TaskStatusFilter includes custom statuses in dropdown</li>
|
|
<li class="success">✓ ShotTaskStatusFilter includes custom statuses in dropdown</li>
|
|
<li class="success">✓ Color indicators shown for all statuses</li>
|
|
<li class="success">✓ Filters apply correctly with custom statuses</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔧 Technical Implementation Details</h2>
|
|
<div class="test-case">
|
|
<h3>Key Changes</h3>
|
|
<ul>
|
|
<li><strong>Props:</strong> Added optional <code>projectId?: number</code> prop to both filter components</li>
|
|
<li><strong>Service Integration:</strong> Imported and used <code>customTaskStatusService.getAllStatuses()</code></li>
|
|
<li><strong>State Management:</strong> Added reactive refs for <code>customStatuses</code> and <code>systemStatuses</code></li>
|
|
<li><strong>Computed Property:</strong> <code>allStatuses</code> combines system and custom statuses</li>
|
|
<li><strong>Lifecycle:</strong> Load statuses on mount and watch for projectId changes</li>
|
|
<li><strong>Fallback:</strong> Use default system statuses when projectId is not available</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Status Object Format</h3>
|
|
<code>
|
|
{<br>
|
|
id: string,<br>
|
|
name: string,<br>
|
|
color: string,<br>
|
|
is_system: boolean<br>
|
|
}
|
|
</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✨ Next Steps</h2>
|
|
<ul>
|
|
<li>Test the implementation in the running application</li>
|
|
<li>Verify custom status colors display correctly in filter dropdown</li>
|
|
<li>Ensure filtering works with both system and custom statuses</li>
|
|
<li>Test edge cases (no custom statuses, many custom statuses, etc.)</li>
|
|
<li>Verify the filter persists correctly when navigating between views</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📝 Notes</h2>
|
|
<ul>
|
|
<li>The filter components now dynamically load custom statuses from the backend</li>
|
|
<li>Custom status colors are displayed using the TaskStatusBadge component</li>
|
|
<li>The implementation maintains backward compatibility with projects that don't have custom statuses</li>
|
|
<li>Filter values use the status ID (e.g., "not_started" or "custom_status_123")</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|