Module Update

src/modules/questions/components/question-actions.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import { useState } from "react"
+import { MoreHorizontal, Pencil, Trash, Eye, Copy } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+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,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/components/ui/dialog"
+
+import { Question } from "../types"
+import { CreateQuestionDialog } from "./create-question-dialog"
+import { toast } from "sonner"
+
+interface QuestionActionsProps {
+  question: Question
+}
+
+export function QuestionActions({ question }: QuestionActionsProps) {
+  const [showEditDialog, setShowEditDialog] = useState(false)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [showViewDialog, setShowViewDialog] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const copyId = () => {
+    navigator.clipboard.writeText(question.id)
+    toast.success("Question ID copied to clipboard")
+  }
+
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    try {
+      // Simulate API call
+      console.log("Deleting question:", question.id)
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      toast.success("Question deleted successfully")
+      setShowDeleteDialog(false)
+    } catch (error) {
+      console.error(error)
+      toast.error("Failed to delete question")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  return (
+    <>
+      <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={() => setShowViewDialog(true)}>
+            <Eye className="mr-2 h-4 w-4" /> View Details
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setShowEditDialog(true)}>
+            <Pencil className="mr-2 h-4 w-4" /> Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem 
+            className="text-destructive focus:text-destructive"
+            onClick={() => setShowDeleteDialog(true)}
+          >
+            <Trash className="mr-2 h-4 w-4" /> Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Edit Dialog */}
+      <CreateQuestionDialog 
+        open={showEditDialog} 
+        onOpenChange={setShowEditDialog} 
+        initialData={question}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the question
+              and remove it from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction 
+              onClick={(e) => {
+                e.preventDefault()
+                handleDelete()
+              }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* View Details Dialog (Simple Read-only View) */}
+      <Dialog open={showViewDialog} onOpenChange={setShowViewDialog}>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Question Details</DialogTitle>
+                <DialogDescription>ID: {question.id}</DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+                <div className="grid grid-cols-4 items-center gap-4">
+                    <span className="font-medium">Type:</span>
+                    <span className="col-span-3 capitalize">{question.type.replace('_', ' ')}</span>
+                </div>
+                <div className="grid grid-cols-4 items-center gap-4">
+                    <span className="font-medium">Difficulty:</span>
+                    <span className="col-span-3">{question.difficulty}</span>
+                </div>
+                <div className="grid grid-cols-4 items-start gap-4">
+                    <span className="font-medium pt-1">Content:</span>
+                    <div className="col-span-3 rounded-md bg-muted p-2 text-sm">
+                        {typeof question.content === 'string' ? question.content : JSON.stringify(question.content, null, 2)}
+                    </div>
+                </div>
+                 {/* Show Author if exists */}
+                 {question.author && (
+                     <div className="grid grid-cols-4 items-center gap-4">
+                        <span className="font-medium">Author:</span>
+                        <span className="col-span-3">{question.author.name || "Unknown"}</span>
+                    </div>
+                 )}
+                 {/* Show Knowledge Points */}
+                 {question.knowledgePoints && question.knowledgePoints.length > 0 && (
+                     <div className="grid grid-cols-4 items-center gap-4">
+                        <span className="font-medium">Tags:</span>
+                        <div className="col-span-3 flex flex-wrap gap-1">
+                            {question.knowledgePoints.map(kp => (
+                                <span key={kp.id} className="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
+                                    {kp.name}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                 )}
+            </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}