From 73ee92168f201593726ba062fac2294396e39093 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Fri, 9 Feb 2024 12:42:13 +0300 Subject: [PATCH] Add source links to creator pages Signed-off-by: Olga Bulat --- .../VCollectionHeader/VCollectionHeader.vue | 78 +++++++++++++----- .../VCollectionHeaders-ltr-sm-linux.png | Bin 36241 -> 37342 bytes .../VCollectionHeaders-rtl-sm-linux.png | Bin 36241 -> 37342 bytes 3 files changed, 56 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue index 8ae307d215b..4490a4126c1 100644 --- a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue +++ b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue @@ -25,10 +25,24 @@ >{{ $t(`collection.link.${collection}`) }}

{{ resultsLabel }}

+ +

+ {{ resultsLabel[0] + }}{{ + source.name + }}{{ resultsLabel[1] }} +

@@ -48,6 +62,7 @@ import { useMediaStore } from "~/stores/media" import VIcon from "~/components/VIcon/VIcon.vue" import VButton from "~/components/VButton.vue" +import VLink from "~/components/VLink.vue" const icons = { tag: "tag", @@ -60,7 +75,7 @@ const icons = { */ export default defineComponent({ name: "VCollectionHeader", - components: { VIcon, VButton }, + components: { VLink, VIcon, VButton }, props: { collectionParams: { type: Object as PropType, @@ -82,14 +97,23 @@ export default defineComponent({ const iconName = computed(() => icons[props.collectionParams.collection]) const collection = computed(() => props.collectionParams.collection) - const sourceName = computed(() => { + const source = computed(() => { if (props.collectionParams.collection === "tag") { - return "" + return { + name: "", + link: "", + } + } + return { + name: providerStore.getProviderName( + props.collectionParams.source, + props.mediaType + ), + link: providerStore.getSourceUrl( + props.collectionParams.source, + props.mediaType + ), } - return providerStore.getProviderName( - props.collectionParams.source, - props.mediaType - ) }) const title = computed(() => { @@ -98,7 +122,7 @@ export default defineComponent({ } else if (props.collectionParams.collection === "creator") { return props.collectionParams.creator } - return sourceName.value + return source.value.name }) const url = computed(() => { @@ -107,10 +131,7 @@ export default defineComponent({ } else if (props.collectionParams.collection === "creator") { return props.creatorUrl } - return providerStore.getSourceUrl( - props.collectionParams.source, - props.mediaType - ) + return source.value.link }) const { getI18nCollectionResultCountLabel } = useI18nResultsCount() @@ -119,19 +140,22 @@ export default defineComponent({ return "" } const resultsCount = mediaStore.results[props.mediaType].count - if (props.collectionParams.collection === "creator") { - return getI18nCollectionResultCountLabel( - resultsCount, - props.mediaType, - "creator", - { source: sourceName.value } - ) - } - return getI18nCollectionResultCountLabel( + const params = + props.collectionParams.collection === "creator" + ? { source: source.value.name } + : undefined + + const label = getI18nCollectionResultCountLabel( resultsCount, props.mediaType, - props.collectionParams.collection + props.collectionParams.collection, + params ) + if (props.collectionParams.collection === "creator") { + const splitLabel = label.split(source.value.name) + return splitLabel.length === 2 ? splitLabel : ["", ""] + } + return label }) const isMd = computed(() => uiStore.isBreakpoint("md")) @@ -157,6 +181,7 @@ export default defineComponent({ collection, title, resultsLabel, + source, url, iconName, isMd, @@ -167,6 +192,15 @@ export default defineComponent({