300 lines
11 KiB
TypeScript
300 lines
11 KiB
TypeScript
/**
|
|
* @file app/(app)/dashboard/modal/TaskModal.tsx
|
|
* @description Client component rendering a detailed modal overlay for viewing task metadata, status, assignees, and quick actions with ESC key support.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { Task, PRIORITY_CONFIG } from "@/lib/types/task";
|
|
import { getFullName, getStatusColor } from "@/lib/utils/user";
|
|
import {
|
|
X,
|
|
CalendarDays,
|
|
AlertCircle,
|
|
User,
|
|
Users,
|
|
FileText,
|
|
Pencil,
|
|
Trash2,
|
|
} from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
/**
|
|
* Properties for the TaskModal component.
|
|
*
|
|
* @interface TaskModalProps
|
|
* @property {Task | null} task - The selected task object to display, or null if hidden.
|
|
* @property {() => void} onClose - Callback handler to close the modal dialog.
|
|
* @property {(taskId: string) => void} [onDelete] - Optional callback function triggered when deleting the task.
|
|
*/
|
|
interface TaskModalProps {
|
|
task: Task | null;
|
|
onClose: () => void;
|
|
onDelete?: (taskId: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Renders a full task detail modal with status indicators, priority details, description, assignees, and creator-only action buttons.
|
|
* Supports ESC key navigation and updates URL query parameters dynamically.
|
|
*
|
|
* @param {TaskModalProps} props - The component props.
|
|
* @returns {JSX.Element | null} The rendered modal component or null when no task is selected.
|
|
*/
|
|
export default function TaskModal({ task, onClose, onDelete }: TaskModalProps) {
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
/**
|
|
* Attaches a global keydown event listener to close the modal when the Escape key is pressed.
|
|
*
|
|
* @param {KeyboardEvent} e - The keyboard event object.
|
|
*/
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
handleClose();
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeyDown);
|
|
};
|
|
}, [onClose]);
|
|
|
|
useEffect(() => {
|
|
/**
|
|
* Updates the URL search parameters to include `modal=task-detail` when a task is selected,
|
|
* maintaining modal state in the browser history without triggering a full page re-render.
|
|
*/
|
|
if (task) {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.get("modal") !== "task-detail") {
|
|
params.set("modal", "task-detail");
|
|
window.history.replaceState(
|
|
{},
|
|
"",
|
|
`${window.location.pathname}?${params.toString()}`,
|
|
);
|
|
}
|
|
}
|
|
}, [task]);
|
|
|
|
/**
|
|
* Removes modal query parameters from the browser location history without causing a Next.js soft navigation, then triggers onClose.
|
|
*/
|
|
const handleClose = () => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
params.delete("modal");
|
|
const newQuery = params.toString();
|
|
|
|
window.history.replaceState(
|
|
{},
|
|
"",
|
|
newQuery
|
|
? `${window.location.pathname}?${newQuery}`
|
|
: window.location.pathname,
|
|
);
|
|
|
|
onClose();
|
|
};
|
|
|
|
if (!task) return null;
|
|
|
|
const priorityConfig = task.priority && PRIORITY_CONFIG[task.priority];
|
|
const isOverdue =
|
|
task.dueDate &&
|
|
new Date(task.dueDate) < new Date() &&
|
|
task.status !== "done";
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-49 flex items-center justify-center bg-black/80 backdrop-blur-md p-4 animate-in fade-in duration-300"
|
|
onClick={handleClose}
|
|
>
|
|
<div
|
|
className="bg-card border border-border rounded-3xl max-w-xl w-full max-h-[80vh] md:max-h-[90vh] shadow-2xl relative flex flex-col animate-in zoom-in-95 duration-200 overflow-hidden"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Dynamic Status Indicator Strip */}
|
|
<div
|
|
className={`absolute top-0 left-0 right-0 h-1 z-10 ${
|
|
task.status === "done"
|
|
? "bg-emerald-500"
|
|
: task.priority === "high"
|
|
? "bg-destructive"
|
|
: "bg-linear-to-r from-primary to-accent"
|
|
}`}
|
|
/>
|
|
|
|
{/* --- SCROLLABLE CONTENT AREA --- */}
|
|
<div className="p-8 space-y-6 overflow-y-auto flex-1">
|
|
{/* Header / Status, Priority & Title */}
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-2.5">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/25 tracking-wide uppercase">
|
|
{task.status}
|
|
</span>
|
|
|
|
{priorityConfig && (
|
|
<span
|
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-bold border-2 shrink-0 ${priorityConfig.className}`}
|
|
>
|
|
{priorityConfig.label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-bold text-foreground tracking-tight leading-snug">
|
|
{task.title}
|
|
</h2>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleClose}
|
|
className="text-foreground-muted hover:text-foreground p-2 rounded-xl bg-background/50 hover:bg-background border border-border transition-all cursor-pointer shrink-0"
|
|
aria-label="Close modal"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Description Section */}
|
|
<div className="space-y-2.5">
|
|
<div className="flex items-center space-x-2 text-foreground-muted">
|
|
<FileText className="w-4 h-4 text-primary" />
|
|
<span className="text-xs font-semibold uppercase tracking-wider">
|
|
Description
|
|
</span>
|
|
</div>
|
|
<div className="text-sm text-foreground bg-background-muted/60 p-4 rounded-2xl border border-border/60 leading-relaxed whitespace-pre-wrap max-h-48 overflow-y-auto">
|
|
{task.description || "No description provided for this task."}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Meta Grid (Creator & Due Date) */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{/* Creator */}
|
|
<div className="flex items-center space-x-3.5 bg-background-muted/40 p-3.5 rounded-2xl border border-border/60">
|
|
<div className="p-2.5 rounded-xl bg-primary/10 text-primary border border-primary/20">
|
|
<User className="w-4 h-4" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-foreground-muted font-medium">
|
|
Creator
|
|
</p>
|
|
<p className="text-sm font-semibold text-foreground truncate">
|
|
{getFullName(task.creator.firstName, task.creator.lastName)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Due Date */}
|
|
<div
|
|
className={`flex items-center space-x-3.5 p-3.5 rounded-2xl border transition-all ${
|
|
isOverdue
|
|
? "bg-destructive/10 border-destructive/40 text-destructive animate-pulse"
|
|
: "bg-background-muted/40 border-border/60 text-foreground"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`p-2.5 rounded-xl border shadow-sm ${
|
|
isOverdue
|
|
? "bg-destructive/20 border-destructive/30 text-destructive"
|
|
: "bg-accent/10 border-accent/20 text-accent"
|
|
}`}
|
|
>
|
|
{isOverdue ? (
|
|
<AlertCircle className="w-4 h-4" />
|
|
) : (
|
|
<CalendarDays className="w-4 h-4" />
|
|
)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p
|
|
className={`text-xs font-medium ${isOverdue ? "text-destructive/80" : "text-foreground-muted"}`}
|
|
>
|
|
{isOverdue ? "Overdue Due Date" : "Due Date"}
|
|
</p>
|
|
<p className="text-sm font-semibold truncate">
|
|
{task.dueDate
|
|
? `${new Date(task.dueDate).toLocaleDateString("de-DE", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
})} (${new Date(task.dueDate).toLocaleTimeString(
|
|
"de-DE",
|
|
{
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
},
|
|
)})`
|
|
: "No due date"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Assignees Section */}
|
|
<div className="space-y-3 pt-1">
|
|
<div className="flex items-center space-x-2 text-foreground-muted">
|
|
<Users className="w-4 h-4 text-accent" />
|
|
<span className="text-xs font-semibold uppercase tracking-wider">
|
|
Assignees ({task.assignees.length})
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{task.assignees.length > 0 ? (
|
|
task.assignees.map((assignee) => (
|
|
<div
|
|
key={assignee.id}
|
|
className="inline-flex items-center space-x-2 px-3.5 py-2 rounded-xl bg-background-muted/60 border border-border/60 text-foreground text-xs font-medium shadow-sm"
|
|
>
|
|
<span
|
|
className={`w-2 h-2 rounded-full shadow-sm ${getStatusColor(
|
|
assignee.isOnline ?? false,
|
|
)}`}
|
|
/>
|
|
<span>
|
|
{getFullName(assignee.firstName, assignee.lastName)}
|
|
</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-foreground-muted italic bg-background-muted/20 p-3 rounded-xl border border-border/40 w-full text-center">
|
|
No assignees assigned to this task.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Actions */}
|
|
{task.isCreator && (
|
|
<div className="flex items-center justify-end gap-3 px-8 py-4 bg-card border-t border-border/80 shrink-0">
|
|
<button
|
|
onClick={() => {
|
|
onDelete?.(task.id);
|
|
handleClose();
|
|
}}
|
|
className="inline-flex items-center space-x-2 px-4 py-2.5 text-sm font-medium bg-destructive-bg text-destructive border border-destructive-border hover:bg-destructive/20 rounded-xl transition-all cursor-pointer"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
<span>Delete</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
router.push(`/tasks?task=edit&id=${task.id}`);
|
|
}}
|
|
className="inline-flex items-center space-x-2 px-5 py-2.5 text-sm font-semibold bg-primary text-background hover:bg-primary-hover rounded-xl transition-all shadow-lg shadow-primary/10 cursor-pointer"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
<span>Edit Task</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|