feat: add task comments feature with CRUD operations
- Introduced a new `task_comments` table in the database schema. - Implemented task comments API endpoints for listing, creating, and deleting comments. - Enhanced the task detail dialog to display comments and allow users to add new comments. - Updated task row component to handle click events for viewing task details. - Added a theme provider to manage light/dark mode across the application. - Refactored Milkdown editor to use Crepe for improved markdown editing experience. - Updated global styles to accommodate new editor and theme changes. - Enhanced task filtering and sorting functionality in the tasks page.
This commit is contained in:
Roberto Musso
274
src/renderer/components/tasks/TaskDetailDialog.tsx
Normal file
274
src/renderer/components/tasks/TaskDetailDialog.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
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 { 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'];
|
||||
return `${months[d.getMonth()]} ${String(d.getDate()).padStart(2, '0')}, ${d.getFullYear()}`;
|
||||
}
|
||||
|
||||
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 */}
|
||||
<div className="flex flex-col gap-4 max-h-[260px] overflow-y-auto">
|
||||
{(!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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user