282 lines
10 KiB
TypeScript
282 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { toast } from "sonner";
|
|
import { Copy, Check, Users, Calendar, Clock, History } from "lucide-react";
|
|
import Image from 'next/image';
|
|
|
|
interface Question {
|
|
id: string;
|
|
label: string;
|
|
type: string;
|
|
imageUrl: string | null;
|
|
}
|
|
|
|
interface SubmissionDetailClientProps {
|
|
submission: {
|
|
id: string;
|
|
userName: string | null;
|
|
userDiscordId: string | null;
|
|
submittedAt: Date;
|
|
editHistory?: { editedAt: string; oldAnswers: Record<string, string> }[] | null;
|
|
};
|
|
questions: Question[];
|
|
answers: Record<string, string>;
|
|
}
|
|
|
|
interface ContextMenuState {
|
|
visible: boolean;
|
|
x: number;
|
|
y: number;
|
|
questionId: string | null;
|
|
}
|
|
|
|
export default function SubmissionDetailClient({
|
|
submission,
|
|
questions,
|
|
answers,
|
|
}: SubmissionDetailClientProps) {
|
|
const [copiedId, setCopiedId] = useState<string | null>(null);
|
|
const [contextMenu, setContextMenu] = useState<ContextMenuState>({
|
|
visible: false,
|
|
x: 0,
|
|
y: 0,
|
|
questionId: null,
|
|
});
|
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleCopy = (text: string, id: string) => {
|
|
if (!text) return;
|
|
navigator.clipboard.writeText(text);
|
|
setCopiedId(id);
|
|
setTimeout(() => setCopiedId(null), 2000);
|
|
};
|
|
|
|
const handleContextMenu = (e: React.MouseEvent, questionId: string) => {
|
|
e.preventDefault();
|
|
setContextMenu({ visible: true, x: e.clientX, y: e.clientY, questionId });
|
|
};
|
|
|
|
const closeMenu = () => {
|
|
setContextMenu((prev) => ({ ...prev, visible: false, questionId: null }));
|
|
};
|
|
|
|
// Close menu on click outside or scroll
|
|
useEffect(() => {
|
|
const handleClick = (e: MouseEvent) => {
|
|
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
|
closeMenu();
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", handleClick);
|
|
document.addEventListener("scroll", closeMenu, true);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClick);
|
|
document.removeEventListener("scroll", closeMenu, true);
|
|
};
|
|
}, []);
|
|
|
|
const userLabel = submission.userName
|
|
? `${submission.userName} (${submission.userDiscordId || "N/A"})`
|
|
: submission.userDiscordId || "Anonymous";
|
|
|
|
const editHistory = Array.isArray(submission.editHistory) ? submission.editHistory : [];
|
|
|
|
// Build context menu data for the right-clicked question
|
|
const ctxQuestion = questions.find((q) => q.id === contextMenu.questionId);
|
|
const ctxAnswerHistory: { editedAt: string; answer: string }[] = [];
|
|
if (contextMenu.questionId) {
|
|
for (const edit of editHistory) {
|
|
ctxAnswerHistory.push({
|
|
editedAt: edit.editedAt,
|
|
answer: edit.oldAnswers[contextMenu.questionId] ?? "",
|
|
});
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Submission Metadata Card */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-xl">Submission Info</CardTitle>
|
|
<CardDescription>Details about this respondent.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-2 text-sm">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Users className="w-4 h-4 shrink-0" />
|
|
<span className="font-semibold text-foreground">Respondent:</span>
|
|
<span>{userLabel}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Calendar className="w-4 h-4 shrink-0" />
|
|
<span className="font-semibold text-foreground">Initial Submission:</span>
|
|
<span>{new Date(submission.submittedAt).toLocaleString()}</span>
|
|
</div>
|
|
{editHistory.length > 0 && (
|
|
<div className="flex flex-col mt-2 pt-2 border-t">
|
|
<span className="font-semibold text-foreground mb-1">Edit History:</span>
|
|
<ul className="list-disc list-inside text-xs text-muted-foreground space-y-1">
|
|
{editHistory.map((edit, idx) => (
|
|
<li key={idx}>Edited at {new Date(edit.editedAt).toLocaleString()}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Answers List */}
|
|
<div className="space-y-4">
|
|
{questions.map((q) => {
|
|
const ansValue = answers[q.id] || "";
|
|
|
|
const wasEdited = editHistory.some(
|
|
(edit) => (edit.oldAnswers[q.id] ?? "") !== ansValue
|
|
);
|
|
|
|
return (
|
|
<Card
|
|
key={q.id}
|
|
onContextMenu={(e) => handleContextMenu(e, q.id)}
|
|
className={wasEdited ? "cursor-context-menu" : ""}
|
|
>
|
|
<CardHeader className="pb-3 flex flex-row items-start justify-between space-y-0 gap-4">
|
|
<div className="space-y-1">
|
|
<Label className="text-base font-semibold leading-normal">
|
|
{q.label}
|
|
</Label>
|
|
{wasEdited && (
|
|
<p className="text-xs text-muted-foreground italic flex items-center gap-1">
|
|
edited
|
|
</p>
|
|
)}
|
|
</div>
|
|
{q.imageUrl && (
|
|
<div className="relative max-w-full h-auto max-h-60 overflow-hidden rounded-md border inline-block shrink-0">
|
|
<Image
|
|
width={100}
|
|
height={100}
|
|
src={q.imageUrl}
|
|
alt={q.label}
|
|
className="object-contain w-auto"
|
|
/>
|
|
</div>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{ansValue ? (
|
|
<div className="flex items-start justify-between gap-4 p-3 bg-muted rounded-md group">
|
|
<div className="flex flex-col">
|
|
{wasEdited && (
|
|
<span className="text-xs font-semibold text-muted-foreground mb-1">
|
|
Current Answer:
|
|
</span>
|
|
)}
|
|
<span className="text-sm whitespace-pre-wrap leading-relaxed">
|
|
{ansValue}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => handleCopy(ansValue, q.id)}
|
|
>
|
|
{copiedId === q.id ? (
|
|
<Check className="w-4 h-4 text-green-500" />
|
|
) : (
|
|
<Copy className="w-4 h-4 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<span className="text-sm text-muted-foreground italic pl-3 border-l-2 border-muted block">
|
|
No response provided
|
|
</span>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Context Menu */}
|
|
{contextMenu.visible && ctxQuestion && (
|
|
<div
|
|
ref={menuRef}
|
|
className="fixed z-50 min-w-72 max-w-sm bg-popover border border-border rounded-lg shadow-xl overflow-hidden"
|
|
style={{ top: contextMenu.y, left: contextMenu.x }}
|
|
>
|
|
{/* Header */}
|
|
<div className="px-4 py-3 border-b border-border bg-muted/50">
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
History
|
|
</p>
|
|
<p className="text-sm font-medium text-foreground truncate mt-0.5">
|
|
{ctxQuestion.label}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Edit History timestamps */}
|
|
{editHistory.length > 0 && (
|
|
<div className="px-4 py-2 border-b border-border">
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
|
Edit History:
|
|
</p>
|
|
<ul className="space-y-1">
|
|
{editHistory.map((edit, idx) => (
|
|
<li key={idx} className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<Clock className="w-3 h-3 shrink-0" />
|
|
{new Date(edit.editedAt).toLocaleString()}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{/* All Previous Answers */}
|
|
<div className="px-4 py-3 max-h-72 overflow-y-auto">
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
|
Previous Answers:
|
|
</p>
|
|
{ctxAnswerHistory.length === 0 ? (
|
|
<p className="text-xs text-muted-foreground italic">No edit history for this question.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{ctxAnswerHistory.map((entry, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="rounded-md border border-dashed border-muted-foreground/30 p-2 bg-muted/40"
|
|
>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
|
|
<Clock className="w-3 h-3 shrink-0" />
|
|
<span>{new Date(entry.editedAt).toLocaleString()}</span>
|
|
</div>
|
|
<span className="text-sm text-foreground/80 whitespace-pre-wrap leading-relaxed">
|
|
{entry.answer || <span className="italic text-muted-foreground">No response</span>}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-4 py-2 border-t border-border bg-muted/30">
|
|
<button
|
|
className="w-full text-xs text-muted-foreground hover:text-foreground transition-colors py-0.5"
|
|
onClick={closeMenu}
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|