252 lines
10 KiB
HTML
252 lines
10 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 Debug</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.debug-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.debug-title {
|
|
color: #333;
|
|
border-bottom: 2px solid #dc3545;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.debug-section {
|
|
margin-bottom: 30px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.debug-step {
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #dc3545;
|
|
}
|
|
.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;
|
|
}
|
|
.fix-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
.fix-list li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.fix-list li:before {
|
|
content: "🔧 ";
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="debug-container">
|
|
<h1 class="debug-title">🐛 Assignment Popover Debug Guide</h1>
|
|
|
|
<div class="debug-section">
|
|
<h2>🔍 Problem Analysis</h2>
|
|
<p>The EditableTaskStatus assignment button is not showing the popover user list. Let's debug this step by step.</p>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h2>🔧 Fixes Applied</h2>
|
|
<ul class="fix-list">
|
|
<li><strong>Added handleAssignmentButtonClick function</strong> - Properly handles button clicks and popover state</li>
|
|
<li><strong>Added popover watcher</strong> - Loads project members when popover opens</li>
|
|
<li><strong>Improved error handling</strong> - Shows "No project members found" when list is empty</li>
|
|
<li><strong>Added console logging</strong> - For debugging project member loading</li>
|
|
<li><strong>Fixed popover trigger logic</strong> - Ensures popover opens/closes correctly</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h2>🧪 Debug Steps</h2>
|
|
<div class="debug-step">
|
|
<h3>1. Check Browser Console</h3>
|
|
<p>Open browser dev tools and look for these console messages:</p>
|
|
<ul>
|
|
<li><code>Assignment button clicked, popover open: false</code></li>
|
|
<li><code>Loading project members for project: [PROJECT_ID]</code></li>
|
|
<li><code>Loaded project members: [ARRAY]</code></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="debug-step">
|
|
<h3>2. Verify Project Members API</h3>
|
|
<p>Check if the project members API is working:</p>
|
|
<ul>
|
|
<li>Open Network tab in dev tools</li>
|
|
<li>Click the assignment button</li>
|
|
<li>Look for API call to <code>/projects/{id}/members</code></li>
|
|
<li>Verify the response contains user data</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="debug-step">
|
|
<h3>3. Check Popover State</h3>
|
|
<p>Verify the popover component is working:</p>
|
|
<ul>
|
|
<li>Look for the popover element in DOM inspector</li>
|
|
<li>Check if <code>isAssignmentPopoverOpen</code> is changing to <code>true</code></li>
|
|
<li>Verify no CSS is hiding the popover</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="debug-step">
|
|
<h3>4. Test Button Interaction</h3>
|
|
<p>Verify the button is clickable:</p>
|
|
<ul>
|
|
<li>Check if button is disabled (should not be)</li>
|
|
<li>Verify click events are not being prevented by parent elements</li>
|
|
<li>Test with different task types and shots</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h2>🔄 Updated Code Logic</h2>
|
|
<div class="debug-step">
|
|
<h3>Button Click Handler</h3>
|
|
<p>The new <code>handleAssignmentButtonClick</code> function:</p>
|
|
<ol>
|
|
<li>Logs the current popover state</li>
|
|
<li>Loads project members if popover is closed</li>
|
|
<li>Toggles the popover state</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="debug-step">
|
|
<h3>Popover Watcher</h3>
|
|
<p>Added a watcher that:</p>
|
|
<ol>
|
|
<li>Monitors <code>isAssignmentPopoverOpen</code> changes</li>
|
|
<li>Loads project members when popover opens</li>
|
|
<li>Only loads if members list is empty</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="debug-step">
|
|
<h3>Error State Handling</h3>
|
|
<p>Added proper error state display:</p>
|
|
<ol>
|
|
<li>Shows loading spinner while fetching members</li>
|
|
<li>Shows "No project members found" if list is empty</li>
|
|
<li>Only shows unassign/member buttons if members exist</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h2>🎯 Common Issues & Solutions</h2>
|
|
<div class="debug-step">
|
|
<h3>Issue: Popover doesn't open</h3>
|
|
<p><span class="error">Cause:</span> Click event might be prevented by parent table row</p>
|
|
<p><span class="success">Solution:</span> Added <code>@click.stop</code> to prevent event bubbling</p>
|
|
</div>
|
|
|
|
<div class="debug-step">
|
|
<h3>Issue: No project members shown</h3>
|
|
<p><span class="error">Cause:</span> API might be failing or returning empty array</p>
|
|
<p><span class="success">Solution:</span> Added console logging and error state display</p>
|
|
</div>
|
|
|
|
<div class="debug-step">
|
|
<h3>Issue: Button appears disabled</h3>
|
|
<p><span class="error">Cause:</span> Loading states might be preventing interaction</p>
|
|
<p><span class="success">Solution:</span> Check <code>isUpdating</code> and <code>isLoadingMembers</code> states</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h2>✅ Testing Checklist</h2>
|
|
<div class="debug-step">
|
|
<h3>Manual Testing Steps</h3>
|
|
<ol>
|
|
<li>Navigate to shots page in a project</li>
|
|
<li>Find a task status column with user assignment button</li>
|
|
<li>Click the user icon button (should be User icon or avatar)</li>
|
|
<li>Verify popover opens with loading spinner</li>
|
|
<li>Wait for project members to load</li>
|
|
<li>Verify member list appears with names and avatars</li>
|
|
<li>Test assigning a task to a user</li>
|
|
<li>Test unassigning a task</li>
|
|
<li>Verify popover closes after selection</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h2>🚀 Expected Behavior</h2>
|
|
<p><span class="success">✓ Button Click:</span> Opens popover immediately</p>
|
|
<p><span class="success">✓ Loading State:</span> Shows spinner while fetching members</p>
|
|
<p><span class="success">✓ Member List:</span> Displays all project members with avatars</p>
|
|
<p><span class="success">✓ Assignment:</span> Assigns task and closes popover</p>
|
|
<p><span class="success">✓ Unassignment:</span> Removes assignment and closes popover</p>
|
|
<p><span class="success">✓ Error Handling:</span> Shows appropriate messages for errors</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🐛 Assignment Popover Debug Guide loaded');
|
|
console.log('📋 Follow the debug steps above to troubleshoot the popover issue');
|
|
|
|
// Add some interactive debugging helpers
|
|
window.debugAssignment = {
|
|
checkPopoverState: () => {
|
|
console.log('🔍 Checking for EditableTaskStatus components...');
|
|
const components = document.querySelectorAll('[data-testid="editable-task-status"]');
|
|
console.log(`Found ${components.length} EditableTaskStatus components`);
|
|
return components;
|
|
},
|
|
|
|
checkProjectMembers: () => {
|
|
console.log('🔍 Check browser network tab for /projects/{id}/members API calls');
|
|
console.log('🔍 Look for console messages about project member loading');
|
|
},
|
|
|
|
testPopover: () => {
|
|
console.log('🧪 Click on any user assignment button and check console for debug messages');
|
|
}
|
|
};
|
|
|
|
console.log('🛠️ Debug helpers available: window.debugAssignment');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |