feat: add series support for book organization
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.
This commit is contained in:
99
apps/backoffice/app/books/[id]/page.tsx
Normal file
99
apps/backoffice/app/books/[id]/page.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
108
apps/backoffice/app/books/page.tsx
Normal file
108
apps/backoffice/app/books/page.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { fetchBooks, searchBooks, fetchLibraries, BookDto, LibraryDto, getBookCoverUrl } from "../../lib/api";
|
||||
import { BooksGrid, EmptyState } from "../components/BookCard";
|
||||
import Link from "next/link";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function BooksPage({
|
||||
searchParams
|
||||
}: {
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
||||
}) {
|
||||
const searchParamsAwaited = await searchParams;
|
||||
const libraryId = typeof searchParamsAwaited.library === "string" ? searchParamsAwaited.library : undefined;
|
||||
const searchQuery = typeof searchParamsAwaited.q === "string" ? searchParamsAwaited.q : "";
|
||||
|
||||
const [libraries] = await Promise.all([
|
||||
fetchLibraries().catch(() => [] as LibraryDto[])
|
||||
]);
|
||||
|
||||
let books: BookDto[] = [];
|
||||
let nextCursor: string | null = null;
|
||||
let searchResults: BookDto[] | null = null;
|
||||
let totalHits: number | null = null;
|
||||
|
||||
if (searchQuery) {
|
||||
// Mode recherche
|
||||
const searchResponse = await searchBooks(searchQuery, libraryId).catch(() => null);
|
||||
if (searchResponse) {
|
||||
searchResults = searchResponse.hits.map(hit => ({
|
||||
id: hit.id,
|
||||
library_id: hit.library_id,
|
||||
kind: hit.kind,
|
||||
title: hit.title,
|
||||
author: hit.author,
|
||||
series: hit.series,
|
||||
volume: hit.volume,
|
||||
language: hit.language,
|
||||
page_count: null,
|
||||
updated_at: ""
|
||||
}));
|
||||
totalHits = searchResponse.estimated_total_hits;
|
||||
}
|
||||
} else {
|
||||
// Mode liste
|
||||
const booksPage = await fetchBooks(libraryId).catch(() => ({ items: [] as BookDto[], next_cursor: null }));
|
||||
books = booksPage.items;
|
||||
nextCursor = booksPage.next_cursor;
|
||||
}
|
||||
|
||||
const displayBooks = searchResults || books;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Books</h1>
|
||||
|
||||
{/* Filtres et recherche */}
|
||||
<div className="card">
|
||||
<form className="search-form">
|
||||
<input
|
||||
name="q"
|
||||
placeholder="Search books..."
|
||||
defaultValue={searchQuery}
|
||||
className="search-input"
|
||||
/>
|
||||
<select name="library" defaultValue={libraryId || ""}>
|
||||
<option value="">All libraries</option>
|
||||
{libraries.map((lib) => (
|
||||
<option key={lib.id} value={lib.id}>
|
||||
{lib.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="submit">Search</button>
|
||||
{searchQuery && (
|
||||
<Link href="/books" className="button secondary">Clear</Link>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Résultats de recherche */}
|
||||
{searchQuery && totalHits !== null && (
|
||||
<p className="results-info">
|
||||
Found {totalHits} result{totalHits !== 1 ? 's' : ''} for "{searchQuery}"
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Grille de livres */}
|
||||
{displayBooks.length > 0 ? (
|
||||
<>
|
||||
<BooksGrid books={displayBooks} getBookCoverUrl={getBookCoverUrl} />
|
||||
|
||||
{/* Pagination */}
|
||||
{!searchQuery && nextCursor && (
|
||||
<div className="pagination">
|
||||
<form>
|
||||
<input type="hidden" name="library" value={libraryId || ""} />
|
||||
<input type="hidden" name="cursor" value={nextCursor} />
|
||||
<button type="submit">Load more</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<EmptyState message={searchQuery ? `No books found for "${searchQuery}"` : "No books available"} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user