Admin/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add simple dropdown components for project and task statuses

Browse Source 
- 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
2025-06-19 23:16:13 +02:00
parent 1dc3fd88f9
commit 306c96328e
17 changed files with 1724 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/page.js
View File

@@ -5,7 +5,7 @@ import Link from "next/link";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import TaskStatusDropdown from "@/components/TaskStatusDropdown";
import TaskStatusDropdownSimple from "@/components/TaskStatusDropdownSimple";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";
import { LoadingState } from "@/components/ui/States";
@@ -907,7 +907,7 @@ export default function Home() {
<h4 className="text-sm font-medium text-gray-900 truncate">
{task.task_name}
</h4>
<TaskStatusDropdown
<TaskStatusDropdownSimple
task={task}
size="xs"
showDropdown={false}

6
src/app/tasks/page.js
View File

@@ -5,7 +5,7 @@ import Link from "next/link";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import TaskStatusDropdown from "@/components/TaskStatusDropdown";
import TaskStatusDropdownSimple from "@/components/TaskStatusDropdownSimple";
import { Input } from "@/components/ui/Input";
import { formatDistanceToNow, parseISO } from "date-fns";
import PageContainer from "@/components/ui/PageContainer";
@@ -333,8 +333,8 @@ export default function ProjectTasksPage() {
<div className="flex items-center gap-3 mb-2">
<h3 className="text-lg font-semibold text-gray-900">
{task.task_name}
</h3>
<TaskStatusDropdown
</h3>{" "}
<TaskStatusDropdownSimple
task={task}
size="sm"
onStatusChange={handleStatusChange}

151
src/app/test-dropdowns/page.js Normal file
View File

@@ -0,0 +1,151 @@
"use client";
import { useState } from "react";
import TaskStatusDropdownSimple from "@/components/TaskStatusDropdownSimple";
import ProjectStatusDropdownSimple from "@/components/ProjectStatusDropdownSimple";
import { Card, CardContent } from "@/components/ui/Card";
export default function DropdownTestPage() {
// Sample task data
const sampleTask = {
id: 1,
status: "pending",
task_name: "Test Task",
};
// Sample project data
const sampleProject = {
project_id: 1,
project_status: "registered",
project_name: "Test Project",
};
const handleTaskStatusChange = (taskId, newStatus) => {
console.log(`Task ${taskId} status changed to ${newStatus}`);
};
return (
<div className="p-8 space-y-8 bg-gray-100 min-h-screen">
<h1 className="text-3xl font-bold text-gray-900">
Dropdown Component Test
</h1>
<Card>
<CardContent className="p-6">
<h2 className="text-xl font-semibold mb-4">
Task Status Dropdown Test
</h2>
<div className="space-y-4">
{" "}
<div>
<p className="text-sm text-gray-600 mb-2">
Interactive dropdown (can change status):
</p>
<TaskStatusDropdownSimple
task={sampleTask}
size="sm"
showDropdown={true}
onStatusChange={handleTaskStatusChange}
/>
</div>
<div>
<p className="text-sm text-gray-600 mb-2">
Read-only badge (showDropdown=false):
</p>
<TaskStatusDropdownSimple
task={sampleTask}
size="sm"
showDropdown={false}
/>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6">
<h2 className="text-xl font-semibold mb-4">
Project Status Dropdown Test
</h2>{" "}
<div className="space-y-4">
<div>
<p className="text-sm text-gray-600 mb-2">
Interactive dropdown (can change status):
</p>
<ProjectStatusDropdownSimple
project={sampleProject}
size="md"
showDropdown={true}
/>
</div>
<div>
<p className="text-sm text-gray-600 mb-2">
Read-only badge (showDropdown=false):
</p>
<ProjectStatusDropdownSimple
project={sampleProject}
size="md"
showDropdown={false}
/>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6">
<h2 className="text-xl font-semibold mb-4">Test in Table Context</h2>
<div className="overflow-x-auto">
<table className="min-w-full bg-white border border-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Task
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Project Status
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{" "}
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
Test Task in Table
</td>
<td className="px-6 py-4 whitespace-nowrap">
<TaskStatusDropdownSimple
task={sampleTask}
size="sm"
showDropdown={true}
onStatusChange={handleTaskStatusChange}
/>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<ProjectStatusDropdownSimple
project={sampleProject}
size="sm"
showDropdown={true}
/>
</td>
</tr>
</tbody>
</table>
</div>
</CardContent>
</Card>{" "}
<div className="text-sm text-gray-500">
<p>Console instructions:</p>
<ul className="list-disc list-inside space-y-1">
<li>Open browser developer tools (F12)</li>
<li>Go to Console tab</li>
<li>Click on any dropdown to see debug messages</li>
<li>
Look for &quot;DEBUG: [Component] Dropdown is visible&quot; text in
dropdowns
</li>
</ul>
</div>
</div>
);
}