Improve admin form workspace UX
This commit is contained in:
@@ -14,6 +14,14 @@ import {
|
||||
} from "@/components/ui/context-menu";
|
||||
import { Copy, Check, Users, Calendar, Clock } 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";
|
||||
@@ -77,14 +85,14 @@ export default function SubmissionDetailClient({
|
||||
<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-US", { timeZone: "Asia/Bangkok", hour12: false })}</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-US", { timeZone: "Asia/Bangkok", hour12: false })}</li>
|
||||
<li key={idx}>Edited at {new Date(edit.editedAt).toLocaleString("en-GB", { timeZone: "Asia/Bangkok", hour12: false })}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -119,9 +127,36 @@ export default function SubmissionDetailClient({
|
||||
<HtmlDisplay html={q.label} />
|
||||
</div>
|
||||
{wasEdited && (
|
||||
<p className="text-xs text-muted-foreground italic flex items-center gap-1">
|
||||
edited
|
||||
</p>
|
||||
<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 && (
|
||||
@@ -152,13 +187,14 @@ export default function SubmissionDetailClient({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
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 className="w-4 h-4 text-green-500" />
|
||||
<Check />
|
||||
) : (
|
||||
<Copy className="w-4 h-4 text-muted-foreground" />
|
||||
<Copy />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -198,7 +234,7 @@ export default function SubmissionDetailClient({
|
||||
>
|
||||
<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-US", { timeZone: "Asia/Bangkok", hour12: false })}</span>
|
||||
<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>}
|
||||
|
||||
@@ -12,13 +12,26 @@ interface SubmissionDetailPageProps {
|
||||
id: string;
|
||||
submissionId: string;
|
||||
}>;
|
||||
searchParams: Promise<{ return?: string | string[] }>;
|
||||
}
|
||||
|
||||
export default async function SubmissionDetailPage({ params }: SubmissionDetailPageProps) {
|
||||
const { id: formId, submissionId } = await params;
|
||||
export default async function SubmissionDetailPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: SubmissionDetailPageProps) {
|
||||
const [{ id: formId, submissionId }, query] = await Promise.all([
|
||||
params,
|
||||
searchParams,
|
||||
]);
|
||||
const returnValue = Array.isArray(query.return) ? query.return[0] : query.return;
|
||||
const returnQuery = returnValue?.slice(0, 1000) || "";
|
||||
const backHref = `/admin/form/${formId}/result${returnQuery ? `?${returnQuery}` : ""}`;
|
||||
const detailHref = (id: string) =>
|
||||
`/admin/form/${formId}/result/${id}${returnQuery ? `?return=${encodeURIComponent(returnQuery)}` : ""}`;
|
||||
|
||||
const submission = await db.query.submissions.findFirst({
|
||||
where: (s, { eq }) => eq(s.id, submissionId),
|
||||
where: (s, { eq, and }) =>
|
||||
and(eq(s.id, submissionId), eq(s.formId, formId)),
|
||||
});
|
||||
|
||||
if (!submission) {
|
||||
@@ -50,28 +63,14 @@ export default async function SubmissionDetailPage({ params }: SubmissionDetailP
|
||||
return (
|
||||
<div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-10">
|
||||
<RealtimeRefresh topic="submissions" formId={formId} />
|
||||
<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>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<Button variant="ghost" asChild className="self-start">
|
||||
<Link href={backHref}>
|
||||
<ArrowLeft data-icon="inline-start" />
|
||||
Back to responses
|
||||
</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>
|
||||
</Button>
|
||||
<DeleteSubmissionButton id={submission.id} redirectUrl={backHref} />
|
||||
</div>
|
||||
|
||||
<SubmissionDetailClient
|
||||
@@ -82,18 +81,18 @@ export default async function SubmissionDetailPage({ params }: SubmissionDetailP
|
||||
|
||||
<div className="flex justify-between items-center mt-8 pt-6 border-t">
|
||||
{prevId ? (
|
||||
<Link href={`/admin/form/${formId}/result/${prevId}`}>
|
||||
<Link href={detailHref(prevId)}>
|
||||
<Button variant="outline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Previous
|
||||
<ArrowLeft data-icon="inline-start" /> Previous
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
{nextId && (
|
||||
<Link href={`/admin/form/${formId}/result/${nextId}`}>
|
||||
<Link href={detailHref(nextId)}>
|
||||
<Button variant="outline">
|
||||
Next <ArrowRight className="w-4 h-4 ml-2" />
|
||||
Next <ArrowRight data-icon="inline-end" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { db } from "@/db";
|
||||
import { answers } from "@/db/schema";
|
||||
import { inArray } from "drizzle-orm";
|
||||
import { requireAdmin } from "@/lib/auth";
|
||||
import {
|
||||
getFilteredSubmissions,
|
||||
parseResultFilters,
|
||||
} from "@/lib/admin-form-results";
|
||||
import { formatStoredAnswer } from "@/lib/form-answer-values";
|
||||
import { stripHtml } from "@/lib/utils";
|
||||
|
||||
function csvCell(value: unknown) {
|
||||
const text = String(value ?? "");
|
||||
return `"${text.replaceAll('"', '""')}"`;
|
||||
}
|
||||
|
||||
function safeFilename(value: string) {
|
||||
return (
|
||||
value
|
||||
.normalize("NFKD")
|
||||
.replace(/[^\p{L}\p{N}]+/gu, "-")
|
||||
.replace(/^-|-$/g, "")
|
||||
.slice(0, 60) || "form"
|
||||
);
|
||||
}
|
||||
|
||||
export async function GET(
|
||||
request: Request,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
await requireAdmin();
|
||||
const { id } = await params;
|
||||
const form = await db.query.forms.findFirst({
|
||||
where: (record, { eq }) => eq(record.id, id),
|
||||
});
|
||||
if (!form) {
|
||||
return NextResponse.json({ error: "Form not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
const url = new URL(request.url);
|
||||
const filters = parseResultFilters(
|
||||
Object.fromEntries(url.searchParams.entries())
|
||||
);
|
||||
const [{ rows }, questions] = await Promise.all([
|
||||
getFilteredSubmissions(id, filters, { paginate: false }),
|
||||
db.query.questions.findMany({
|
||||
where: (question, { eq }) => eq(question.formId, id),
|
||||
orderBy: (question, { asc }) => [asc(question.displayOrder)],
|
||||
}),
|
||||
]);
|
||||
const answerRows =
|
||||
rows.length === 0
|
||||
? []
|
||||
: await db
|
||||
.select()
|
||||
.from(answers)
|
||||
.where(inArray(answers.submissionId, rows.map((row) => row.id)));
|
||||
const answerMap = new Map(
|
||||
answerRows.map((answer) => [
|
||||
`${answer.submissionId}:${answer.questionId}`,
|
||||
answer.value,
|
||||
])
|
||||
);
|
||||
const header = [
|
||||
"Respondent",
|
||||
"Discord ID",
|
||||
"Submitted at (Asia/Bangkok)",
|
||||
"Edit count",
|
||||
...questions.map((question) => stripHtml(question.label)),
|
||||
];
|
||||
const lines = [
|
||||
header.map(csvCell).join(","),
|
||||
...rows.map((submission) =>
|
||||
[
|
||||
submission.userName || "Anonymous",
|
||||
submission.userDiscordId || "",
|
||||
submission.submittedAt.toLocaleString("en-GB", {
|
||||
timeZone: "Asia/Bangkok",
|
||||
hour12: false,
|
||||
}),
|
||||
Array.isArray(submission.editHistory)
|
||||
? submission.editHistory.length
|
||||
: 0,
|
||||
...questions.map((question) =>
|
||||
formatStoredAnswer(
|
||||
answerMap.get(`${submission.id}:${question.id}`) || "",
|
||||
question.type
|
||||
)
|
||||
),
|
||||
]
|
||||
.map(csvCell)
|
||||
.join(",")
|
||||
),
|
||||
];
|
||||
const date = new Date().toISOString().slice(0, 10);
|
||||
|
||||
return new NextResponse(`\uFEFF${lines.join("\r\n")}`, {
|
||||
headers: {
|
||||
"Content-Type": "text/csv; charset=utf-8",
|
||||
"Content-Disposition": `attachment; filename="${safeFilename(form.title)}-responses-${date}.csv"`,
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -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