12 Commits

Author SHA1 Message Date
f1f54f72e3 responsive layout 2025-10-15 01:29:13 +02:00
852587bd70 recursive navigation for merge 2025-10-15 01:28:52 +02:00
196f2cde20 app navigation cleanup 2025-10-15 00:48:33 +02:00
4177a23fb8 recursive navigation for merge and mangadetail
add remove functionality
2025-10-15 00:33:20 +02:00
bd0e0b26c1 OpenMangaConnector links in new tab 2025-10-15 00:25:22 +02:00
d5e7b77103 recursive navigation 2025-10-15 00:24:41 +02:00
3f6a58c0ed MangaCardList grid gapping
withtag show loading under navigation
2025-10-14 23:52:18 +02:00
3f5c009d2e Styling (fix margins)
Remove expanding MangaCards
Center MangaCardList
Fix LibrarySelect
2025-10-14 23:36:59 +02:00
39a1cb3857 Add "TrangaPage" composable 2025-10-14 21:08:30 +02:00
a622c7c45a Fix manga withtag page layout 2025-10-14 19:45:00 +02:00
7f9d182cc3 Error page styling 2025-10-14 19:44:49 +02:00
d2955b3a9a Fix MangaList details link route error 2025-10-14 19:43:20 +02:00
21 changed files with 224 additions and 205 deletions

View File

@@ -17,25 +17,11 @@
</div> </div>
</NuxtLink> </NuxtLink>
</template> </template>
<template #content> <template #body>
<NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch><Icon name="i-lucide-github" />API</NuxtLink> <UNavigationMenu :items="items" orientation="vertical" variant="link" color="neutral" />
<NuxtLink to="https://github.com/C9Glax/tranga-website" external no-prefetch
><Icon name="i-lucide-github" />Website</NuxtLink
>
<NuxtLink :to="`${$config.public.openFetch.api.baseURL}swagger`" external no-prefetch
><Icon name="i-lucide-book-open" />Swagger</NuxtLink
>
</template> </template>
<template #default> <template #default>
<div class="flex text-dimmed gap-2"> <UNavigationMenu :items="items" orientation="horizontal" variant="link" color="neutral" />
<NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch><Icon name="i-lucide-github" />API</NuxtLink>
<NuxtLink to="https://github.com/C9Glax/tranga-website" external no-prefetch
><Icon name="i-lucide-github" />Website</NuxtLink
>
<NuxtLink :to="`${$config.public.openFetch.api.baseURL}swagger`" external no-prefetch
><Icon name="i-lucide-book-open" />Swagger</NuxtLink
>
</div>
</template> </template>
<template #right> <template #right>
<UButton icon="i-lucide-plus" to="/search" color="primary">Manga</UButton> <UButton icon="i-lucide-plus" to="/search" color="primary">Manga</UButton>
@@ -50,4 +36,13 @@
</UMain> </UMain>
</UApp> </UApp>
</template> </template>
<script setup lang="ts"></script>
<script setup lang="ts">
import type { NavigationMenuItem } from '#ui/components/NavigationMenu.vue';
const items = computed<NavigationMenuItem[]>(() => [
{ label: 'API', to: 'https://github.com/C9Glax/tranga', icon: 'i-lucide-github' },
{ label: 'Website', to: 'https://github.com/C9Glax/tranga/website', icon: 'i-lucide-github' },
{ label: 'Swagger', to: `${useRuntimeConfig().public.openFetch.api.baseURL}swagger`, icon: 'i-lucide-book-open' },
]);
</script>

View File

@@ -9,4 +9,6 @@
:root { :root {
--mangacover-width: 240px; --mangacover-width: 240px;
--mangacover-height: 350px; --mangacover-height: 350px;
--mangacover-width-sm: 180px;
--mangacover-height-sm: 260px;
} }

View File

@@ -8,18 +8,14 @@
<span class="inline">Ch. {{ chapter.chapterNumber }}</span> <span class="inline">Ch. {{ chapter.chapterNumber }}</span>
</p> </p>
</template> </template>
<template #footer>
<div class="flex flex-row gap-1 items-center text-dimmed">
<p>Downloaded:</p>
<Icon v-if="chapter.downloaded" name="i-lucide-circle-check-big" />
<Icon v-else name="i-lucide-circle-x" />
</div>
</template>
<template #description> <template #description>
<p>{{ chapter.fileName }}</p> <p>{{ chapter.fileName }}</p>
</template> </template>
<template #default> <template #default>
<div class="flex flex-row gap-2 w-full"> <div class="flex flex-row gap-2 w-full items-center">
<UTooltip :text="chapter.downloaded ? 'Downloaded' : 'Not downloaded'">
<UIcon :name="chapter.downloaded ? 'i-lucide-cloud-check' : 'i-lucide-cloud-alert'" size="20" />
</UTooltip>
<div <div
v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a, b) => v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a, b) =>
a.mangaConnectorName < b.mangaConnectorName ? -1 : 1 a.mangaConnectorName < b.mangaConnectorName ? -1 : 1

View File

@@ -33,7 +33,7 @@ export interface LibrarySelectProps {
const props = defineProps<LibrarySelectProps>(); const props = defineProps<LibrarySelectProps>();
const library = ref(props.libraryId); const library = computed(() => props.libraryId);
const { data: libraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries }); const { data: libraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
const loading = ref(false); const loading = ref(false);

View File

@@ -2,7 +2,7 @@
<UPageBody v-if="loading"> <UPageBody v-if="loading">
<UPageHero title="Loading..." /> <UPageHero title="Loading..." />
</UPageBody> </UPageBody>
<UPageBody v-else v-bind="$props"> <UPageBody v-else v-bind="$props" class="mt-0 pb-0 px-4 h-full">
<template v-for="(_, slotName) in $slots" #[slotName]> <template v-for="(_, slotName) in $slots" #[slotName]>
<slot :name="slotName" /> <slot :name="slotName" />
</template> </template>

View File

@@ -1,34 +1,12 @@
<template> <template>
<UCard <UCard
v-if="!expanded"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }" :ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) mt-2 mb-2" class="relative max-sm:w-[var(--mangacover-width-sm)] max-sm:h-[var(--mangacover-height-sm)] w-(--mangacover-width) h-(--mangacover-height) mt-4 mr-4">
@click="$emit('click')">
<MangaCover :manga="manga" blur /> <MangaCover :manga="manga" blur />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full"> <div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
<MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" /> <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
</div> </div>
</UCard> </UCard>
<UCard
v-else
orientation="horizontal"
reverse
class="relative max-sm:w-full max-sm:h-full w-[calc(var(--mangacover-width)*2+1.5rem)] h-(--mangacover-height) mt-2 mb-2"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
@click="$emit('click')">
<div class="flex flex-row w-full h-full basis-auto">
<MangaCover :manga="manga" class="shrink-0" />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
<MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
</div>
<div class="flex flex-col h-(--mangacover-height) shrink mx-2 mt-4">
<p class="font-semibold text-xl">{{ manga.name }}</p>
</div>
</div>
<div class="absolute bottom-0 w-full p-2 flex flex-row justify-end">
<slot name="actions" v-bind="manga" />
</div>
</UCard>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -38,10 +16,8 @@ type Manga = components['schemas']['Manga'];
type MinimalManga = components['schemas']['MinimalManga']; type MinimalManga = components['schemas']['MinimalManga'];
defineProps<MangaCardProps>(); defineProps<MangaCardProps>();
defineEmits(['click']);
export interface MangaCardProps extends /* @vue-ignore */ PageCardProps { export interface MangaCardProps extends /* @vue-ignore */ PageCardProps {
manga: Manga | MinimalManga; manga: Manga | MinimalManga;
expanded?: boolean;
} }
</script> </script>

View File

@@ -1,9 +1,14 @@
<template> <template>
<MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i"> <div
<template #actions="forManga"> class="grid min-sm:grid-cols-[repeat(auto-fill,_minmax(var(--mangacover-width),_1fr))] max-sm:grid-cols-[repeat(auto-fill,_minmax(var(--mangacover-width-sm),_1fr))] gap-4">
<UButton :to="`manga/${forManga.key}`">Details</UButton> <MangaCard
</template> v-for="(m, i) in manga"
</MangaCard> :key="m.key"
:manga="m"
:expanded="i === expanded"
class="cursor-pointer"
@click="$emit('click', m)" />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -12,5 +17,7 @@ type Manga = components['schemas']['Manga'];
type MinimalManga = components['schemas']['MinimalManga']; type MinimalManga = components['schemas']['MinimalManga'];
const expanded = ref(-1); const expanded = ref(-1);
defineEmits<{ (e: 'click', manga: MinimalManga | Manga): void }>();
defineProps<{ manga?: (MinimalManga | Manga)[] }>(); defineProps<{ manga?: (MinimalManga | Manga)[] }>();
</script> </script>

View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
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"> class="relative object-contain max-sm:w-[var(--mangacover-width-sm)] max-sm:h-[var(--mangacover-height-sm)] w-(--mangacover-width) h-(--mangacover-height) rounded-lg overflow-clip">
<div <div
v-if="blur" v-if="blur"
class="absolute l-0 t-0 w-full h-full rounded-lg overflow-clip" class="absolute l-0 t-0 w-full h-full rounded-lg overflow-clip"

View File

@@ -1,7 +1,7 @@
<template> <template>
<UPage class="h-full"> <TrangaPage v-bind="$props" :back="backUrl ? { href: backUrl, icon: 'i-lucide-arrow-left', text: 'Back' } : undefined">
<template #left> <template #left>
<div class="flex flex-col gap-2 p-4 bg-elevated"> <div class="flex flex-col gap-2">
<MangaCover v-if="manga" :manga="manga" class="self-center" /> <MangaCover v-if="manga" :manga="manga" class="self-center" />
<USkeleton v-else class="w-[240px] h-[350px]" /> <USkeleton v-else class="w-[240px] h-[350px]" />
<p v-if="manga" class="font-semibold text-xl"> <p v-if="manga" class="font-semibold text-xl">
@@ -10,9 +10,11 @@
</p> </p>
<USkeleton v-else class="text-xl h-20 w-full" /> <USkeleton v-else class="text-xl h-20 w-full" />
<div v-if="manga" class="flex flex-row gap-1 flex-wrap"> <div v-if="manga" class="flex flex-row gap-1 flex-wrap">
<UBadge v-for="author in manga.authors" :key="author.key" variant="outline" color="neutral">{{ author.name }}</UBadge> <UBadge v-for="author in manga.authors" :key="author.key" variant="outline" color="neutral"
><NuxtLink :to="`/manga/author/${author.key}?return=${path}`">{{ author.name }}</NuxtLink></UBadge
>
<UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary" <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary"
><NuxtLink :to="`/manga/tag/${tag}`">{{ tag }}</NuxtLink></UBadge ><NuxtLink :to="`/manga/tag/${tag}?return=${path}`">{{ tag }}</NuxtLink></UBadge
> >
<NuxtLink v-for="link in manga.links" :key="link.key" :to="link.url" external no-prefetch> <NuxtLink v-for="link in manga.links" :key="link.key" :to="link.url" external no-prefetch>
<UBadge variant="outline" color="secondary">{{ link.provider }}</UBadge> <UBadge variant="outline" color="secondary">{{ link.provider }}</UBadge>
@@ -23,29 +25,22 @@
<USkeleton v-else class="w-full h-30" /> <USkeleton v-else class="w-full h-30" />
</div> </div>
</template> </template>
<UPageBody class="relative min-sm:mr-12 max-sm:mx-4"> <template #actions>
<div class="w-full flex flex-row justify-between"> <slot name="actions" />
<div> </template>
<UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton> <slot />
<p v-if="title" class="text-3xl">{{ title }}</p> </TrangaPage>
</div>
<div v-if="manga" class="flex flex-row gap-2">
<slot name="actions" />
</div>
</div>
<slot />
</UPageBody>
</UPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { components } from '#open-fetch-schemas/api'; import type { components } from '#open-fetch-schemas/api';
import TrangaPage, { type PageProps } from '~/components/TrangaPage.vue';
type Manga = components['schemas']['Manga']; type Manga = components['schemas']['Manga'];
const path = useRoute().fullPath;
export interface MangaDetailPageProps { export interface MangaDetailPageProps extends PageProps {
manga?: Manga; manga?: Manga;
title?: string; backUrl?: string;
backPath?: string;
} }
defineProps<MangaDetailPageProps>(); defineProps<MangaDetailPageProps>();

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="w-6 h-6 inline-block align-middle m-1"> <div class="w-6 h-6 inline-block align-middle m-1">
<NuxtLink :href="props.websiteUrl ?? ''"> <NuxtLink :href="props.websiteUrl ?? ''" target="_blank" external no-prefetch>
<UTooltip :text="`${props.useForDownload ? 'Downloading' : 'Not downloading'}, click to see website`"> <UTooltip :text="`${props.useForDownload ? 'Downloading' : 'Not downloading'}, click to see website`">
<NuxtImg <NuxtImg
v-if="mangaConnector" v-if="mangaConnector"

View File

@@ -0,0 +1,36 @@
<template>
<UPageBody v-bind="$props" class="mt-0 pb-0 min-md:pr-4 h-full">
<div class="flex min-md:flex-row max-md:flex-col gap-4 h-full relative">
<div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated min-md:w-3/7 min-xl:w-2/7 max-md:w-full px-4 max-md:px-2 py-4">
<slot name="left" />
</div>
<div :class="['flex flex-col gap-2 w-full py-4 relative max-md:px-2', $slots.left ? '' : 'pl-4']">
<div class="w-full flex flex-row justify-between mb-4">
<div class="flex flex-row gap-6">
<UButton variant="outline" color="neutral" :to="back?.href ?? '/'" :icon="back?.icon ?? 'i-lucide-home'">{{
back?.text ?? 'Home'
}}</UButton>
<slot name="title">
<p v-if="title" class="text-2xl text-primary font-semibold">{{ title }}</p>
</slot>
</div>
<div class="flex flew-row gap-2">
<slot name="actions" />
</div>
</div>
<slot />
</div>
</div>
</UPageBody>
</template>
<script setup lang="ts">
import type { PageBodyProps } from '#ui/components/PageBody.vue';
export interface PageProps extends PageBodyProps {
title?: string;
back?: { href?: string; text?: string; icon?: string };
}
defineProps<PageProps>();
</script>

View File

@@ -1,9 +1,10 @@
<template> <template>
<UPageBody> <UPageBody>
<UPageHero :title="error?.statusCode ?? 'Error'"> <UPageHero :title="String(error?.statusCode) ?? 'Error'" :description="error?.message">
<p>{{ error?.message }}</p> <UButton to="/" class="w-fit place-self-center">Go back home</UButton>
<NuxtLink to="/">Go back home</NuxtLink> <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new" class="w-fit place-self-center hover:underline"
<NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new"><Icon name="i-lucide-github" />Report this issue</NuxtLink> ><Icon name="i-lucide-github" class="mr-2" />Report this issue</NuxtLink
>
</UPageHero> </UPageHero>
</UPageBody> </UPageBody>
</template> </template>

View File

@@ -1,6 +1,6 @@
<template> <template>
<LoadingPage :loading="status === 'pending'" class="p-4 flex flex-row flex-wrap gap-6 mt-0"> <LoadingPage :loading="status === 'pending'">
<MangaCardList :manga="manga" /> <MangaCardList :manga="manga" class="mx-4 mt-2" @click="(m) => navigateTo(`/manga/${m.key}`)" />
</LoadingPage> </LoadingPage>
</template> </template>

View File

@@ -1,43 +0,0 @@
<template>
<MangaDetailPage :manga="manga" back-path="/search">
<UCard>
<template #default>
<div class="flex flex-row gap-2 w-full justify-center">
<LibrarySelect :manga-id="mangaId" :library-id="libraryId" />
<UButton color="primary" :disabled="!libraryId" :loading="loading" @click="onDownloadClick">
Download from {{ mangaConnector?.name }}
<template #trailing>
<NuxtImg :src="mangaConnector?.iconUrl" class="h-lh" />
</template>
</UButton>
</div>
</template>
</UCard>
</MangaDetailPage>
</template>
<script setup lang="ts">
const route = useRoute();
const mangaId = route.params.mangaId as string;
const mangaConnectorName = route.params.mangaConnectorName as string;
const { $api } = useNuxtApp();
const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
const libraryId = ref(manga.value?.fileLibraryId);
const { data: mangaConnector } = await useApi('/v2/MangaConnector/{MangaConnectorName}', {
path: { MangaConnectorName: mangaConnectorName },
key: FetchKeys.MangaConnector.Id(mangaConnectorName),
});
const loading = ref(false);
const onDownloadClick = async () => {
loading.value = true;
await $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
method: 'PATCH',
path: { MangaId: mangaId, MangaConnectorName: mangaConnectorName, IsRequested: true },
});
loading.value = false;
};
useHead({ title: 'Download Manga' });
</script>

View File

@@ -1,13 +1,13 @@
<template> <template>
<MangaDetailPage :manga="manga"> <MangaDetailPage :manga="manga" :back-url="backUrl">
<div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_30%]"> <div class="grid gap-3 max-xl:grid-flow-row-dense min-2xl:grid-cols-[70%_auto] min-xl:grid-cols-[60%_auto]">
<ChaptersList :manga-id="mangaId" /> <ChaptersList :manga-id="mangaId" />
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<UCard> <UCard :class="[flashDownloading ? 'animate-[flash_0.75s_ease_0.5s]' : '']">
<template #header> <template #header>
<h1>Download</h1> <h1 class="font-semibold">Download</h1>
</template> </template>
<LibrarySelect :manga-id="mangaId" :library-id="libraryId" class="w-full" /> <LibrarySelect :manga-id="mangaId" :library-id="manga?.fileLibraryId" class="w-full" />
<div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between"> <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between">
<div <div
v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) => v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) =>
@@ -23,7 +23,7 @@
<UButton <UButton
:icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'" :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
variant="ghost" variant="ghost"
:disabled="!libraryId" :disabled="!manga?.fileLibraryId"
@click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" /> @click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
</UTooltip> </UTooltip>
</div> </div>
@@ -31,7 +31,7 @@
</UCard> </UCard>
<UCard :ui="{ body: 'p-0 sm:p-0' }"> <UCard :ui="{ body: 'p-0 sm:p-0' }">
<template #header> <template #header>
<h1>Metadata</h1> <h1 class="font-semibold">Metadata</h1>
</template> </template>
<UTable <UTable
v-if="metadataFetchers && metadata" v-if="metadataFetchers && metadata"
@@ -41,32 +41,41 @@
{ header: '', id: 'link' }, { header: '', id: 'link' },
]"> ]">
<template #name-cell="{ row }"> <template #name-cell="{ row }">
{{ row.original }} <UTooltip :text="metadata.find((me) => me.metadataFetcherName == row.original)?.identifier ?? undefined">{{
row.original
}}</UTooltip>
</template> </template>
<template #link-cell="{ row }"> <template #link-cell="{ row }">
<UButton <UButton
v-if="metadata.find((me) => me.metadataFetcherName == row.original)" v-if="metadata.find((me) => me.metadataFetcherName == row.original)"
class="float-right px-4"
@click="unlinkMetadataFetcher(row.original)" @click="unlinkMetadataFetcher(row.original)"
>Unlink</UButton >Unlink</UButton
> >
<UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`">Link</UButton> <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}?return=${path}`" class="float-right px-4"
>Link</UButton
>
</template> </template>
</UTable> </UTable>
</UCard> </UCard>
</div> </div>
</div> </div>
<template #actions> <template #actions>
<UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge/`" color="secondary">Merge</UButton> <UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge?return=${path}`" color="secondary">Merge</UButton>
<UButton variant="soft" color="warning" icon="i-lucide-trash" /> <UButton variant="soft" color="warning" icon="i-lucide-trash" @click="remove" />
</template> </template>
</MangaDetailPage> </MangaDetailPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import MangaDetailPage from '~/components/MangaDetailPage.vue'; import MangaDetailPage from '~/components/MangaDetailPage.vue';
const { $api } = useNuxtApp();
const route = useRoute(); const route = useRoute();
const mangaId = route.params.mangaId as string; const mangaId = route.params.mangaId as string;
const { $api } = useNuxtApp(); const backUrl = route.query.return as string | undefined;
const path = route.fullPath;
const flashDownloading = route.query.download;
const { data: manga } = await useApi('/v2/Manga/{MangaId}', { const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
path: { MangaId: mangaId }, path: { MangaId: mangaId },
@@ -77,7 +86,6 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
}, },
lazy: true, lazy: true,
}); });
const libraryId = computed(() => manga.value?.fileLibraryId);
const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true }); const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true });
const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', { const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', {
@@ -102,5 +110,23 @@ const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId)); await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId));
}; };
const remove = async () => {
await $api('/v2/Manga/{MangaId}', { method: 'DELETE', path: { MangaId: mangaId } });
await refreshNuxtData(FetchKeys.Manga.All);
navigateTo('/');
};
useHead({ title: 'Manga' }); useHead({ title: 'Manga' });
</script> </script>
<style>
@keyframes flash {
0%,
100% {
background-color: initial;
}
50% {
background-color: var(--color-secondary);
}
}
</style>

View File

@@ -1,23 +1,21 @@
<template> <template>
<MangaDetailPage :manga="manga" :back-path="`/manga/${mangaId}`"> <MangaDetailPage :manga="manga" :back-url="backUrl" :title="metadataFetcherName">
<h1 class="text-2xl text-secondary font-semibold">{{ metadataFetcherName }}</h1> <div class="flex flex-col flex-wrap gap-2">
<USkeleton v-if="status === 'pending'" class="w-full h-14" /> <USkeleton v-if="status === 'pending'" class="w-full h-14" />
<UCard v-else class="flex flex-wrap gap-2 basis-0"> <UCard v-for="data in searchData" v-else :key="data.identifier">
<div <div class="grid grid-cols-[var(--mangacover-width)_auto] grid-flow-col gap-4">
v-for="data in searchData" <NuxtImg
:key="data.identifier" :src="data.coverUrl ?? '/blahaj.png'"
class="grid grid-cols-[var(--mangacover-width)_auto_auto] auto-rows-fr grid-flow-col gap-4"> alt="cover"
<NuxtImg 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" />
:src="data.coverUrl ?? '/blahaj.png'" <NuxtLink :href="data.url" no-prefetch external target="_blank" class="underline underline-offset-2">
alt="cover" <h2 class="text-xl text-secondary italic">{{ data.name }}</h2>
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" /> </NuxtLink>
<a :href="data.url ?? undefined"> <MDC :value="data.description ?? undefined" class="max-h-full" />
<h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2> <UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>
</a> </div>
<MDC :value="data.description ?? undefined" /> </UCard>
<UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton> </div>
</div>
</UCard>
</MangaDetailPage> </MangaDetailPage>
</template> </template>
@@ -25,6 +23,7 @@
const route = useRoute(); const route = useRoute();
const mangaId = route.params.mangaId as string; const mangaId = route.params.mangaId as string;
const metadataFetcherName = route.params.metadataFetcherName as string; const metadataFetcherName = route.params.metadataFetcherName as string;
const backUrl = route.query.return as string | undefined;
const { $api } = useNuxtApp(); const { $api } = useNuxtApp();
const { data: manga } = await useApi('/v2/Manga/{MangaId}', { const { data: manga } = await useApi('/v2/Manga/{MangaId}', {

View File

@@ -1,28 +1,35 @@
<template> <template>
<UPageBody class="flex flex-col items-center"> <TrangaPage :back="{ href: backUrl ?? `/manga/${mangaId}/merge/`, text: 'Back', icon: 'i-lucide-arrow-left' }">
<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-col items-center justify-center gap-10">
<div class="flex flex-row justify-evenly items-center"> <div class="flex flex-row max-sm:flex-col justify-evenly items-center">
<MangaCard v-if="manga" :manga="manga" :expanded="true" /> <MangaCard v-if="manga" :manga="manga" :expanded="true" />
<USkeleton v-else class="max-w-[600px] w-full h-[350px]" /> <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
<UButton <UButton
icon="i-lucide-merge" icon="i-lucide-merge"
:class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10']" :class="[
size="xl" reverse ? 'min-sm:-rotate-90 rotate-0' : 'min-sm:rotate-90 rotate-180',
variant="ghost" 'transition-transform duration-200 p-5 ml-6 mr-10 mt-10 mb-6',
color="neutral" 'rounded-full',
@click="reverse = !reverse" /> ]"
<MangaCard v-if="target" :manga="target" :expanded="true" /> size="xl"
<USkeleton v-else class="max-w-[600px] w-full h-[350px]" /> variant="soft"
color="primary"
@click="reverse = !reverse" />
<MangaCard v-if="target" :manga="target" :expanded="true" />
<USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
</div>
<p class="text-red-500 animate-pulse font-bold min-sm:text-3xl">This action is irreversible!</p>
<UButton color="warning" variant="outline" class="w-fit" @click="merge">Merge</UButton>
</div> </div>
<p class="text-warning">This action is irreversible!</p> </TrangaPage>
<UButton color="warning" class="w-fit" @click="merge">Merge</UButton>
</UPageBody>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute(); const route = useRoute();
const targetId = route.params.targetId as string; const targetId = route.params.targetId as string;
const mangaId = route.params.mangaId as string; const mangaId = route.params.mangaId as string;
const path = route.fullPath;
const backUrl = route.query.return as string | undefined;
const { $api } = useNuxtApp(); const { $api } = useNuxtApp();
const reverse = ref(false); const reverse = ref(false);
@@ -33,7 +40,7 @@ const merge = async () => {
const from = reverse.value ? mangaId : targetId; const from = reverse.value ? mangaId : targetId;
const to = reverse.value == false ? targetId : mangaId; const to = reverse.value == false ? targetId : mangaId;
await $api('/v2/Manga/{MangaIdFrom}/MergeInto/{MangaIdInto}', { method: 'POST', path: { MangaIdFrom: from, MangaIdInto: to } }); await $api('/v2/Manga/{MangaIdFrom}/MergeInto/{MangaIdInto}', { method: 'POST', path: { MangaIdFrom: from, MangaIdInto: to } });
navigateTo(`/manga/${to}`); navigateTo(`/manga/${to}?return=${path}`);
}; };
useHead({ title: 'Confirm merge' }); useHead({ title: 'Confirm merge' });

View File

@@ -1,21 +1,15 @@
<template> <template>
<UPageBody> <MangaDetailPage :manga="manga" :back-url="backUrl" title="Merge with">
<UPageHeader class="text-3xl px-4" <USkeleton v-if="!mangas" class="w-full h-[350px]" />
>Merge <span v-if="manga" class="italic text-secondary">{{ manga.name }}</span <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}?return=${path}`)" />
><USkeleton v-else as="span" class="w-60 h-lh" /> with</UPageHeader </MangaDetailPage>
>
<UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
<USkeleton v-if="!mangas" class="w-full h-[350px]" />
<NuxtLink v-for="m in mangas.filter((x) => x.key != mangaId)" v-else :key="m.key" :to="`/manga/${mangaId}/merge/${m.key}`">
<MangaCard :manga="m" />
</NuxtLink>
</UPageBody>
</UPageBody>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute(); const route = useRoute();
const mangaId = route.params.mangaId as string; const mangaId = route.params.mangaId as string;
const backUrl = route.query.return as string | undefined;
const path = route.fullPath;
const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) }); const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
const { data: mangas } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All }); const { data: mangas } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });

View File

@@ -0,0 +1,23 @@
<template>
<TrangaPage :back="backUrl ? { href: backUrl, icon: 'i-lucide-arrow-left', text: 'Back' } : undefined">
<template #title>
<h1 class="text-2xl">
Manga with Author <UBadge variant="outline" color="neutral" class="font-semibold text-xl ml-1">{{ author?.name }}</UBadge>
</h1>
</template>
<LoadingPage :loading="status === 'pending'">
<MangaCardList :manga="manga" @click="(m) => navigateTo(`/manga/${m.key}?return=${route.fullPath}`)" />
</LoadingPage>
</TrangaPage>
</template>
<script setup lang="ts">
const route = useRoute();
const authorId = route.params.authorId as string;
const backUrl = route.query.return as string | undefined;
const { data: author } = await useApi('/v2/Author/{AuthorId}', { path: { AuthorId: authorId } });
const { data: manga, status } = await useApi('/v2/Manga/WithAuthorId/{AuthorId}', { path: { AuthorId: authorId }, lazy: true });
useHead({ title: 'Author Search' });
</script>

View File

@@ -1,17 +1,21 @@
<template> <template>
<LoadingPage :loading="status === 'pending'" class="p-4 flex flex-row flex-wrap gap-6 mt-0"> <TrangaPage :back="backUrl ? { href: backUrl, icon: 'i-lucide-arrow-left', text: 'Back' } : undefined">
<UButton variant="soft" to="/" icon="i-lucide-arrow-left">Home</UButton> <template #title>
<h1 class="text-2xl"> <h1 class="text-2xl">
Manga with Tag <span class="text-primary font-semibold">{{ tag }}</span> Manga with Tag <UBadge variant="outline" color="primary" class="font-semibold text-xl ml-1">{{ tag }}</UBadge>
</h1> </h1>
<MangaCardList :manga="manga" /> </template>
</LoadingPage> <LoadingPage :loading="status === 'pending'">
<MangaCardList :manga="manga" @click="(m) => navigateTo(`/manga/${m.key}?return=${route.fullPath}`)" />
</LoadingPage>
</TrangaPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute(); const route = useRoute();
const tag = route.params.tag as string; const tag = route.params.tag as string;
const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag } }); const backUrl = route.query.return as string | undefined;
const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag }, lazy: true });
useHead({ title: 'Tranga' }); useHead({ title: 'Tag search' });
</script> </script>

View File

@@ -1,7 +1,6 @@
<template> <template>
<UPageBody> <TrangaPage>
<UPageSection :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-4 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }" class="h-fit"> <UPageSection :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-4 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }" class="h-fit">
<UButton variant="soft" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
<div class="flex max-sm:flex-col flex-row w-full h-full justify-between gap-4"> <div class="flex max-sm:flex-col flex-row w-full h-full justify-between gap-4">
<UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled color="secondary" /> <UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled color="secondary" />
<UCard class="grow"> <UCard class="grow">
@@ -30,7 +29,7 @@
:ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-1 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }"> :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-1 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }">
<template #description> <template #description>
<p class="text-lg"> <p class="text-lg">
Result for <span class="text-secondary">'{{ searchQuery }}'</span> Result for <span class="text-secondary">{{ searchQuery }}</span>
</p> </p>
</template> </template>
<template #default> <template #default>
@@ -42,13 +41,13 @@
:expanded="i === expanded" :expanded="i === expanded"
@click="expanded = expanded === i ? -1 : i"> @click="expanded = expanded === i ? -1 : i">
<template #actions="manga"> <template #actions="manga">
<UButton :to="`/manga/${manga.key}/download/${connector.name}`">Download</UButton> <UButton :to="`/manga/${manga.key}?download=true&return=${path}`">Download</UButton>
</template> </template>
</MangaCard> </MangaCard>
</div> </div>
</template> </template>
</UPageSection> </UPageSection>
</UPageBody> </TrangaPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -57,6 +56,8 @@ import type { StepperItem } from '@nuxt/ui';
type MangaConnector = components['schemas']['MangaConnector']; type MangaConnector = components['schemas']['MangaConnector'];
type MinimalManga = components['schemas']['MinimalManga']; type MinimalManga = components['schemas']['MinimalManga'];
const path = useRoute().fullPath;
const { data: connectors } = await useApi('/v2/MangaConnector', { key: FetchKeys.MangaConnector.All }); const { data: connectors } = await useApi('/v2/MangaConnector', { key: FetchKeys.MangaConnector.All });
const query = ref<string>(); const query = ref<string>();