Init Repo
This commit is contained in:
@@ -0,0 +1,211 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user