feat: Add simple dropdown components for project and task statuses
- 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.
This commit is contained in:
Chop
156
test-dropdown.html
Normal file
156
test-dropdown.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dropdown Test</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
.debug-border {
|
||||
border: 2px solid red !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-8 bg-gray-100">
|
||||
<h1 class="text-2xl mb-4">Dropdown Visibility Test</h1>
|
||||
|
||||
<!-- Test basic dropdown structure -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg mb-2">Basic Dropdown Test</h2>
|
||||
<div class="relative">
|
||||
<button
|
||||
id="test-btn"
|
||||
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
||||
>
|
||||
Click me
|
||||
</button>
|
||||
<div
|
||||
id="test-dropdown"
|
||||
class="hidden absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-[9999] min-w-[120px]"
|
||||
>
|
||||
<div class="px-3 py-2 hover:bg-gray-50">Option 1</div>
|
||||
<div class="px-3 py-2 hover:bg-gray-50">Option 2</div>
|
||||
<div class="px-3 py-2 hover:bg-gray-50">Option 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test with high z-index -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg mb-2">High Z-Index Test</h2>
|
||||
<div class="relative">
|
||||
<button
|
||||
id="test-btn-2"
|
||||
class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
|
||||
>
|
||||
Click me (z-index 9999)
|
||||
</button>
|
||||
<div
|
||||
id="test-dropdown-2"
|
||||
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="px-3 py-2 hover:bg-gray-50 bg-yellow-100">
|
||||
High Z Option 1
|
||||
</div>
|
||||
<div class="px-3 py-2 hover:bg-gray-50 bg-yellow-100">
|
||||
High Z Option 2
|
||||
</div>
|
||||
<div class="px-3 py-2 hover:bg-gray-50 bg-yellow-100">
|
||||
High Z Option 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test in table container -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg mb-2">Table Container Test</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white border border-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left">Name</th>
|
||||
<th class="px-6 py-3 text-left">Status</th>
|
||||
<th class="px-6 py-3 text-left">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-t">
|
||||
<td class="px-6 py-4">Test Task</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="relative">
|
||||
<button
|
||||
id="table-btn"
|
||||
class="bg-purple-500 text-white px-3 py-1 rounded text-sm"
|
||||
>
|
||||
Status Dropdown
|
||||
</button>
|
||||
<div
|
||||
id="table-dropdown"
|
||||
class="hidden absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-[9999] min-w-[120px]"
|
||||
>
|
||||
<div class="px-3 py-2 hover:bg-gray-50 bg-blue-100">
|
||||
Pending
|
||||
</div>
|
||||
<div class="px-3 py-2 hover:bg-gray-50 bg-green-100">
|
||||
In Progress
|
||||
</div>
|
||||
<div class="px-3 py-2 hover:bg-gray-50 bg-red-100">
|
||||
Completed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">Edit</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Add click handlers
|
||||
document
|
||||
.getElementById("test-btn")
|
||||
.addEventListener("click", function () {
|
||||
const dropdown = document.getElementById("test-dropdown");
|
||||
dropdown.classList.toggle("hidden");
|
||||
console.log(
|
||||
"Dropdown 1 toggled, hidden:",
|
||||
dropdown.classList.contains("hidden")
|
||||
);
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("test-btn-2")
|
||||
.addEventListener("click", function () {
|
||||
const dropdown = document.getElementById("test-dropdown-2");
|
||||
dropdown.classList.toggle("hidden");
|
||||
console.log(
|
||||
"Dropdown 2 toggled, hidden:",
|
||||
dropdown.classList.contains("hidden")
|
||||
);
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("table-btn")
|
||||
.addEventListener("click", function () {
|
||||
const dropdown = document.getElementById("table-dropdown");
|
||||
dropdown.classList.toggle("hidden");
|
||||
console.log(
|
||||
"Table dropdown toggled, hidden:",
|
||||
dropdown.classList.contains("hidden")
|
||||
);
|
||||
});
|
||||
|
||||
// Close dropdowns when clicking outside
|
||||
document.addEventListener("click", function (e) {
|
||||
if (!e.target.closest(".relative")) {
|
||||
document.querySelectorAll('[id$="-dropdown"]').forEach((dropdown) => {
|
||||
dropdown.classList.add("hidden");
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user