96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Comment } from "@/components/shared/comment";
|
|
import { TaskWithRelations } from "@/types";
|
|
import { useAddComment } from "@/hooks/use-comments";
|
|
|
|
/**
|
|
* Props für CommentSection Component
|
|
*/
|
|
interface CommentSectionProps {
|
|
task: TaskWithRelations;
|
|
}
|
|
|
|
/**
|
|
* Comment Section Component
|
|
* Zeigt alle Kommentare einer Task an und ermöglicht das Hinzufügen neuer Kommentare
|
|
* - Nur shadcn/ui Komponenten (Card, ScrollArea, Separator, Textarea, Button)
|
|
* - Comment Component für einzelne Kommentare
|
|
*/
|
|
export function CommentSection({ task }: CommentSectionProps) {
|
|
/**
|
|
* State für neuen Kommentar-Text
|
|
*/
|
|
const [newComment, setNewComment] = useState("");
|
|
|
|
/**
|
|
* Hook zum Hinzufügen eines Kommentars
|
|
*/
|
|
const addComment = useAddComment(task.id);
|
|
|
|
/**
|
|
* Handler für Kommentar hinzufügen
|
|
*/
|
|
const handleAddComment = () => {
|
|
if (!newComment.trim()) return;
|
|
|
|
addComment.mutate(newComment, {
|
|
onSuccess: () => {
|
|
setNewComment("");
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Kommentare</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-[400px] pr-4">
|
|
{task.comments.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
Noch keine Kommentare vorhanden
|
|
</p>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{task.comments.map((comment, index) => (
|
|
<div key={comment.id}>
|
|
<Comment comment={comment} />
|
|
{index < task.comments.length - 1 && <Separator className="mt-4" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</CardContent>
|
|
<CardFooter className="flex-col gap-2">
|
|
<Textarea
|
|
placeholder="Kommentar hinzufügen..."
|
|
value={newComment}
|
|
onChange={(e) => setNewComment(e.target.value)}
|
|
/>
|
|
<Button
|
|
onClick={handleAddComment}
|
|
disabled={!newComment.trim() || addComment.isPending}
|
|
className="w-full"
|
|
>
|
|
{addComment.isPending ? "Wird hinzugefügt..." : "Kommentar hinzufügen"}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|