242 lines
8.5 KiB
HTML
242 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Popover Fix Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.fix-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.fix-title {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.fix-section {
|
|
margin-bottom: 30px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.fix-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: 10px;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="fix-container">
|
|
<h1 class="fix-title">🔧 Simple Popover Fix</h1>
|
|
|
|
<div class="fix-section">
|
|
<h2>🎯 Identified Issue</h2>
|
|
<p>The problem might be with the <code>v-model:open</code> binding on the Popover component. Let's test different approaches.</p>
|
|
</div>
|
|
|
|
<div class="fix-section">
|
|
<h2>🔍 Analysis</h2>
|
|
|
|
<div class="fix-step">
|
|
<h3>Current Implementation (Not Working)</h3>
|
|
<div class="code"><Popover v-model:open="isAssignmentPopoverOpen">
|
|
<PopoverTrigger as-child>
|
|
<Button>...</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>...</PopoverContent>
|
|
</Popover></div>
|
|
<p><span class="error">Issue:</span> The <code>v-model:open</code> might be preventing the popover from opening naturally.</p>
|
|
</div>
|
|
|
|
<div class="fix-step">
|
|
<h3>Working Example (DatePicker)</h3>
|
|
<div class="code"><Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button>...</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>...</PopoverContent>
|
|
</Popover></div>
|
|
<p><span class="success">Works:</span> No <code>v-model:open</code> binding, lets Popover manage its own state.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fix-section">
|
|
<h2>🛠️ Proposed Fix</h2>
|
|
|
|
<div class="fix-step">
|
|
<h3>Option 1: Remove v-model:open (Recommended)</h3>
|
|
<p>Let the Popover component manage its own open/close state naturally.</p>
|
|
<div class="code"><!-- Remove v-model:open binding -->
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button>...</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>...</PopoverContent>
|
|
</Popover></div>
|
|
<p><span class="success">Pros:</span> Simple, follows working examples, less state management</p>
|
|
<p><span class="warning">Cons:</span> Can't programmatically control popover state</p>
|
|
</div>
|
|
|
|
<div class="fix-step">
|
|
<h3>Option 2: Use @update:open event</h3>
|
|
<p>Listen for state changes instead of binding with v-model.</p>
|
|
<div class="code"><Popover @update:open="handlePopoverStateChange">
|
|
<PopoverTrigger as-child>
|
|
<Button>...</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>...</PopoverContent>
|
|
</Popover></div>
|
|
<p><span class="success">Pros:</span> Can still track state changes</p>
|
|
<p><span class="info">Note:</span> Need to implement handlePopoverStateChange method</p>
|
|
</div>
|
|
|
|
<div class="fix-step">
|
|
<h3>Option 3: Check reka-ui version compatibility</h3>
|
|
<p>The <code>v-model:open</code> might not be supported in the current reka-ui version.</p>
|
|
<div class="code">// Check package.json for reka-ui version
|
|
// Verify if v-model:open is supported</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fix-section">
|
|
<h2>🚀 Implementation Steps</h2>
|
|
|
|
<div class="fix-step">
|
|
<h3>Step 1: Try Option 1 (Quick Fix)</h3>
|
|
<ol>
|
|
<li>Remove <code>v-model:open="isAssignmentPopoverOpen"</code> from Popover</li>
|
|
<li>Remove <code>isAssignmentPopoverOpen</code> ref if not used elsewhere</li>
|
|
<li>Remove the watcher for <code>isAssignmentPopoverOpen</code></li>
|
|
<li>Test if popover opens when clicking the button</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="fix-step">
|
|
<h3>Step 2: Adjust Member Loading</h3>
|
|
<p>Since we can't watch for popover state, load members on button click or component mount:</p>
|
|
<div class="code">// Option A: Load on component mount (current preload strategy)
|
|
onMounted(() => {
|
|
loadProjectMembers()
|
|
})
|
|
|
|
// Option B: Load on button click
|
|
<PopoverTrigger as-child>
|
|
<Button @click="loadProjectMembers">...</Button>
|
|
</PopoverTrigger></div>
|
|
</div>
|
|
|
|
<div class="fix-step">
|
|
<h3>Step 3: Handle Popover Closing</h3>
|
|
<p>For closing popover after assignment, we can:</p>
|
|
<div class="code">// Use a ref to the popover and close it programmatically
|
|
// Or rely on natural popover behavior (clicking outside closes it)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fix-section">
|
|
<h2>🧪 Testing Plan</h2>
|
|
|
|
<div class="fix-step">
|
|
<h3>Test Scenario 1: Basic Popover Opening</h3>
|
|
<ol>
|
|
<li>Navigate to shots table</li>
|
|
<li>Click assignment button</li>
|
|
<li>Verify popover opens</li>
|
|
<li>Verify popover content is visible</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="fix-step">
|
|
<h3>Test Scenario 2: Member Loading</h3>
|
|
<ol>
|
|
<li>Open popover</li>
|
|
<li>Verify debug info shows project ID</li>
|
|
<li>Verify members list loads</li>
|
|
<li>Check console for loading messages</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="fix-step">
|
|
<h3>Test Scenario 3: Assignment Functionality</h3>
|
|
<ol>
|
|
<li>Click on a member in the list</li>
|
|
<li>Verify assignment API call is made</li>
|
|
<li>Verify popover closes (if implemented)</li>
|
|
<li>Verify button shows assigned user avatar</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fix-section">
|
|
<h2>📝 Code Changes Needed</h2>
|
|
|
|
<div class="fix-step">
|
|
<h3>EditableTaskStatus.vue Changes</h3>
|
|
<div class="code">// REMOVE these lines:
|
|
const isAssignmentPopoverOpen = ref(false)
|
|
|
|
watch(isAssignmentPopoverOpen, (isOpen) => {
|
|
// ... watcher code
|
|
})
|
|
|
|
// CHANGE this:
|
|
<Popover v-model:open="isAssignmentPopoverOpen">
|
|
|
|
// TO this:
|
|
<Popover>
|
|
|
|
// OPTIONAL: Add click handler to trigger for member loading
|
|
<PopoverTrigger as-child>
|
|
<Button @click="ensureMembersLoaded">...</Button>
|
|
</PopoverTrigger></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🔧 Simple Popover Fix guide loaded');
|
|
console.log('📋 The main issue is likely the v-model:open binding');
|
|
console.log('✅ Try removing v-model:open from the Popover component');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |