blandat.. fixar o nullcheckar. filtreringar

Frontend/src/components/BookCard.tsx

@@ -5,7 +5,7 @@ import { Card } from "solid-bootstrap";
 const BookCard: Component<{ book: book }> = (props: { book: book }) => {
 	return (
 		<Card class="book-card col-lg-2 col-md-3 col-sm-4">
-			<Show when={props.book.hasCover}>
+			<Show when={true || props.book.hasCover}>
 				<Card.Img
 					variant="top"
 					class="padding-1"

Frontend/src/components/SeriesList.tsx

@@ -1,11 +1,12 @@
-import { createSignal, onMount, For, type Component } from "solid-js";
-import AuthorCard from "./AuthorCard";
+import { createSignal, onMount, For, type Component, Show } from "solid-js";
+import BookCard from "./BookCard";
 import BibblanService from "../services/bibblanservice";
-import { series, listBook } from "../types/types";
-
+import { series, listBook, book } from "../types/types";
+import { OverlayTrigger, Popover, Button } from "solid-bootstrap";
 const SeriesList: Component = () => {
 	const [series, setSeries] = createSignal<series[]>([]);
 	const [query, setQuery] = createSignal("");
+	const [selected, setSelected] = createSignal<number>(-1);
 
 	const update = (query: string) => {
 		setQuery(query);
@@ -40,6 +41,30 @@ const SeriesList: Component = () => {
 		return d?.toISOString().substr(0, 10) ?? "";
 	};
 
+	function extendBook(item: listBook, seriesName: string): book {
+		return {
+			...item,
+
+			author: item.authorName,
+			comments: "",
+
+			language: "",
+			path: item.path,
+			hasCover: item.hasCover,
+			formats: [],
+			seriesName,
+			seriesNumber: item.seriesIndex,
+		};
+	}
+
+	function orderBySeriesIndex(books: listBook[]): listBook[] {
+		return [...books].sort((a, b) => {
+			const indexA = a.seriesIndex ?? 0;
+			const indexB = b.seriesIndex ?? 0;
+			return indexA - indexB;
+		});
+	}
+
 	return (
 		<div>
 			<h1>Series!</h1>
@@ -49,7 +74,7 @@ const SeriesList: Component = () => {
 				placeholder="Search..."
 				onInput={(e) => update(e.currentTarget.value)}
 			/>
-			<table class="table p-3">
+			<table class="table p-3 series-table">
 				<thead>
 					<tr>
 						<th>ID</th>
@@ -57,27 +82,53 @@ const SeriesList: Component = () => {
 						<th>Author</th>
 						<th>Book Count</th>
 						<th>Published</th>
+						<th></th>
 					</tr>
 				</thead>
 				<tbody>
 					<For each={series()}>
 						{(item) => (
-							<tr>
-								<td>{item.id}</td>
-								<td>{item.name}</td>
-								<td>
-									<For each={distinctAuthors(item.books)}>
-										{(author) => (
-											<a href={`/books/author/${author.id}`}>{author.name}</a>
-										)}
-									</For>
-								</td>
-								<td>{item.books.length}</td>
-								<td>
-									{minDate(item.books) ?? "N/A"} -{" "}
-									{maxDate(item.books) ?? "N/A"}
-								</td>
-							</tr>
+							<>
+								<tr>
+									<td>{item.id}</td>
+									<td>{item.name}</td>
+									<td>
+										<For each={distinctAuthors(item.books)}>
+											{(author) => (
+												<a href={`/books/author/${author.id}`}>{author.name}</a>
+											)}
+										</For>
+									</td>
+									<td>{item.books.length}</td>
+									<td>
+										{minDate(item.books) ?? "N/A"} -{" "}
+										{maxDate(item.books) ?? "N/A"}
+									</td>
+									<td>
+										<OverlayTrigger
+											trigger="click"
+											offset={[0, 8]}
+											placement="left"
+											overlay={
+												<Popover id="popover-series" class="shadow">
+													<Popover.Header as="h3">{item.name}</Popover.Header>
+													<Popover.Body>
+														<div class="book-grid d-flex flex-wrap justify-content-between gap-3 p-3">
+															<For each={orderBySeriesIndex(item.books)}>
+																{(b) => (
+																	<BookCard book={extendBook(b, item.name)} />
+																)}
+															</For>
+														</div>
+													</Popover.Body>
+												</Popover>
+											}
+										>
+											<Button variant="secondary">Books</Button>
+										</OverlayTrigger>
+									</td>
+								</tr>
+							</>
 						)}
 					</For>
 				</tbody>

Frontend/src/styles/styles.css

@@ -6,3 +6,7 @@
 		aspect-ratio: 3 / 4;
 	}
 }
+
+#popover-series {
+	--bs-popover-max-width: 80%;
+}

Frontend/src/types/types.ts

@@ -23,6 +23,8 @@ interface listBook {
 	title: string;
 	authorId: number;
 	authorName: string;
+	path: string;
+	hasCover: boolean;
 	pubDate: Date;
 	seriesIndex: number;
 }