feat: ajout de la gestion des chapitres dans le store Manga avec des actions pour charger et mettre à jour la disponibilité des chapitres, intégration d'un écouteur Mercure pour les mises à jour en temps réel, et amélioration des composants d'interface utilisateur pour gérer les états de chargement et d'erreur.

assets/vue/app/domain/manga/presentation/composables/useMangaVolumes.js

@@ -1,18 +1,39 @@
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
+import { useMangaStore } from '../../application/store/mangaStore';
 import { useMangaChapters } from './useMangaChapters'; // Importe le composable des chapitres
 
 export function useMangaVolumes(mangaId) {
+    // Récupération du store pour avoir accès aux chapitres mis à jour en temps réel
+    const mangaStore = useMangaStore();
+
     // Utilise le composable des chapitres pour récupérer les données brutes et les états
-    const { data: rawChaptersData, isLoading, isFetching, error, status } = useMangaChapters(mangaId);
+    const { data: rawChaptersData, isLoading, isFetching, error, status, refetch } = useMangaChapters(mangaId);
+
+    // Fonction pour forcer le rechargement des données
+    const refresh = () => {
+        console.log('useMangaVolumes: Rechargement forcé des chapitres');
+        refetch();
+    };
+
+    // Surveiller les changements dans le store pour les chapitres du manga actuel
+    watch(
+        () => mangaStore.mangaChapters[mangaId.value],
+        () => {
+            console.log('useMangaVolumes: Changement détecté dans les chapitres du store');
+            refresh();
+        },
+        { deep: true }
+    );
 
     // Calcule les volumes à partir des données des chapitres
     const volumes = computed(() => {
+        console.log('useMangaVolumes: Recalcul des volumes');
         const chaptersArray = rawChaptersData.value || []; // Utilise la data retournée par useMangaChapters
         if (chaptersArray.length === 0) return [];
 
         const volumeMap = new Map();
         chaptersArray.forEach(chapter => {
-            const volumeNumber = chapter.volume || 'Unknown';
+            const volumeNumber = chapter.volume || '00';
             if (!volumeMap.has(volumeNumber)) {
                 volumeMap.set(volumeNumber, {
                     number: volumeNumber,
@@ -33,8 +54,13 @@ export function useMangaVolumes(mangaId) {
         });
 
         return Array.from(volumeMap.values()).sort((a, b) => {
-            const numA = a.number === 'Unknown' ? -Infinity : Number(a.number);
-            const numB = b.number === 'Unknown' ? -Infinity : Number(b.number);
+            // Cas spécial pour le volume 00, qui doit apparaître en premier
+            if (a.number === '00') return -1;
+            if (b.number === '00') return 1;
+
+            // Pour tous les autres volumes, tri décroissant
+            const numA = Number(a.number);
+            const numB = Number(b.number);
             return numB - numA;
         });
     });
@@ -45,7 +71,8 @@ export function useMangaVolumes(mangaId) {
         isLoading, // L'état de chargement initial des chapitres
         isFetching, // L'état de rafraîchissement des chapitres
         error, // L'erreur potentielle lors du fetch des chapitres
-        status // L'état global ('pending', 'error', 'success')
+        status, // L'état global ('pending', 'error', 'success')
+        refresh
         // On pourrait aussi retourner rawChaptersData si nécessaire ailleurs
     };
 }