267 lines
11 KiB
HTML
267 lines
11 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 Consistency 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;
|
|
}
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 15px 0;
|
|
}
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
.comparison-table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: bold;
|
|
}
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
.status-not-started { background-color: #6c757d; color: white; }
|
|
.status-in-progress { background-color: #007bff; color: white; }
|
|
.status-submitted { background-color: #ffc107; color: black; }
|
|
.status-approved { background-color: #28a745; color: white; }
|
|
.status-retake { background-color: #dc3545; color: white; }
|
|
.status-custom { background-color: #6f42c1; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Shot Bulk Status Consistency - Test Plan</h1>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🎯 Issue Fixed</h2>
|
|
<p>The bulk task status change popover was showing only system statuses (TaskStatus enum values) while the individual EditableTaskStatus components showed both system and custom statuses from the task statuses store.</p>
|
|
|
|
<h3>Root Cause:</h3>
|
|
<ul class="feature-list">
|
|
<li>Bulk popover used <code>Object.values(TaskStatus)</code> - only system statuses</li>
|
|
<li>EditableTaskStatus used <code>taskStatusesStore.getAllStatusOptions()</code> - system + custom statuses</li>
|
|
<li>Store was being accessed incorrectly inside column definition (no Vue context)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🔧 Solution Implemented</h2>
|
|
|
|
<h3>Changes Made:</h3>
|
|
<ul class="feature-list">
|
|
<li>Updated ShotColumnMeta interface to include getAllStatusOptions callback</li>
|
|
<li>Modified ShotBrowser to provide status options from taskStatusesStore</li>
|
|
<li>Added loadTaskStatuses() function to load custom statuses on project change</li>
|
|
<li>Updated bulk popover to use same status source as EditableTaskStatus</li>
|
|
<li>Ensured TaskStatusBadge component consistency across both interfaces</li>
|
|
</ul>
|
|
|
|
<div class="code-block">
|
|
// Before (only system statuses):
|
|
Object.values(TaskStatus).map((status) => ...)
|
|
|
|
// After (system + custom statuses):
|
|
meta.getAllStatusOptions?.().map((statusOption) => ...)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🧪 Test Scenarios</h2>
|
|
|
|
<h3>Test 1: Status List Consistency</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Navigate to shot table with task columns visible</li>
|
|
<li>Click on any individual task status dropdown (EditableTaskStatus)</li>
|
|
<li>Note the available status options and their colors</li>
|
|
<li>Close the dropdown</li>
|
|
<li>Select multiple shots</li>
|
|
<li>Click the bulk action button in the same task column header</li>
|
|
<li>Compare the status options in the bulk popover</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> Both lists should be identical - same statuses, same colors, same order
|
|
</div>
|
|
|
|
<h3>Test 2: Custom Status Support</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Ensure the project has custom task statuses configured</li>
|
|
<li>Verify individual EditableTaskStatus shows custom statuses</li>
|
|
<li>Verify bulk popover also shows the same custom statuses</li>
|
|
<li>Test bulk updating to a custom status</li>
|
|
<li>Verify all selected shots update to the custom status</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> Custom statuses work in both individual and bulk operations
|
|
</div>
|
|
|
|
<h3>Test 3: Status Badge Appearance</h3>
|
|
<div class="test-steps">
|
|
<ol>
|
|
<li>Compare status badge colors between individual and bulk interfaces</li>
|
|
<li>Verify custom status colors are preserved</li>
|
|
<li>Check that compact styling is consistent</li>
|
|
<li>Test with different status types (system vs custom)</li>
|
|
</ol>
|
|
</div>
|
|
<div class="expected-result">
|
|
<strong>Expected:</strong> Identical visual appearance and colors across both interfaces
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">📊 Status Comparison</h2>
|
|
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Status Type</th>
|
|
<th>Individual EditableTaskStatus</th>
|
|
<th>Bulk Popover (Fixed)</th>
|
|
<th>Source</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>System Statuses</td>
|
|
<td>
|
|
<span class="status-badge status-not-started">Not Started</span>
|
|
<span class="status-badge status-in-progress">In Progress</span>
|
|
<span class="status-badge status-submitted">Submitted</span>
|
|
<span class="status-badge status-approved">Approved</span>
|
|
<span class="status-badge status-retake">Retake</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-badge status-not-started">Not Started</span>
|
|
<span class="status-badge status-in-progress">In Progress</span>
|
|
<span class="status-badge status-submitted">Submitted</span>
|
|
<span class="status-badge status-approved">Approved</span>
|
|
<span class="status-badge status-retake">Retake</span>
|
|
</td>
|
|
<td>taskStatusesStore.getAllStatusOptions()</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Custom Statuses</td>
|
|
<td><span class="status-badge status-custom">Custom Status</span></td>
|
|
<td><span class="status-badge status-custom">Custom Status</span></td>
|
|
<td>taskStatusesStore.getAllStatusOptions()</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🔄 Data Flow</h2>
|
|
|
|
<h3>Updated Architecture:</h3>
|
|
<div class="code-block">
|
|
ShotBrowser Component:
|
|
├── taskStatusesStore.fetchProjectStatuses() // Load on project change
|
|
├── createStableMeta()
|
|
│ └── getAllStatusOptions: () => taskStatusesStore.getAllStatusOptions()
|
|
├── Shot Columns
|
|
│ ├── EditableTaskStatus (individual)
|
|
│ │ └── Uses: taskStatusesStore.getAllStatusOptions()
|
|
│ └── Bulk Popover
|
|
│ └── Uses: meta.getAllStatusOptions() // Same source!
|
|
</div>
|
|
|
|
<h3>Key Benefits:</h3>
|
|
<ul class="feature-list">
|
|
<li>Single source of truth for all task statuses</li>
|
|
<li>Automatic custom status support in bulk operations</li>
|
|
<li>Consistent colors and styling across interfaces</li>
|
|
<li>Proper Vue reactivity and store integration</li>
|
|
<li>Future-proof for new custom statuses</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">✅ Acceptance Criteria</h2>
|
|
<ul class="feature-list">
|
|
<li>Bulk popover shows identical status list as individual EditableTaskStatus</li>
|
|
<li>Custom task statuses appear in both individual and bulk interfaces</li>
|
|
<li>Status colors and styling are consistent across both interfaces</li>
|
|
<li>TaskStatusBadge component renders identically in both contexts</li>
|
|
<li>Bulk operations work with both system and custom statuses</li>
|
|
<li>Status list updates automatically when custom statuses change</li>
|
|
<li>No console errors or warnings related to store access</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2 class="test-title">🚀 Ready for Testing</h2>
|
|
<p>The shot bulk status change functionality now uses the same task status source as the individual EditableTaskStatus components, ensuring complete consistency between individual and bulk operations.</p>
|
|
|
|
<p><strong>Key Improvement:</strong> Users will now see the same comprehensive list of task statuses (including custom ones) in both the individual dropdowns and bulk action popovers, providing a unified and consistent experience across the application.</p>
|
|
</div>
|
|
</body>
|
|
</html> |