mirror of
https://github.com/C9Glax/tranga-website.git
synced 2025-10-15 09:50:48 +02:00
48 lines
2.1 KiB
Vue
48 lines
2.1 KiB
Vue
<template>
|
|
<MangaDetailPage :manga="manga" :back-path="`/manga/${mangaId}`">
|
|
<h1 class="text-2xl text-secondary font-semibold">{{ metadataFetcherName }}</h1>
|
|
<USkeleton v-if="status === 'pending'" class="w-full h-14" />
|
|
<UCard v-else class="flex flex-wrap gap-2 basis-0">
|
|
<div v-for="data in searchData" :key="data.identifier" class="grid grid-cols-[var(--mangacover-width)_auto_auto] auto-rows-fr grid-flow-col gap-4">
|
|
<NuxtImg :src="data.coverUrl ?? '/blahaj.png'" alt="cover" class="row-span-3 object-contain max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) rounded-lg overflow-clip" />
|
|
<a :href="data.url ?? undefined">
|
|
<h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2>
|
|
</a>
|
|
<p>{{ data.description }}</p>
|
|
<UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>
|
|
</div>
|
|
</UCard>
|
|
</MangaDetailPage>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
const route = useRoute();
|
|
const mangaId = route.params.mangaId as string;
|
|
const metadataFetcherName = route.params.metadataFetcherName as string;
|
|
|
|
const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
|
|
path: { MangaId: mangaId },
|
|
key: FetchKeys.Manga.Id(mangaId),
|
|
onResponseError: (e) => {
|
|
console.error(e);
|
|
navigateTo('/');
|
|
},
|
|
});
|
|
|
|
const { data: searchData, status } = await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/SearchManga/{MangaId}', {
|
|
method: 'POST',
|
|
path: { MetadataFetcherName: metadataFetcherName, MangaId: mangaId },
|
|
lazy: true,
|
|
})
|
|
|
|
const link = async (identifier: string) => {
|
|
await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', { method: 'POST' ,path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName }, body: identifier });
|
|
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
|
|
navigateTo(`/manga/${mangaId}`);
|
|
}
|
|
|
|
useHead({ title: `Link Metadata ${manga.value?.name} ${metadataFetcherName}` });
|
|
</script>
|