tranga-website/website/app/pages/manga/[mangaId]/index.vue

<template>
    <MangaDetailPage :manga="manga">
        <div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_auto]">
            <ChaptersList :manga-id="mangaId" />
            <div class="flex flex-col gap-2">
                <UCard :class="[flashDownloading ? 'animate-[flash_0.75s_ease_0.5s]' : '']">
                    <template #header>
                        <h1 class="font-semibold">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"
                                    :disabled="!libraryId"
                                    @click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
                            </UTooltip>
                        </div>
                    </div>
                </UCard>
                <UCard :ui="{ body: 'p-0 sm:p-0' }">
                    <template #header>
                        <h1 class="font-semibold">Metadata</h1>
                    </template>
                    <UTable
                        v-if="metadataFetchers && metadata"
                        :data="metadataFetchers"
                        :columns="[
                            { header: 'Name', id: 'name' },
                            { header: '', id: 'link' },
                        ]">
                        <template #name-cell="{ row }">
                            <UTooltip :text="metadata.find((me) => me.metadataFetcherName == row.original)?.identifier ?? undefined">{{
                                row.original
                            }}</UTooltip>
                        </template>
                        <template #link-cell="{ row }">
                            <UButton
                                v-if="metadata.find((me) => me.metadataFetcherName == row.original)"
                                class="float-right px-4"
                                @click="unlinkMetadataFetcher(row.original)"
                                >Unlink</UButton
                            >
                            <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`" class="float-right px-4">Link</UButton>
                        </template>
                    </UTable>
                </UCard>
            </div>
        </div>
        <template #actions>
            <UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge/`" color="secondary">Merge</UButton>
            <UButton variant="soft" color="warning" icon="i-lucide-trash" />
        </template>
    </MangaDetailPage>
</template>

<script setup lang="ts">
import MangaDetailPage from '~/components/MangaDetailPage.vue';
const route = useRoute();
const mangaId = route.params.mangaId as string;
const { $api } = useNuxtApp();
const flashDownloading = route.query.download;

const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
    path: { MangaId: mangaId },
    key: FetchKeys.Manga.Id(mangaId),
    onResponseError: (e) => {
        console.error(e);
        navigateTo('/');
    },
    lazy: true,
});
const libraryId = computed(() => manga.value?.fileLibraryId);

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 $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
        method: 'PATCH',
        path: { MangaId: mangaId, MangaConnectorName: MangaConnectorName, IsRequested: IsRequested },
    });
    await refreshNuxtData(FetchKeys.Manga.Id(mangaId));
};

const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
    await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', {
        method: 'POST',
        path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName },
    });
    await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId));
};

useHead({ title: 'Manga' });
</script>

<style>
@keyframes flash {
    0%,
    100% {
        background-color: initial;
    }
    50% {
        background-color: var(--color-secondary);
    }
}
</style>