chore: update nextjs and filter render on client side
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Kbd } from "@/components/ui/kbd";
|
||||
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 { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
|
||||
import { ResultsFilters } from "@/components/results-filters";
|
||||
import type { DiscordMemberProfile } from "@/lib/discord";
|
||||
|
||||
const RESULTS_PAGE_SIZE = 25;
|
||||
type ResultFilters = {
|
||||
q: string;
|
||||
page: number;
|
||||
sort: "submittedAt" | "respondent";
|
||||
direction: "asc" | "desc";
|
||||
edited: "all" | "edited" | "unedited";
|
||||
dateFrom: string;
|
||||
dateTo: string;
|
||||
};
|
||||
|
||||
function resultFiltersToSearchParams(filters: ResultFilters) {
|
||||
const params = new URLSearchParams();
|
||||
if (filters.q) params.set("q", filters.q);
|
||||
if (filters.page > 1) params.set("page", String(filters.page));
|
||||
if (filters.sort !== "submittedAt") params.set("sort", filters.sort);
|
||||
if (filters.direction !== "desc") params.set("direction", filters.direction);
|
||||
if (filters.edited !== "all") params.set("edited", filters.edited);
|
||||
if (filters.dateFrom) params.set("dateFrom", filters.dateFrom);
|
||||
if (filters.dateTo) params.set("dateTo", filters.dateTo);
|
||||
return params.toString();
|
||||
}
|
||||
|
||||
type ResultRow = {
|
||||
id: string;
|
||||
userName: string | null;
|
||||
userDiscordId: string | null;
|
||||
submittedAt: string;
|
||||
adminNote: string | null;
|
||||
editHistory: unknown[];
|
||||
};
|
||||
|
||||
function formatDate(value: string) {
|
||||
return new Date(value).toLocaleString("en-GB", {
|
||||
timeZone: "Asia/Bangkok",
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
function bangkokDate(value: string) {
|
||||
const parts = new Intl.DateTimeFormat("en-CA", {
|
||||
timeZone: "Asia/Bangkok",
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
}).formatToParts(new Date(value));
|
||||
const values = Object.fromEntries(parts.map((part) => [part.type, part.value]));
|
||||
return `${values.year}-${values.month}-${values.day}`;
|
||||
}
|
||||
|
||||
function RespondentName({
|
||||
row,
|
||||
profile,
|
||||
}: {
|
||||
row: ResultRow;
|
||||
profile: DiscordMemberProfile | null;
|
||||
}) {
|
||||
const displayName = profile?.globalName || profile?.username || row.userName || row.userDiscordId || "Anonymous";
|
||||
const username = profile?.username || row.userName;
|
||||
return (
|
||||
<span className="inline-flex flex-wrap items-center gap-1.5">
|
||||
<span>{displayName}</span>
|
||||
{username && username !== displayName && <Kbd>({username})</Kbd>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ResultsClient({
|
||||
formId,
|
||||
initialFilters,
|
||||
rows,
|
||||
profiles,
|
||||
}: {
|
||||
formId: string;
|
||||
initialFilters: ResultFilters;
|
||||
rows: ResultRow[];
|
||||
profiles: Record<string, DiscordMemberProfile | null>;
|
||||
}) {
|
||||
const [filters, setFilters] = useState(initialFilters);
|
||||
const [page, setPage] = useState(initialFilters.page);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
const query = filters.q.toLocaleLowerCase();
|
||||
return rows
|
||||
.filter((row) => {
|
||||
const matchesQuery = !query || `${row.userName ?? ""} ${row.userDiscordId ?? ""}`.toLocaleLowerCase().includes(query);
|
||||
const edited = row.editHistory.length > 0;
|
||||
const matchesEdited = filters.edited === "all" || (filters.edited === "edited" ? edited : !edited);
|
||||
const date = bangkokDate(row.submittedAt);
|
||||
return matchesQuery && matchesEdited && (!filters.dateFrom || date >= filters.dateFrom) && (!filters.dateTo || date <= filters.dateTo);
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (filters.sort === "respondent") {
|
||||
const result = (a.userName || a.userDiscordId || "").localeCompare(b.userName || b.userDiscordId || "");
|
||||
return filters.direction === "asc" ? result : -result;
|
||||
}
|
||||
const result = new Date(a.submittedAt).getTime() - new Date(b.submittedAt).getTime();
|
||||
return filters.direction === "asc" ? result : -result;
|
||||
});
|
||||
}, [filters, rows]);
|
||||
|
||||
const pageCount = Math.max(1, Math.ceil(filteredRows.length / RESULTS_PAGE_SIZE));
|
||||
const currentPage = Math.min(page, pageCount);
|
||||
const visibleRows = filteredRows.slice((currentPage - 1) * RESULTS_PAGE_SIZE, currentPage * RESULTS_PAGE_SIZE);
|
||||
const updateFilters = (next: ResultFilters) => {
|
||||
const normalized = { ...next, page: 1 };
|
||||
setFilters(normalized);
|
||||
setPage(1);
|
||||
const query = resultFiltersToSearchParams(normalized);
|
||||
window.history.replaceState(null, "", `/admin/form/${formId}/result${query ? `?${query}` : ""}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold">Responses</h2>
|
||||
<p className="text-muted-foreground">{filteredRows.length} matching {filteredRows.length === 1 ? "response" : "responses"}</p>
|
||||
</div>
|
||||
{rows.length > 0 && <DeleteAllSubmissionsButton formId={formId} />}
|
||||
</div>
|
||||
<ResultsFilters formId={formId} filters={filters} onFiltersChange={updateFilters} />
|
||||
{visibleRows.length === 0 ? (
|
||||
<Card><CardHeader><CardTitle>No responses found</CardTitle><CardDescription>Try changing or clearing the current filters.</CardDescription></CardHeader></Card>
|
||||
) : (
|
||||
<>
|
||||
<Card className="hidden md:block"><CardContent className="p-0"><Table><TableHeader><TableRow><TableHead>Respondent</TableHead><TableHead>Submitted</TableHead><TableHead>Note</TableHead><TableHead className="text-right">Actions</TableHead></TableRow></TableHeader><TableBody>
|
||||
{visibleRows.map((row) => <TableRow key={row.id} className="relative cursor-pointer"><TableCell><Link href={`/admin/form/${formId}/result/${row.id}`} className="font-medium after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"><RespondentName row={row} profile={row.userDiscordId ? profiles[row.userDiscordId] ?? null : null} /></Link>{row.userName && row.userDiscordId && <p className="text-xs text-muted-foreground">{row.userDiscordId}</p>}</TableCell><TableCell>{formatDate(row.submittedAt)}</TableCell><TableCell className="max-w-80">{row.adminNote ? <p className="line-clamp-2 whitespace-pre-wrap text-sm">{row.adminNote}</p> : <span className="text-sm italic text-muted-foreground">No note</span>}</TableCell><TableCell className="relative z-10 text-right"><DeleteSubmissionButton id={row.id} compact /></TableCell></TableRow>)}
|
||||
</TableBody></Table></CardContent></Card>
|
||||
<div className="flex flex-col gap-3 md:hidden">{visibleRows.map((row) => <Card key={row.id} className="relative transition-colors hover:bg-muted/50"><CardHeader><CardTitle className="text-base"><Link href={`/admin/form/${formId}/result/${row.id}`} className="after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"><RespondentName row={row} profile={row.userDiscordId ? profiles[row.userDiscordId] ?? null : null} /></Link></CardTitle><CardDescription>{formatDate(row.submittedAt)}</CardDescription></CardHeader><CardContent className="flex items-start justify-between gap-4"><div className="min-w-0"><p className="text-xs font-medium text-muted-foreground">Note</p>{row.adminNote ? <p className="line-clamp-3 whitespace-pre-wrap text-sm">{row.adminNote}</p> : <p className="text-sm italic text-muted-foreground">No note</p>}</div><div className="relative z-10"><DeleteSubmissionButton id={row.id} compact /></div></CardContent></Card>)}</div>
|
||||
</>
|
||||
)}
|
||||
{pageCount > 1 && <Pagination><PaginationContent><PaginationItem><PaginationPrevious href="#" onClick={(event) => { event.preventDefault(); setPage(Math.max(1, currentPage - 1)); }} aria-disabled={currentPage === 1} /></PaginationItem><PaginationItem><PaginationLink href="#" isActive onClick={(event) => event.preventDefault()}>{currentPage} / {pageCount}</PaginationLink></PaginationItem><PaginationItem><PaginationNext href="#" onClick={(event) => { event.preventDefault(); setPage(Math.min(pageCount, currentPage + 1)); }} aria-disabled={currentPage === pageCount} /></PaginationItem></PaginationContent></Pagination>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,79 +1,10 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Kbd } from "@/components/ui/kbd";
|
||||
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 { parseResultFilters, getFilteredSubmissions } from "@/lib/admin-form-results";
|
||||
import { getDiscordMemberProfile } from "@/lib/discord";
|
||||
import { RealtimeRefresh } from "@/components/realtime-refresh";
|
||||
import {
|
||||
getDiscordMemberProfile,
|
||||
type DiscordMemberProfile,
|
||||
} from "@/lib/discord";
|
||||
import ResultsClient from "./client";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
function formatDate(date: Date) {
|
||||
return date.toLocaleString("en-GB", {
|
||||
timeZone: "Asia/Bangkok",
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
function RespondentName({
|
||||
submission,
|
||||
profile,
|
||||
}: {
|
||||
submission: {
|
||||
userName: string | null;
|
||||
userDiscordId: string | null;
|
||||
};
|
||||
profile: DiscordMemberProfile | null;
|
||||
}) {
|
||||
const displayName =
|
||||
profile?.globalName ||
|
||||
profile?.username ||
|
||||
submission.userName ||
|
||||
submission.userDiscordId ||
|
||||
"Anonymous";
|
||||
const username = profile?.username || submission.userName;
|
||||
|
||||
return (
|
||||
<span className="inline-flex flex-wrap items-center gap-1.5">
|
||||
<span>{displayName}</span>
|
||||
{username && username !== displayName && <Kbd>({username})</Kbd>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function ResultsListPage({
|
||||
params,
|
||||
searchParams,
|
||||
@@ -82,202 +13,42 @@ export default async function ResultsListPage({
|
||||
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);
|
||||
const initialFilters = parseResultFilters(rawFilters);
|
||||
const { rows } = await getFilteredSubmissions(id, parseResultFilters({}), {
|
||||
paginate: false,
|
||||
});
|
||||
const discordIds = [
|
||||
...new Set(
|
||||
rows
|
||||
.map((submission) => submission.userDiscordId)
|
||||
.filter((discordId): discordId is string => Boolean(discordId))
|
||||
.map((row) => row.userDiscordId)
|
||||
.filter((value): value is string => Boolean(value))
|
||||
),
|
||||
];
|
||||
const respondentProfiles = new Map(
|
||||
const profiles = Object.fromEntries(
|
||||
await Promise.all(
|
||||
discordIds.map(
|
||||
async (discordId) =>
|
||||
[discordId, await getDiscordMemberProfile(discordId)] as const
|
||||
)
|
||||
discordIds.map(async (discordId) => [
|
||||
discordId,
|
||||
await getDiscordMemberProfile(discordId),
|
||||
])
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<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>
|
||||
<h2 className="text-2xl font-semibold">Responses</h2>
|
||||
<p className="text-muted-foreground">
|
||||
{total} matching {total === 1 ? "response" : "responses"}
|
||||
</p>
|
||||
</div>
|
||||
{total > 0 && <DeleteAllSubmissionsButton formId={id} />}
|
||||
</div>
|
||||
|
||||
<ResultsFilters key={listQuery} formId={id} filters={filters} />
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>No responses found</CardTitle>
|
||||
<CardDescription>
|
||||
{total === 0 && !listQuery
|
||||
? "Responses will appear here after people submit the form."
|
||||
: "Try changing or clearing the current filters."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
<Card className="hidden md:block">
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Respondent</TableHead>
|
||||
<TableHead>Submitted</TableHead>
|
||||
<TableHead>Note</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)}` : ""}`;
|
||||
return (
|
||||
<TableRow key={submission.id} className="relative cursor-pointer">
|
||||
<TableCell>
|
||||
<Link
|
||||
href={detailHref}
|
||||
className="font-medium after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
|
||||
>
|
||||
<RespondentName
|
||||
submission={submission}
|
||||
profile={
|
||||
submission.userDiscordId
|
||||
? respondentProfiles.get(
|
||||
submission.userDiscordId
|
||||
) ?? null
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
{submission.userName && submission.userDiscordId && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{submission.userDiscordId}
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(submission.submittedAt)}</TableCell>
|
||||
<TableCell className="max-w-80">
|
||||
{submission.adminNote ? (
|
||||
<p className="line-clamp-2 whitespace-pre-wrap text-sm">
|
||||
{submission.adminNote}
|
||||
</p>
|
||||
) : (
|
||||
<span className="text-sm italic text-muted-foreground">
|
||||
No note
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="relative z-10 text-right">
|
||||
<DeleteSubmissionButton id={submission.id} compact />
|
||||
</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}
|
||||
className="relative transition-colors hover:bg-muted/50"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">
|
||||
<Link
|
||||
href={detailHref}
|
||||
className="after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
|
||||
>
|
||||
<RespondentName
|
||||
submission={submission}
|
||||
profile={
|
||||
submission.userDiscordId
|
||||
? respondentProfiles.get(
|
||||
submission.userDiscordId
|
||||
) ?? null
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{formatDate(submission.submittedAt)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
Note
|
||||
</p>
|
||||
{submission.adminNote ? (
|
||||
<p className="line-clamp-3 whitespace-pre-wrap text-sm">
|
||||
{submission.adminNote}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm italic text-muted-foreground">
|
||||
No note
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<DeleteSubmissionButton id={submission.id} compact />
|
||||
</div>
|
||||
</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>
|
||||
<ResultsClient
|
||||
formId={id}
|
||||
initialFilters={initialFilters}
|
||||
rows={rows.map((row) => ({
|
||||
id: row.id,
|
||||
userName: row.userName,
|
||||
userDiscordId: row.userDiscordId,
|
||||
submittedAt: row.submittedAt.toISOString(),
|
||||
adminNote: row.adminNote,
|
||||
editHistory: Array.isArray(row.editHistory) ? row.editHistory : [],
|
||||
}))}
|
||||
profiles={profiles}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"date-fns": "^4.4.0",
|
||||
"drizzle-orm": "^0.45.2",
|
||||
"lucide-react": "^1.23.0",
|
||||
"next": "^16.2.10",
|
||||
"next": "^16.2.12",
|
||||
"next-auth": "^4.24.14",
|
||||
"next-themes": "^0.4.6",
|
||||
"postgres": "^3.4.9",
|
||||
@@ -317,19 +317,19 @@
|
||||
|
||||
"@next/swc-darwin-arm64": ["@next/[email protected]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA=="],
|
||||
|
||||
"@next/swc-darwin-x64": ["@next/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ=="],
|
||||
"@next/swc-darwin-x64": ["@next/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-17ISGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQAAAAAAAA=="],
|
||||
|
||||
"@next/swc-linux-arm64-gnu": ["@next/[email protected]0", "", { "os": "linux", "cpu": "arm64" }, "sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg=="],
|
||||
"@next/swc-linux-arm64-gnu": ["@next/[email protected]2", "", { "os": "linux", "cpu": "arm64" }, "sha512-+YqU2h1cQkHsGfvjAsrSmst8UIFBibBGm5x3Xgel8NLMiDQtNOM4sM2GOEMvG5YiOBNeN/Ykk8cQC2S0Xrqljg=="],
|
||||
|
||||
"@next/swc-linux-arm64-musl": ["@next/[email protected]0", "", { "os": "linux", "cpu": "arm64" }, "sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A=="],
|
||||
"@next/swc-linux-arm64-musl": ["@next/[email protected]2", "", { "os": "linux", "cpu": "arm64" }, "sha512-0qjhiYBaKAqF63LA1ZWAAnKTzFUguAaZiRa5etMLGGPj/B6uEVjtIZldIzFEp3wHlB0koK6aTzqPtSdplTCjoA=="],
|
||||
|
||||
"@next/swc-linux-x64-gnu": ["@next/[email protected]0", "", { "os": "linux", "cpu": "x64" }, "sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA=="],
|
||||
"@next/swc-linux-x64-gnu": ["@next/[email protected]2", "", { "os": "linux", "cpu": "x64" }, "sha512-7A3q26W+h7gnA15uqBToNuDqBEFZZcqh0mW2mn4AJh/G5pdg2RVE3n4slzLEliASZFG3NmsbEzng/x2Sh09mBg=="],
|
||||
|
||||
"@next/swc-linux-x64-musl": ["@next/[email protected]0", "", { "os": "linux", "cpu": "x64" }, "sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw=="],
|
||||
"@next/swc-linux-x64-musl": ["@next/[email protected]2", "", { "os": "linux", "cpu": "x64" }, "sha512-qSjL/uppm+cbh21s72Ss8gkiOhQ4dExWHNGOWy6eZV7STj5WsKehgxT61beSsOj+YYQuTplL376lOCdMQU5T8w=="],
|
||||
|
||||
"@next/swc-win32-arm64-msvc": ["@next/[email protected]0", "", { "os": "win32", "cpu": "arm64" }, "sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA=="],
|
||||
"@next/swc-win32-arm64-msvc": ["@next/[email protected]2", "", { "os": "win32", "cpu": "arm64" }, "sha512-X6hzsOUJac/e7AWSbn9gQ9nzHld1xWP5iyjHpYWvud8pufB679O1xg4JDyKr8Xd69Jvd+kM2Der6uftiZCmjYA=="],
|
||||
|
||||
"@next/swc-win32-x64-msvc": ["@next/[email protected]0", "", { "os": "win32", "cpu": "x64" }, "sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A=="],
|
||||
"@next/swc-win32-x64-msvc": ["@next/[email protected]2", "", { "os": "win32", "cpu": "x64" }, "sha512-F6fakeHuFTLOPt0bslQJdf+xtT+WIP9DVn/m4y1w1mRnVPyh3D/cNvzlRkxM444xfm+IvvYNSOrKiA2CDJ0Uxw=="],
|
||||
|
||||
"@nodelib/fs.scandir": ["@nodelib/[email protected]", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
|
||||
|
||||
@@ -1223,7 +1223,7 @@
|
||||
|
||||
"negotiator": ["[email protected]", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
|
||||
|
||||
"next": ["[email protected]0", "", { "dependencies": { "@next/env": "16.2.10", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.10", "@next/swc-darwin-x64": "16.2.10", "@next/swc-linux-arm64-gnu": "16.2.10", "@next/swc-linux-arm64-musl": "16.2.10", "@next/swc-linux-x64-gnu": "16.2.10", "@next/swc-linux-x64-musl": "16.2.10", "@next/swc-win32-arm64-msvc": "16.2.10", "@next/swc-win32-x64-msvc": "16.2.10", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-2som5AVXb3kE6Yjine3/mNbBayYF58eguBWIVVUdr1y/L426xyVEgYxgBG+1QC34P2x5E+tcDup6XkuOAX3dCA=="],
|
||||
"next": ["[email protected]2", "", { "dependencies": { "@next/env": "16.2.12", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.12", "@next/swc-darwin-x64": "16.2.12", "@next/swc-linux-arm64-gnu": "16.2.12", "@next/swc-linux-arm64-musl": "16.2.12", "@next/swc-linux-x64-gnu": "16.2.12", "@next/swc-linux-x64-musl": "16.2.12", "@next/swc-win32-arm64-msvc": "16.2.12", "@next/swc-win32-x64-msvc": "16.2.12", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-iD59eYQWmbFcEbX7v/acG5DRym9iw1DdaPoD0WTA920naWsE25wShzJW4+UvAs8MK9EC2kBfIH6vtto1H1PHGw=="],
|
||||
|
||||
"next-auth": ["[email protected]", "", { "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", "cookie": "^0.7.0", "jose": "^4.15.5", "oauth": "^0.9.15", "openid-client": "^5.4.0", "preact": "^10.6.3", "preact-render-to-string": "^5.1.19", "uuid": "^8.3.2" }, "peerDependencies": { "@auth/core": "0.34.3", "next": "^12.2.5 || ^13 || ^14 || ^15 || ^16", "nodemailer": "^7.0.7", "react": "^17.0.2 || ^18 || ^19", "react-dom": "^17.0.2 || ^18 || ^19" }, "optionalPeers": ["@auth/core", "nodemailer"] }, "sha512-YRz6xFDXKUwiXSMMChbrBEWyFktZ1qZXEgeSHQQ3nsy08B4c/xLk6REeutRsIFwkjY/1+ShHnu07DN3JeJguig=="],
|
||||
|
||||
|
||||
@@ -72,14 +72,26 @@ function DateFilterPicker({
|
||||
export function ResultsFilters({
|
||||
formId,
|
||||
filters,
|
||||
onFiltersChange,
|
||||
}: {
|
||||
formId: string;
|
||||
filters: ResultFilters;
|
||||
onFiltersChange?: (filters: ResultFilters) => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [values, setValues] = useState(filters);
|
||||
const base = `/admin/form/${formId}/result`;
|
||||
|
||||
const updateValues = (
|
||||
update: (current: ResultFilters) => ResultFilters
|
||||
) => {
|
||||
setValues((current) => {
|
||||
const next = update(current);
|
||||
onFiltersChange?.(next);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const filterQuery = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (values.q) params.set("q", values.q);
|
||||
@@ -103,6 +115,7 @@ export function ResultsFilters({
|
||||
}, [filters]);
|
||||
|
||||
useEffect(() => {
|
||||
if (onFiltersChange) return;
|
||||
if (filterQuery === appliedQuery) return;
|
||||
|
||||
const timeout = window.setTimeout(() => {
|
||||
@@ -112,7 +125,7 @@ export function ResultsFilters({
|
||||
}, 350);
|
||||
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [appliedQuery, base, filterQuery, router]);
|
||||
}, [appliedQuery, base, filterQuery, onFiltersChange, router]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
@@ -120,7 +133,7 @@ export function ResultsFilters({
|
||||
<Input
|
||||
value={values.q}
|
||||
onChange={(event) =>
|
||||
setValues((current) => ({ ...current, q: event.target.value }))
|
||||
updateValues((current) => ({ ...current, q: event.target.value }))
|
||||
}
|
||||
placeholder="Search name or Discord ID"
|
||||
aria-label="Search responses"
|
||||
@@ -128,7 +141,7 @@ export function ResultsFilters({
|
||||
<Select
|
||||
value={values.edited}
|
||||
onValueChange={(edited: ResultFilters["edited"]) =>
|
||||
setValues((current) => ({ ...current, edited }))
|
||||
updateValues((current) => ({ ...current, edited }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full lg:w-40" aria-label="Edit status">
|
||||
@@ -149,7 +162,7 @@ export function ResultsFilters({
|
||||
ResultFilters["sort"],
|
||||
ResultFilters["direction"],
|
||||
];
|
||||
setValues((current) => ({ ...current, sort, direction }));
|
||||
updateValues((current) => ({ ...current, sort, direction }));
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full lg:w-44" aria-label="Sort responses">
|
||||
@@ -168,14 +181,14 @@ export function ResultsFilters({
|
||||
label="From date"
|
||||
value={values.dateFrom}
|
||||
onChange={(dateFrom) =>
|
||||
setValues((current) => ({ ...current, dateFrom }))
|
||||
updateValues((current) => ({ ...current, dateFrom }))
|
||||
}
|
||||
/>
|
||||
<DateFilterPicker
|
||||
label="Through date"
|
||||
value={values.dateTo}
|
||||
onChange={(dateTo) =>
|
||||
setValues((current) => ({ ...current, dateTo }))
|
||||
updateValues((current) => ({ ...current, dateTo }))
|
||||
}
|
||||
/>
|
||||
<Button variant="outline" asChild>
|
||||
@@ -189,11 +202,32 @@ export function ResultsFilters({
|
||||
filters.edited !== "all" ||
|
||||
filters.dateFrom ||
|
||||
filters.dateTo) && (
|
||||
<Button variant="ghost" size="sm" className="self-start" asChild>
|
||||
<a href={base}>
|
||||
<X data-icon="inline-start" />
|
||||
Clear filters
|
||||
</a>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="self-start"
|
||||
asChild={!onFiltersChange}
|
||||
onClick={onFiltersChange ? () => updateValues(() => ({
|
||||
q: "",
|
||||
page: 1,
|
||||
sort: "submittedAt",
|
||||
direction: "desc",
|
||||
edited: "all",
|
||||
dateFrom: "",
|
||||
dateTo: "",
|
||||
})) : undefined}
|
||||
>
|
||||
{onFiltersChange ? (
|
||||
<span>
|
||||
<X data-icon="inline-start" />
|
||||
Clear filters
|
||||
</span>
|
||||
) : (
|
||||
<a href={base}>
|
||||
<X data-icon="inline-start" />
|
||||
Clear filters
|
||||
</a>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -43,14 +43,9 @@ export function parseResultFilters(
|
||||
page: Number.isFinite(page) && page > 0 ? page : 1,
|
||||
sort: sort === "respondent" ? "respondent" : "submittedAt",
|
||||
direction: direction === "asc" ? "asc" : "desc",
|
||||
edited:
|
||||
edited === "edited" || edited === "unedited" ? edited : "all",
|
||||
dateFrom: /^\d{4}-\d{2}-\d{2}$/.test(value("dateFrom"))
|
||||
? value("dateFrom")
|
||||
: "",
|
||||
dateTo: /^\d{4}-\d{2}-\d{2}$/.test(value("dateTo"))
|
||||
? value("dateTo")
|
||||
: "",
|
||||
edited: edited === "edited" || edited === "unedited" ? edited : "all",
|
||||
dateFrom: /^\d{4}-\d{2}-\d{2}$/.test(value("dateFrom")) ? value("dateFrom") : "",
|
||||
dateTo: /^\d{4}-\d{2}-\d{2}$/.test(value("dateTo")) ? value("dateTo") : "",
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -38,7 +38,7 @@
|
||||
"date-fns": "^4.4.0",
|
||||
"drizzle-orm": "^0.45.2",
|
||||
"lucide-react": "^1.23.0",
|
||||
"next": "^16.2.10",
|
||||
"next": "^16.2.12",
|
||||
"next-auth": "^4.24.14",
|
||||
"next-themes": "^0.4.6",
|
||||
"postgres": "^3.4.9",
|
||||
|
||||
Reference in New Issue
Block a user