indigo/LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init Repo

Browse Source
This commit is contained in:
indigo
2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/test-shot-delete-detail-panel-fix.html
+182
View File
@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shot Delete Detail Panel Fix Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.test-case {
background: #f5f5f5;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
border-left: 4px solid #007acc;
}
.expected {
background: #e8f5e8;
border-left-color: #28a745;
}
.code {
background: #f8f9fa;
padding: 10px;
border-radius: 3px;
font-family: 'Courier New', monospace;
margin: 10px 0;
}
.highlight {
background: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>Shot Delete Detail Panel Fix - Test Guide</h1>
<p>This document outlines the test cases to verify that the shot detail panel no longer opens when performing delete actions.</p>
<h2>Problem Description</h2>
<p>Previously, when clicking "Delete Shot" from the dropdown menu in the shots table, the shot detail panel would incorrectly open, causing confusion for users.</p>
<h2>Solution Implemented</h2>
<p>Added multiple layers of protection to prevent the detail panel from opening during delete operations:</p>
<div class="code">
1. Enhanced event handling in ShotsDataTable.vue handleRowClick method
2. Added dialog state checks in ShotBrowser.vue handleRowClick and handleRowDoubleClick
3. Added dropdown menu state detection
4. Comprehensive event propagation prevention in dropdown menu items
</div>
<h2>Test Cases</h2>
<div class="test-case">
<h3>Test Case 1: Delete from Dropdown Menu</h3>
<p><strong>Steps:</strong></p>
<ol>
<li>Navigate to a project's shots view</li>
<li>Click the three-dot menu (⋯) on any shot row</li>
<li>Click "Delete Shot" from the dropdown menu</li>
</ol>
<p><strong>Expected Result:</strong></p>
<ul>
<li>✅ Delete confirmation dialog opens</li>
<li>✅ Shot detail panel does NOT open</li>
<li>✅ No unwanted navigation or panel changes</li>
</ul>
</div>
<div class="test-case">
<h3>Test Case 2: Edit from Dropdown Menu</h3>
<p><strong>Steps:</strong></p>
<ol>
<li>Click the three-dot menu (⋯) on any shot row</li>
<li>Click "Edit Shot" from the dropdown menu</li>
</ol>
<p><strong>Expected Result:</strong></p>
<ul>
<li>✅ Edit dialog opens</li>
<li>✅ Shot detail panel does NOT open</li>
</ul>
</div>
<div class="test-case">
<h3>Test Case 3: View Tasks from Dropdown Menu</h3>
<p><strong>Steps:</strong></p>
<ol>
<li>Click the three-dot menu (⋯) on any shot row</li>
<li>Click "View Tasks" from the dropdown menu</li>
</ol>
<p><strong>Expected Result:</strong></p>
<ul>
<li>✅ Shot detail panel opens (this is intended behavior)</li>
</ul>
</div>
<div class="test-case">
<h3>Test Case 4: Row Click (Normal Behavior)</h3>
<p><strong>Steps:</strong></p>
<ol>
<li>Click on an empty area of a shot row (not on buttons or interactive elements)</li>
</ol>
<p><strong>Expected Result:</strong></p>
<ul>
<li>✅ Row selection changes (if applicable)</li>
<li>✅ Shot detail panel does NOT open (single click should not open panel)</li>
</ul>
</div>
<div class="test-case">
<h3>Test Case 5: Row Double Click</h3>
<p><strong>Steps:</strong></p>
<ol>
<li>Double-click on an empty area of a shot row</li>
</ol>
<p><strong>Expected Result:</strong></p>
<ul>
<li>✅ Shot detail panel opens (this is intended behavior)</li>
</ul>
</div>
<div class="test-case">
<h3>Test Case 6: Delete Dialog Interaction</h3>
<p><strong>Steps:</strong></p>
<ol>
<li>Open delete dialog for a shot</li>
<li>Try clicking on other shot rows while dialog is open</li>
<li>Cancel or complete the delete operation</li>
</ol>
<p><strong>Expected Result:</strong></p>
<ul>
<li>✅ No row clicks are processed while dialog is open</li>
<li>✅ Detail panel does not open during dialog interaction</li>
</ul>
</div>
<h2>Key Fixes Applied</h2>
<div class="code">
<strong>1. Dialog State Checks:</strong>
// Don't handle row clicks if any dialog is open
if (showDeleteDialog.value || showCreateDialog.value ||
showBulkCreateDialog.value || showEditDialog.value) {
return
}
<strong>2. Dropdown Menu State Detection:</strong>
// If any dropdown is open, don't handle row clicks
const openDropdown = document.querySelector(
'[data-radix-dropdown-menu-content][data-state="open"]'
)
if (openDropdown) {
return
}
<strong>3. Enhanced Event Propagation Prevention:</strong>
onClick: (e: Event) => {
e.stopPropagation()
e.preventDefault()
meta.onDelete(shot)
}
</div>
<h2>Verification Checklist</h2>
<ul>
<li>□ Delete action opens only the delete dialog</li>
<li>□ Edit action opens only the edit dialog</li>
<li>□ View Tasks action opens the detail panel (intended)</li>
<li>□ Single row click does not open detail panel</li>
<li>□ Double row click opens detail panel (intended)</li>
<li>□ No unwanted panel opening during any dropdown interactions</li>
</ul>
<p><strong>Note:</strong> If any test case fails, check the browser console for JavaScript errors and verify that all event handlers are properly preventing propagation.</p>
</body>
</html>