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
417
test-dropdown-comprehensive.html
Normal file
417
test-dropdown-comprehensive.html
Normal file
@@ -0,0 +1,417 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user