291 lines
10 KiB
TypeScript
291 lines
10 KiB
TypeScript
import { ArrowLeftIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
type SimpleArtwork = {
|
|
id: string;
|
|
name: string;
|
|
sortKey: number | null;
|
|
};
|
|
|
|
function sortBySortIndexName<T extends { sortIndex: number; name: string }>(a: T, b: T) {
|
|
return a.sortIndex - b.sortIndex || a.name.localeCompare(b.name);
|
|
}
|
|
|
|
function sortArtworks(a: SimpleArtwork, b: SimpleArtwork) {
|
|
const ak = a.sortKey ?? 999999;
|
|
const bk = b.sortKey ?? 999999;
|
|
return ak - bk || a.name.localeCompare(b.name) || a.id.localeCompare(b.id);
|
|
}
|
|
|
|
export default async function AnimalListPage() {
|
|
const tags = await prisma.artTag.findMany({
|
|
where: { showOnAnimalPage: true },
|
|
select: {
|
|
id: true,
|
|
name: true,
|
|
slug: true,
|
|
sortIndex: true,
|
|
parentId: true,
|
|
artworks: {
|
|
where: {
|
|
published: true,
|
|
categories: { some: { name: "Animal Studies" } },
|
|
},
|
|
select: { id: true, name: true, sortKey: true },
|
|
orderBy: [{ sortKey: "asc" }, { name: "asc" }, { id: "asc" }],
|
|
},
|
|
},
|
|
orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
|
|
});
|
|
|
|
const byId = new Map(tags.map((t) => [t.id, t]));
|
|
const childrenByParentId = new Map<string, typeof tags>();
|
|
|
|
for (const t of tags) {
|
|
if (!t.parentId) continue;
|
|
const arr = childrenByParentId.get(t.parentId) ?? [];
|
|
arr.push(t);
|
|
childrenByParentId.set(t.parentId, arr);
|
|
}
|
|
|
|
for (const [pid, arr] of childrenByParentId) {
|
|
childrenByParentId.set(pid, arr.slice().sort(sortBySortIndexName));
|
|
}
|
|
|
|
const parents = tags
|
|
.filter((t) => t.parentId === null)
|
|
.slice()
|
|
.sort(sortBySortIndexName);
|
|
|
|
const orphans = tags
|
|
.filter((t) => t.parentId !== null && !byId.has(t.parentId))
|
|
.slice()
|
|
.sort(sortBySortIndexName);
|
|
|
|
const ArtworkList = ({ items }: { items: SimpleArtwork[] }) => {
|
|
const list = items.slice().sort(sortArtworks);
|
|
if (list.length === 0) {
|
|
// return <p className="text-sm text-muted-foreground italic">No artworks found.</p>;
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<ul className="space-y-1.5">
|
|
{list.map((a) => (
|
|
<li key={a.id}>
|
|
<Link
|
|
href={`/artworks/single/${a.id}?from=animal-index`}
|
|
className="
|
|
inline-flex items-center gap-2
|
|
rounded-md px-2 py-1
|
|
text-sm font-medium
|
|
hover:bg-muted
|
|
"
|
|
>
|
|
<span
|
|
aria-hidden
|
|
className="
|
|
text-muted-foreground
|
|
transition-transform
|
|
group-hover:translate-x-0.5
|
|
"
|
|
>
|
|
→
|
|
</span>
|
|
|
|
<span className="leading-snug">{a.name}</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
// const countArtworks = (tagId: string) => {
|
|
// const t = byId.get(tagId);
|
|
// return t?.artworks?.length ?? 0;
|
|
// };
|
|
|
|
const countArtworksInChildren = (tagId: string) => {
|
|
const children = childrenByParentId.get(tagId) ?? [];
|
|
let sum = 0;
|
|
for (const c of children) sum += c.artworks.length;
|
|
return sum;
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-5xl px-4 py-6">
|
|
<header className="mb-6 space-y-3">
|
|
<Button
|
|
asChild
|
|
variant="ghost"
|
|
className="w-fit gap-2 px-0 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<Link href="/artworks/animalstudies">
|
|
<ArrowLeftIcon className="h-4 w-4" />
|
|
Back to Animal studies
|
|
</Link>
|
|
</Button>
|
|
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
|
|
Animal index
|
|
</h1>
|
|
{/* <p className="text-sm text-muted-foreground">
|
|
Click to expand and browse linked artworks.
|
|
</p> */}
|
|
</div>
|
|
</header>
|
|
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-base">
|
|
{/* Grouped animals */}
|
|
</CardTitle>
|
|
{/* <p className="text-sm text-muted-foreground">
|
|
Parent tags expand into children; standalone tags appear as single entries.
|
|
</p> */}
|
|
<p className="text-sm text-muted-foreground">
|
|
Click to expand and browse linked artworks.
|
|
</p>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
{parents.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground italic">No parent tags found.</p>
|
|
) : (
|
|
<Accordion type="multiple" className="w-full">
|
|
{parents.map((p) => {
|
|
const children = childrenByParentId.get(p.id) ?? [];
|
|
const parentDirectCount = p.artworks.length;
|
|
const childrenCount = countArtworksInChildren(p.id);
|
|
|
|
// Standalone root tag: no children
|
|
const isStandalone = children.length === 0;
|
|
|
|
return (
|
|
<AccordionItem key={p.id} value={p.id} className="border-b">
|
|
<AccordionTrigger
|
|
className="
|
|
py-4
|
|
rounded-md px-2 -mx-2
|
|
transition-colors
|
|
hover:bg-muted/60
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
|
|
data-[state=open]:bg-muted/40
|
|
"
|
|
>
|
|
<div className="flex w-full items-center justify-between pr-2">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="truncate font-medium">{p.name}</span>
|
|
{/* {isStandalone ? (
|
|
<Badge variant="secondary">single</Badge>
|
|
) : (
|
|
<Badge variant="secondary">{children.length} sub</Badge>
|
|
)} */}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{/* {parentDirectCount > 0 ? (
|
|
<Badge variant="outline">{parentDirectCount} direct</Badge>
|
|
) : null} */}
|
|
{!isStandalone ? (
|
|
<Badge variant="outline">{childrenCount} {childrenCount !== 1 ? "artworks" : "artwork"}</Badge>
|
|
) : (
|
|
<Badge variant="outline">{parentDirectCount} {parentDirectCount !== 1 ? "artworks" : "artwork"}</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AccordionTrigger>
|
|
|
|
<AccordionContent className="pb-5">
|
|
{isStandalone ? (
|
|
<div className="rounded-md border p-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className="text-sm font-medium">Artworks</div>
|
|
<Badge variant="outline">{p.artworks.length}</Badge>
|
|
</div>
|
|
<ArtworkList items={p.artworks} />
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{p.artworks.length > 0 ? (
|
|
<>
|
|
<div className="rounded-md border p-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className="text-sm font-medium">{/* Directly tagged */}</div>
|
|
<Badge variant="outline">{p.artworks.length}</Badge>
|
|
</div>
|
|
<ArtworkList items={p.artworks} />
|
|
</div>
|
|
|
|
<Separator />
|
|
</>
|
|
) : null}
|
|
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
{children.map((c) => (
|
|
<div key={c.id} className="rounded-md border p-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-medium">{c.name}</div>
|
|
</div>
|
|
<Badge variant="outline">{c.artworks.length}</Badge>
|
|
</div>
|
|
|
|
<ArtworkList items={c.artworks} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
);
|
|
})}
|
|
</Accordion>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{orphans.length ? (
|
|
<Card>
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-base">Ungrouped animals</CardTitle>
|
|
{/* <p className="text-sm text-muted-foreground">
|
|
Tags whose parent is not visible (or not configured for the animal page).
|
|
</p> */}
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
{orphans.map((t) => (
|
|
<div key={t.id} className="rounded-md border p-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className="truncate text-sm font-medium">{t.name}</div>
|
|
<Badge variant="outline">{t.artworks.length}</Badge>
|
|
</div>
|
|
<ArtworkList items={t.artworks} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|