Improve admin form workspace UX
This commit is contained in:
@@ -1,103 +1,194 @@
|
||||
import { db } from "@/db";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { Users, ArrowLeft } from "lucide-react";
|
||||
import { DeleteSubmissionButton, DeleteAllSubmissionsButton } from "@/components/delete-buttons";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import {
|
||||
getFilteredSubmissions,
|
||||
parseResultFilters,
|
||||
resultFiltersToSearchParams,
|
||||
RESULTS_PAGE_SIZE,
|
||||
} from "@/lib/admin-form-results";
|
||||
import { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
|
||||
import { ResultsFilters } from "@/components/results-filters";
|
||||
import { RealtimeRefresh } from "@/components/realtime-refresh";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function ResultsListPage(
|
||||
props: {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
) {
|
||||
const params = await props.params;
|
||||
const submissionsList = await db.query.submissions.findMany({
|
||||
where: (s, { eq }) => eq(s.formId, params.id),
|
||||
orderBy: (s, { desc }) => [desc(s.submittedAt)],
|
||||
function formatDate(date: Date) {
|
||||
return date.toLocaleString("en-GB", {
|
||||
timeZone: "Asia/Bangkok",
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
export default async function ResultsListPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
searchParams: Promise<Record<string, string | string[] | undefined>>;
|
||||
}) {
|
||||
const [{ id }, rawFilters] = await Promise.all([params, searchParams]);
|
||||
const filters = parseResultFilters(rawFilters);
|
||||
const { rows, total } = await getFilteredSubmissions(id, filters);
|
||||
const pageCount = Math.max(1, Math.ceil(total / RESULTS_PAGE_SIZE));
|
||||
if (total > 0 && filters.page > pageCount) {
|
||||
redirect(`?${resultFiltersToSearchParams(filters, { page: pageCount })}`);
|
||||
}
|
||||
const currentPage = Math.min(filters.page, pageCount);
|
||||
const listQuery = resultFiltersToSearchParams(filters);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6">
|
||||
<RealtimeRefresh topic="submissions" formId={params.id} />
|
||||
<div>
|
||||
<Button variant="ghost" asChild className="mb-4">
|
||||
<Link href={`/admin/form/${params.id}`}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Form Editor
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
|
||||
<RealtimeRefresh topic="submissions" formId={id} />
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Form Submissions</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Review all submissions and individual user answers.
|
||||
<h2 className="text-2xl font-semibold">Responses</h2>
|
||||
<p className="text-muted-foreground">
|
||||
{total} matching {total === 1 ? "response" : "responses"}
|
||||
</p>
|
||||
</div>
|
||||
{submissionsList.length > 0 && <DeleteAllSubmissionsButton formId={params.id} />}
|
||||
{total > 0 && <DeleteAllSubmissionsButton formId={id} />}
|
||||
</div>
|
||||
|
||||
{submissionsList.length === 0 ? (
|
||||
<Card className="border-dashed border-2 py-12 text-center">
|
||||
<ResultsFilters formId={id} filters={filters} />
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>No submissions yet</CardTitle>
|
||||
<CardTitle>No responses found</CardTitle>
|
||||
<CardDescription>
|
||||
When users fill out your form, their responses will appear here.
|
||||
{total === 0 && !listQuery
|
||||
? "Responses will appear here after people submit the form."
|
||||
: "Try changing or clearing the current filters."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Submissions</CardTitle>
|
||||
<CardDescription>
|
||||
Total {submissionsList.length} responses collected. Click on a submission to inspect individual answers.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>User (Discord)</TableHead>
|
||||
<TableHead>Submitted At</TableHead>
|
||||
<TableHead className="text-right">Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{submissionsList.map((sub) => {
|
||||
const userLabel = sub.userName
|
||||
? `${sub.userName} (${sub.userDiscordId || "N/A"})`
|
||||
: sub.userDiscordId || "Anonymous";
|
||||
<>
|
||||
<Card className="hidden md:block">
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Respondent</TableHead>
|
||||
<TableHead>Submitted</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.map((submission) => {
|
||||
const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
|
||||
const edited =
|
||||
Array.isArray(submission.editHistory) &&
|
||||
submission.editHistory.length > 0;
|
||||
return (
|
||||
<TableRow key={submission.id}>
|
||||
<TableCell>
|
||||
<Link href={detailHref} className="font-medium hover:underline">
|
||||
{submission.userName ||
|
||||
submission.userDiscordId ||
|
||||
"Anonymous"}
|
||||
</Link>
|
||||
{submission.userName && submission.userDiscordId && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{submission.userDiscordId}
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(submission.submittedAt)}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={edited ? "secondary" : "outline"}>
|
||||
{edited ? "Edited" : "Original"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<DeleteSubmissionButton id={submission.id} compact />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
return (
|
||||
<TableRow key={sub.id} className="cursor-pointer group">
|
||||
<TableCell className="p-0">
|
||||
<Link href={`/admin/form/${params.id}/result/${sub.id}`} className="flex items-center gap-2 p-4 w-full h-full font-medium">
|
||||
<Users className="w-4 h-4 text-muted-foreground" />
|
||||
<span>{userLabel}</span>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="p-0 text-muted-foreground">
|
||||
<Link href={`/admin/form/${params.id}/result/${sub.id}`} className="flex items-center p-4 w-full h-full">
|
||||
{new Date(sub.submittedAt).toLocaleString("en-US", { timeZone: "Asia/Bangkok", hour12: false })}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="text-right p-4">
|
||||
<div className="flex justify-end gap-2">
|
||||
<DeleteSubmissionButton id={sub.id} />
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex flex-col gap-3 md:hidden">
|
||||
{rows.map((submission) => {
|
||||
const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
|
||||
return (
|
||||
<Card key={submission.id}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">
|
||||
<Link href={detailHref}>
|
||||
{submission.userName ||
|
||||
submission.userDiscordId ||
|
||||
"Anonymous"}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{formatDate(submission.submittedAt)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-end">
|
||||
<DeleteSubmissionButton id={submission.id} compact />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{pageCount > 1 && (
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href={`?${resultFiltersToSearchParams(filters, {
|
||||
page: Math.max(1, currentPage - 1),
|
||||
})}`}
|
||||
aria-disabled={currentPage === 1}
|
||||
/>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href={`?${listQuery}`} isActive size="default">
|
||||
{currentPage} / {pageCount}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href={`?${resultFiltersToSearchParams(filters, {
|
||||
page: Math.min(pageCount, currentPage + 1),
|
||||
})}`}
|
||||
aria-disabled={currentPage === pageCount}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user