From cdcc953ea2b0b261b2b177fa83d9bcbcc7c4ed1f Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 14 Oct 2025 11:14:25 +0200
Subject: [PATCH] Metadatafetcher template #176

---
 website/app/composables/FetchKeys.ts          |  1 +
 .../download/[mangaConnectorName].vue}        |  2 +-
 website/app/pages/manga/[mangaId]/index.vue   | 59 ++++++++++++-------
 .../linkMetadata/[metadataFetcherName].vue    | 31 ++++++++++
 website/app/pages/search.vue                  |  2 +-
 5 files changed, 73 insertions(+), 22 deletions(-)
 rename website/app/pages/{download/[mangaconnectorName]/[mangaId].vue => manga/[mangaId]/download/[mangaConnectorName].vue} (96%)
 create mode 100644 website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue

diff --git a/website/app/composables/FetchKeys.ts b/website/app/composables/FetchKeys.ts
index 18c7fe1..e481d04 100644
--- a/website/app/composables/FetchKeys.ts
+++ b/website/app/composables/FetchKeys.ts
@@ -3,4 +3,5 @@ export const FetchKeys = {
     Chapters: { All: 'Chapters' },
     Manga: { All: 'Manga', Id: (id: string) => `Manga/${id}` },
     MangaConnector: { Id: (id: string) => `MangaConnector/${id}`, All: 'MangaConnector' },
+    Metadata: { Fetchers: 'Metadata', Links: 'Metadata/Links', Manga: (mangaId: string) => `Metadata/Links/${mangaId}` },
 };
diff --git a/website/app/pages/download/[mangaconnectorName]/[mangaId].vue b/website/app/pages/manga/[mangaId]/download/[mangaConnectorName].vue
similarity index 96%
rename from website/app/pages/download/[mangaconnectorName]/[mangaId].vue
rename to website/app/pages/manga/[mangaId]/download/[mangaConnectorName].vue
index 8c7a392..9e3e6c9 100644
--- a/website/app/pages/download/[mangaconnectorName]/[mangaId].vue
+++ b/website/app/pages/manga/[mangaId]/download/[mangaConnectorName].vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
-const mangaConnectorName = route.params.mangaconnectorName as string;
+const mangaConnectorName = route.params.mangaConnectorName as string;
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
 const libraryId = ref(manga.value?.fileLibraryId);
diff --git a/website/app/pages/manga/[mangaId]/index.vue b/website/app/pages/manga/[mangaId]/index.vue
index 1c411a6..e30c884 100644
--- a/website/app/pages/manga/[mangaId]/index.vue
+++ b/website/app/pages/manga/[mangaId]/index.vue
@@ -2,29 +2,45 @@
     <MangaDetailPage :manga="manga">
         <div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_30%]">
             <ChaptersList v-if="manga" :manga-id="manga.key" />
-            <UCard>
-                <template #header>
-                    <h1>Download</h1>
-                </template>
-                <LibrarySelect :manga-id="mangaId" :library-id="libraryId" class="w-full" />
-                <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between">
-                    <div
-                        v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) =>
+            <div class="flex flex-col gap-2">
+                <UCard>
+                    <template #header>
+                        <h1>Download</h1>
+                    </template>
+                    <LibrarySelect :manga-id="mangaId" :library-id="libraryId" class="w-full" />
+                    <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between">
+                        <div
+                            v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) =>
                             a.mangaConnectorName < b.mangaConnectorName ? -1 : 1
                         )"
-                        :key="mangaconnectorId.key"
-                        class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2">
-                        <MangaconnectorIcon v-bind="mangaconnectorId" />
-                        <UTooltip
-                            :text="mangaconnectorId.useForDownload ? 'Stop downloading from this website' : 'Download from this website'">
-                            <UButton
-                                :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
-                                variant="ghost"
-                                @click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
-                        </UTooltip>
+                            :key="mangaconnectorId.key"
+                            class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2">
+                            <MangaconnectorIcon v-bind="mangaconnectorId" />
+                            <UTooltip
+                                :text="mangaconnectorId.useForDownload ? 'Stop downloading from this website' : 'Download from this website'">
+                                <UButton
+                                    :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
+                                    variant="ghost"
+                                    @click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
+                            </UTooltip>
+                        </div>
                     </div>
-                </div>
-            </UCard>
+                </UCard>
+                <UCard>
+                    <template #header>
+                        <h1>Metadata</h1>
+                    </template>
+                    <UTable v-if="metadataFetchers && metadata" :data="metadataFetchers" :columns="[{header: 'Name', id: 'name'}, {header: '', id: 'link'}]">
+                        <template #name-cell="{ row }">
+                            {{ row.original }}
+                        </template>
+                        <template #link-cell="{ row }">
+                            <UButton v-if="metadata.find(me => me.metadataFetcherName == row.original)">Unlink</UButton>
+                            <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`">Link</UButton>
+                        </template>
+                    </UTable>
+                </UCard>
+            </div>
         </div>
         <template #actions>
             <UButton trailing-icon="i-lucide-merge" :to="`${manga?.key}/merge/`" color="secondary">Merge</UButton>
@@ -49,6 +65,9 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
 });
 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 setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean) => {
     await useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
         method: 'PATCH',
diff --git a/website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue b/website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue
new file mode 100644
index 0000000..65a616a
--- /dev/null
+++ b/website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue
@@ -0,0 +1,31 @@
+<template>
+    <MangaDetailPage :manga="manga">
+        <UCard>
+            <template #header>
+                <h1>{{ metadataFetcherName }}</h1>
+            </template>
+            <template #default>
+                <p>tbd</p>
+            </template>
+        </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('/');
+    },
+});
+
+useHead({ title: `Link Metadata ${manga.value?.name} ${metadataFetcherName}` });
+</script>
diff --git a/website/app/pages/search.vue b/website/app/pages/search.vue
index 594ef54..f76d5c6 100644
--- a/website/app/pages/search.vue
+++ b/website/app/pages/search.vue
@@ -42,7 +42,7 @@
                         :expanded="i === expanded"
                         @click="expanded = expanded === i ? -1 : i">
                         <template #actions="manga">
-                            <UButton :to="`download/${connector.name}/${manga.key}`">Download</UButton>
+                            <UButton :to="`/manga/${manga.key}/download/${connector.name}`">Download</UButton>
                         </template>
                     </MangaCard>
                 </div>