225 lines
9.3 KiB
HTML
225 lines
9.3 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 Bulk Status Change 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: 20px 0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.test-title {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.feature-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
.feature-list li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.feature-list li:before {
|
|
content: "✓ ";
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.test-steps {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-left: 4px solid #007bff;
|
|
margin: 15px 0;
|
|
}
|
|
.test-steps ol {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
.expected-result {
|
|
background-color: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
.code-block {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Shot Table Bulk Task Status Change - Test Plan</h1>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🎯 Feature Overview</h2>
|
|
<p>This test verifies the bulk task status change functionality for the shot data table, similar to the existing task data table implementation.</p>
|
|
|
|
<h3>Key Features Implemented:</h3>
|
|
<ul class="feature-list">
|
|
<li>Bulk status change buttons appear in task status column headers when shots are selected</li>
|
|
<li>Popover with colored status badges for each task status option</li>
|
|
<li>Selection count tracking to show/hide bulk action buttons</li>
|
|
<li>Bulk update functionality that changes status for all selected shots</li>
|
|
<li>Toast notifications for successful bulk updates</li>
|
|
<li>Error handling for failed bulk operations</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🧪 Test Scenarios</h2>
|
|
|
|
<h3>Test 1: Bulk Status Change Button Visibility</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Navigate to the shot table view</li>
|
|
<li>Ensure no shots are selected initially</li>
|
|
<li>Verify that task status column headers show only the column name and sort icon</li>
|
|
<li>Select one or more shots using checkboxes</li>
|
|
<li>Verify that task status column headers now show a dropdown button (ChevronDown icon)</li>
|
|
<li>Deselect all shots</li>
|
|
<li>Verify that dropdown buttons disappear</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> Bulk action buttons appear/disappear based on selection state
|
|
</div>
|
|
|
|
<h3>Test 2: Bulk Status Change Popover</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Select multiple shots (2-3 shots)</li>
|
|
<li>Click the dropdown button in any task status column header</li>
|
|
<li>Verify popover opens with title "Change [TaskType] Status"</li>
|
|
<li>Verify all task status options are shown as colored badges:
|
|
<ul>
|
|
<li>Not Started (secondary)</li>
|
|
<li>In Progress (default)</li>
|
|
<li>Submitted (outline)</li>
|
|
<li>Approved (default)</li>
|
|
<li>Retake (destructive)</li>
|
|
</ul>
|
|
</li>
|
|
<li>Click outside popover to close it</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> Popover shows correctly formatted status options with proper colors
|
|
</div>
|
|
|
|
<h3>Test 3: Bulk Status Update Functionality</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Select 2-3 shots with different current task statuses</li>
|
|
<li>Note the current status of each selected shot for a specific task type</li>
|
|
<li>Click the bulk action button for that task type</li>
|
|
<li>Select a different status from the popover (e.g., "In Progress")</li>
|
|
<li>Verify popover closes automatically</li>
|
|
<li>Verify all selected shots now show the new status for that task type</li>
|
|
<li>Verify success toast appears with message like "Updated [TaskType] status for X shots"</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> All selected shots update to the new status with success notification
|
|
</div>
|
|
|
|
<h3>Test 4: Multiple Task Types</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Select multiple shots</li>
|
|
<li>Verify bulk action buttons appear in ALL visible task type columns</li>
|
|
<li>Test bulk update for different task types (e.g., Animation, Lighting, Compositing)</li>
|
|
<li>Verify each task type can be updated independently</li>
|
|
<li>Verify updates don't affect other task types</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> Each task type column has independent bulk update functionality
|
|
</div>
|
|
|
|
<h3>Test 5: Error Handling</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Try to use bulk action without selecting any shots</li>
|
|
<li>Verify appropriate error message appears</li>
|
|
<li>Test with network disconnected (if possible)</li>
|
|
<li>Verify error handling for failed API calls</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> Appropriate error messages for edge cases
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🔧 Implementation Details</h2>
|
|
|
|
<h3>Files Modified:</h3>
|
|
<div class="code-block">
|
|
frontend/src/components/shot/columns.ts
|
|
- Added bulk status change button in task column headers
|
|
- Added popover with status badges
|
|
- Added selection count checking
|
|
|
|
frontend/src/components/shot/ShotBrowser.vue
|
|
- Added selectedShotIds tracking
|
|
- Added getSelectedCount() function
|
|
- Added handleBulkTaskStatusChange() function
|
|
- Updated createStableMeta() with new callbacks
|
|
</div>
|
|
|
|
<h3>Key Components Used:</h3>
|
|
<ul class="feature-list">
|
|
<li>Popover/PopoverContent/PopoverTrigger for dropdown UI</li>
|
|
<li>TaskStatusBadge for colored status display</li>
|
|
<li>ChevronDown icon for dropdown button</li>
|
|
<li>Toast notifications for user feedback</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">✅ Acceptance Criteria</h2>
|
|
<ul class="feature-list">
|
|
<li>Bulk action buttons only appear when shots are selected (count > 0)</li>
|
|
<li>Each task type column has its own independent bulk action button</li>
|
|
<li>Popover shows all available task statuses with proper colors</li>
|
|
<li>Bulk updates work correctly for multiple selected shots</li>
|
|
<li>Success/error notifications provide appropriate feedback</li>
|
|
<li>UI matches the existing task table bulk action pattern</li>
|
|
<li>Performance remains smooth with multiple selections</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🚀 Ready for Testing</h2>
|
|
<p>The bulk task status change functionality has been implemented for the shot data table. The feature follows the same pattern as the existing task data table implementation and provides:</p>
|
|
<ul>
|
|
<li><strong>Conditional UI:</strong> Bulk action buttons appear only when shots are selected</li>
|
|
<li><strong>Intuitive Interface:</strong> Dropdown buttons in task column headers with colored status badges</li>
|
|
<li><strong>Bulk Operations:</strong> Update task status for multiple shots simultaneously</li>
|
|
<li><strong>User Feedback:</strong> Toast notifications for success/error states</li>
|
|
<li><strong>Consistent Design:</strong> Matches existing UI patterns and styling</li>
|
|
</ul>
|
|
|
|
<p><strong>Next Steps:</strong> Test the functionality in the application to ensure it works as expected and provides a smooth user experience.</p>
|
|
</div>
|
|
</body>
|
|
</html> |