Module Update

src/modules/exams/components/exam-assembly.tsx

@@ -0,0 +1,343 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { useFormStatus } from "react-dom"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Search } from "lucide-react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { Label } from "@/shared/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
+import { Separator } from "@/shared/components/ui/separator"
+import { Badge } from "@/shared/components/ui/badge"
+import type { Question } from "@/modules/questions/types"
+import { updateExamAction } from "@/modules/exams/actions"
+import { StructureEditor } from "./assembly/structure-editor"
+import { QuestionBankList } from "./assembly/question-bank-list"
+import type { ExamNode } from "./assembly/selected-question-list"
+import { createId } from "@paralleldrive/cuid2"
+
+type ExamAssemblyProps = {
+  examId: string
+  title: string
+  subject: string
+  grade: string
+  difficulty: number
+  totalScore: number
+  durationMin: number
+  initialSelected?: Array<{ id: string; score: number }>
+  initialStructure?: ExamNode[] // New prop
+  questionOptions: Question[]
+}
+
+function SubmitButton({ label }: { label: string }) {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" disabled={pending} className="w-full">
+      {pending ? "Saving..." : label}
+    </Button>
+  )
+}
+
+export function ExamAssembly(props: ExamAssemblyProps) {
+  const router = useRouter()
+  const [search, setSearch] = useState("")
+  const [typeFilter, setTypeFilter] = useState<string>("all")
+  const [difficultyFilter, setDifficultyFilter] = useState<string>("all")
+  
+  // Initialize structure state
+  const [structure, setStructure] = useState<ExamNode[]>(() => {
+    // Hydrate structure with full question objects
+    const hydrate = (nodes: ExamNode[]): ExamNode[] => {
+      return nodes.map(node => {
+        if (node.type === 'question') {
+          const q = props.questionOptions.find(opt => opt.id === node.questionId)
+          return { ...node, question: q }
+        }
+        if (node.type === 'group') {
+          return { ...node, children: hydrate(node.children || []) }
+        }
+        return node
+      })
+    }
+    
+    // Use initialStructure if provided (Server generated or DB stored)
+    if (props.initialStructure && props.initialStructure.length > 0) {
+      return hydrate(props.initialStructure)
+    }
+
+    // Fallback logic removed as Server Component handles initial migration
+    return []
+  })
+
+  const filteredQuestions = useMemo(() => {
+    let list: Question[] = [...props.questionOptions]
+    
+    if (search) {
+      const lower = search.toLowerCase()
+      list = list.filter(q => {
+        const content = q.content as { text?: string }
+        return content.text?.toLowerCase().includes(lower)
+      })
+    }
+
+    if (typeFilter !== "all") {
+      list = list.filter((q) => q.type === (typeFilter as Question["type"]))
+    }
+    if (difficultyFilter !== "all") {
+      const d = parseInt(difficultyFilter)
+      list = list.filter((q) => q.difficulty === d)
+    }
+    return list
+  }, [search, typeFilter, difficultyFilter, props.questionOptions])
+
+  // Recursively calculate total score
+  const assignedTotal = useMemo(() => {
+    const calc = (nodes: ExamNode[]): number => {
+      return nodes.reduce((sum, node) => {
+        if (node.type === 'question') return sum + (node.score || 0)
+        if (node.type === 'group') return sum + calc(node.children || [])
+        return sum
+      }, 0)
+    }
+    return calc(structure)
+  }, [structure])
+
+  const progress = Math.min(100, Math.max(0, (assignedTotal / props.totalScore) * 100))
+
+  const handleAdd = (question: Question) => {
+    setStructure(prev => [
+      ...prev, 
+      { 
+        id: createId(), 
+        type: 'question', 
+        questionId: question.id, 
+        score: 10, 
+        question 
+      }
+    ])
+  }
+
+  const handleAddGroup = () => {
+    setStructure(prev => [
+      ...prev,
+      {
+        id: createId(),
+        type: 'group',
+        title: 'New Section',
+        children: []
+      }
+    ])
+  }
+
+  const handleRemove = (id: string) => {
+    const removeRecursive = (nodes: ExamNode[]): ExamNode[] => {
+      return nodes.filter(n => n.id !== id).map(n => {
+        if (n.type === 'group') {
+          return { ...n, children: removeRecursive(n.children || []) }
+        }
+        return n
+      })
+    }
+    setStructure(prev => removeRecursive(prev))
+  }
+
+  const handleScoreChange = (id: string, score: number) => {
+    const updateRecursive = (nodes: ExamNode[]): ExamNode[] => {
+      return nodes.map(n => {
+        if (n.id === id) return { ...n, score }
+        if (n.type === 'group') return { ...n, children: updateRecursive(n.children || []) }
+        return n
+      })
+    }
+    setStructure(prev => updateRecursive(prev))
+  }
+
+  const handleGroupTitleChange = (id: string, title: string) => {
+    const updateRecursive = (nodes: ExamNode[]): ExamNode[] => {
+      return nodes.map(n => {
+        if (n.id === id) return { ...n, title }
+        if (n.type === 'group') return { ...n, children: updateRecursive(n.children || []) }
+        return n
+      })
+    }
+    setStructure(prev => updateRecursive(prev))
+  }
+
+  // Helper to extract flat list for DB examQuestions table
+  const getFlatQuestions = () => {
+    const list: Array<{ id: string; score: number }> = []
+    const traverse = (nodes: ExamNode[]) => {
+      nodes.forEach(n => {
+        if (n.type === 'question' && n.questionId) {
+          list.push({ id: n.questionId, score: n.score || 0 })
+        }
+        if (n.type === 'group') {
+          traverse(n.children || [])
+        }
+      })
+    }
+    traverse(structure)
+    return list
+  }
+  
+  // Helper to strip runtime question objects for DB structure storage
+  const getCleanStructure = () => {
+    const clean = (nodes: ExamNode[]): any[] => {
+      return nodes.map(n => {
+        const { question, ...rest } = n
+        if (n.type === 'group') {
+          return { ...rest, children: clean(n.children || []) }
+        }
+        return rest
+      })
+    }
+    return clean(structure)
+  }
+
+  const handleSave = async (formData: FormData) => {
+    formData.set("examId", props.examId)
+    formData.set("questionsJson", JSON.stringify(getFlatQuestions()))
+    formData.set("structureJson", JSON.stringify(getCleanStructure()))
+    
+    const result = await updateExamAction(null, formData)
+    if (result.success) {
+      toast.success("Saved draft")
+    } else {
+      toast.error(result.message || "Save failed")
+    }
+  }
+
+  const handlePublish = async (formData: FormData) => {
+    formData.set("examId", props.examId)
+    formData.set("questionsJson", JSON.stringify(getFlatQuestions()))
+    formData.set("structureJson", JSON.stringify(getCleanStructure()))
+    formData.set("status", "published")
+    
+    const result = await updateExamAction(null, formData)
+    if (result.success) {
+      toast.success("Published exam")
+      router.push("/teacher/exams/all")
+    } else {
+      toast.error(result.message || "Publish failed")
+    }
+  }
+
+  return (
+    <div className="grid h-[calc(100vh-12rem)] gap-6 lg:grid-cols-5">
+      {/* Left: Preview (3 cols) */}
+      <Card className="lg:col-span-3 flex flex-col overflow-hidden border-2 border-primary/10">
+        <CardHeader className="bg-muted/30 pb-4">
+          <div className="flex items-center justify-between">
+            <CardTitle>Exam Structure</CardTitle>
+            <div className="flex items-center gap-4 text-sm">
+              <div className="flex flex-col items-end">
+                <span className="font-medium">{assignedTotal} / {props.totalScore}</span>
+                <span className="text-xs text-muted-foreground">Total Score</span>
+              </div>
+              <div className="h-2 w-24 rounded-full bg-secondary">
+                <div 
+                  className={`h-full rounded-full transition-all ${
+                    assignedTotal > props.totalScore ? "bg-destructive" : "bg-primary"
+                  }`} 
+                  style={{ width: `${progress}%` }} 
+                />
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+        
+        <ScrollArea className="flex-1 p-4">
+          <div className="space-y-6">
+            <div className="grid grid-cols-3 gap-4 text-sm text-muted-foreground bg-muted/20 p-3 rounded-md">
+              <div><span className="font-medium text-foreground">{props.subject}</span></div>
+              <div><span className="font-medium text-foreground">{props.grade}</span></div>
+              <div>Duration: <span className="font-medium text-foreground">{props.durationMin} min</span></div>
+            </div>
+
+            <StructureEditor 
+              items={structure}
+              onChange={setStructure}
+              onScoreChange={handleScoreChange}
+              onGroupTitleChange={handleGroupTitleChange}
+              onRemove={handleRemove}
+              onAddGroup={handleAddGroup}
+            />
+          </div>
+        </ScrollArea>
+
+        <div className="border-t p-4 bg-muted/30 flex gap-3 justify-end">
+          <form action={handleSave} className="flex-1">
+            <SubmitButton label="Save Draft" />
+          </form>
+          <form action={handlePublish} className="flex-1">
+            <SubmitButton label="Publish Exam" />
+          </form>
+        </div>
+      </Card>
+
+      {/* Right: Question Bank (2 cols) */}
+      <Card className="lg:col-span-2 flex flex-col overflow-hidden">
+        <CardHeader className="pb-3 space-y-3">
+          <CardTitle className="text-base">Question Bank</CardTitle>
+          <div className="relative">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input 
+              placeholder="Search questions..." 
+              className="pl-8" 
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          <div className="flex gap-2">
+            <Select value={typeFilter} onValueChange={setTypeFilter}>
+              <SelectTrigger className="flex-1 h-8 text-xs"><SelectValue placeholder="Type" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                <SelectItem value="single_choice">Single Choice</SelectItem>
+                <SelectItem value="multiple_choice">Multiple Choice</SelectItem>
+                <SelectItem value="judgment">True/False</SelectItem>
+                <SelectItem value="text">Short Answer</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={difficultyFilter} onValueChange={setDifficultyFilter}>
+              <SelectTrigger className="w-[80px] h-8 text-xs"><SelectValue placeholder="Diff" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All</SelectItem>
+                <SelectItem value="1">Lvl 1</SelectItem>
+                <SelectItem value="2">Lvl 2</SelectItem>
+                <SelectItem value="3">Lvl 3</SelectItem>
+                <SelectItem value="4">Lvl 4</SelectItem>
+                <SelectItem value="5">Lvl 5</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardHeader>
+        
+        <Separator />
+        
+        <ScrollArea className="flex-1 p-4 bg-muted/10">
+          <QuestionBankList 
+            questions={filteredQuestions}
+            onAdd={handleAdd}
+            isAdded={(id) => {
+               // Check if question is added anywhere in the structure
+               const isAddedRecursive = (nodes: ExamNode[]): boolean => {
+                 return nodes.some(n => {
+                   if (n.type === 'question' && n.questionId === id) return true
+                   if (n.type === 'group' && n.children) return isAddedRecursive(n.children)
+                   return false
+                 })
+               }
+               return isAddedRecursive(structure)
+            }}
+          />
+        </ScrollArea>
+      </Card>
+    </div>
+  )
+}