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
@@ -72,10 +72,11 @@ export default function ProjectStatusDropdown({
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
console.log(
|
||||
"ProjectStatusDropdown handleOpen called, setting isOpen to true"
|
||||
);
|
||||
setIsOpen(true);
|
||||
updateDropdownPosition();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -105,13 +106,17 @@ export default function ProjectStatusDropdown({
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{" "}
|
||||
<button
|
||||
ref={buttonRef}
|
||||
onClick={handleOpen}
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"ProjectStatusDropdown button clicked, current isOpen:",
|
||||
isOpen
|
||||
);
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
disabled={loading}
|
||||
className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
|
||||
>
|
||||
@@ -140,37 +145,38 @@ export default function ProjectStatusDropdown({
|
||||
</svg>
|
||||
</Badge>
|
||||
</button>{" "}
|
||||
{isOpen &&
|
||||
typeof window !== "undefined" &&
|
||||
createPortal(
|
||||
<>
|
||||
<div
|
||||
className="fixed bg-white border border-gray-200 rounded-md shadow-lg z-[9999]"
|
||||
style={{
|
||||
top: dropdownPosition.top,
|
||||
left: dropdownPosition.left,
|
||||
minWidth: Math.max(dropdownPosition.width, 140),
|
||||
{/* Simple dropdown for debugging */}
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
|
||||
<div className="bg-yellow-100 p-2 text-xs text-center border-b">
|
||||
DEBUG: ProjectStatus Dropdown is visible
|
||||
</div>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => {
|
||||
console.log("ProjectStatus Option clicked:", statusKey);
|
||||
handleChange(statusKey);
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
|
||||
>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => handleChange(statusKey)}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
|
||||
>
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="fixed inset-0 z-[9998]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
</>,
|
||||
document.body
|
||||
)}
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}{" "}
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
|
||||
onClick={() => {
|
||||
console.log("ProjectStatus Backdrop clicked");
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
143
src/components/ProjectStatusDropdownDebug.js
Normal file
143
src/components/ProjectStatusDropdownDebug.js
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
|
||||
export default function ProjectStatusDropdownDebug({
|
||||
project,
|
||||
size = "md",
|
||||
showDropdown = true,
|
||||
}) {
|
||||
const [status, setStatus] = useState(project.project_status);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const statusConfig = {
|
||||
registered: {
|
||||
label: "Registered",
|
||||
variant: "secondary",
|
||||
},
|
||||
in_progress_design: {
|
||||
label: "In Progress (Design)",
|
||||
variant: "primary",
|
||||
},
|
||||
in_progress_construction: {
|
||||
label: "In Progress (Construction)",
|
||||
variant: "primary",
|
||||
},
|
||||
fulfilled: {
|
||||
label: "Completed",
|
||||
variant: "success",
|
||||
},
|
||||
};
|
||||
|
||||
const handleChange = async (newStatus) => {
|
||||
if (newStatus === status) {
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus(newStatus);
|
||||
setLoading(true);
|
||||
setIsOpen(false);
|
||||
|
||||
try {
|
||||
await fetch(`/api/projects/${project.project_id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ...project, project_status: newStatus }),
|
||||
});
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Failed to update status:", error);
|
||||
setStatus(project.project_status);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentConfig = statusConfig[status] || {
|
||||
label: "Unknown",
|
||||
variant: "default",
|
||||
};
|
||||
|
||||
if (!showDropdown) {
|
||||
return (
|
||||
<Badge variant={currentConfig.variant} size={size}>
|
||||
{currentConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log("Project Status Button clicked, current isOpen:", isOpen);
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
disabled={loading}
|
||||
className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
|
||||
>
|
||||
<Badge
|
||||
variant={currentConfig.variant}
|
||||
size={size}
|
||||
className={`cursor-pointer hover:opacity-80 transition-opacity ${
|
||||
loading ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
{loading ? "Updating..." : currentConfig.label}
|
||||
<svg
|
||||
className={`w-3 h-3 ml-1 transition-transform ${
|
||||
isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</Badge>
|
||||
</button>
|
||||
|
||||
{/* Simple visible dropdown for debugging */}
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
|
||||
<div className="bg-yellow-100 p-2 text-xs text-center border-b">
|
||||
DEBUG: Project Status Dropdown is visible
|
||||
</div>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => {
|
||||
console.log("Project Status Option clicked:", statusKey);
|
||||
handleChange(statusKey);
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
|
||||
>
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
|
||||
onClick={() => {
|
||||
console.log("Project Status Backdrop clicked");
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
src/components/ProjectStatusDropdownSimple.js
Normal file
146
src/components/ProjectStatusDropdownSimple.js
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
|
||||
export default function ProjectStatusDropdownSimple({
|
||||
project,
|
||||
size = "md",
|
||||
showDropdown = true,
|
||||
}) {
|
||||
const [status, setStatus] = useState(project.project_status);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const statusConfig = {
|
||||
registered: {
|
||||
label: "Registered",
|
||||
variant: "secondary",
|
||||
},
|
||||
in_progress_design: {
|
||||
label: "In Progress (Design)",
|
||||
variant: "primary",
|
||||
},
|
||||
in_progress_construction: {
|
||||
label: "In Progress (Construction)",
|
||||
variant: "primary",
|
||||
},
|
||||
fulfilled: {
|
||||
label: "Completed",
|
||||
variant: "success",
|
||||
},
|
||||
};
|
||||
|
||||
const handleChange = async (newStatus) => {
|
||||
if (newStatus === status) {
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus(newStatus);
|
||||
setLoading(true);
|
||||
setIsOpen(false);
|
||||
|
||||
try {
|
||||
await fetch(`/api/projects/${project.project_id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ...project, project_status: newStatus }),
|
||||
});
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Failed to update status:", error);
|
||||
setStatus(project.project_status);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentConfig = statusConfig[status] || {
|
||||
label: "Unknown",
|
||||
variant: "default",
|
||||
};
|
||||
|
||||
if (!showDropdown) {
|
||||
return (
|
||||
<Badge variant={currentConfig.variant} size={size}>
|
||||
{currentConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"ProjectStatusDropdown button clicked, current isOpen:",
|
||||
isOpen
|
||||
);
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
disabled={loading}
|
||||
className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
|
||||
>
|
||||
<Badge
|
||||
variant={currentConfig.variant}
|
||||
size={size}
|
||||
className={`cursor-pointer hover:opacity-80 transition-opacity ${
|
||||
loading ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
{loading ? "Updating..." : currentConfig.label}
|
||||
<svg
|
||||
className={`w-3 h-3 ml-1 transition-transform ${
|
||||
isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</Badge>
|
||||
</button>
|
||||
|
||||
{/* Simple dropdown for debugging */}
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
|
||||
<div className="bg-yellow-100 p-2 text-xs text-center border-b">
|
||||
DEBUG: ProjectStatus Dropdown is visible
|
||||
</div>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => {
|
||||
console.log("ProjectStatus Option clicked:", statusKey);
|
||||
handleChange(statusKey);
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last-rounded-b-md"
|
||||
>
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
|
||||
onClick={() => {
|
||||
console.log("ProjectStatus Backdrop clicked");
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
|
||||
import { Card, CardHeader, CardContent } from "./ui/Card";
|
||||
import Button from "./ui/Button";
|
||||
import Badge from "./ui/Badge";
|
||||
import TaskStatusDropdown from "./TaskStatusDropdown";
|
||||
import TaskStatusDropdownSimple from "./TaskStatusDropdownSimple";
|
||||
import SearchBar from "./ui/SearchBar";
|
||||
import { Select } from "./ui/Input";
|
||||
import Link from "next/link";
|
||||
@@ -255,9 +255,9 @@ export default function ProjectTasksDashboard() {
|
||||
</h4>
|
||||
<Badge variant={getPriorityVariant(task.priority)} size="sm">
|
||||
{task.priority}
|
||||
</Badge>
|
||||
</Badge>{" "}
|
||||
{showStatusBadge && (
|
||||
<TaskStatusDropdown
|
||||
<TaskStatusDropdownSimple
|
||||
task={task}
|
||||
size="sm"
|
||||
onStatusChange={handleStatusChange}
|
||||
@@ -307,7 +307,7 @@ export default function ProjectTasksDashboard() {
|
||||
</Badge>
|
||||
)}{" "}
|
||||
{(task.status === "pending" || task.status === "in_progress") && (
|
||||
<TaskStatusDropdown
|
||||
<TaskStatusDropdownSimple
|
||||
task={task}
|
||||
size="sm"
|
||||
onStatusChange={handleStatusChange}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import ProjectTaskForm from "./ProjectTaskForm";
|
||||
import TaskStatusDropdown from "./TaskStatusDropdown";
|
||||
import TaskStatusDropdownSimple from "./TaskStatusDropdownSimple";
|
||||
import { Card, CardHeader, CardContent } from "./ui/Card";
|
||||
import Button from "./ui/Button";
|
||||
import Badge from "./ui/Badge";
|
||||
@@ -448,7 +448,7 @@ export default function ProjectTasksSection({ projectId }) {
|
||||
: "Not started"}
|
||||
</td>{" "}
|
||||
<td className="px-4 py-4">
|
||||
<TaskStatusDropdown
|
||||
<TaskStatusDropdownSimple
|
||||
task={task}
|
||||
size="sm"
|
||||
onStatusChange={handleStatusChange}
|
||||
|
||||
@@ -13,12 +13,6 @@ export default function TaskStatusDropdown({
|
||||
const [status, setStatus] = useState(task.status);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [dropdownPosition, setDropdownPosition] = useState({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
});
|
||||
const buttonRef = useRef(null);
|
||||
|
||||
const statusConfig = {
|
||||
pending: {
|
||||
@@ -84,10 +78,9 @@ export default function TaskStatusDropdown({
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
console.log("TaskStatusDropdown handleOpen called, setting isOpen to true");
|
||||
setIsOpen(true);
|
||||
updateDropdownPosition();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -117,13 +110,17 @@ export default function TaskStatusDropdown({
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{" "}
|
||||
<button
|
||||
ref={buttonRef}
|
||||
onClick={handleOpen}
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"TaskStatusDropdown button clicked, current isOpen:",
|
||||
isOpen
|
||||
);
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
disabled={loading}
|
||||
className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
|
||||
>
|
||||
@@ -152,37 +149,38 @@ export default function TaskStatusDropdown({
|
||||
</svg>
|
||||
</Badge>
|
||||
</button>{" "}
|
||||
{isOpen &&
|
||||
typeof window !== "undefined" &&
|
||||
createPortal(
|
||||
<>
|
||||
<div
|
||||
className="fixed bg-white border border-gray-200 rounded-md shadow-lg z-[9999]"
|
||||
style={{
|
||||
top: dropdownPosition.top,
|
||||
left: dropdownPosition.left,
|
||||
minWidth: Math.max(dropdownPosition.width, 120),
|
||||
{/* Simple dropdown for debugging */}
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]">
|
||||
<div className="bg-yellow-100 p-2 text-xs text-center border-b">
|
||||
DEBUG: TaskStatus Dropdown is visible
|
||||
</div>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => {
|
||||
console.log("TaskStatus Option clicked:", statusKey);
|
||||
handleChange(statusKey);
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
|
||||
>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => handleChange(statusKey)}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
|
||||
>
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="fixed inset-0 z-[9998]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
</>,
|
||||
document.body
|
||||
)}
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}{" "}
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
|
||||
onClick={() => {
|
||||
console.log("TaskStatus Backdrop clicked");
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
153
src/components/TaskStatusDropdownDebug.js
Normal file
153
src/components/TaskStatusDropdownDebug.js
Normal file
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
|
||||
export default function TaskStatusDropdownDebug({
|
||||
task,
|
||||
size = "sm",
|
||||
showDropdown = true,
|
||||
onStatusChange,
|
||||
}) {
|
||||
const [status, setStatus] = useState(task.status);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const statusConfig = {
|
||||
pending: {
|
||||
label: "Pending",
|
||||
variant: "warning",
|
||||
},
|
||||
in_progress: {
|
||||
label: "In Progress",
|
||||
variant: "primary",
|
||||
},
|
||||
completed: {
|
||||
label: "Completed",
|
||||
variant: "success",
|
||||
},
|
||||
cancelled: {
|
||||
label: "Cancelled",
|
||||
variant: "danger",
|
||||
},
|
||||
};
|
||||
|
||||
const handleChange = async (newStatus) => {
|
||||
if (newStatus === status) {
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus(newStatus);
|
||||
setLoading(true);
|
||||
setIsOpen(false);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/project-tasks/${task.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
if (onStatusChange) {
|
||||
onStatusChange(task.id, newStatus);
|
||||
}
|
||||
} else {
|
||||
setStatus(task.status);
|
||||
alert("Failed to update task status");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to update status:", error);
|
||||
setStatus(task.status);
|
||||
alert("Error updating task status");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentConfig = statusConfig[status] || {
|
||||
label: "Unknown",
|
||||
variant: "default",
|
||||
};
|
||||
|
||||
if (!showDropdown) {
|
||||
return (
|
||||
<Badge variant={currentConfig.variant} size={size}>
|
||||
{currentConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log("Button clicked, current isOpen:", isOpen);
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
disabled={loading}
|
||||
className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
|
||||
>
|
||||
<Badge
|
||||
variant={currentConfig.variant}
|
||||
size={size}
|
||||
className={`cursor-pointer hover:opacity-80 transition-opacity ${
|
||||
loading ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
{loading ? "Updating..." : currentConfig.label}
|
||||
<svg
|
||||
className={`w-3 h-3 ml-1 transition-transform ${
|
||||
isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</Badge>
|
||||
</button>
|
||||
|
||||
{/* Simple visible dropdown for debugging */}
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]">
|
||||
<div className="bg-yellow-100 p-2 text-xs text-center border-b">
|
||||
DEBUG: Dropdown is visible
|
||||
</div>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => {
|
||||
console.log("Option clicked:", statusKey);
|
||||
handleChange(statusKey);
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
|
||||
>
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
|
||||
onClick={() => {
|
||||
console.log("Backdrop clicked");
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
src/components/TaskStatusDropdownSimple.js
Normal file
158
src/components/TaskStatusDropdownSimple.js
Normal file
@@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
|
||||
export default function TaskStatusDropdown({
|
||||
task,
|
||||
size = "sm",
|
||||
showDropdown = true,
|
||||
onStatusChange,
|
||||
}) {
|
||||
const [status, setStatus] = useState(task.status);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const statusConfig = {
|
||||
pending: {
|
||||
label: "Pending",
|
||||
variant: "warning",
|
||||
},
|
||||
in_progress: {
|
||||
label: "In Progress",
|
||||
variant: "primary",
|
||||
},
|
||||
completed: {
|
||||
label: "Completed",
|
||||
variant: "success",
|
||||
},
|
||||
cancelled: {
|
||||
label: "Cancelled",
|
||||
variant: "danger",
|
||||
},
|
||||
};
|
||||
|
||||
const handleChange = async (newStatus) => {
|
||||
if (newStatus === status) {
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus(newStatus);
|
||||
setLoading(true);
|
||||
setIsOpen(false);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/project-tasks/${task.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
// Call the callback if provided (for parent component to refresh)
|
||||
if (onStatusChange) {
|
||||
onStatusChange(task.id, newStatus);
|
||||
}
|
||||
} else {
|
||||
// Revert on error
|
||||
setStatus(task.status);
|
||||
alert("Failed to update task status");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to update status:", error);
|
||||
setStatus(task.status); // Revert on error
|
||||
alert("Error updating task status");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentConfig = statusConfig[status] || {
|
||||
label: "Unknown",
|
||||
variant: "default",
|
||||
};
|
||||
|
||||
if (!showDropdown) {
|
||||
return (
|
||||
<Badge variant={currentConfig.variant} size={size}>
|
||||
{currentConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"TaskStatusDropdown button clicked, current isOpen:",
|
||||
isOpen
|
||||
);
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
disabled={loading}
|
||||
className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
|
||||
>
|
||||
<Badge
|
||||
variant={currentConfig.variant}
|
||||
size={size}
|
||||
className={`cursor-pointer hover:opacity-80 transition-opacity ${
|
||||
loading ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
{loading ? "Updating..." : currentConfig.label}
|
||||
<svg
|
||||
className={`w-3 h-3 ml-1 transition-transform ${
|
||||
isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</Badge>
|
||||
</button>
|
||||
|
||||
{/* Simple dropdown for debugging */}
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]">
|
||||
<div className="bg-yellow-100 p-2 text-xs text-center border-b">
|
||||
DEBUG: TaskStatus Dropdown is visible
|
||||
</div>
|
||||
{Object.entries(statusConfig).map(([statusKey, config]) => (
|
||||
<button
|
||||
key={statusKey}
|
||||
onClick={() => {
|
||||
console.log("TaskStatus Option clicked:", statusKey);
|
||||
handleChange(statusKey);
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
|
||||
>
|
||||
<Badge variant={config.variant} size="sm">
|
||||
{config.label}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
|
||||
onClick={() => {
|
||||
console.log("TaskStatus Backdrop clicked");
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user