350 lines
14 KiB
HTML
350 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Assignment Popover Validation</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.validation-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.validation-title {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.test-step {
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.success {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.error {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
.warning {
|
|
color: #ffc107;
|
|
font-weight: bold;
|
|
}
|
|
.info {
|
|
color: #17a2b8;
|
|
font-weight: bold;
|
|
}
|
|
.code {
|
|
background-color: #f1f1f1;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
}
|
|
.checklist {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
.checklist li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.checklist li:before {
|
|
content: "☐ ";
|
|
color: #007bff;
|
|
font-weight: bold;
|
|
}
|
|
.checklist li.completed:before {
|
|
content: "✅ ";
|
|
color: #28a745;
|
|
}
|
|
.button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.test-results {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="validation-container">
|
|
<h1 class="validation-title">🧪 Assignment Popover Validation</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Current Implementation Status</h2>
|
|
<p>Based on the code analysis, the EditableTaskStatus component has been updated with comprehensive fixes:</p>
|
|
|
|
<ul class="checklist">
|
|
<li class="completed">Event prevention wrapper (<code>@click.stop</code>)</li>
|
|
<li class="completed">Proper z-index management (z-10 for button, z-50 for popover)</li>
|
|
<li class="completed">Watcher-based project member loading</li>
|
|
<li class="completed">Debug information display</li>
|
|
<li class="completed">Loading states and error handling</li>
|
|
<li class="completed">Assignment and unassignment functionality</li>
|
|
<li class="completed">Avatar display for assigned users</li>
|
|
<li class="completed">Toast notifications for success/error</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Manual Testing Checklist</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 1: Navigate to Shots Table</h3>
|
|
<ul class="checklist">
|
|
<li>Go to any project's shots page</li>
|
|
<li>Switch to table view if not already selected</li>
|
|
<li>Look for task status columns (e.g., Animation, Lighting, etc.)</li>
|
|
<li>Identify assignment buttons (👤 user icon or 🔵 avatar)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 2: Test Popover Opening</h3>
|
|
<ul class="checklist">
|
|
<li>Click on any assignment button</li>
|
|
<li>Verify popover opens immediately</li>
|
|
<li>Check that popover doesn't close when clicking inside it</li>
|
|
<li>Verify popover closes when clicking outside</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 3: Verify Content Loading</h3>
|
|
<ul class="checklist">
|
|
<li>Check debug info shows correct project ID</li>
|
|
<li>Verify member count is displayed</li>
|
|
<li>Confirm loading spinner appears if needed</li>
|
|
<li>Verify project members list loads</li>
|
|
<li>Check that retry button works if no members found</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 4: Test Assignment Functionality</h3>
|
|
<ul class="checklist">
|
|
<li>Click on a project member to assign</li>
|
|
<li>Verify popover closes after assignment</li>
|
|
<li>Check that button shows assigned user's avatar</li>
|
|
<li>Confirm success toast notification appears</li>
|
|
<li>Test unassignment by clicking "Unassign"</li>
|
|
<li>Verify button reverts to user icon</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 5: Console Verification</h3>
|
|
<ul class="checklist">
|
|
<li>Open browser dev tools (F12)</li>
|
|
<li>Look for "Popover state changed: true" message</li>
|
|
<li>Check for "Loading project members" messages</li>
|
|
<li>Verify no JavaScript errors appear</li>
|
|
<li>Confirm API calls to /projects/{id}/members</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🛠️ Interactive Testing Tools</h2>
|
|
|
|
<button class="button" onclick="findAssignmentButtons()">Find Assignment Buttons</button>
|
|
<button class="button" onclick="checkPopoverElements()">Check Popover Elements</button>
|
|
<button class="button" onclick="simulateClick()">Simulate Button Click</button>
|
|
<button class="button" onclick="checkConsoleMessages()">Show Expected Console Messages</button>
|
|
|
|
<div id="testResults" class="test-results" style="display: none;">
|
|
<h4>Test Results:</h4>
|
|
<div id="resultsContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🚨 Common Issues & Solutions</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Issue: Popover doesn't open</h3>
|
|
<p><span class="error">Symptoms:</span> Clicking assignment button does nothing</p>
|
|
<p><span class="success">Solutions:</span></p>
|
|
<ul>
|
|
<li>Check browser console for JavaScript errors</li>
|
|
<li>Verify Popover components are imported correctly</li>
|
|
<li>Ensure button is not disabled</li>
|
|
<li>Try refreshing the page</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Issue: Popover opens but no members</h3>
|
|
<p><span class="error">Symptoms:</span> Empty popover or "No project members found"</p>
|
|
<p><span class="success">Solutions:</span></p>
|
|
<ul>
|
|
<li>Check network tab for API calls to <code>/projects/{id}/members</code></li>
|
|
<li>Verify API response contains user data</li>
|
|
<li>Check user permissions for viewing project members</li>
|
|
<li>Try the retry button in the popover</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Issue: Assignment fails</h3>
|
|
<p><span class="error">Symptoms:</span> Clicking member doesn't assign task</p>
|
|
<p><span class="success">Solutions:</span></p>
|
|
<ul>
|
|
<li>Check console for assignment errors</li>
|
|
<li>Verify user has coordinator/admin permissions</li>
|
|
<li>Ensure task creation endpoints are working</li>
|
|
<li>Check backend assignment API endpoints</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Success Criteria</h2>
|
|
<p>The assignment popover is working correctly if:</p>
|
|
|
|
<ul class="checklist">
|
|
<li>Popover opens when clicking assignment buttons</li>
|
|
<li>Project members load and display with avatars</li>
|
|
<li>Debug information is visible</li>
|
|
<li>Assignment and unassignment work properly</li>
|
|
<li>Visual feedback (avatar changes) occurs</li>
|
|
<li>Success notifications appear</li>
|
|
<li>No console errors are present</li>
|
|
<li>Popover positioning is correct</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎉 Implementation Summary</h2>
|
|
<p>The EditableTaskStatus component now includes:</p>
|
|
|
|
<div class="test-step">
|
|
<h3>Key Features Implemented:</h3>
|
|
<ul>
|
|
<li><strong>Robust Event Handling:</strong> Prevents table row interference</li>
|
|
<li><strong>Smart Loading:</strong> Loads members when popover opens</li>
|
|
<li><strong>Visual Feedback:</strong> Shows loading states and debug info</li>
|
|
<li><strong>Error Handling:</strong> Graceful fallbacks and retry options</li>
|
|
<li><strong>Assignment Logic:</strong> Handles both assignment and unassignment</li>
|
|
<li><strong>UI Polish:</strong> Proper z-indexing and positioning</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showResults(content) {
|
|
const resultsDiv = document.getElementById('testResults');
|
|
const contentDiv = document.getElementById('resultsContent');
|
|
contentDiv.innerHTML = content;
|
|
resultsDiv.style.display = 'block';
|
|
}
|
|
|
|
function findAssignmentButtons() {
|
|
const buttons = document.querySelectorAll('[data-testid="editable-task-status"] button');
|
|
const content = `
|
|
<p><strong>Found ${buttons.length} assignment buttons</strong></p>
|
|
${buttons.length > 0 ?
|
|
`<p>Buttons found in task status components. Look for:</p>
|
|
<ul>
|
|
<li>👤 User icon for unassigned tasks</li>
|
|
<li>🔵 Avatar with initials for assigned tasks</li>
|
|
</ul>` :
|
|
'<p class="error">No assignment buttons found. Make sure you\'re on the shots table view.</p>'
|
|
}
|
|
`;
|
|
showResults(content);
|
|
console.log(`🔍 Found ${buttons.length} assignment buttons`);
|
|
}
|
|
|
|
function checkPopoverElements() {
|
|
const popovers = document.querySelectorAll('[data-radix-popper-content-wrapper]');
|
|
const triggers = document.querySelectorAll('[data-radix-collection-item]');
|
|
|
|
const content = `
|
|
<p><strong>Popover Elements Check:</strong></p>
|
|
<ul>
|
|
<li>Popover content wrappers: ${popovers.length}</li>
|
|
<li>Popover triggers: ${triggers.length}</li>
|
|
</ul>
|
|
<p>These elements are created dynamically when popovers are opened.</p>
|
|
`;
|
|
showResults(content);
|
|
console.log(`🔍 Popover elements - Content: ${popovers.length}, Triggers: ${triggers.length}`);
|
|
}
|
|
|
|
function simulateClick() {
|
|
const buttons = document.querySelectorAll('[data-testid="editable-task-status"] button');
|
|
if (buttons.length > 0) {
|
|
console.log('🖱️ Simulating click on first assignment button');
|
|
buttons[0].click();
|
|
showResults('<p class="success">Clicked first assignment button. Check if popover opened!</p>');
|
|
} else {
|
|
showResults('<p class="error">No assignment buttons found to click.</p>');
|
|
}
|
|
}
|
|
|
|
function checkConsoleMessages() {
|
|
const content = `
|
|
<p><strong>Expected Console Messages:</strong></p>
|
|
<ul>
|
|
<li><code>Popover state changed: true</code></li>
|
|
<li><code>Loading project members when popover opens</code></li>
|
|
<li><code>Loading project members for project: [ID]</code></li>
|
|
<li><code>Loaded project members: [...]</code></li>
|
|
</ul>
|
|
<p>Open browser dev tools (F12) and click an assignment button to see these messages.</p>
|
|
`;
|
|
showResults(content);
|
|
console.log('🔍 Check console for these messages after clicking assignment buttons');
|
|
}
|
|
|
|
// Auto-run basic checks on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🧪 Assignment Popover Validation loaded');
|
|
console.log('✅ Use the buttons above to test the assignment functionality');
|
|
|
|
// Check if we're on the right page
|
|
setTimeout(() => {
|
|
const buttons = document.querySelectorAll('[data-testid="editable-task-status"]');
|
|
if (buttons.length > 0) {
|
|
console.log(`✅ Found ${buttons.length} EditableTaskStatus components on this page`);
|
|
} else {
|
|
console.log('⚠️ No EditableTaskStatus components found. Navigate to a shots table view.');
|
|
}
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |