460 lines
16 KiB
TypeScript
460 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import React, { useCallback, useState } from "react";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
} from "@/components/ui/field";
|
|
import {
|
|
ContextMenu,
|
|
ContextMenuTrigger,
|
|
ContextMenuContent,
|
|
ContextMenuLabel,
|
|
ContextMenuSeparator,
|
|
ContextMenuItem,
|
|
ContextMenuGroup
|
|
} from "@/components/ui/context-menu";
|
|
import {
|
|
AlertCircle,
|
|
Calendar,
|
|
Check,
|
|
Clock,
|
|
Copy,
|
|
Loader2,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import Image from 'next/image';
|
|
import { stripHtml } from "@/lib/utils";
|
|
import { HtmlDisplay } from "@/components/html-display";
|
|
import { formatStoredAnswer } from "@/lib/form-answer-values";
|
|
import { normalizeStoredAnswerSnapshot } from "@/lib/submission-intake";
|
|
import { updateSubmissionAdminNote } from "@/app/admin/form/actions";
|
|
import {
|
|
useDebouncedAutoSave,
|
|
type AutoSaveStatus,
|
|
} from "@/hooks/use-debounced-autosave";
|
|
import {
|
|
DiscordProfileDropdown,
|
|
type DiscordMemberProfile,
|
|
} from "@/components/dropdown-menu-avatar";
|
|
|
|
interface Question {
|
|
id: string;
|
|
label: string;
|
|
type: string;
|
|
imageUrl: string | null;
|
|
}
|
|
|
|
interface SubmissionDetailClientProps {
|
|
submission: {
|
|
id: string;
|
|
formId: string;
|
|
userName: string | null;
|
|
userDiscordId: string | null;
|
|
userProfile: DiscordMemberProfile | null;
|
|
submittedAt: Date;
|
|
adminNote: string | null;
|
|
editHistory?: { editedAt: string; oldAnswers: Record<string, string | { value: string; imageCdnId: string | null }> }[] | null;
|
|
};
|
|
questions: Question[];
|
|
answers: Record<string, { value: string; imageCdnId: string | null }>;
|
|
}
|
|
|
|
export default function SubmissionDetailClient({
|
|
submission,
|
|
questions,
|
|
answers,
|
|
}: SubmissionDetailClientProps) {
|
|
const [copiedId, setCopiedId] = useState<string | null>(null);
|
|
const [adminNote, setAdminNote] = useState(submission.adminNote ?? "");
|
|
|
|
const handleCopy = (text: string, id: string) => {
|
|
if (!text) return;
|
|
navigator.clipboard.writeText(text);
|
|
setCopiedId(id);
|
|
setTimeout(() => setCopiedId(null), 2000);
|
|
};
|
|
|
|
const userLabel = submission.userName
|
|
? `${submission.userName} (${submission.userDiscordId || "N/A"})`
|
|
: submission.userDiscordId || "Anonymous";
|
|
|
|
const editHistory = Array.isArray(submission.editHistory) ? submission.editHistory : [];
|
|
|
|
const saveAdminNote = useCallback(
|
|
() =>
|
|
updateSubmissionAdminNote(
|
|
submission.formId,
|
|
submission.id,
|
|
adminNote
|
|
).then(() => undefined),
|
|
[adminNote, submission.formId, submission.id]
|
|
);
|
|
const noteAutoSave = useDebouncedAutoSave({
|
|
save: saveAdminNote,
|
|
delay: 1000,
|
|
});
|
|
|
|
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 flex-wrap 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>
|
|
{submission.userProfile?.globalName && (
|
|
<DiscordProfileDropdown
|
|
userName={submission.userName || submission.userProfile.username}
|
|
profile={submission.userProfile}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="cursor-pointer rounded-sm bg-[#5865f2]/30 px-1 font-medium text-[#c9cdfb] transition-colors hover:bg-[#5865f2] hover:text-white"
|
|
aria-label={`View Discord profile for ${submission.userProfile.globalName}`}
|
|
>
|
|
@{submission.userProfile.globalName}
|
|
</button>
|
|
</DiscordProfileDropdown>
|
|
)}
|
|
</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("en-GB", { timeZone: "Asia/Bangkok", hour12: false })}</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("en-GB", { timeZone: "Asia/Bangkok", hour12: false })}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Admin note</CardTitle>
|
|
<CardDescription>
|
|
Private context for administrators. Respondents cannot see this note.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field data-invalid={noteAutoSave.status === "error"}>
|
|
<FieldLabel htmlFor="admin-note">Note</FieldLabel>
|
|
<Textarea
|
|
id="admin-note"
|
|
value={adminNote}
|
|
onChange={(event) => {
|
|
setAdminNote(event.target.value);
|
|
noteAutoSave.schedule();
|
|
}}
|
|
placeholder="Add a private note about this submission..."
|
|
maxLength={10_000}
|
|
aria-invalid={noteAutoSave.status === "error"}
|
|
/>
|
|
<FieldDescription>
|
|
Autosaves after you stop typing. Only administrators can view
|
|
this note.
|
|
</FieldDescription>
|
|
<SaveStatusIndicator
|
|
status={noteAutoSave.status}
|
|
error={noteAutoSave.error}
|
|
onRetry={noteAutoSave.retry}
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Answers List */}
|
|
<div className="space-y-4">
|
|
{questions.map((q) => {
|
|
const rawAnswer = answers[q.id] ?? { value: "", imageCdnId: null };
|
|
const rawAnswerValue = rawAnswer.value;
|
|
const answerValue = formatStoredAnswer(rawAnswerValue, q.type);
|
|
const imageUrl = rawAnswer.imageCdnId ? `/cdn/${rawAnswer.imageCdnId}` : "";
|
|
|
|
const wasEdited = editHistory.some(
|
|
(edit) => {
|
|
const oldSnapshot = normalizeStoredAnswerSnapshot(edit.oldAnswers[q.id]);
|
|
return oldSnapshot.value !== rawAnswerValue || oldSnapshot.imageCdnId !== rawAnswer.imageCdnId;
|
|
}
|
|
);
|
|
|
|
const qAnswerHistory = editHistory.map((edit) => ({
|
|
editedAt: edit.editedAt,
|
|
answer: (() => {
|
|
const snapshot = normalizeStoredAnswerSnapshot(edit.oldAnswers[q.id]);
|
|
const text = formatStoredAnswer(snapshot.value, q.type);
|
|
return text || (snapshot.imageCdnId ? `/cdn/${snapshot.imageCdnId}` : "");
|
|
})(),
|
|
}));
|
|
|
|
return (
|
|
<ContextMenu key={q.id}>
|
|
<ContextMenuTrigger asChild>
|
|
<Card
|
|
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">
|
|
<div className="text-base font-semibold leading-normal">
|
|
<HtmlDisplay html={q.label} />
|
|
</div>
|
|
{wasEdited && (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" size="sm">View history</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Answer history</DialogTitle>
|
|
<DialogDescription>
|
|
Previous values for {stripHtml(q.label)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<ScrollArea className="max-h-72">
|
|
<div className="flex flex-col gap-3 pr-4">
|
|
{qAnswerHistory.map((entry, idx) => (
|
|
<div key={idx} className="flex flex-col gap-1 text-sm">
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(entry.editedAt).toLocaleString("en-GB", {
|
|
timeZone: "Asia/Bangkok",
|
|
hour12: false,
|
|
})}
|
|
</span>
|
|
<span className="whitespace-pre-wrap">
|
|
{entry.answer || "No response"}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
</div>
|
|
{q.imageUrl && (
|
|
<div className="relative w-24 h-24 overflow-hidden rounded-md border shrink-0">
|
|
<Image
|
|
src={q.imageUrl}
|
|
alt="Question image"
|
|
fill
|
|
unoptimized
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4">
|
|
{answerValue && (
|
|
<div className="flex items-start justify-between gap-4 p-3 bg-muted rounded-md group">
|
|
<div className="flex flex-col min-w-0">
|
|
{wasEdited && (
|
|
<span className="text-xs font-semibold text-muted-foreground mb-1">
|
|
Current Answer:
|
|
</span>
|
|
)}
|
|
<span className="text-sm whitespace-pre-wrap break-all leading-relaxed">
|
|
{answerValue}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100"
|
|
onClick={() => handleCopy(answerValue, q.id)}
|
|
aria-label={`Copy answer for ${stripHtml(q.label)}`}
|
|
>
|
|
{copiedId === q.id ? (
|
|
<Check />
|
|
) : (
|
|
<Copy />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{imageUrl && (
|
|
<AnswerImagePreview src={imageUrl} label={stripHtml(q.label)} />
|
|
)}
|
|
{!answerValue && !imageUrl && (
|
|
<span className="text-sm text-muted-foreground italic pl-3 border-l-2 border-muted block">
|
|
No response provided
|
|
</span>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</ContextMenuTrigger>
|
|
{wasEdited && (
|
|
<ContextMenuContent className="w-72 max-w-sm">
|
|
<ContextMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
History
|
|
</ContextMenuLabel>
|
|
<ContextMenuLabel className="text-sm font-medium text-foreground truncate pb-2">
|
|
{stripHtml(q.label)}
|
|
</ContextMenuLabel>
|
|
|
|
<ContextMenuSeparator />
|
|
<ContextMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mt-1">
|
|
Previous Answers:
|
|
</ContextMenuLabel>
|
|
|
|
{qAnswerHistory.length === 0 ? (
|
|
<ContextMenuItem disabled className="text-xs text-muted-foreground italic">
|
|
No edit history for this question.
|
|
</ContextMenuItem>
|
|
) : (
|
|
<ScrollArea className="h-72">
|
|
<ContextMenuGroup>
|
|
{qAnswerHistory.map((entry, idx) => (
|
|
<ContextMenuItem
|
|
key={idx}
|
|
className="flex flex-col items-start gap-1 p-2 focus:bg-transparent cursor-default"
|
|
>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Clock className="w-3 h-3 shrink-0" />
|
|
<span>{new Date(entry.editedAt).toLocaleString("en-GB", { timeZone: "Asia/Bangkok", hour12: false })}</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>
|
|
</ContextMenuItem>
|
|
))}
|
|
</ContextMenuGroup>
|
|
</ScrollArea>
|
|
)}
|
|
</ContextMenuContent>
|
|
)}
|
|
</ContextMenu>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SaveStatusIndicator({
|
|
status,
|
|
error,
|
|
onRetry,
|
|
}: {
|
|
status: AutoSaveStatus;
|
|
error: string | null;
|
|
onRetry: () => Promise<void>;
|
|
}) {
|
|
if (status === "clean") return null;
|
|
|
|
return (
|
|
<span
|
|
className="flex items-center gap-1.5 text-xs text-muted-foreground"
|
|
aria-live="polite"
|
|
>
|
|
{status === "dirty" && "Unsaved"}
|
|
{status === "saving" && (
|
|
<>
|
|
<Loader2 className="animate-spin" />
|
|
Saving
|
|
</>
|
|
)}
|
|
{status === "saved" && (
|
|
<>
|
|
<Check />
|
|
Saved
|
|
</>
|
|
)}
|
|
{status === "error" && (
|
|
<>
|
|
<AlertCircle />
|
|
<span>{error || "Could not save the note."}</span>
|
|
<Button
|
|
type="button"
|
|
variant="link"
|
|
size="sm"
|
|
className="h-auto px-1"
|
|
onClick={() => void onRetry().catch(() => undefined)}
|
|
>
|
|
Retry
|
|
</Button>
|
|
</>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function AnswerImagePreview({ src, label }: { src: string; label: string }) {
|
|
const [unavailable, setUnavailable] = useState(false);
|
|
|
|
if (unavailable) {
|
|
return (
|
|
<span className="text-sm text-muted-foreground italic">
|
|
Image unavailable
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="h-auto w-fit p-2"
|
|
aria-label={`Open image answer for ${label}`}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt=""
|
|
width={224}
|
|
height={160}
|
|
unoptimized
|
|
className="max-h-40 max-w-56 rounded object-contain"
|
|
onError={() => setUnavailable(true)}
|
|
/>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-4xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Image answer</DialogTitle>
|
|
<DialogDescription>{label}</DialogDescription>
|
|
</DialogHeader>
|
|
<Image
|
|
src={src}
|
|
alt=""
|
|
width={1200}
|
|
height={800}
|
|
unoptimized
|
|
className="max-h-[70vh] w-full rounded-md object-contain"
|
|
onError={() => setUnavailable(true)}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|