From d527f239908b45dddc713c190d09ed50ebb10997 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 14 Oct 2025 13:40:41 +0200
Subject: [PATCH] Add Metadata linking page

---
 website/app/components/MangaCover.vue         |  2 +-
 website/app/pages/manga/[mangaId]/index.vue   | 12 +++++--
 .../linkMetadata/[metadataFetcherName].vue    | 32 ++++++++++++++-----
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/website/app/components/MangaCover.vue b/website/app/components/MangaCover.vue
index 1753e95..4b7fbb0 100644
--- a/website/app/components/MangaCover.vue
+++ b/website/app/components/MangaCover.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="relative 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">
+        class="relative 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">
         <div
             v-if="blur"
             class="absolute l-0 t-0 w-full h-full rounded-lg overflow-clip"
diff --git a/website/app/pages/manga/[mangaId]/index.vue b/website/app/pages/manga/[mangaId]/index.vue
index e30c884..dd1d5b1 100644
--- a/website/app/pages/manga/[mangaId]/index.vue
+++ b/website/app/pages/manga/[mangaId]/index.vue
@@ -35,7 +35,7 @@
                             {{ row.original }}
                         </template>
                         <template #link-cell="{ row }">
-                            <UButton v-if="metadata.find(me => me.metadataFetcherName == row.original)">Unlink</UButton>
+                            <UButton v-if="metadata.find(me => me.metadataFetcherName == row.original)" @click="unlinkMetadataFetcher(row.original)">Unlink</UButton>
                             <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`">Link</UButton>
                         </template>
                     </UTable>
@@ -62,11 +62,12 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
         console.error(e);
         navigateTo('/');
     },
+    lazy: true
 });
 const libraryId = ref(manga.value?.fileLibraryId);
 
-const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers });
-const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Metadata.Manga(mangaId) });
+const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true });
+const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Metadata.Manga(mangaId), lazy: true });
 
 const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean) => {
     await useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
@@ -76,5 +77,10 @@ const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean
     await refreshNuxtData(FetchKeys.Manga.Id(mangaId));
 };
 
+const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
+    await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', { method: 'POST', path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName } });
+    await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
+}
+
 useHead({ title: `Manga ${manga.value?.name}` });
 </script>
diff --git a/website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue b/website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue
index 65a616a..5604a50 100644
--- a/website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue
+++ b/website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue
@@ -1,12 +1,16 @@
 <template>
-    <MangaDetailPage :manga="manga">
-        <UCard>
-            <template #header>
-                <h1>{{ metadataFetcherName }}</h1>
-            </template>
-            <template #default>
-                <p>tbd</p>
-            </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>
@@ -27,5 +31,17 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     },
 });
 
+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>