306c96328e
- Created ProjectStatusDropdownSimple component for managing project statuses with a simple dropdown interface. - Updated ProjectTasksDashboard and ProjectTasksSection to use the new ProjectStatusDropdownSimple component. - Refactored TaskStatusDropdown to simplify its structure and added debugging features. - Introduced TaskStatusDropdownDebug for testing purposes with enhanced logging and debugging UI. - Added TaskStatusDropdownSimple for task statuses, mirroring the functionality of the project status dropdown. - Created comprehensive HTML test files for dropdown functionality validation. - Added a batch script to clear Next.js cache and start the development server.
418 lines
12 KiB
HTML
418 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Comprehensive Dropdown Test</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.test-container {
|
|
border: 2px solid #10b981;
|
|
background: #f0fdf4;
|
|
}
|
|
.dropdown-test {
|
|
border: 1px solid #6b7280;
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
}
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
.status-warning {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
.status-primary {
|
|
background: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
.status-success {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
.status-danger {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
.status-secondary {
|
|
background: #f3f4f6;
|
|
color: #374151;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="p-8 bg-gray-50">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h1 class="text-3xl font-bold mb-6 text-gray-900">
|
|
Dropdown Component Validation
|
|
</h1>
|
|
|
|
<!-- Test 1: Basic Dropdown Functionality -->
|
|
<div class="test-container p-6 mb-6 rounded-lg">
|
|
<h2 class="text-xl font-semibold mb-4 text-green-800">
|
|
✅ Test 1: Basic Dropdown Structure
|
|
</h2>
|
|
<div class="dropdown-test">
|
|
<label class="block text-sm font-medium mb-2"
|
|
>Task Status Dropdown Simulation:</label
|
|
>
|
|
<div class="relative inline-block">
|
|
<button id="task-status-btn" class="status-badge status-warning">
|
|
Pending
|
|
<svg
|
|
class="w-3 h-3 ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
id="task-status-dropdown"
|
|
class="hidden absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]"
|
|
>
|
|
<div class="bg-yellow-100 p-2 text-xs text-center border-b">
|
|
DEBUG: Task Status Visible
|
|
</div>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-warning">Pending</span>
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-primary">In Progress</span>
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-success">Completed</span>
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-danger">Cancelled</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown-test">
|
|
<label class="block text-sm font-medium mb-2"
|
|
>Project Status Dropdown Simulation:</label
|
|
>
|
|
<div class="relative inline-block">
|
|
<button
|
|
id="project-status-btn"
|
|
class="status-badge status-secondary"
|
|
>
|
|
Registered
|
|
<svg
|
|
class="w-3 h-3 ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
id="project-status-dropdown"
|
|
class="hidden absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]"
|
|
>
|
|
<div class="bg-yellow-100 p-2 text-xs text-center border-b">
|
|
DEBUG: Project Status Visible
|
|
</div>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-secondary">Registered</span>
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-primary"
|
|
>In Progress (Design)</span
|
|
>
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-primary"
|
|
>In Progress (Construction)</span
|
|
>
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50">
|
|
<span class="status-badge status-success">Completed</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 2: Table Context -->
|
|
<div class="test-container p-6 mb-6 rounded-lg">
|
|
<h2 class="text-xl font-semibold mb-4 text-green-800">
|
|
✅ Test 2: Dropdown in Table Context
|
|
</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full bg-white border border-gray-200 rounded-lg">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"
|
|
>
|
|
Task
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"
|
|
>
|
|
Status
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"
|
|
>
|
|
Project Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr>
|
|
<td class="px-4 py-4 text-sm text-gray-900">Sample Task 1</td>
|
|
<td class="px-4 py-4">
|
|
<div class="relative inline-block">
|
|
<button
|
|
id="table-task-btn"
|
|
class="status-badge status-primary"
|
|
>
|
|
In Progress
|
|
<svg
|
|
class="w-3 h-3 ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
id="table-task-dropdown"
|
|
class="hidden absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]"
|
|
>
|
|
<div
|
|
class="bg-yellow-100 p-2 text-xs text-center border-b"
|
|
>
|
|
DEBUG: Table Task Visible
|
|
</div>
|
|
<button
|
|
class="w-full text-left px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
<span class="status-badge status-warning">Pending</span>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
<span class="status-badge status-primary"
|
|
>In Progress</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
<span class="status-badge status-success"
|
|
>Completed</span
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-4">
|
|
<div class="relative inline-block">
|
|
<button
|
|
id="table-project-btn"
|
|
class="status-badge status-primary"
|
|
>
|
|
In Progress (Design)
|
|
<svg
|
|
class="w-3 h-3 ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
id="table-project-dropdown"
|
|
class="hidden absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]"
|
|
>
|
|
<div
|
|
class="bg-yellow-100 p-2 text-xs text-center border-b"
|
|
>
|
|
DEBUG: Table Project Visible
|
|
</div>
|
|
<button
|
|
class="w-full text-left px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
<span class="status-badge status-secondary"
|
|
>Registered</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
<span class="status-badge status-primary"
|
|
>In Progress (Design)</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
<span class="status-badge status-success"
|
|
>Completed</span
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Results -->
|
|
<div class="bg-blue-50 border-2 border-blue-200 p-6 rounded-lg">
|
|
<h2 class="text-xl font-semibold mb-4 text-blue-800">
|
|
🧪 Test Results
|
|
</h2>
|
|
<div id="test-results" class="space-y-2 text-sm">
|
|
<p>⏳ Click the dropdown buttons above to test functionality...</p>
|
|
</div>
|
|
|
|
<div class="mt-4 p-4 bg-white rounded border">
|
|
<h3 class="font-medium mb-2">Expected Behavior:</h3>
|
|
<ul class="text-sm space-y-1 text-gray-700">
|
|
<li>✅ Dropdowns should appear immediately when clicked</li>
|
|
<li>✅ Red border and yellow debug header should be visible</li>
|
|
<li>
|
|
✅ Dropdown should appear above all other elements (z-index test)
|
|
</li>
|
|
<li>✅ Clicking outside should close the dropdown</li>
|
|
<li>✅ Dropdown should not be clipped by table overflow</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const dropdowns = [
|
|
{
|
|
btn: "task-status-btn",
|
|
dropdown: "task-status-dropdown",
|
|
name: "Task Status",
|
|
},
|
|
{
|
|
btn: "project-status-btn",
|
|
dropdown: "project-status-dropdown",
|
|
name: "Project Status",
|
|
},
|
|
{
|
|
btn: "table-task-btn",
|
|
dropdown: "table-task-dropdown",
|
|
name: "Table Task Status",
|
|
},
|
|
{
|
|
btn: "table-project-btn",
|
|
dropdown: "table-project-dropdown",
|
|
name: "Table Project Status",
|
|
},
|
|
];
|
|
|
|
const results = document.getElementById("test-results");
|
|
let testCount = 0;
|
|
|
|
function addResult(message, type = "info") {
|
|
testCount++;
|
|
const colors = {
|
|
success: "text-green-700",
|
|
error: "text-red-700",
|
|
info: "text-blue-700",
|
|
};
|
|
results.innerHTML += `<p class="${colors[type]}">${testCount}. ${message}</p>`;
|
|
}
|
|
|
|
dropdowns.forEach(({ btn, dropdown, name }) => {
|
|
const button = document.getElementById(btn);
|
|
const dropdownEl = document.getElementById(dropdown);
|
|
|
|
button.addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
|
|
// Close all other dropdowns
|
|
dropdowns.forEach(({ dropdown: otherId }) => {
|
|
if (otherId !== dropdown) {
|
|
document.getElementById(otherId).classList.add("hidden");
|
|
}
|
|
});
|
|
|
|
// Toggle current dropdown
|
|
const isHidden = dropdownEl.classList.contains("hidden");
|
|
dropdownEl.classList.toggle("hidden");
|
|
|
|
if (isHidden) {
|
|
addResult(`${name} dropdown opened successfully`, "success");
|
|
|
|
// Test visibility
|
|
const rect = dropdownEl.getBoundingClientRect();
|
|
if (rect.width > 0 && rect.height > 0) {
|
|
addResult(
|
|
`${name} dropdown is visible (${rect.width}x${rect.height}px)`,
|
|
"success"
|
|
);
|
|
} else {
|
|
addResult(`${name} dropdown has zero dimensions!`, "error");
|
|
}
|
|
|
|
// Test z-index
|
|
const computedStyle = window.getComputedStyle(dropdownEl);
|
|
addResult(
|
|
`${name} dropdown z-index: ${computedStyle.zIndex}`,
|
|
"info"
|
|
);
|
|
} else {
|
|
addResult(`${name} dropdown closed`, "info");
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close dropdowns when clicking outside
|
|
document.addEventListener("click", function () {
|
|
dropdowns.forEach(({ dropdown }) => {
|
|
document.getElementById(dropdown).classList.add("hidden");
|
|
});
|
|
});
|
|
|
|
// Initial test message
|
|
setTimeout(() => {
|
|
if (testCount === 0) {
|
|
addResult("Waiting for user interaction...", "info");
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|