Add merge page

This commit is contained in:
2025-09-27 22:47:53 +02:00
parent c4b94c007d
commit 01021ef28b
9 changed files with 81 additions and 29 deletions

View File

@@ -0,0 +1,29 @@
<template>
<UPageBody class="flex flex-col items-center">
<UButton
icon="i-lucide-arrow-left"
class="w-fit self-start m-20"
variant="soft"
:to="`/manga/${mangaId}/merge/`"
>Back</UButton
>
<div class="flex flex-row justify-evenly items-center">
<MangaCard v-if="manga" :manga="manga" :expanded="true" />
<USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
<UIcon name="i-lucide-merge" class="rotate-90 px-20" size="50" />
<MangaCard v-if="target" :manga="target" :expanded="true" />
<USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
</div>
<p>This action is irreversible!</p>
<UButton color="warning" class="w-fit">Merge</UButton>
</UPageBody>
</template>
<script setup lang="ts">
const route = useRoute();
const targetId = route.params.targetId as string;
const mangaId = route.params.mangaId as string;
const { data: target } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: targetId } });
const { data: manga } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId } });
</script>

View File

@@ -0,0 +1,15 @@
<template>
<UPageHeader class="text-3xl px-4">Merge <span v-if="manga">{{ manga.name }}</span><USkeleton v-else as="span" class="w-60 h-lh"></USkeleton> into</UPageHeader>
<UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
<NuxtLink v-for="m in mangas" :to="`${m.key}`">
<MangaCard :manga="m" />
</NuxtLink>
</UPageBody>
</template>
<script setup lang="ts">
const route = useRoute();
const { data: manga } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: route.params.mangaId as string } });
const { data: mangas } = useApi('/v2/Manga');
</script>