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

Display library item's categories on its page

Browse Source
This commit is contained in:
DrMint 2022-03-11 00:32:36 +01:00
parent 252a1af799
commit 1a9f5ae41b
4 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Library/LibraryItemsPreview.tsx
View File

@ -63,31 +63,30 @@ export default function LibraryItemsPreview(
))}
</div>
{item.release_date ||
(item.price && (
<div className="grid grid-flow-col w-full">
{item.release_date && (
<p className="mobile:text-xs text-sm">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
event
</span>
{prettyDate(item.release_date)}
</p>
)}
{item.price && props.currencies && (
<p className="mobile:text-xs text-sm justify-self-end">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
shopping_cart
</span>
{prettyPrice(
item.price,
props.currencies,
appLayout.currency
)}
</p>
)}
</div>
))}
{(item.release_date || item.price) && (
<div className="grid grid-flow-col w-full">
{item.release_date && (
<p className="mobile:text-xs text-sm">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
event
</span>
{prettyDate(item.release_date)}
</p>
)}
{item.price && props.currencies && (
<p className="mobile:text-xs text-sm justify-self-end">
<span className="material-icons !text-base translate-y-[.15em] mr-1">
shopping_cart
</span>
{prettyPrice(
item.price,
props.currencies,
appLayout.currency
)}
</p>
)}
</div>
)}
</div>
</div>
</Link>

18
src/graphql/operation.graphql
View File

@ -363,6 +363,15 @@ query getLibraryItem($slug: String, $language_code: String) {
}
}
}
categories {
data {
id
attributes {
name
short
}
}
}
size {
width
height
@ -532,6 +541,15 @@ query getLibraryItem($slug: String, $language_code: String) {
}
}
}
categories {
data {
id
attributes {
name
short
}
}
}
metadata {
__typename
... on ComponentMetadataBooks {

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

@ -522,6 +522,18 @@ export type GetLibraryItemQuery = {
};
};
};
categories: {
__typename: "CategoryRelationResponseCollection";
data: Array<{
__typename: "CategoryEntity";
id: string;
attributes: {
__typename: "Category";
name: string;
short: string;
};
}>;
};
size: {
__typename: "ComponentBasicsSize";
width: number;
@ -738,6 +750,18 @@ export type GetLibraryItemQuery = {
};
};
};
categories: {
__typename: "CategoryRelationResponseCollection";
data: Array<{
__typename: "CategoryEntity";
id: string;
attributes: {
__typename: "Category";
name: string;
short: string;
};
}>;
};
metadata: Array<
| {
__typename: "ComponentMetadataAudio";

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

@ -216,6 +216,20 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
</div>
)}
</div>
{item.categories.data.length > 0 && (
<div>
<h3 className="text-xl">{langui.categories}</h3>
<div className="flex flex-row flex-wrap place-items-center place-content-start gap-2">
{item.categories.data.map((category) => (
<Chip key={category.id}>
{category.attributes.short}
</Chip>
))}
</div>
</div>
)}
{item.size && (
<>
<h3 className="text-xl">{langui.size}</h3>