colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: amélioration de la gestion des erreurs et des états de chargement dans le composant MangaDetails, ajout de sections pour les volumes et mise à jour des conditions d'affichage pour une meilleure expérience utilisateur.

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-04-01 16:19:14 +02:00
parent d8e1f3a0cb
commit fcfbf140a3
1 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
View File

@@ -1,18 +1,28 @@
<template> <template>
<div v-if="loading" class="flex justify-center items-center h-64"> <div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div> {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
</div>
<div v-else-if="error && !currentManga" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{{ error.message || 'Une erreur est survenue.' }}
</div> </div>
<div v-else-if="currentManga" class="relative"> <div v-else-if="currentManga" class="relative">
<div v-if="isRefreshing" class="absolute top-2 right-2 text-gray-500"> <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500">
<ArrowPathIcon class="h-5 w-5 animate-spin" /> <ArrowPathIcon class="h-5 w-5 animate-spin" />
</div> </div>
<MangaHeader :manga="currentManga" /> <MangaHeader :manga="currentManga" />
<MangaVolumeList :volumes="volumes" :manga-slug="currentManga.slug" />
<!-- Section Volumes -->
<div class="mt-8">
<div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
</div>
<div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
</div>
<MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" />
</div>
</div>
<div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div> </div>
<div v-else class="text-center text-gray-500 py-10"> Aucun manga sélectionné ou trouvé. </div> <div v-else class="text-center text-gray-500 py-10"> Aucun manga sélectionné ou trouvé. </div>