Rework artwork list
This commit is contained in:
5
bun.lock
5
bun.lock
@ -9,6 +9,7 @@
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@prisma/adapter-pg": "^7.2.0",
|
||||
"@prisma/client": "^7.2.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-hover-card": "^1.1.15",
|
||||
@ -322,6 +323,8 @@
|
||||
|
||||
"@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
|
||||
|
||||
"@radix-ui/react-alert-dialog": ["@radix-ui/react-alert-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw=="],
|
||||
|
||||
"@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
|
||||
|
||||
"@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
|
||||
@ -930,6 +933,8 @@
|
||||
|
||||
"@prisma/get-platform/@prisma/debug": ["@prisma/debug@6.8.2", "", {}, "sha512-4muBSSUwJJ9BYth5N8tqts8JtiLT8QI/RSAzEogwEfpbYGFo9mYsInsVo8dqXdPO2+Rm5OG5q0qWDDE3nyUbVg=="],
|
||||
|
||||
"@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
||||
|
||||
"@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
||||
|
||||
"@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@prisma/adapter-pg": "^7.2.0",
|
||||
"@prisma/client": "^7.2.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-hover-card": "^1.1.15",
|
||||
|
||||
@ -7,14 +7,43 @@ import {
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import {
|
||||
ArrowUpDown,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
MoreHorizontal,
|
||||
Pencil,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import * as React from "react";
|
||||
|
||||
import { getArtworksTablePage } from "@/actions/artworks/getArtworksTablePage";
|
||||
|
||||
import { deleteArtwork } from "@/actions/artworks/deleteArtwork";
|
||||
import { getArtworkFilterOptions } from "@/actions/artworks/getArtworkFilterOptions";
|
||||
import { getArtworksTablePage } from "@/actions/artworks/getArtworksTablePage";
|
||||
// import type { ArtworkTableRow } from "@/lib/artworks/artworkTableSchema";
|
||||
|
||||
// import { MultiSelectFilter } from "@/components/admin/MultiSelectFilter";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
HoverCard,
|
||||
HoverCardContent,
|
||||
@ -50,13 +79,86 @@ function useDebouncedValue<T>(value: T, delayMs: number) {
|
||||
return debounced;
|
||||
}
|
||||
|
||||
function SortHeader(props: {
|
||||
title: string;
|
||||
column: any; // TanStack Column<TData, TValue>
|
||||
}) {
|
||||
const sorted = props.column.getIsSorted() as false | "asc" | "desc";
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.column.toggleSorting(sorted === "asc")}
|
||||
className="group inline-flex items-center gap-2 font-semibold text-foreground/90 hover:text-foreground"
|
||||
>
|
||||
<span>{props.title}</span>
|
||||
{sorted === "asc" ? (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
) : sorted === "desc" ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-4 w-4 opacity-60 group-hover:opacity-100" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function YesNoBadge(props: { value: boolean; variant?: "default" | "secondary" }) {
|
||||
return (
|
||||
<Badge variant={props.value ? "default" : "secondary"} className="px-2 py-0.5">
|
||||
{props.value ? "Yes" : "No"}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
function Chips(props: { items: { id: string; name: string }[]; max?: number }) {
|
||||
const max = props.max ?? 2;
|
||||
const shown = props.items.slice(0, max);
|
||||
const rest = props.items.length - shown.length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{shown.map((i) => (
|
||||
<span
|
||||
key={i.id}
|
||||
className="inline-flex items-center rounded-md border bg-muted/40 px-2 py-0.5 text-xs text-foreground/80"
|
||||
>
|
||||
{i.name}
|
||||
</span>
|
||||
))}
|
||||
{rest > 0 ? (
|
||||
<span className="inline-flex items-center rounded-md border bg-muted/40 px-2 py-0.5 text-xs text-foreground/70">
|
||||
+{rest}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TriSelectInline(props: {
|
||||
value: TriState;
|
||||
onChange: (v: TriState) => void;
|
||||
}) {
|
||||
return (
|
||||
<Select value={props.value} onValueChange={(v) => props.onChange(v as TriState)}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="any">Any</SelectItem>
|
||||
<SelectItem value="true">Yes</SelectItem>
|
||||
<SelectItem value="false">No</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
type Filters = {
|
||||
name: string;
|
||||
slug: string;
|
||||
published: TriState;
|
||||
nsfw: TriState;
|
||||
needsWork: TriState;
|
||||
|
||||
albumIds: string[];
|
||||
categoryIds: string[];
|
||||
};
|
||||
@ -67,8 +169,6 @@ export function ArtworksTable() {
|
||||
]);
|
||||
const [pageIndex, setPageIndex] = React.useState(0);
|
||||
const [pageSize, setPageSize] = React.useState(25);
|
||||
const [albumOptions, setAlbumOptions] = React.useState<{ id: string; name: string }[]>([]);
|
||||
const [categoryOptions, setCategoryOptions] = React.useState<{ id: string; name: string }[]>([]);
|
||||
|
||||
const [filters, setFilters] = React.useState<Filters>({
|
||||
name: "",
|
||||
@ -80,18 +180,32 @@ export function ArtworksTable() {
|
||||
categoryIds: [],
|
||||
});
|
||||
|
||||
const debouncedFilters = {
|
||||
...filters,
|
||||
name: useDebouncedValue(filters.name, 300),
|
||||
slug: useDebouncedValue(filters.slug, 300),
|
||||
};
|
||||
const debouncedName = useDebouncedValue(filters.name, 300);
|
||||
const debouncedSlug = useDebouncedValue(filters.slug, 300);
|
||||
|
||||
const [rows, setRows] = React.useState<ArtworkTableRow[]>([]);
|
||||
const [total, setTotal] = React.useState(0);
|
||||
const [isLoading, startTransition] = React.useTransition();
|
||||
|
||||
const [albumOptions, setAlbumOptions] = React.useState<{ id: string; name: string }[]>([]);
|
||||
const [categoryOptions, setCategoryOptions] = React.useState<{ id: string; name: string }[]>([]);
|
||||
|
||||
const [isPending, startTransition] = React.useTransition();
|
||||
|
||||
// Delete dialog
|
||||
const [deleteOpen, setDeleteOpen] = React.useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = React.useState<{ id: string; name: string } | null>(null);
|
||||
|
||||
const pageCount = Math.max(1, Math.ceil(total / pageSize));
|
||||
|
||||
React.useEffect(() => {
|
||||
startTransition(async () => {
|
||||
const res = await getArtworkFilterOptions();
|
||||
setAlbumOptions(res.albums);
|
||||
setCategoryOptions(res.categories);
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const columns = React.useMemo<ColumnDef<ArtworkTableRow>[]>(
|
||||
() => [
|
||||
{
|
||||
@ -102,9 +216,9 @@ export function ArtworksTable() {
|
||||
const url = `/api/image/thumbnail/${fileKey}.webp`;
|
||||
|
||||
return (
|
||||
<HoverCard openDelay={150} closeDelay={100}>
|
||||
<HoverCard openDelay={140} closeDelay={80}>
|
||||
<HoverCardTrigger asChild>
|
||||
<div className="relative h-12 w-12 overflow-hidden rounded border bg-muted">
|
||||
<div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg border bg-muted shadow-sm">
|
||||
<Image
|
||||
src={url}
|
||||
alt={row.original.name}
|
||||
@ -114,18 +228,37 @@ export function ArtworksTable() {
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="w-[420px]">
|
||||
<div className="relative aspect-[4/3] w-full overflow-hidden rounded border bg-muted">
|
||||
<HoverCardContent className="w-[520px]">
|
||||
<div className="flex gap-3">
|
||||
<div className="relative aspect-[4/3] w-[320px] overflow-hidden rounded-lg border bg-muted">
|
||||
<Image
|
||||
src={url}
|
||||
alt={row.original.name}
|
||||
fill
|
||||
sizes="420px"
|
||||
sizes="320px"
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 text-sm font-medium">{row.original.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{row.original.slug}</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-semibold">{row.original.name}</div>
|
||||
<div className="truncate text-xs text-muted-foreground">{row.original.slug}</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<YesNoBadge value={row.original.published} />
|
||||
<YesNoBadge value={row.original.nsfw} variant="secondary" />
|
||||
<YesNoBadge value={row.original.needsWork} variant="secondary" />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2 text-xs">
|
||||
<div className="text-muted-foreground">
|
||||
Created: {new Date(row.original.createdAt).toLocaleString()}
|
||||
</div>
|
||||
<div className="text-muted-foreground">
|
||||
Updated: {new Date(row.original.updatedAt).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
);
|
||||
@ -134,94 +267,123 @@ export function ArtworksTable() {
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: ({ column }) => (
|
||||
<button
|
||||
className="text-left font-medium"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
Name
|
||||
</button>
|
||||
),
|
||||
header: ({ column }) => <SortHeader title="Name" column={column} />,
|
||||
cell: ({ row }) => (
|
||||
<div className="min-w-0 max-w-[340px]">
|
||||
<Link
|
||||
href={`/artworks/${row.original.id}`}
|
||||
className="max-w-[420px] truncate underline-offset-4 hover:underline"
|
||||
className="block truncate text-sm font-medium leading-5 underline-offset-4 hover:underline"
|
||||
title={row.original.name}
|
||||
>
|
||||
{row.original.name}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "slug",
|
||||
header: "Slug",
|
||||
cell: ({ row }) => (
|
||||
<div className="max-w-[240px] truncate text-muted-foreground">
|
||||
<div className="truncate text-[11px] leading-4 text-muted-foreground">
|
||||
{row.original.slug}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "gallery",
|
||||
header: "Gallery",
|
||||
cell: ({ row }) => row.original.gallery?.name ?? "—",
|
||||
cell: ({ row }) => (
|
||||
<span className="text-sm text-foreground/80">
|
||||
{row.original.gallery?.name ?? "—"}
|
||||
</span>
|
||||
),
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
id: "albums",
|
||||
header: "Albums",
|
||||
header: ({ column }) => <SortHeader title="Albums #" column={column} />,
|
||||
accessorKey: "albumsCount",
|
||||
cell: ({ row }) => (
|
||||
<div className="max-w-[260px] truncate">
|
||||
{row.original.albums.map((a) => a.name).join(", ") || "—"}
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium tabular-nums">{row.original.albumsCount}</div>
|
||||
{row.original.albums.length ? <Chips items={row.original.albums} /> : <span className="text-xs text-muted-foreground">—</span>}
|
||||
</div>
|
||||
),
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "albumsCount",
|
||||
header: "Albums #",
|
||||
cell: ({ row }) => row.original.albumsCount,
|
||||
},
|
||||
{
|
||||
id: "categories",
|
||||
header: "Categories",
|
||||
header: ({ column }) => <SortHeader title="Categories #" column={column} />,
|
||||
accessorKey: "categoriesCount",
|
||||
cell: ({ row }) => (
|
||||
<div className="max-w-[260px] truncate">
|
||||
{row.original.categories.map((c) => c.name).join(", ") || "—"}
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium tabular-nums">{row.original.categoriesCount}</div>
|
||||
{row.original.categories.length ? (
|
||||
<Chips items={row.original.categories} />
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">—</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "categoriesCount",
|
||||
header: "Categories #",
|
||||
cell: ({ row }) => row.original.categoriesCount,
|
||||
},
|
||||
{
|
||||
accessorKey: "published",
|
||||
header: "Published",
|
||||
cell: ({ row }) => (row.original.published ? "Yes" : "No"),
|
||||
header: ({ column }) => <SortHeader title="Published" column={column} />,
|
||||
cell: ({ row }) => <YesNoBadge value={row.original.published} />,
|
||||
},
|
||||
{
|
||||
accessorKey: "nsfw",
|
||||
header: "NSFW",
|
||||
cell: ({ row }) => (row.original.nsfw ? "Yes" : "No"),
|
||||
header: ({ column }) => <SortHeader title="NSFW" column={column} />,
|
||||
cell: ({ row }) => <YesNoBadge value={row.original.nsfw} variant="secondary" />,
|
||||
},
|
||||
{
|
||||
accessorKey: "needsWork",
|
||||
header: "Needs Work",
|
||||
cell: ({ row }) => (row.original.needsWork ? "Yes" : "No"),
|
||||
header: ({ column }) => <SortHeader title="Needs Work" column={column} />,
|
||||
cell: ({ row }) => <YesNoBadge value={row.original.needsWork} variant="secondary" />,
|
||||
},
|
||||
{
|
||||
accessorKey: "createdAt",
|
||||
header: ({ column }) => (
|
||||
<button
|
||||
className="text-left font-medium"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
created
|
||||
</button>
|
||||
header: ({ column }) => <SortHeader title="Created" column={column} />,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-sm text-foreground/80">
|
||||
{new Date(row.original.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
),
|
||||
cell: ({ row }) => new Date(row.original.createdAt).toLocaleString(),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "",
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const item = row.original;
|
||||
|
||||
return (
|
||||
<div className="flex justify-end">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-9 w-9">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<span className="sr-only">Open row actions</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent align="end" className="w-44">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/artworks/${item.id}`} className="cursor-pointer">
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer text-destructive focus:text-destructive"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
setDeleteTarget({ id: item.id, name: item.name });
|
||||
setDeleteOpen(true);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[],
|
||||
@ -235,34 +397,23 @@ export function ArtworksTable() {
|
||||
manualSorting: true,
|
||||
pageCount,
|
||||
onSortingChange: (updater) => {
|
||||
setSorting((prev) => {
|
||||
const next = typeof updater === "function" ? updater(prev) : updater;
|
||||
return next;
|
||||
});
|
||||
setSorting((prev) => (typeof updater === "function" ? updater(prev) : updater));
|
||||
setPageIndex(0);
|
||||
},
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
startTransition(async () => {
|
||||
const res = await getArtworkFilterOptions();
|
||||
setAlbumOptions(res.albums);
|
||||
setCategoryOptions(res.categories);
|
||||
});
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
startTransition(async () => {
|
||||
const res = await getArtworksTablePage({
|
||||
pagination: { pageIndex, pageSize },
|
||||
sorting,
|
||||
filters: {
|
||||
name: debouncedFilters.name || undefined,
|
||||
slug: debouncedFilters.slug || undefined,
|
||||
published: debouncedFilters.published,
|
||||
nsfw: debouncedFilters.nsfw,
|
||||
needsWork: debouncedFilters.needsWork,
|
||||
name: debouncedName || undefined,
|
||||
slug: debouncedSlug || undefined,
|
||||
published: filters.published,
|
||||
nsfw: filters.nsfw,
|
||||
needsWork: filters.needsWork,
|
||||
albumIds: filters.albumIds.length ? filters.albumIds : undefined,
|
||||
categoryIds: filters.categoryIds.length ? filters.categoryIds : undefined,
|
||||
},
|
||||
@ -275,24 +426,31 @@ export function ArtworksTable() {
|
||||
pageIndex,
|
||||
pageSize,
|
||||
sorting,
|
||||
debouncedFilters.name,
|
||||
debouncedFilters.slug,
|
||||
debouncedFilters.published,
|
||||
debouncedFilters.nsfw,
|
||||
debouncedFilters.needsWork,
|
||||
debouncedName,
|
||||
debouncedSlug,
|
||||
filters.published,
|
||||
filters.nsfw,
|
||||
filters.needsWork,
|
||||
filters.albumIds,
|
||||
filters.categoryIds,
|
||||
]);
|
||||
|
||||
// Render: header row + filter row (only)
|
||||
const headerGroup = table.getHeaderGroups()[0];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded border">
|
||||
<div className="overflow-hidden rounded-2xl border border-border/60 bg-card shadow-sm ring-1 ring-border/40">
|
||||
<div className="relative">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-6 bg-gradient-to-b from-background/60 to-transparent" />
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHeader className="sticky top-0 z-20 bg-card">
|
||||
{/* main header */}
|
||||
<TableRow className="hover:bg-transparent">
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id} className="whitespace-nowrap">
|
||||
<TableHead
|
||||
key={header.id}
|
||||
className="whitespace-nowrap border-b border-border/70 bg-muted/40 py-3 text-xs font-semibold uppercase tracking-wide text-foreground/80"
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(header.column.columnDef.header, header.getContext())}
|
||||
@ -300,13 +458,13 @@ export function ArtworksTable() {
|
||||
))}
|
||||
</TableRow>
|
||||
|
||||
{/* column filter row */}
|
||||
<TableRow>
|
||||
{/* filter row */}
|
||||
<TableRow className="hover:bg-transparent">
|
||||
{headerGroup.headers.map((header) => {
|
||||
const colId = header.column.id;
|
||||
|
||||
return (
|
||||
<TableHead key={header.id}>
|
||||
<TableHead key={header.id} className="border-b border-border/70 bg-muted/30 py-2">
|
||||
{colId === "name" ? (
|
||||
<Input
|
||||
className="h-9"
|
||||
@ -353,7 +511,7 @@ export function ArtworksTable() {
|
||||
/>
|
||||
) : colId === "albums" ? (
|
||||
<MultiSelectFilter
|
||||
placeholder="Filter albums…"
|
||||
placeholder="Albums…"
|
||||
options={albumOptions}
|
||||
value={filters.albumIds}
|
||||
onChange={(next) => {
|
||||
@ -363,7 +521,7 @@ export function ArtworksTable() {
|
||||
/>
|
||||
) : colId === "categories" ? (
|
||||
<MultiSelectFilter
|
||||
placeholder="Filter categories…"
|
||||
placeholder="Categories…"
|
||||
options={categoryOptions}
|
||||
value={filters.categoryIds}
|
||||
onChange={(next) => {
|
||||
@ -383,15 +541,27 @@ export function ArtworksTable() {
|
||||
<TableBody>
|
||||
{rows.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="py-10 text-center">
|
||||
{isLoading ? "Loading…" : "No results."}
|
||||
<TableCell colSpan={columns.length} className="py-14 text-center">
|
||||
<div className="text-sm font-medium">
|
||||
{isPending ? "Loading…" : "No results."}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
Adjust filters or change page size.
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
table.getRowModel().rows.map((r) => (
|
||||
<TableRow key={r.id}>
|
||||
table.getRowModel().rows.map((r, idx) => (
|
||||
<TableRow
|
||||
key={r.id}
|
||||
className={[
|
||||
"transition-colors",
|
||||
"hover:bg-muted/50",
|
||||
idx % 2 === 0 ? "bg-background" : "bg-muted/10",
|
||||
].join(" ")}
|
||||
>
|
||||
{r.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
<TableCell key={cell.id} className="py-3 align-top border-b border-border/40">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
@ -401,11 +571,12 @@ export function ArtworksTable() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* pagination only (no redundant filters) */}
|
||||
{/* pagination */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{isLoading ? "Updating…" : null} Total: {total}
|
||||
{isPending ? "Updating…" : null} Total: {total}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
@ -432,7 +603,7 @@ export function ArtworksTable() {
|
||||
variant="outline"
|
||||
className="h-9"
|
||||
onClick={() => setPageIndex(0)}
|
||||
disabled={pageIndex === 0 || isLoading}
|
||||
disabled={pageIndex === 0 || isPending}
|
||||
>
|
||||
First
|
||||
</Button>
|
||||
@ -440,12 +611,12 @@ export function ArtworksTable() {
|
||||
variant="outline"
|
||||
className="h-9"
|
||||
onClick={() => setPageIndex((p) => Math.max(0, p - 1))}
|
||||
disabled={pageIndex === 0 || isLoading}
|
||||
disabled={pageIndex === 0 || isPending}
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
|
||||
<div className="text-sm tabular-nums">
|
||||
<div className="min-w-[120px] text-center text-sm tabular-nums">
|
||||
Page {pageIndex + 1} / {pageCount}
|
||||
</div>
|
||||
|
||||
@ -453,7 +624,7 @@ export function ArtworksTable() {
|
||||
variant="outline"
|
||||
className="h-9"
|
||||
onClick={() => setPageIndex((p) => Math.min(pageCount - 1, p + 1))}
|
||||
disabled={pageIndex >= pageCount - 1 || isLoading}
|
||||
disabled={pageIndex >= pageCount - 1 || isPending}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
@ -461,30 +632,60 @@ export function ArtworksTable() {
|
||||
variant="outline"
|
||||
className="h-9"
|
||||
onClick={() => setPageIndex(Math.max(0, pageCount - 1))}
|
||||
disabled={pageIndex >= pageCount - 1 || isLoading}
|
||||
disabled={pageIndex >= pageCount - 1 || isPending}
|
||||
>
|
||||
Last
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* delete confirmation */}
|
||||
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete artwork?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will delete <span className="font-medium">{deleteTarget?.name}</span>. This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
disabled={isPending || !deleteTarget}
|
||||
onClick={() => {
|
||||
const target = deleteTarget;
|
||||
if (!target) return;
|
||||
|
||||
startTransition(async () => {
|
||||
await deleteArtwork(target.id);
|
||||
setDeleteOpen(false);
|
||||
setDeleteTarget(null);
|
||||
|
||||
// Refresh current page (simple approach)
|
||||
const res = await getArtworksTablePage({
|
||||
pagination: { pageIndex, pageSize },
|
||||
sorting,
|
||||
filters: {
|
||||
name: debouncedName || undefined,
|
||||
slug: debouncedSlug || undefined,
|
||||
published: filters.published,
|
||||
nsfw: filters.nsfw,
|
||||
needsWork: filters.needsWork,
|
||||
albumIds: filters.albumIds.length ? filters.albumIds : undefined,
|
||||
categoryIds: filters.categoryIds.length ? filters.categoryIds : undefined,
|
||||
},
|
||||
});
|
||||
setRows(res.rows);
|
||||
setTotal(res.total);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TriSelectInline(props: {
|
||||
value: TriState;
|
||||
onChange: (v: TriState) => void;
|
||||
}) {
|
||||
return (
|
||||
<Select value={props.value} onValueChange={(v) => props.onChange(v as TriState)}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="any">Any</SelectItem>
|
||||
<SelectItem value="true">Yes</SelectItem>
|
||||
<SelectItem value="false">No</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
157
src/components/ui/alert-dialog.tsx
Normal file
157
src/components/ui/alert-dialog.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Action
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
}
|
||||
Reference in New Issue
Block a user