212 lines
7.8 KiB
HTML
212 lines
7.8 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 Detail Panel Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.test-section h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
.success {
|
|
color: green;
|
|
font-weight: bold;
|
|
}
|
|
.error {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
.info {
|
|
color: blue;
|
|
}
|
|
pre {
|
|
background: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
}
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Task Detail Panel Component Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Instructions</h2>
|
|
<p>This test verifies the enhanced Task Detail Panel component with the following features:</p>
|
|
<ul>
|
|
<li><strong>Quick Action Buttons:</strong> Start Task, Submit Work, Reassign</li>
|
|
<li><strong>Status Update Control:</strong> Dropdown to change task status</li>
|
|
<li><strong>Task Assignment:</strong> Dialog to reassign tasks to project members</li>
|
|
<li><strong>Enhanced Metadata Display:</strong> Icons for deadline and assigned user</li>
|
|
<li><strong>Tabs:</strong> Notes, Attachments, and Submissions</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Manual Testing Steps</h2>
|
|
<ol>
|
|
<li>
|
|
<strong>Login to the application:</strong>
|
|
<button onclick="window.open('http://localhost:5174/login', '_blank')">Open Login Page</button>
|
|
</li>
|
|
<li>
|
|
<strong>Navigate to My Tasks:</strong>
|
|
<button onclick="window.open('http://localhost:5174/tasks', '_blank')">Open Tasks Page</button>
|
|
</li>
|
|
<li>
|
|
<strong>Click on a task</strong> to open the Task Detail Panel on the right side
|
|
</li>
|
|
<li>
|
|
<strong>Verify Quick Actions:</strong>
|
|
<ul>
|
|
<li>If task status is "Not Started" and you're assigned, you should see "Start Task" button</li>
|
|
<li>If task status is "In Progress" or "Retake" and you're assigned, you should see "Submit Work" button</li>
|
|
<li>If you're a coordinator or admin, you should see "Reassign" button</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<strong>Test Status Update:</strong>
|
|
<ul>
|
|
<li>Use the status dropdown to change the task status</li>
|
|
<li>Verify the status updates successfully</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<strong>Test Task Assignment (Coordinator/Admin only):</strong>
|
|
<ul>
|
|
<li>Click the "Reassign" button</li>
|
|
<li>Verify the assignment dialog opens</li>
|
|
<li>Search for a project member</li>
|
|
<li>Select a member and click "Assign"</li>
|
|
<li>Verify the task is reassigned successfully</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<strong>Verify Metadata Display:</strong>
|
|
<ul>
|
|
<li>Check that task type, status, deadline, and assigned user are displayed</li>
|
|
<li>Verify icons appear next to deadline and assigned user</li>
|
|
<li>Check deadline color coding (red for overdue, orange for soon, etc.)</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<strong>Test Tabs:</strong>
|
|
<ul>
|
|
<li>Switch between Notes, Attachments, and Submissions tabs</li>
|
|
<li>Verify badge counts appear on tabs</li>
|
|
<li>Test adding notes, uploading attachments, and viewing submissions</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Component Features Implemented</h2>
|
|
<div class="success">✓ Quick Action Buttons (Start Task, Submit Work, Reassign)</div>
|
|
<div class="success">✓ Status Update Dropdown</div>
|
|
<div class="success">✓ Task Assignment Dialog with Project Member Search</div>
|
|
<div class="success">✓ Enhanced Metadata Display with Icons</div>
|
|
<div class="success">✓ Deadline Color Coding</div>
|
|
<div class="success">✓ Context Information (Project, Episode, Shot, Asset)</div>
|
|
<div class="success">✓ Tabbed Interface (Notes, Attachments, Submissions)</div>
|
|
<div class="success">✓ Badge Counts on Tabs</div>
|
|
<div class="success">✓ Role-based Permission Checks</div>
|
|
<div class="success">✓ Department Role Display in Assignment Dialog</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>API Endpoints Used</h2>
|
|
<pre>
|
|
GET /tasks/{task_id} - Get task details
|
|
PUT /tasks/{task_id}/status - Update task status
|
|
PUT /tasks/{task_id}/assign - Assign task to user
|
|
GET /projects/{project_id}/members - Get project members
|
|
GET /tasks/{task_id}/notes - Get task notes
|
|
GET /tasks/{task_id}/attachments - Get task attachments
|
|
GET /tasks/{task_id}/submissions - Get task submissions
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Expected Behavior</h2>
|
|
<h3>Quick Actions:</h3>
|
|
<ul>
|
|
<li><strong>Start Task:</strong> Changes status from "Not Started" to "In Progress"</li>
|
|
<li><strong>Submit Work:</strong> Directs user to Submissions tab to upload work</li>
|
|
<li><strong>Reassign:</strong> Opens dialog to select new assignee from project members</li>
|
|
</ul>
|
|
|
|
<h3>Status Update:</h3>
|
|
<ul>
|
|
<li>Artists can update status of their own tasks</li>
|
|
<li>Coordinators and admins can update any task status</li>
|
|
<li>Status changes are reflected immediately in the UI</li>
|
|
</ul>
|
|
|
|
<h3>Task Assignment:</h3>
|
|
<ul>
|
|
<li>Only coordinators and admins can reassign tasks</li>
|
|
<li>Assignment dialog shows all project members with their department roles</li>
|
|
<li>Search functionality filters members by name</li>
|
|
<li>Current assignee is pre-selected when dialog opens</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Results</h2>
|
|
<p>After completing the manual tests above, document your results:</p>
|
|
<textarea id="testResults" rows="10" style="width: 100%; padding: 10px; font-family: monospace;">
|
|
Test Date:
|
|
Tester:
|
|
Browser:
|
|
|
|
Results:
|
|
- Quick Actions:
|
|
- Status Update:
|
|
- Task Assignment:
|
|
- Metadata Display:
|
|
- Tabs:
|
|
- Overall:
|
|
|
|
Issues Found:
|
|
|
|
</textarea>
|
|
<button onclick="copyResults()">Copy Results</button>
|
|
</div>
|
|
|
|
<script>
|
|
function copyResults() {
|
|
const textarea = document.getElementById('testResults');
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
alert('Test results copied to clipboard!');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|