From 3b0514fc6b0e645ca8b533eb59a0b64a8cf41ecb Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Wed, 13 Apr 2022 03:06:51 +0200
Subject: [PATCH] Added more info for scans of covers
---
src/components/Library/ScanSetCover.tsx | 92 +++++++++++++++++--
.../operations/getLibraryItemScans.graphql | 46 ++++++++--
src/pages/library/[slug]/index.tsx | 21 ++++-
3 files changed, 143 insertions(+), 16 deletions(-)
diff --git a/src/components/Library/ScanSetCover.tsx b/src/components/Library/ScanSetCover.tsx
index 468ada1..50540e2 100644
--- a/src/components/Library/ScanSetCover.tsx
+++ b/src/components/Library/ScanSetCover.tsx
@@ -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">
diff --git a/src/graphql/operations/getLibraryItemScans.graphql b/src/graphql/operations/getLibraryItemScans.graphql
index 4a4b0fa..d2aaa8d 100644
--- a/src/graphql/operations/getLibraryItemScans.graphql
+++ b/src/graphql/operations/getLibraryItemScans.graphql
@@ -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 {
diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx
index 88958a6..f4b6c13 100644
--- a/src/pages/library/[slug]/index.tsx
+++ b/src/pages/library/[slug]/index.tsx
@@ -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