feat: ajout des fonctionnalités de téléchargement et de masquage des chapitres, avec mise à jour des composants et de l'API pour gérer ces actions.

assets/vue/app/domain/manga/presentation/components/MangaChapter.vue

@@ -23,10 +23,10 @@
             <button v-else @click="handleDelete" class="text-gray-500 hover:text-green-500">
                 <XMarkIcon class="h-5 w-5" />
             </button>
-            <button @click="handleDownload" class="text-gray-500 hover:text-green-500">
+            <button @click="handleDownload" :class="downloadButtonClass" :disabled="isDownloading || !chapter.isAvailable">
                 <ArrowDownTrayIcon class="h-5 w-5" />
             </button>
-            <button @click="handleHide" class="text-gray-500 hover:text-green-500">
+            <button @click="handleHide" :class="hideButtonClass" :disabled="isHiding">
                 <TrashIcon class="h-5 w-5" />
             </button>
         </td>
@@ -46,16 +46,36 @@ import { useMangaStore } from '../../application/store/mangaStore';
         mangaSlug: {
             type: String,
             required: true
+        },
+        mangaId: {
+            type: Number,
+            required: true
         }
     });
 
     const store = useMangaStore();
     const isLoading = ref(false);
+    const isDownloading = ref(false);
+    const isHiding = ref(false);
 
     const buttonClass = computed(() => {
         return isLoading.value ? 'text-yellow-500 cursor-wait' : 'text-gray-500 hover:text-green-500';
     });
 
+    const downloadButtonClass = computed(() => {
+        if (isDownloading.value) {
+            return 'text-yellow-500 cursor-wait';
+        }
+        if (!props.chapter.isAvailable) {
+            return 'text-gray-300 cursor-not-allowed';
+        }
+        return 'text-gray-500 hover:text-green-500';
+    });
+
+    const hideButtonClass = computed(() => {
+        return isHiding.value ? 'text-yellow-500 cursor-wait' : 'text-gray-500 hover:text-green-500';
+    });
+
     // Surveiller les changements d'état du chapitre
     watch(
         () => props.chapter.isAvailable,
@@ -96,12 +116,32 @@ import { useMangaStore } from '../../application/store/mangaStore';
     };
 
     const handleDownload = async () => {
-        // TODO: Implémenter le téléchargement du chapitre
-        console.log('Téléchargement du chapitre:', props.chapter.id);
+        try {
+            console.log(`MangaChapter: Téléchargement du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
+            // Montrer l'indicateur de chargement
+            isDownloading.value = true;
+
+            await store.downloadChapter(props.chapter.id);
+        } catch (error) {
+            console.error('Erreur lors du téléchargement du chapitre:', error);
+        } finally {
+            // Arrêter l'indicateur de chargement
+            isDownloading.value = false;
+        }
     };
 
     const handleHide = async () => {
-        // TODO: Implémenter le masquage du chapitre
-        console.log('Masquage du chapitre:', props.chapter.id);
+        try {
+            console.log(`MangaChapter: Masquage du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
+            // Montrer l'indicateur de chargement
+            isHiding.value = true;
+
+            await store.hideChapter(props.chapter.id, props.mangaId);
+        } catch (error) {
+            console.error('Erreur lors du masquage du chapitre:', error);
+        } finally {
+            // Arrêter l'indicateur de chargement
+            isHiding.value = false;
+        }
     };
 </script>

assets/vue/app/domain/manga/presentation/components/MangaChapterList.vue

@@ -13,7 +13,8 @@
                     v-for="chapter in chapters"
                     :key="chapter.id"
                     :chapter="chapter"
-                    :manga-slug="mangaSlug" />
+                    :manga-slug="mangaSlug"
+                    :manga-id="mangaId" />
             </tbody>
         </table>
     </div>
@@ -30,6 +31,10 @@
         mangaSlug: {
             type: String,
             required: true
+        },
+        mangaId: {
+            type: Number,
+            required: true
         }
     });
 </script>

assets/vue/app/domain/manga/presentation/components/MangaVolume.vue

@@ -48,7 +48,7 @@
         </div>
 
         <!-- Liste des chapitres -->
-        <MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" />
+        <MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" :manga-id="mangaId" />
 
         <!-- Chevron de fermeture -->
         <div v-show="isOpen" class="flex justify-center p-2 py bg-white rounded-b-sm">
@@ -61,15 +61,15 @@
 
 <script setup>
     import {
-        ArrowDownTrayIcon,
-        BookmarkIcon,
-        ChevronDownIcon,
-        ChevronUpIcon,
-        MagnifyingGlassIcon
-    } from '@heroicons/vue/24/outline';
-    import { ref } from 'vue';
-    import { useMangaStore } from '../../application/store/mangaStore';
-    import MangaChapterList from './MangaChapterList.vue';
+    ArrowDownTrayIcon,
+    BookmarkIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+    MagnifyingGlassIcon
+} from '@heroicons/vue/24/outline';
+import { ref } from 'vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+import MangaChapterList from './MangaChapterList.vue';
 
     const props = defineProps({
         volume: {
@@ -80,6 +80,10 @@
             type: String,
             required: true
         },
+        mangaId: {
+            type: Number,
+            required: true
+        },
         isOpen: {
             type: Boolean,
             default: false

assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue

@@ -5,6 +5,7 @@
             :key="volume.number"
             :volume="volume"
             :mangaSlug="mangaSlug"
+            :mangaId="mangaId"
             :isOpen="index === 0" />
     </div>
 </template>
@@ -20,6 +21,10 @@
         mangaSlug: {
             type: String,
             required: true
+        },
+        mangaId: {
+            type: Number,
+            required: true
         }
     });
 </script>