266 lines
11 KiB
HTML
266 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>Test: Bulk Status Update with Custom Statuses</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
background: #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;
|
|
}
|
|
.requirement {
|
|
background: #e7f3ff;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.test-case {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.pass {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.fail {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
.code {
|
|
background: #f4f4f4;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 10px 0;
|
|
}
|
|
ul {
|
|
line-height: 1.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Test: Bulk Status Update with Custom Statuses</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Task 20: Frontend - Update bulk status update to support custom statuses</h2>
|
|
|
|
<div class="requirement">
|
|
<strong>Requirements:</strong>
|
|
<ul>
|
|
<li>10.1: Modify TaskBulkActionsMenu.vue</li>
|
|
<li>10.2: Fetch custom statuses for current project</li>
|
|
<li>10.3: Include custom statuses in bulk update dropdown</li>
|
|
<li>10.4: Validate all selected tasks are from same project</li>
|
|
<li>10.5: Show color indicators in dropdown</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Implementation Changes</h2>
|
|
|
|
<div class="test-case">
|
|
<h3>1. Component Props Updated</h3>
|
|
<div class="code">
|
|
interface Props {<br>
|
|
selectedTasks: Task[] // NEW: Added to validate project consistency<br>
|
|
// ... other props<br>
|
|
}
|
|
</div>
|
|
<p><span class="pass">✓</span> Added selectedTasks prop to receive task data</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>2. Custom Status Fetching</h3>
|
|
<div class="code">
|
|
const fetchStatuses = async () => {<br>
|
|
const response = await customTaskStatusService.getAllStatuses(projectId)<br>
|
|
systemStatuses.value = response.system_statuses<br>
|
|
customStatuses.value = response.statuses<br>
|
|
}
|
|
</div>
|
|
<p><span class="pass">✓</span> Fetches both system and custom statuses from API</p>
|
|
<p><span class="pass">✓</span> Fetches when menu opens</p>
|
|
<p><span class="pass">✓</span> Refetches when project changes</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>3. Multi-Project Validation</h3>
|
|
<div class="code">
|
|
const hasMultipleProjects = computed(() => {<br>
|
|
const projectIds = new Set(props.selectedTasks.map(task => task.project_id))<br>
|
|
return projectIds.size > 1<br>
|
|
})
|
|
</div>
|
|
<p><span class="pass">✓</span> Validates all selected tasks are from same project</p>
|
|
<p><span class="pass">✓</span> Disables status update when multiple projects detected</p>
|
|
<p><span class="pass">✓</span> Shows warning message to user</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>4. Status Display with Color Indicators</h3>
|
|
<div class="code">
|
|
<div class="w-2 h-2 rounded-full" :style="{ backgroundColor: status.color }" /><br>
|
|
<span>{{ status.name }}</span>
|
|
</div>
|
|
<p><span class="pass">✓</span> Shows color indicator for each status</p>
|
|
<p><span class="pass">✓</span> Separates system and custom statuses with labels</p>
|
|
<p><span class="pass">✓</span> Uses status color from API response</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>5. Status Selection</h3>
|
|
<div class="code">
|
|
const handleStatusSelected = (status: string) => {<br>
|
|
emit('status-selected', status)<br>
|
|
isOpen.value = false<br>
|
|
}
|
|
</div>
|
|
<p><span class="pass">✓</span> Emits status ID (string) instead of enum</p>
|
|
<p><span class="pass">✓</span> Supports both system and custom status IDs</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>6. Service Layer Updates</h3>
|
|
<div class="code">
|
|
// task.ts<br>
|
|
async bulkUpdateStatus(taskIds: number[], status: string): Promise<BulkActionResult>
|
|
</div>
|
|
<p><span class="pass">✓</span> Updated to accept string status instead of enum</p>
|
|
<p><span class="pass">✓</span> Compatible with custom status IDs</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Testing Instructions</h2>
|
|
|
|
<div class="test-case">
|
|
<h3>Manual Testing Steps</h3>
|
|
<ol>
|
|
<li><strong>Setup:</strong>
|
|
<ul>
|
|
<li>Create a project with custom task statuses</li>
|
|
<li>Create multiple tasks in the project</li>
|
|
<li>Navigate to the Tasks view</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Test Single Project Selection:</strong>
|
|
<ul>
|
|
<li>Select multiple tasks from the same project</li>
|
|
<li>Right-click to open context menu</li>
|
|
<li>Click "Set Status" submenu</li>
|
|
<li>Verify system statuses appear with "System Statuses" label</li>
|
|
<li>Verify custom statuses appear with "Custom Statuses" label</li>
|
|
<li>Verify each status has a color indicator dot</li>
|
|
<li>Click a custom status</li>
|
|
<li>Verify tasks are updated successfully</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Test Multi-Project Validation:</strong>
|
|
<ul>
|
|
<li>Select tasks from different projects (if possible)</li>
|
|
<li>Right-click to open context menu</li>
|
|
<li>Verify warning message: "Selected tasks are from different projects"</li>
|
|
<li>Verify "Set Status" button is disabled</li>
|
|
<li>Verify "Assign To" buttons are disabled</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Test Status Loading:</strong>
|
|
<ul>
|
|
<li>Select tasks and open context menu</li>
|
|
<li>Verify "Loading statuses..." appears briefly</li>
|
|
<li>Verify statuses load correctly</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Test Color Indicators:</strong>
|
|
<ul>
|
|
<li>Verify each status has a colored dot matching its configured color</li>
|
|
<li>Verify system statuses use their default colors</li>
|
|
<li>Verify custom statuses use their configured colors</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Requirements Coverage</h2>
|
|
|
|
<div class="test-case">
|
|
<h3>Requirement 10.1: Modify TaskBulkActionsMenu.vue</h3>
|
|
<p><span class="pass">✓ PASS</span> - Component modified with new props and status fetching logic</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Requirement 10.2: Fetch custom statuses for current project</h3>
|
|
<p><span class="pass">✓ PASS</span> - Fetches statuses using customTaskStatusService.getAllStatuses()</p>
|
|
<p><span class="pass">✓ PASS</span> - Fetches when menu opens and when project changes</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Requirement 10.3: Include custom statuses in bulk update dropdown</h3>
|
|
<p><span class="pass">✓ PASS</span> - Displays both system and custom statuses</p>
|
|
<p><span class="pass">✓ PASS</span> - Separates them with section labels</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Requirement 10.4: Validate all selected tasks are from same project</h3>
|
|
<p><span class="pass">✓ PASS</span> - Computes hasMultipleProjects from selectedTasks</p>
|
|
<p><span class="pass">✓ PASS</span> - Disables actions when multiple projects detected</p>
|
|
<p><span class="pass">✓ PASS</span> - Shows warning message to user</p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Requirement 10.5: Show color indicators in dropdown</h3>
|
|
<p><span class="pass">✓ PASS</span> - Displays colored dot for each status</p>
|
|
<p><span class="pass">✓ PASS</span> - Uses status.color from API response</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Files Modified</h2>
|
|
<ul>
|
|
<li><code>frontend/src/components/task/TaskBulkActionsMenu.vue</code> - Updated to fetch and display custom statuses</li>
|
|
<li><code>frontend/src/components/task/TaskBrowser.vue</code> - Pass selectedTasks prop to menu</li>
|
|
<li><code>frontend/src/services/task.ts</code> - Updated bulkUpdateStatus to accept string status</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Summary</h2>
|
|
<p><strong>Status:</strong> <span class="pass">✓ IMPLEMENTATION COMPLETE</span></p>
|
|
<p>All requirements have been implemented:</p>
|
|
<ul>
|
|
<li>✓ Component modified to support custom statuses</li>
|
|
<li>✓ Custom statuses fetched from API for current project</li>
|
|
<li>✓ Both system and custom statuses displayed in dropdown</li>
|
|
<li>✓ Multi-project validation prevents cross-project updates</li>
|
|
<li>✓ Color indicators shown for all statuses</li>
|
|
</ul>
|
|
<p><strong>Next Steps:</strong> Manual testing in the application to verify functionality</p>
|
|
</div>
|
|
</body>
|
|
</html>
|