101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent } from "@/shared/components/ui/card"
|
|
import { Badge } from "@/shared/components/ui/badge"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Tag, Trash2 } from "lucide-react"
|
|
import { KnowledgePoint } from "../types"
|
|
import { CreateKnowledgePointDialog } from "./create-knowledge-point-dialog"
|
|
import { deleteKnowledgePointAction } from "../actions"
|
|
import { toast } from "sonner"
|
|
import { ScrollArea } from "@/shared/components/ui/scroll-area"
|
|
|
|
interface KnowledgePointPanelProps {
|
|
knowledgePoints: KnowledgePoint[]
|
|
selectedChapterId: string | null
|
|
textbookId: string
|
|
}
|
|
|
|
export function KnowledgePointPanel({
|
|
knowledgePoints,
|
|
selectedChapterId,
|
|
textbookId
|
|
}: KnowledgePointPanelProps) {
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm("Are you sure you want to delete this knowledge point?")) return
|
|
|
|
const result = await deleteKnowledgePointAction(id, textbookId)
|
|
if (result.success) {
|
|
toast.success(result.message)
|
|
} else {
|
|
toast.error(result.message)
|
|
}
|
|
}
|
|
|
|
// Filter KPs for the selected chapter
|
|
const chapterKPs = selectedChapterId
|
|
? knowledgePoints.filter(kp => kp.chapterId === selectedChapterId)
|
|
: []
|
|
|
|
return (
|
|
<div className="h-full flex flex-col space-y-4">
|
|
<div className="flex items-center justify-between px-2">
|
|
<h3 className="font-semibold flex items-center gap-2">
|
|
<Tag className="h-4 w-4" />
|
|
Knowledge Points
|
|
</h3>
|
|
{selectedChapterId && (
|
|
<CreateKnowledgePointDialog
|
|
chapterId={selectedChapterId}
|
|
textbookId={textbookId}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<ScrollArea className="flex-1 -mx-2 px-2">
|
|
{selectedChapterId ? (
|
|
chapterKPs.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{chapterKPs.map((kp) => (
|
|
<Card key={kp.id} className="relative group">
|
|
<CardContent className="p-3">
|
|
<div className="flex justify-between items-start gap-2">
|
|
<div className="space-y-1">
|
|
<div className="font-medium text-sm leading-tight">
|
|
{kp.name}
|
|
</div>
|
|
{kp.description && (
|
|
<p className="text-xs text-muted-foreground line-clamp-2">
|
|
{kp.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1"
|
|
onClick={() => handleDelete(kp.id)}
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-muted-foreground text-center py-8 border rounded-md border-dashed bg-muted/30">
|
|
No knowledge points linked to this chapter yet.
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="text-sm text-muted-foreground text-center py-8">
|
|
Select a chapter to manage its knowledge points.
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</div>
|
|
)
|
|
}
|