282 lines
9.7 KiB
TypeScript
282 lines
9.7 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Calendar,
|
|
User,
|
|
CircleDot,
|
|
FolderOpen,
|
|
Zap,
|
|
Pencil,
|
|
Trash2,
|
|
Send,
|
|
} from 'lucide-react';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog';
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Input } from '@/components/ui/input';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { trpc } from '@/lib/trpc';
|
|
import { PriorityBadge } from './PriorityBadge';
|
|
import { parseAssignees, type TaskItem } from './TaskRow';
|
|
|
|
function formatDate(timestamp: number): string {
|
|
const d = new Date(timestamp);
|
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
const date = `${months[d.getMonth()]} ${String(d.getDate()).padStart(2, '0')}, ${d.getFullYear()}`;
|
|
if (d.getHours() === 0 && d.getMinutes() === 0) return date;
|
|
const h = String(d.getHours()).padStart(2, '0');
|
|
const m = String(d.getMinutes()).padStart(2, '0');
|
|
return `${date} ${h}:${m}`;
|
|
}
|
|
|
|
function relativeTime(timestamp: number): string {
|
|
const diff = Date.now() - timestamp;
|
|
const minutes = Math.floor(diff / 60000);
|
|
if (minutes < 1) return 'just now';
|
|
if (minutes < 60) return `${minutes} min ago`;
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours} hr ago`;
|
|
const days = Math.floor(hours / 24);
|
|
return `${days}d ago`;
|
|
}
|
|
|
|
const STATUS_CONFIG: Record<string, { label: string; className: string }> = {
|
|
todo: { label: 'To Do', className: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' },
|
|
in_progress: { label: 'In Progress', className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' },
|
|
done: { label: 'Done', className: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' },
|
|
};
|
|
|
|
function AuthorAvatar({ name }: { name: string }) {
|
|
const initials = name
|
|
.split(/\s+/)
|
|
.slice(0, 2)
|
|
.map((w) => w[0]?.toUpperCase() ?? '')
|
|
.join('');
|
|
return (
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium">
|
|
{initials}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface TaskDetailDialogProps {
|
|
task: TaskItem | null;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onEdit: (task: TaskItem) => void;
|
|
onDelete: (id: string) => void;
|
|
}
|
|
|
|
export function TaskDetailDialog({ task, open, onOpenChange, onEdit, onDelete }: TaskDetailDialogProps) {
|
|
const [commentText, setCommentText] = useState('');
|
|
const [activeTab, setActiveTab] = useState('description');
|
|
|
|
const { data: comments } = trpc.taskComments.list.useQuery(
|
|
{ taskId: task?.id ?? '' },
|
|
{ enabled: !!task },
|
|
);
|
|
|
|
const utils = trpc.useUtils();
|
|
|
|
const addComment = trpc.taskComments.create.useMutation({
|
|
onSuccess: () => {
|
|
void utils.taskComments.list.invalidate({ taskId: task?.id ?? '' });
|
|
setCommentText('');
|
|
},
|
|
});
|
|
|
|
const deleteComment = trpc.taskComments.delete.useMutation({
|
|
onSuccess: () => {
|
|
void utils.taskComments.list.invalidate({ taskId: task?.id ?? '' });
|
|
},
|
|
});
|
|
|
|
if (!task) return null;
|
|
|
|
const assignees = parseAssignees(task.assignee);
|
|
const statusConf = STATUS_CONFIG[task.status ?? 'todo'] ?? { label: 'To Do', className: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' };
|
|
const breadcrumb = [task.clientName, task.subClientName, task.projectName].filter(Boolean);
|
|
|
|
const handleAddComment = () => {
|
|
const text = commentText.trim();
|
|
if (!text) return;
|
|
addComment.mutate({ taskId: task.id, author: 'Me', content: text });
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-[620px] gap-0 p-0" aria-describedby={undefined}>
|
|
{/* Header */}
|
|
<DialogHeader className="px-6 pt-6 pb-4">
|
|
<DialogTitle className="text-lg font-semibold leading-tight">{task.title}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<Separator />
|
|
|
|
{/* Field rows */}
|
|
<div className="grid grid-cols-[120px_1fr] gap-y-3 px-6 py-4 text-sm">
|
|
{/* Assignee */}
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<User className="h-4 w-4" />
|
|
Assignee
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
{assignees.length > 0 ? (
|
|
assignees.map((name) => (
|
|
<Badge key={name} variant="secondary" className="text-xs">
|
|
{name}
|
|
</Badge>
|
|
))
|
|
) : (
|
|
<span className="text-muted-foreground">Unassigned</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Status */}
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<CircleDot className="h-4 w-4" />
|
|
Status
|
|
</div>
|
|
<div>
|
|
<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusConf.className}`}>
|
|
{statusConf.label}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Due date */}
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Calendar className="h-4 w-4" />
|
|
Due date
|
|
</div>
|
|
<div>
|
|
{task.dueDate ? formatDate(task.dueDate) : <span className="text-muted-foreground">No due date</span>}
|
|
</div>
|
|
|
|
{/* Priority */}
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Zap className="h-4 w-4" />
|
|
Priority
|
|
</div>
|
|
<div>
|
|
<PriorityBadge priority={task.priority} />
|
|
</div>
|
|
|
|
{/* Project */}
|
|
{breadcrumb.length > 0 && (
|
|
<>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<FolderOpen className="h-4 w-4" />
|
|
Project
|
|
</div>
|
|
<div className="text-sm">{breadcrumb.join(' > ')}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Tabs: Description / Comment */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col">
|
|
<TabsList className="mx-6 mt-3 w-fit">
|
|
<TabsTrigger value="description">Description</TabsTrigger>
|
|
<TabsTrigger value="comment">Comment</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="description" className="px-6 py-4 min-h-[120px]">
|
|
{task.description ? (
|
|
<p className="text-sm whitespace-pre-wrap">{task.description}</p>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground italic">No description provided.</p>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="comment" className="px-6 py-4 min-h-[120px] flex flex-col gap-4">
|
|
{/* Comment list */}
|
|
<ScrollArea className="max-h-[260px]">
|
|
<div className="flex flex-col gap-4">
|
|
{(!comments || comments.length === 0) ? (
|
|
<p className="text-sm text-muted-foreground italic">No comments yet.</p>
|
|
) : (
|
|
comments.map((c) => (
|
|
<div key={c.id} className="flex gap-3">
|
|
<AuthorAvatar name={c.author} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="text-sm font-medium">{c.author}</span>
|
|
<span className="text-xs text-muted-foreground">{relativeTime(c.createdAt)}</span>
|
|
</div>
|
|
<div className="rounded-lg bg-muted px-3 py-2 text-sm">
|
|
{c.content}
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-1">
|
|
<button
|
|
type="button"
|
|
className="text-xs text-muted-foreground hover:text-destructive"
|
|
onClick={() => deleteComment.mutate({ id: c.id })}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
{/* Add comment input */}
|
|
<form
|
|
className="flex items-center gap-2 mt-auto"
|
|
onSubmit={(e) => { e.preventDefault(); handleAddComment(); }}
|
|
>
|
|
<AuthorAvatar name="Me" />
|
|
<Input
|
|
placeholder="Add a comment..."
|
|
value={commentText}
|
|
onChange={(e) => setCommentText(e.target.value)}
|
|
className="flex-1"
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
size="icon"
|
|
variant="ghost"
|
|
disabled={!commentText.trim() || addComment.isPending}
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
</Button>
|
|
</form>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
<Separator />
|
|
|
|
{/* Footer */}
|
|
<DialogFooter className="px-6 py-4">
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={() => { onDelete(task.id); onOpenChange(false); }}
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-1" />
|
|
Delete
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => { onEdit(task); onOpenChange(false); }}
|
|
>
|
|
<Pencil className="h-4 w-4 mr-1" />
|
|
Edit
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|