Froidefond Julien
d33a4b02d8
API:
- Add /libraries/{id}/series endpoint to list series with book counts
- Add series filter to /books endpoint
- Fix SeriesItem to return first_book_id properly (using CTE with ROW_NUMBER)
Indexer:
- Parse series from parent folder name relative to library root
- Store series in database when indexing books
Backoffice:
- Add Books page with grid view, search, and pagination
- Add Series page showing series with cover images
- Add Library books page filtered by series
- Add book detail page
- Add Series column in libraries list with clickable link
- Create BookCard component for reusable book display
- Add CSS styles for books grid, series grid, and book details
- Add proxy API route for book cover images (fixing CORS issues)
Parser:
- Add series field to ParsedMetadata
- Extract series from file path relative to library root
Books without a parent folder are categorized as 'unclassified' series.
100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import { fetchLibraries, getBookCoverUrl, BookDto, apiFetch } from "../../../lib/api";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
async function fetchBook(bookId: string): Promise<BookDto | null> {
|
|
try {
|
|
return await apiFetch<BookDto>(`/books/${bookId}`);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export default async function BookDetailPage({
|
|
params
|
|
}: {
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const { id } = await params;
|
|
const [book, libraries] = await Promise.all([
|
|
fetchBook(id),
|
|
fetchLibraries().catch(() => [] as { id: string; name: string }[])
|
|
]);
|
|
|
|
if (!book) {
|
|
notFound();
|
|
}
|
|
|
|
const library = libraries.find(l => l.id === book.library_id);
|
|
|
|
return (
|
|
<>
|
|
<div className="breadcrumb">
|
|
<Link href="/books">← Back to books</Link>
|
|
</div>
|
|
|
|
<div className="book-detail">
|
|
<div className="book-detail-cover">
|
|
<Image
|
|
src={getBookCoverUrl(book.id)}
|
|
alt={`Cover of ${book.title}`}
|
|
width={300}
|
|
height={440}
|
|
className="detail-cover-image"
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
|
|
<div className="book-detail-info">
|
|
<h1>{book.title}</h1>
|
|
|
|
{book.author && (
|
|
<p className="detail-author">by {book.author}</p>
|
|
)}
|
|
|
|
{book.series && (
|
|
<p className="detail-series">
|
|
{book.series}
|
|
{book.volume && <span className="volume">Volume {book.volume}</span>}
|
|
</p>
|
|
)}
|
|
|
|
<div className="detail-meta">
|
|
<div className="meta-row">
|
|
<span className="meta-label">Format:</span>
|
|
<span className={`book-kind ${book.kind}`}>{book.kind.toUpperCase()}</span>
|
|
</div>
|
|
|
|
{book.language && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">Language:</span>
|
|
<span>{book.language.toUpperCase()}</span>
|
|
</div>
|
|
)}
|
|
|
|
{book.page_count && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">Pages:</span>
|
|
<span>{book.page_count}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="meta-row">
|
|
<span className="meta-label">Library:</span>
|
|
<span>{library?.name || book.library_id}</span>
|
|
</div>
|
|
|
|
<div className="meta-row">
|
|
<span className="meta-label">ID:</span>
|
|
<code className="book-id">{book.id}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|