Implement magazine reviews, label details, and year filtering
- Aggregate magazine references from all releases on the Entry detail page. - Display country names and external links (Wikipedia/Website) on the Label detail page. - Add a year filter to the ZXDB Explorer to search entries by release year. Signed-off: junie@lucy.xalior.com
This commit is contained in:
@@ -13,6 +13,7 @@ const querySchema = z.object({
|
||||
.length(2, "languageId must be a 2-char code")
|
||||
.optional(),
|
||||
machinetypeId: z.string().optional(),
|
||||
year: z.coerce.number().int().optional(),
|
||||
sort: z.enum(["title", "id_desc"]).optional(),
|
||||
scope: z.enum(["title", "title_aliases", "title_aliases_origins"]).optional(),
|
||||
facets: z.coerce.boolean().optional(),
|
||||
@@ -36,6 +37,7 @@ export async function GET(req: NextRequest) {
|
||||
genreId: searchParams.get("genreId") ?? undefined,
|
||||
languageId: searchParams.get("languageId") ?? undefined,
|
||||
machinetypeId: searchParams.get("machinetypeId") ?? undefined,
|
||||
year: searchParams.get("year") ?? undefined,
|
||||
sort: searchParams.get("sort") ?? undefined,
|
||||
scope: searchParams.get("scope") ?? undefined,
|
||||
facets: searchParams.get("facets") ?? undefined,
|
||||
|
||||
@@ -41,6 +41,7 @@ export default function ZxdbExplorer({
|
||||
const [genreId, setGenreId] = useState<number | "">("");
|
||||
const [languageId, setLanguageId] = useState<string | "">("");
|
||||
const [machinetypeId, setMachinetypeId] = useState<number | "">("");
|
||||
const [year, setYear] = useState<string>("");
|
||||
const [sort, setSort] = useState<"title" | "id_desc">("id_desc");
|
||||
|
||||
const pageSize = 20;
|
||||
@@ -56,6 +57,7 @@ export default function ZxdbExplorer({
|
||||
if (genreId !== "") params.set("genreId", String(genreId));
|
||||
if (languageId !== "") params.set("languageId", String(languageId));
|
||||
if (machinetypeId !== "") params.set("machinetypeId", String(machinetypeId));
|
||||
if (year !== "") params.set("year", year);
|
||||
if (sort) params.set("sort", sort);
|
||||
const res = await fetch(`/api/zxdb/search?${params.toString()}`);
|
||||
if (!res.ok) throw new Error(`Failed: ${res.status}`);
|
||||
@@ -89,13 +91,14 @@ export default function ZxdbExplorer({
|
||||
genreId === "" &&
|
||||
languageId === "" &&
|
||||
machinetypeId === "" &&
|
||||
year === "" &&
|
||||
sort === "id_desc"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
fetchData(q, page);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [page, genreId, languageId, machinetypeId, sort]);
|
||||
}, [page, genreId, languageId, machinetypeId, year, sort]);
|
||||
|
||||
// Load filter lists on mount only if not provided by server
|
||||
useEffect(() => {
|
||||
@@ -161,6 +164,16 @@ export default function ZxdbExplorer({
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
style={{ width: 100 }}
|
||||
placeholder="Year"
|
||||
value={year}
|
||||
onChange={(e) => setYear(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<select className="form-select" value={sort} onChange={(e) => setSort(e.target.value as "title" | "id_desc")}>
|
||||
<option value="title">Sort: Title</option>
|
||||
|
||||
@@ -130,6 +130,26 @@ export type EntryDetailData = {
|
||||
// Additional relationships
|
||||
aliases?: { releaseSeq: number; languageId: string; title: string }[];
|
||||
webrefs?: { link: string; languageId: string; website: { id: number; name: string; link?: string | null } }[];
|
||||
magazineRefs?: {
|
||||
id: number;
|
||||
issueId: number;
|
||||
magazineId: number | null;
|
||||
magazineName: string | null;
|
||||
referencetypeId: number;
|
||||
referencetypeName: string | null;
|
||||
page: number;
|
||||
isOriginal: number;
|
||||
scoreGroup: string;
|
||||
issue: {
|
||||
dateYear: number | null;
|
||||
dateMonth: number | null;
|
||||
dateDay: number | null;
|
||||
volume: number | null;
|
||||
number: number | null;
|
||||
special: string | null;
|
||||
supplement: string | null;
|
||||
};
|
||||
}[];
|
||||
};
|
||||
|
||||
export default function EntryDetailClient({ data }: { data: EntryDetailData | null }) {
|
||||
@@ -293,7 +313,52 @@ export default function EntryDetailClient({ data }: { data: EntryDetailData | nu
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card shadow-sm">
|
||||
<div className="card shadow-sm mb-3">
|
||||
<div className="card-body">
|
||||
<h5 className="card-title">Magazine References</h5>
|
||||
{(!data.magazineRefs || data.magazineRefs.length === 0) && <div className="text-secondary">No magazine references recorded</div>}
|
||||
{data.magazineRefs && data.magazineRefs.length > 0 && (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-sm table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Magazine</th>
|
||||
<th style={{ width: 140 }}>Issue</th>
|
||||
<th style={{ width: 140 }}>Type</th>
|
||||
<th style={{ width: 120 }}>Page</th>
|
||||
<th>Score</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.magazineRefs.map((m) => (
|
||||
<tr key={m.id}>
|
||||
<td>
|
||||
{m.magazineId ? (
|
||||
<Link href={`/zxdb/magazines/${m.magazineId}`}>{m.magazineName}</Link>
|
||||
) : (
|
||||
<span>{m.magazineName}</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<Link href={`/zxdb/issues/${m.issueId}`}>
|
||||
{m.issue.dateYear ? `${m.issue.dateYear} ` : ""}
|
||||
{m.issue.number ? `#${m.issue.number}` : ""}
|
||||
{m.issue.special ? ` (${m.issue.special})` : ""}
|
||||
</Link>
|
||||
</td>
|
||||
<td>{m.referencetypeName}</td>
|
||||
<td>{m.page > 0 ? m.page : "-"}</td>
|
||||
<td>{m.scoreGroup || "-"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card shadow-sm mb-3">
|
||||
<div className="card-body d-flex flex-wrap gap-2">
|
||||
<Link className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</Link>
|
||||
<Link className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</Link>
|
||||
|
||||
@@ -10,6 +10,12 @@ type Label = {
|
||||
name: string;
|
||||
labeltypeId: string | null;
|
||||
labeltypeName: string | null;
|
||||
countryId: string | null;
|
||||
countryName: string | null;
|
||||
country2Id: string | null;
|
||||
country2Name: string | null;
|
||||
linkWikipedia: string | null;
|
||||
linkSite: string | null;
|
||||
permissions: {
|
||||
website: { id: number; name: string; link?: string | null };
|
||||
type: { id: string; name: string | null };
|
||||
@@ -57,6 +63,24 @@ export default function LabelDetailClient({ id, initial, initialTab, initialQ }:
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{(initial.label.countryId || initial.label.linkWikipedia || initial.label.linkSite) && (
|
||||
<div className="mt-2 d-flex gap-3 flex-wrap align-items-center">
|
||||
{initial.label.countryId && (
|
||||
<span className="text-secondary small">
|
||||
Country: <strong>{initial.label.countryName || initial.label.countryId}</strong>
|
||||
{initial.label.country2Id && (
|
||||
<> / <strong>{initial.label.country2Name || initial.label.country2Id}</strong></>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{initial.label.linkWikipedia && (
|
||||
<a href={initial.label.linkWikipedia} target="_blank" rel="noreferrer" className="btn btn-sm btn-outline-secondary py-0">Wikipedia</a>
|
||||
)}
|
||||
{initial.label.linkSite && (
|
||||
<a href={initial.label.linkSite} target="_blank" rel="noreferrer" className="btn btn-sm btn-outline-secondary py-0">Website</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row g-4 mt-1">
|
||||
<div className="col-lg-6">
|
||||
|
||||
Reference in New Issue
Block a user