refactor: migrate administrative form management to a centralized modular routing structure
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
"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 {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuItem,
|
||||
ContextMenuGroup
|
||||
} from "@/components/ui/context-menu";
|
||||
import { Copy, Check, Users, Calendar, Clock } from "lucide-react";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import Image from 'next/image';
|
||||
import { stripHtml } from "@/lib/utils";
|
||||
import { HtmlDisplay } from "@/components/html-display";
|
||||
|
||||
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>;
|
||||
}
|
||||
|
||||
export default function SubmissionDetailClient({
|
||||
submission,
|
||||
questions,
|
||||
answers,
|
||||
}: SubmissionDetailClientProps) {
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
|
||||
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 : [];
|
||||
|
||||
|
||||
|
||||
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(undefined, { 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(undefined, { hour12: false })}</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
|
||||
);
|
||||
|
||||
const qAnswerHistory = editHistory.map((edit) => ({
|
||||
editedAt: edit.editedAt,
|
||||
answer: edit.oldAnswers[q.id] ?? "",
|
||||
}));
|
||||
|
||||
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 && (
|
||||
<p className="text-xs text-muted-foreground italic flex items-center gap-1">
|
||||
edited
|
||||
</p>
|
||||
)}
|
||||
</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="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>
|
||||
</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()}</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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { db } from "@/db";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import SubmissionDetailClient from "./client";
|
||||
import { DeleteSubmissionButton } from "@/components/delete-buttons";
|
||||
|
||||
interface SubmissionDetailPageProps {
|
||||
params: Promise<{
|
||||
id: string;
|
||||
submissionId: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default async function SubmissionDetailPage({ params }: SubmissionDetailPageProps) {
|
||||
const { id: formId, submissionId } = await params;
|
||||
|
||||
const submission = await db.query.submissions.findFirst({
|
||||
where: (s, { eq }) => eq(s.id, submissionId),
|
||||
});
|
||||
|
||||
if (!submission) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const questions = await db.query.questions.findMany({
|
||||
where: (q, { eq }) => eq(q.formId, submission.formId),
|
||||
orderBy: (q, { asc }) => [asc(q.displayOrder)],
|
||||
});
|
||||
|
||||
const answersList = await db.query.answers.findMany({
|
||||
where: (a, { eq }) => eq(a.submissionId, submission.id),
|
||||
});
|
||||
|
||||
const answersMap: Record<string, string> = {};
|
||||
for (const ans of answersList) {
|
||||
answersMap[ans.questionId] = ans.value;
|
||||
}
|
||||
const submissionsList = await db.query.submissions.findMany({
|
||||
where: (s, { eq }) => eq(s.formId, formId),
|
||||
orderBy: (s, { desc }) => [desc(s.submittedAt)],
|
||||
});
|
||||
|
||||
const currentIndex = submissionsList.findIndex((s) => s.id === submissionId);
|
||||
const prevId = currentIndex > 0 ? submissionsList[currentIndex - 1].id : null;
|
||||
const nextId = currentIndex >= 0 && currentIndex < submissionsList.length - 1 ? submissionsList[currentIndex + 1].id : null;
|
||||
|
||||
return (
|
||||
<div className="space-y-6 w-full max-w-4xl mx-auto p-4 md:p-6 pb-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link href={`/admin/form/${formId}/result`}>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Response Detail</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{prevId && (
|
||||
<Link href={`/admin/form/${formId}/result/${prevId}`}>
|
||||
<Button variant="outline" size="sm">Previous</Button>
|
||||
</Link>
|
||||
)}
|
||||
{nextId && (
|
||||
<Link href={`/admin/form/${formId}/result/${nextId}`}>
|
||||
<Button variant="outline" size="sm">Next</Button>
|
||||
</Link>
|
||||
)}
|
||||
<DeleteSubmissionButton id={submission.id} redirectUrl={`/admin/form/${formId}/result`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SubmissionDetailClient
|
||||
submission={submission}
|
||||
questions={questions}
|
||||
answers={answersMap}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center mt-8 pt-6 border-t">
|
||||
{prevId ? (
|
||||
<Link href={`/admin/form/${formId}/result/${prevId}`}>
|
||||
<Button variant="outline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Previous
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
{nextId && (
|
||||
<Link href={`/admin/form/${formId}/result/${nextId}`}>
|
||||
<Button variant="outline">
|
||||
Next <ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user