Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

More content displayed on the library item pages

This commit is contained in:
DrMint 2022-01-27 17:52:44 +01:00
parent 33983d38ee
commit 4f575f77c0
6 changed files with 206 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Library/LibraryItemComponent.tsx
View File

@ -1,6 +1,6 @@
import Link from "next/link";
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
import { getAssetURL } from "queries/helpers";
import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers";
import Image from "next/image";
export type LibraryItemComponentProps = {
@ -10,17 +10,6 @@ export type LibraryItemComponentProps = {
export default function LibraryItemComponent(
props: LibraryItemComponentProps
): JSX.Element {
function prettyDate(
date: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]
): string {
return (
date.year +
"/" +
date.month.toString().padStart(2, "0") +
"/" +
date.day.toString().padStart(2, "0")
);
}
return (
<Link href={"/library/" + props.item.attributes.slug} passHref>
@ -31,7 +20,9 @@ export default function LibraryItemComponent(
src={getAssetURL(
props.item.attributes.thumbnail.data.attributes.url
)}
alt={props.item.attributes.thumbnail.data.attributes.alternativeText}
alt={
props.item.attributes.thumbnail.data.attributes.alternativeText
}
height={props.item.attributes.thumbnail.data.attributes.height}
width={props.item.attributes.thumbnail.data.attributes.width}
/>
@ -44,19 +35,22 @@ export default function LibraryItemComponent(
<h3 className="leading-3">{props.item.attributes.subtitle}</h3>
</div>
<div className="grid grid-flow-col">
{props.item.attributes.price ? (
<p className="text-sm">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
event
</span>
{prettyDate(props.item.attributes.release_date)}
</p>
) : (
""
)}
{props.item.attributes.price ? (
<p className="text-sm justify-self-end">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
shopping_cart
</span>
{props.item.attributes.price.currency.data.attributes.symbol}
{props.item.attributes.price.amount}
{prettyPrice(props.item.attributes.price)}
</p>
) : (
""

13
src/graphql/operation.graphql
View File

@ -135,6 +135,19 @@ query getLibraryItem($slug: String, $language_code: String) {
}
}
}
gallery {
data {
id
attributes {
name
alternativeText
caption
width
height
url
}
}
}
release_date {
year
month

16
src/graphql/operations-types.ts
View File

@ -231,6 +231,22 @@ export type GetLibraryItemQuery = {
};
};
};
gallery: {
__typename: "UploadFileRelationResponseCollection";
data: Array<{
__typename: "UploadFileEntity";
id: string;
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
};
}>;
};
release_date: {
__typename: "ComponentBasicsDatepicker";
year: number;

6
src/graphql/schema.graphql
View File

@ -1762,6 +1762,7 @@ input LibraryItemInput {
contents: [ID]
release_date: ComponentBasicsDatepickerInput
descriptions: [ComponentTranslationsLibraryItemsInput]
gallery: [ID]
}
type LibraryItem {
@ -1795,6 +1796,11 @@ type LibraryItem {
pagination: PaginationArg = {}
sort: [String] = []
): [ComponentTranslationsLibraryItems]
gallery(
filters: UploadFileFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): UploadFileRelationResponseCollection
createdAt: DateTime
updatedAt: DateTime
}

142
src/pages/library/[slug].tsx
View File

@ -8,10 +8,16 @@ import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
import { GetLibraryItemQuery } from "graphql/operations-types";
import { getAssetURL } from "queries/helpers";
import {
convertMmToInch,
getAssetURL,
prettyDate,
prettyPrice,
} from "queries/helpers";
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton";
import NavOption from "components/PanelComponents/NavOption";
import LibraryItemComponent from "components/Library/LibraryItemComponent";
type Props = {
libraryItem: GetLibraryItemQuery;
@ -63,13 +69,29 @@ export default function Library(props: Props): JSX.Element {
<hr />
<NavOption title="Summary" url="#summary" border={true} />
{libraryItem.attributes.gallery.data.length > 0 ? (
<NavOption title="Gallery" url="#gallery" border={true} />
) : (
""
)}
<NavOption title="Details" url="#details" border={true} />
{libraryItem.attributes.subitems.data.length > 0 ? (
<NavOption title="Subitems" url="#subitems" border={true} />
) : (
""
)}
{libraryItem.attributes.contents.data.length > 0 ? (
<NavOption title="Content" url="#content" border={true} />
) : (
""
)}
</SubPanel>
<ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid place-items-center gap-8">
<div className="grid place-items-center gap-12">
<div className="cursor-pointer grid items-end relative hover:rounded-3xl w-96 max-w-full mb-16">
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
{libraryItem.attributes.thumbnail.data ? (
@ -134,7 +156,25 @@ export default function Library(props: Props): JSX.Element {
</div>
</div>
<div id="gallery"></div>
{libraryItem.attributes.gallery.data.length > 0 ? (
<div id="gallery" className="grid place-items-center gap-8">
<h2 className="text-2xl">Gallery</h2>
<div className="grid grid-flow-col place-items-center gap-4">
{libraryItem.attributes.gallery.data.map((galleryItem) => (
<Image
key={galleryItem.id}
className="rounded-lg"
src={getAssetURL(galleryItem.attributes.url)}
alt={galleryItem.attributes.alternativeText}
width={galleryItem.attributes.width}
height={galleryItem.attributes.height}
/>
))}
</div>
</div>
) : (
""
)}
<div
id="details"
@ -142,61 +182,95 @@ export default function Library(props: Props): JSX.Element {
>
<div className="max-w-2xl grid place-items-center gap-8">
<h2 className="text-2xl">Details</h2>
<div className="grid grid-cols-3 place-items-center">
<p>Type</p>
<p>Release date</p>
<p>Price</p>
</div>
</div>
<div className="grid grid-flow-col place-items-center gap-8">
<div className="grid place-items-center">
<h3>Type</h3>
</div>
<div id="subitems">
{libraryItem.attributes.subitems.data.map((subitem) => (
<Link
href={`/library/${subitem.attributes.slug}`}
key={subitem.id}
passHref
>
<div>
{subitem.attributes.thumbnail.data ? (
<Image
src={getAssetURL(
subitem.attributes.thumbnail.data.attributes.url
{libraryItem.attributes.release_date ? (
<div className="grid place-items-center">
<h3>Release date</h3>
<p>{prettyDate(libraryItem.attributes.release_date)}</p>
</div>
) : (
""
)}
alt={
subitem.attributes.thumbnail.data.attributes
.alternativeText
}
width={subitem.attributes.thumbnail.data.attributes.width}
height={
subitem.attributes.thumbnail.data.attributes.height
}
/>
{libraryItem.attributes.release_date ? (
<div className="grid place-items-center">
<h3>Price</h3>
<p>{prettyPrice(libraryItem.attributes.price)}</p>
</div>
) : (
""
)}
</div>
</Link>
))}
<h3>Physical size</h3>
<div className="grid grid-flow-col place-items-center gap-8">
<div className="grid place-items-center">
<p className="font-bold">Width</p>
<p>{libraryItem.attributes.size.width} mm</p>
<p>{convertMmToInch(libraryItem.attributes.size.width)} in</p>
</div>
<div className="grid place-items-center">
<p className="font-bold">Height</p>
<p>{libraryItem.attributes.size.height} mm</p>
<p>
{convertMmToInch(libraryItem.attributes.size.height)} in
</p>
</div>
<div className="grid place-items-center">
<p className="font-bold">Thickness</p>
<p>{libraryItem.attributes.size.thickness} mm</p>
<p>
{convertMmToInch(libraryItem.attributes.size.thickness)} in
</p>
</div>
</div>
</div>
</div>
<div id="content">
{libraryItem.attributes.subitems.data.length > 0 ? (
<div id="subitems" className="grid place-items-center gap-8">
<h2 className="text-2xl">Subitems</h2>
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
{libraryItem.attributes.subitems.data.map((subitem) => (
<LibraryItemComponent key={subitem.id} item={subitem} />
))}
</div>
</div>
) : (
""
)}
{libraryItem.attributes.contents.data.length > 0 ? (
<div id="content" className="w-full grid place-items-center">
<h2 className="text-2xl">Content</h2>
<div className="grid gap-4 w-full">
{libraryItem.attributes.contents.data.map((content) => (
<div
key={content.id}
className="grid grid-flow-col gap-4 w-full"
className="grid grid-flow-col gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_auto]"
>
<h3>{content.attributes.title[0].title}</h3>
<p></p>
<p className="border-b-2 h-4 w-full border-dark border-dotted"></p>
<p>
{content.attributes.range[0].__typename ===
"ComponentRangePageRange"
? content.attributes.range[0].starting_page
: ""}
</p>
<button className="text-xs">
<p>{content.attributes.type.data.attributes.slug}</p>
</button>
</div>
))}
</div>
</div>
) : (
""
)}
</div>
</ContentPanel>
</>

26
src/queries/helpers.ts
View File

@ -1,3 +1,29 @@
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
export function getAssetURL(url: string): string {
return process.env.NEXT_PUBLIC_URL_CMS + url;
}
export function prettyDate(
datePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]
): string {
return (
datePicker.year +
"/" +
datePicker.month.toString().padStart(2, "0") +
"/" +
datePicker.day.toString().padStart(2, "0")
);
}
export function prettyPrice(
pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"]
): string {
return (
pricePicker.currency.data.attributes.symbol + pricePicker.amount.toLocaleString()
);
}
export function convertMmToInch(mm: number): string {
return (mm * 0.03937008).toPrecision(3);
}