mirror of
https://github.com/C9Glax/tranga-website.git
synced 2025-10-11 21:29:50 +02:00
Add merge page
This commit is contained in:
29
website/app/pages/manga/[mangaId]/merge/[targetId].vue
Normal file
29
website/app/pages/manga/[mangaId]/merge/[targetId].vue
Normal 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>
|
15
website/app/pages/manga/[mangaId]/merge/index.vue
Normal file
15
website/app/pages/manga/[mangaId]/merge/index.vue
Normal 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>
|
Reference in New Issue
Block a user