Fix useFetch misuse (use $fetch instead)

This commit is contained in:
2025-10-14 14:21:20 +02:00
parent 6a5bf947a1
commit a01dc430e6
8 changed files with 31 additions and 14 deletions

View File

@@ -20,6 +20,7 @@
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);
@@ -31,7 +32,7 @@ const { data: mangaConnector } = await useApi('/v2/MangaConnector/{MangaConnecto
const loading = ref(false);
const onDownloadClick = async () => {
loading.value = true;
await useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
await $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
method: 'PATCH',
path: { MangaId: mangaId, MangaConnectorName: mangaConnectorName, IsRequested: true },
});

View File

@@ -21,6 +21,7 @@
<UButton
:icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
variant="ghost"
:disabled="!libraryId"
@click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
</UTooltip>
</div>
@@ -51,9 +52,9 @@
<script setup lang="ts">
import MangaDetailPage from '~/components/MangaDetailPage.vue';
const route = useRoute();
const mangaId = route.params.mangaId as string;
const { $api } = useNuxtApp();
const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
path: { MangaId: mangaId },
@@ -70,7 +71,7 @@ const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: Fe
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 useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
await $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
method: 'PATCH',
path: { MangaId: mangaId, MangaConnectorName: MangaConnectorName, IsRequested: IsRequested },
});
@@ -78,7 +79,7 @@ const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean
};
const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', { method: 'POST', path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName } });
await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', { method: 'POST', path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName } });
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
}

View File

@@ -17,10 +17,10 @@
<script setup lang="ts">
const route = useRoute();
const mangaId = route.params.mangaId as string;
const metadataFetcherName = route.params.metadataFetcherName as string;
const { $api } = useNuxtApp();
const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
path: { MangaId: mangaId },
@@ -38,7 +38,7 @@ const { data: searchData, status } = await useApi('/v2/MetadataFetcher/{Metadata
})
const link = async (identifier: string) => {
await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', { method: 'POST' ,path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName }, body: identifier });
await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', { method: 'POST' ,path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName }, body: identifier });
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
navigateTo(`/manga/${mangaId}`);
}

View File

@@ -4,12 +4,12 @@
<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" />
<UButton icon="i-lucide-merge" :class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10']" size="xl" variant="ghost" color="neutral" @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-warning">This action is irreversible!</p>
<UButton color="warning" class="w-fit">Merge</UButton>
<UButton color="warning" class="w-fit" @click="merge">Merge</UButton>
</UPageBody>
</template>
@@ -17,9 +17,18 @@
const route = useRoute();
const targetId = route.params.targetId as string;
const mangaId = route.params.mangaId as string;
const { $api } = useNuxtApp();
const reverse = ref(false);
const { data: target } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: targetId }, key: FetchKeys.Manga.Id(targetId) });
const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
const merge = async () => {
const from = reverse.value ? mangaId : targetId;
const to = reverse.value == false ? targetId : mangaId;
await $api('/v2/Manga/{MangaIdFrom}/MergeInto/{MangaIdInto}', { method: 'POST', path: { MangaIdFrom: from, MangaIdInto: to } });
navigateTo(`/manga/${to}`);
}
useHead({ title: `Merge ${manga.value?.name} with ${target.value?.name}` });
</script>

View File

@@ -5,7 +5,8 @@
><USkeleton v-else as="span" class="w-60 h-lh" /> with</UPageHeader
>
<UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
<NuxtLink v-for="m in mangas" :key="m.key" :to="m.key">
<USkeleton v-if="!mangas" class="w-full h-[350px]" />
<NuxtLink v-for="m in mangas.filter(m => m.key != mangaId)" v-else :key="m.key" :to="m.key">
<MangaCard :manga="m" />
</NuxtLink>
</UPageBody>