278 lines
9.6 KiB
TypeScript
278 lines
9.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { MoreHorizontal, Eye, Pencil, Trash, Archive, UploadCloud, Undo2, Copy } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { ScrollArea } from "@/shared/components/ui/scroll-area"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/shared/components/ui/dropdown-menu"
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/shared/components/ui/alert-dialog"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
} from "@/shared/components/ui/dialog"
|
|
|
|
import { deleteExamAction, duplicateExamAction, updateExamAction, getExamPreviewAction } from "../actions"
|
|
import { Exam } from "../types"
|
|
import { ExamPaperPreview } from "./assembly/exam-paper-preview"
|
|
import type { ExamNode } from "./assembly/selected-question-list"
|
|
import type { Question } from "@/modules/questions/types"
|
|
|
|
interface ExamActionsProps {
|
|
exam: Exam
|
|
}
|
|
|
|
export function ExamActions({ exam }: ExamActionsProps) {
|
|
const router = useRouter()
|
|
const [showViewDialog, setShowViewDialog] = useState(false)
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
|
|
const [isWorking, setIsWorking] = useState(false)
|
|
const [previewNodes, setPreviewNodes] = useState<ExamNode[] | null>(null)
|
|
const [loadingPreview, setLoadingPreview] = useState(false)
|
|
|
|
const handleView = async () => {
|
|
setLoadingPreview(true)
|
|
setShowViewDialog(true)
|
|
try {
|
|
const result = await getExamPreviewAction(exam.id)
|
|
if (result.success && result.data) {
|
|
const { structure, questions } = result.data
|
|
const questionById = new Map<string, Question>()
|
|
for (const q of questions) questionById.set(q.id, q as unknown as Question)
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const hydrate = (nodes: any[]): ExamNode[] => {
|
|
return nodes.map((node) => {
|
|
if (node.type === "question") {
|
|
const q = node.questionId ? questionById.get(node.questionId) : undefined
|
|
return { ...node, question: q }
|
|
}
|
|
if (node.type === "group") {
|
|
return { ...node, children: hydrate(node.children || []) }
|
|
}
|
|
return node
|
|
})
|
|
}
|
|
|
|
const nodes = Array.isArray(structure) ? hydrate(structure) : []
|
|
setPreviewNodes(nodes)
|
|
} else {
|
|
toast.error("Failed to load exam preview")
|
|
setShowViewDialog(false)
|
|
}
|
|
} catch (e) {
|
|
toast.error("Failed to load exam preview")
|
|
setShowViewDialog(false)
|
|
} finally {
|
|
setLoadingPreview(false)
|
|
}
|
|
}
|
|
|
|
const copyId = () => {
|
|
navigator.clipboard.writeText(exam.id)
|
|
toast.success("Exam ID copied to clipboard")
|
|
}
|
|
|
|
const setStatus = async (status: Exam["status"]) => {
|
|
setIsWorking(true)
|
|
try {
|
|
const formData = new FormData()
|
|
formData.set("examId", exam.id)
|
|
formData.set("status", status)
|
|
const result = await updateExamAction(null, formData)
|
|
if (result.success) {
|
|
toast.success(status === "published" ? "Exam published" : status === "archived" ? "Exam archived" : "Exam moved to draft")
|
|
router.refresh()
|
|
} else {
|
|
toast.error(result.message || "Failed to update exam")
|
|
}
|
|
} catch {
|
|
toast.error("Failed to update exam")
|
|
} finally {
|
|
setIsWorking(false)
|
|
}
|
|
}
|
|
|
|
const duplicateExam = async () => {
|
|
setIsWorking(true)
|
|
try {
|
|
const formData = new FormData()
|
|
formData.set("examId", exam.id)
|
|
const result = await duplicateExamAction(null, formData)
|
|
if (result.success && result.data) {
|
|
toast.success("Exam duplicated")
|
|
router.push(`/teacher/exams/${result.data}/build`)
|
|
router.refresh()
|
|
} else {
|
|
toast.error(result.message || "Failed to duplicate exam")
|
|
}
|
|
} catch {
|
|
toast.error("Failed to duplicate exam")
|
|
} finally {
|
|
setIsWorking(false)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async () => {
|
|
setIsWorking(true)
|
|
try {
|
|
const formData = new FormData()
|
|
formData.set("examId", exam.id)
|
|
const result = await deleteExamAction(null, formData)
|
|
if (result.success) {
|
|
toast.success("Exam deleted successfully")
|
|
setShowDeleteDialog(false)
|
|
router.refresh()
|
|
} else {
|
|
toast.error(result.message || "Failed to delete exam")
|
|
}
|
|
} catch {
|
|
toast.error("Failed to delete exam")
|
|
} finally {
|
|
setIsWorking(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
handleView()
|
|
}}
|
|
title="Preview Exam"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Open menu</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem onClick={copyId}>
|
|
<Copy className="mr-2 h-4 w-4" /> Copy ID
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => router.push(`/teacher/exams/${exam.id}/build`)}>
|
|
<Pencil className="mr-2 h-4 w-4" /> Edit
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => router.push(`/teacher/exams/${exam.id}/build`)}>
|
|
<MoreHorizontal className="mr-2 h-4 w-4" /> Build
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={duplicateExam} disabled={isWorking}>
|
|
<Copy className="mr-2 h-4 w-4" /> Duplicate
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={() => setStatus("published")}
|
|
disabled={isWorking || exam.status === "published"}
|
|
>
|
|
<UploadCloud className="mr-2 h-4 w-4" /> Publish
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => setStatus("draft")}
|
|
disabled={isWorking || exam.status === "draft"}
|
|
>
|
|
<Undo2 className="mr-2 h-4 w-4" /> Move to Draft
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => setStatus("archived")}
|
|
disabled={isWorking || exam.status === "archived"}
|
|
>
|
|
<Archive className="mr-2 h-4 w-4" /> Archive
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className="text-destructive focus:text-destructive"
|
|
onClick={() => setShowDeleteDialog(true)}
|
|
disabled={isWorking}
|
|
>
|
|
<Trash className="mr-2 h-4 w-4" /> Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This action cannot be undone. This will permanently delete the exam
|
|
"{exam.title}" and remove all associated data.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handleDelete()
|
|
}}
|
|
disabled={isWorking}
|
|
>
|
|
Delete
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
<Dialog open={showViewDialog} onOpenChange={setShowViewDialog}>
|
|
<DialogContent className="max-w-4xl h-[90vh] flex flex-col p-0 gap-0">
|
|
<div className="p-4 border-b shrink-0 flex items-center justify-between">
|
|
<DialogTitle className="text-lg font-semibold tracking-tight">{exam.title}</DialogTitle>
|
|
</div>
|
|
<ScrollArea className="flex-1">
|
|
{loadingPreview ? (
|
|
<div className="py-20 text-center text-muted-foreground">Loading preview...</div>
|
|
) : previewNodes && previewNodes.length > 0 ? (
|
|
<div className="max-w-3xl mx-auto py-8 px-6">
|
|
<ExamPaperPreview
|
|
title={exam.title}
|
|
subject={exam.subject}
|
|
grade={exam.grade}
|
|
durationMin={exam.durationMin}
|
|
totalScore={exam.totalScore}
|
|
nodes={previewNodes}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="py-20 text-center text-muted-foreground">
|
|
No questions in this exam.
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|