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:
70
apps/backoffice/app/components/BookCard.tsx
Normal file
70
apps/backoffice/app/components/BookCard.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { BookDto } from "../../lib/api";
|
||||
|
||||
interface BookCardProps {
|
||||
book: BookDto;
|
||||
getBookCoverUrl: (bookId: string) => string;
|
||||
}
|
||||
|
||||
export function BookCard({ book, getBookCoverUrl }: BookCardProps) {
|
||||
return (
|
||||
<Link href={`/books/${book.id}`} className="book-card">
|
||||
<div className="book-cover">
|
||||
<Image
|
||||
src={getBookCoverUrl(book.id)}
|
||||
alt={`Cover of ${book.title}`}
|
||||
width={150}
|
||||
height={220}
|
||||
className="cover-image"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="book-info">
|
||||
<h3 className="book-title" title={book.title}>
|
||||
{book.title}
|
||||
</h3>
|
||||
{book.author && (
|
||||
<p className="book-author">{book.author}</p>
|
||||
)}
|
||||
{book.series && (
|
||||
<p className="book-series">
|
||||
{book.series}
|
||||
{book.volume && ` #${book.volume}`}
|
||||
</p>
|
||||
)}
|
||||
<div className="book-meta">
|
||||
<span className={`book-kind ${book.kind}`}>{book.kind.toUpperCase()}</span>
|
||||
{book.language && <span className="book-lang">{book.language.toUpperCase()}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
interface BooksGridProps {
|
||||
books: BookDto[];
|
||||
getBookCoverUrl: (bookId: string) => string;
|
||||
}
|
||||
|
||||
export function BooksGrid({ books, getBookCoverUrl }: BooksGridProps) {
|
||||
return (
|
||||
<div className="books-grid">
|
||||
{books.map((book) => (
|
||||
<BookCard key={book.id} book={book} getBookCoverUrl={getBookCoverUrl} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface EmptyStateProps {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export function EmptyState({ message }: EmptyStateProps) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<p>{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user