LinkDesk/frontend/test-delete-dialog-fix.html

55 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Test Delete Dialog Fix</title>
<style>
body { font-family: Arial; padding: 20px; }
.info { background: #e3f2fd; padding: 15px; margin: 10px 0; border-radius: 4px; }
.success { color: green; font-weight: bold; }
.error { color: red; font-weight: bold; }
</style>
</head>
<body>
<h1>Delete Dialog Fix Verification</h1>
<div class="info">
<h3>The Problem:</h3>
<p>The <code>@update:open="closeDeleteDialog"</code> was being called when the dialog closed for ANY reason, including clicking the Delete button. This cleared <code>taskTypeToDelete</code> BEFORE <code>confirmDelete</code> could use it.</p>
<h3>The Fix:</h3>
<p>Changed to: <code>@update:open="(open) => { if (!open) closeDeleteDialog() }"</code></p>
<p>Now it only clears the value when the dialog is actually closing (open becomes false), not during the delete action.</p>
<h3>Expected Behavior:</h3>
<ul>
<li>✓ Click Delete button → Dialog opens with task type name</li>
<li>✓ Click Delete in dialog → API call includes task type in URL</li>
<li>✓ Success → Dialog closes and list updates</li>
<li>✓ Click Cancel → Dialog closes and clears state</li>
</ul>
<h3>Test in Frontend:</h3>
<ol>
<li>Go to Project Settings → Custom Task Types</li>
<li>Add a test task type (e.g., "test_fix")</li>
<li>Click the delete button for that task type</li>
<li>Open browser DevTools Network tab</li>
<li>Click "Delete" in the confirmation dialog</li>
<li>Check the DELETE request URL - it should now include the task type name</li>
</ol>
<h3>Expected URL:</h3>
<p class="success">✓ /projects/1/custom-task-types/test_fix?category=asset</p>
<h3>Previous (Wrong) URL:</h3>
<p class="error">✗ /projects/1/custom-task-types/?category=asset</p>
</div>
<script>
console.log('Fix applied to CustomTaskTypeManager.vue');
console.log('Changed: @update:open="closeDeleteDialog"');
console.log('To: @update:open="(open) => { if (!open) closeDeleteDialog() }"');
</script>
</body>
</html>