Added more info for scans of covers
This commit is contained in:
DrMint
parent
822adbec48
commit
3b0514fc6b
@ -1,5 +1,8 @@
|
||||
import Chip from "components/Chip";
|
||||
import Img, { getAssetURL, ImageQuality } from "components/Img";
|
||||
import LanguageSwitcher from "components/LanguageSwitcher";
|
||||
import RecorderChip from "components/RecorderChip";
|
||||
import ToolTip from "components/ToolTip";
|
||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||
import {
|
||||
GetLibraryItemScansQuery,
|
||||
@ -7,7 +10,7 @@ import {
|
||||
} from "graphql/generated";
|
||||
import { useRouter } from "next/router";
|
||||
import { AppStaticProps } from "queries/getAppStaticProps";
|
||||
import { getPreferredLanguage } from "queries/helpers";
|
||||
import { getPreferredLanguage, getStatusDescription } from "queries/helpers";
|
||||
import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
|
||||
|
||||
interface Props {
|
||||
@ -69,13 +72,13 @@ export default function ScanSetCover(props: Props): JSX.Element {
|
||||
|
||||
const coverImages: UploadImageFragment[] = [];
|
||||
if (selectedScan?.obi_belt?.full?.data?.attributes)
|
||||
coverImages.push(selectedScan.obi_belt?.full?.data?.attributes);
|
||||
coverImages.push(selectedScan.obi_belt?.full?.data?.attributes);
|
||||
if (selectedScan?.obi_belt?.inside_full?.data?.attributes)
|
||||
coverImages.push(selectedScan.obi_belt?.inside_full?.data?.attributes);
|
||||
coverImages.push(selectedScan.obi_belt?.inside_full?.data?.attributes);
|
||||
if (selectedScan?.dust_jacket?.full?.data?.attributes)
|
||||
coverImages.push(selectedScan.dust_jacket?.full?.data?.attributes);
|
||||
coverImages.push(selectedScan.dust_jacket?.full?.data?.attributes);
|
||||
if (selectedScan?.dust_jacket?.inside_full?.data?.attributes)
|
||||
coverImages.push(selectedScan.dust_jacket?.inside_full?.data?.attributes);
|
||||
coverImages.push(selectedScan.dust_jacket?.inside_full?.data?.attributes);
|
||||
if (selectedScan?.cover?.full?.data?.attributes)
|
||||
coverImages.push(selectedScan.cover?.full?.data?.attributes);
|
||||
if (selectedScan?.cover?.inside_full?.data?.attributes)
|
||||
@ -87,7 +90,16 @@ export default function ScanSetCover(props: Props): JSX.Element {
|
||||
{selectedScan && (
|
||||
<div>
|
||||
<div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0">
|
||||
<h2 className="text-2xl">{"Cover"}</h2>
|
||||
<h2 id={"cover"} className="text-2xl">
|
||||
{"Cover"}
|
||||
</h2>
|
||||
|
||||
<Chip>
|
||||
{selectedScan.language?.data?.attributes?.code ===
|
||||
selectedScan.source_language?.data?.attributes?.code
|
||||
? "Scan"
|
||||
: "Scanlation"}
|
||||
</Chip>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row flex-wrap gap-4 pb-6 place-items-center">
|
||||
@ -97,6 +109,74 @@ export default function ScanSetCover(props: Props): JSX.Element {
|
||||
localesIndex={selectedScanIndex}
|
||||
setLocalesIndex={setSelectedScanIndex}
|
||||
/>
|
||||
|
||||
<div className="grid place-items-center place-content-center">
|
||||
<p className="font-headers">{langui.status}:</p>
|
||||
<ToolTip
|
||||
content={getStatusDescription(selectedScan.status, langui)}
|
||||
maxWidth={"20rem"}
|
||||
>
|
||||
<Chip>{selectedScan.status}</Chip>
|
||||
</ToolTip>
|
||||
</div>
|
||||
|
||||
{selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
|
||||
<div>
|
||||
<p className="font-headers">{"Scanners"}:</p>
|
||||
<div className="grid place-items-center place-content-center gap-2">
|
||||
{selectedScan.scanners.data.map((scanner) => (
|
||||
<>
|
||||
{scanner.attributes && (
|
||||
<RecorderChip
|
||||
key={scanner.id}
|
||||
langui={langui}
|
||||
recorder={scanner.attributes}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
|
||||
<div>
|
||||
<p className="font-headers">{"Cleaners"}:</p>
|
||||
<div className="grid place-items-center place-content-center gap-2">
|
||||
{selectedScan.cleaners.data.map((cleaner) => (
|
||||
<>
|
||||
{cleaner.attributes && (
|
||||
<RecorderChip
|
||||
key={cleaner.id}
|
||||
langui={langui}
|
||||
recorder={cleaner.attributes}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedScan.typesetters &&
|
||||
selectedScan.typesetters.data.length > 0 && (
|
||||
<div>
|
||||
<p className="font-headers">{"Typesetters"}:</p>
|
||||
<div className="grid place-items-center place-content-center gap-2">
|
||||
{selectedScan.typesetters.data.map((typesetter) => (
|
||||
<>
|
||||
{typesetter.attributes && (
|
||||
<RecorderChip
|
||||
key={typesetter.id}
|
||||
langui={langui}
|
||||
recorder={typesetter.attributes}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
|
||||
|
||||
@ -7,6 +7,45 @@ query getLibraryItemScans($slug: String, $language_code: String) {
|
||||
title
|
||||
subtitle
|
||||
images {
|
||||
status
|
||||
language {
|
||||
data {
|
||||
attributes {
|
||||
code
|
||||
}
|
||||
}
|
||||
}
|
||||
source_language {
|
||||
data {
|
||||
attributes {
|
||||
code
|
||||
}
|
||||
}
|
||||
}
|
||||
scanners {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
...recorderChip
|
||||
}
|
||||
}
|
||||
}
|
||||
cleaners {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
...recorderChip
|
||||
}
|
||||
}
|
||||
}
|
||||
typesetters {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
...recorderChip
|
||||
}
|
||||
}
|
||||
}
|
||||
cover {
|
||||
full {
|
||||
data {
|
||||
@ -55,13 +94,6 @@ query getLibraryItemScans($slug: String, $language_code: String) {
|
||||
}
|
||||
}
|
||||
}
|
||||
language {
|
||||
data {
|
||||
attributes {
|
||||
code
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thumbnail {
|
||||
data {
|
||||
|
||||
@ -68,6 +68,16 @@ export default function LibrarySlug(props: Props): JSX.Element {
|
||||
const [lightboxImages, setLightboxImages] = useState([""]);
|
||||
const [lightboxIndex, setLightboxIndex] = useState(0);
|
||||
|
||||
let displayOpenScans = false;
|
||||
if (item?.contents?.data)
|
||||
for (const content of item.contents.data) {
|
||||
if (
|
||||
content.attributes?.scan_set &&
|
||||
content.attributes.scan_set.length > 0
|
||||
)
|
||||
displayOpenScans = true;
|
||||
}
|
||||
|
||||
const subPanel = (
|
||||
<SubPanel>
|
||||
<ReturnButton
|
||||
@ -201,10 +211,10 @@ export default function LibrarySlug(props: Props): JSX.Element {
|
||||
"relation-set")
|
||||
) && (
|
||||
<>
|
||||
{item?.urls && item?.urls?.length ? (
|
||||
{item?.urls && item.urls.length ? (
|
||||
<div className="flex flex-row place-items-center gap-3">
|
||||
<p>Available at</p>
|
||||
{item?.urls?.map((url) => (
|
||||
{item.urls.map((url) => (
|
||||
<>
|
||||
{url?.url && (
|
||||
<Button
|
||||
@ -428,7 +438,12 @@ export default function LibrarySlug(props: Props): JSX.Element {
|
||||
|
||||
{item?.contents && item.contents.data.length > 0 && (
|
||||
<div id="contents" className="w-full grid place-items-center gap-8">
|
||||
<h2 className="text-2xl">{langui.contents}</h2>
|
||||
<h2 className="text-2xl -mb-6">{langui.contents}</h2>
|
||||
{displayOpenScans && (
|
||||
<Button href={`/library/${item.slug}/scans`}>
|
||||
{langui.view_scans}
|
||||
</Button>
|
||||
)}
|
||||
<div className="grid gap-4 w-full">
|
||||
{item.contents.data.map((content) => (
|
||||
<ContentTOCLine
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user