glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-18 11:20:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix LibrarySelect

Browse Source 
Move recursive routing to trangapage
This commit is contained in:
glax
2025-10-16 21:35:12 +02:00
parent 732e1a7b1f
commit 2b6818b09e
13 changed files with 72 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
website/app/pages/manga/[mangaId]/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<MangaDetailPage :manga="manga" :back-url="backUrl">
<MangaDetailPage :manga="manga">
<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" />
<div class="flex flex-col gap-2">
@@ -7,7 +7,11 @@
<template #header>
<h1 class="font-semibold">Download</h1>
</template>
<LibrarySelect :manga-id="mangaId" :library-id="manga?.fileLibraryId" class="w-full" @library-changed="refreshNuxtData(FetchKeys.Manga.Id(mangaId))" />
<LibrarySelect
:manga-id="mangaId"
:library-id="manga?.fileLibraryId"
class="w-full"
@library-changed="refreshNuxtData(FetchKeys.Manga.Id(mangaId))" />
<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) =>
@@ -41,28 +45,34 @@
{ header: '', id: 'link' },
]">
<template #name-cell="{ row }">
<UTooltip :text="metadata.find((me) => me.metadataFetcherName == row.original)?.identifier ?? undefined">{{
row.original
}}</UTooltip>
<UTooltip :text="metadata.find((me) => me.metadataFetcherName == row.original)?.identifier ?? undefined">
<p class="text-toned">{{ row.original }}</p></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}?return=${path}`" class="float-right px-4"
>Link</UButton
>
class="float-right"
icon="i-lucide-unlink"
@click="unlinkMetadataFetcher(row.original)" />
<UButton
v-else
:to="`/manga/${mangaId}/linkMetadata/${row.original}?return=${$route.fullPath}`"
class="float-right"
icon="i-lucide-link" />
</template>
</UTable>
</UCard>
</div>
</div>
<template #actions>
<UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge?return=${path}`" color="secondary">Merge</UButton>
<UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge?return=${$route.fullPath}`" color="secondary"
>Merge</UButton
>
<UButton variant="soft" color="warning" icon="i-lucide-trash" @click="remove" />
<UTooltip text="Reload" :kbds="['meta', 'R']">
<UButton variant="soft" color="secondary" icon="i-lucide-refresh-ccw" :loading="refreshingData" @click="refreshData" />
</UTooltip>
</template>
</MangaDetailPage>
</template>
@@ -72,8 +82,6 @@ import MangaDetailPage from '~/components/MangaDetailPage.vue';
const { $api } = useNuxtApp();
const route = useRoute();
const mangaId = route.params.mangaId as string;
const backUrl = route.query.return as string | undefined;
const path = route.fullPath;
const flashDownloading = route.query.download;
@@ -116,6 +124,15 @@ const remove = async () => {
navigateTo('/');
};
const refreshingData = ref(false);
const refreshData = async () => {
refreshingData.value = true;
await refreshNuxtData([FetchKeys.Manga.Id(mangaId), FetchKeys.Metadata.Manga(mangaId), FetchKeys.FileLibraries]);
refreshingData.value = false;
};
defineShortcuts({ meta_r: { usingInput: true, handler: refreshData } });
useHead({ title: 'Manga' });
</script>

3
website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue
View File

@@ -1,5 +1,5 @@
<template>
<MangaDetailPage :manga="manga" :back-url="backUrl" :title="metadataFetcherName">
<MangaDetailPage :manga="manga" :title="metadataFetcherName">
<div class="flex flex-col flex-wrap gap-2">
<USkeleton v-if="status === 'pending'" class="w-full h-14" />
<UCard v-for="data in searchData" v-else :key="data.identifier">
@@ -23,7 +23,6 @@
const route = useRoute();
const mangaId = route.params.mangaId as string;
const metadataFetcherName = route.params.metadataFetcherName as string;
const backUrl = route.query.return as string | undefined;
const { $api } = useNuxtApp();
const { data: manga } = await useApi('/v2/Manga/{MangaId}', {

4
website/app/pages/manga/[mangaId]/merge/[targetId].vue
View File

@@ -1,5 +1,5 @@
<template>
<TrangaPage :back="{ href: backUrl ?? `/manga/${mangaId}/merge/`, text: 'Back', icon: 'i-lucide-arrow-left' }">
<TrangaPage>
<div class="flex flex-col items-center justify-center gap-10">
<div class="flex flex-row max-sm:flex-col justify-evenly items-center">
<MangaCard v-if="manga" :manga="manga" :expanded="true" />
@@ -28,8 +28,6 @@
const route = useRoute();
const targetId = route.params.targetId 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 reverse = ref(false);

9
website/app/pages/manga/[mangaId]/merge/index.vue
View File

@@ -1,15 +1,12 @@
<template>
<MangaDetailPage :manga="manga" :back-url="backUrl" title="Merge with">
<MangaDetailPage :manga="manga" title="Merge with">
<USkeleton v-if="!mangas" class="w-full h-[350px]" />
<MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}?return=${path}`)" />
<MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}?return=${$route.fullPath}`)" />
</MangaDetailPage>
</template>
<script setup lang="ts">
const route = useRoute();
const mangaId = route.params.mangaId as string;
const backUrl = route.query.return as string | undefined;
const path = route.fullPath;
const mangaId = useRoute().params.mangaId as string;
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 });