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

<template>
    <div class="bg-white rounded-sm shadow mb-2">
        <!-- En-tête du volume -->
        <div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
            <!-- Partie gauche -->
            <div class="flex items-center space-x-4">
                <BookmarkIcon class="h-8 w-8 text-gray-500" />
                <h2 class="text-xl font-semibold w-28">Volume {{ String(volume.number).padStart(2, '0') }}</h2>
                <div class="flex items-center w-16">
                    <span
                        :class="[
                            'px-2 py-1 text-sm rounded w-full text-center text-white',
                            {
                                'bg-red-500': volume.downloadedChapter === 0,
                                'bg-yellow-500':
                                    volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
                                'bg-green-500': volume.downloadedChapter === volume.totalChapter
                            }
                        ]">
                        {{ volume.downloadedChapter }}/{{ volume.totalChapter }}
                    </span>
                </div>
            </div>

            <!-- Bouton toggle -->
            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <component
                    :is="isOpen ? ChevronUpIcon : ChevronDownIcon"
                    class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
                    @click="toggleVolume" />
            </div>

            <!-- Actions du volume -->
            <div class="flex space-x-2 text-xl text-bold">
                <button
                    class="w-8 text-center"
                    @click="handleSearch"
                    :class="{
                        'text-yellow-500 cursor-wait': isSearching,
                        'text-gray-500 hover:text-green-500': !isSearching
                    }">
                    <MagnifyingGlassIcon class="h-6 w-6" />
                </button>
                <button class="w-8 text-center" @click="handleDownload">
                    <ArrowDownTrayIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
                </button>
            </div>
        </div>

        <!-- Liste des chapitres -->
        <MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" />

        <!-- Chevron de fermeture -->
        <div v-show="isOpen" class="flex justify-center p-2 py bg-white rounded-b-sm">
            <ChevronUpIcon
                class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
                @click="toggleVolume" />
        </div>
    </div>
</template>

<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';

    const props = defineProps({
        volume: {
            type: Object,
            required: true
        },
        mangaSlug: {
            type: String,
            required: true
        },
        isOpen: {
            type: Boolean,
            default: false
        }
    });

    const store = useMangaStore();
    const isOpen = ref(props.isOpen);
    const isSearching = ref(false);

    const toggleVolume = () => {
        isOpen.value = !isOpen.value;
    };

    const handleSearch = async () => {
        if (isSearching.value) return; // Éviter les clicks multiples

        try {
            isSearching.value = true;
            console.log(
                `Recherche du volume ${props.volume.number} - Lancement du scraping de ${props.volume.chapters.length} chapitres`
            );

            // Récupérer tous les chapitres non disponibles du volume
            const chaptersToSearch = props.volume.chapters
                .filter(chapter => !chapter.isAvailable)
                .map(chapter => chapter.id);

            if (chaptersToSearch.length === 0) {
                console.log('Tous les chapitres sont déjà disponibles !');
                isSearching.value = false;
                return;
            }

            console.log(`Chapitres à scraper: ${chaptersToSearch.length}`);

            // Lancer le scraping de chaque chapitre non disponible en séquentiel
            for (const chapterId of chaptersToSearch) {
                console.log(`Scraping du chapitre ${chapterId}...`);
                await store.searchChapter(chapterId);
                // Petite pause entre chaque requête pour éviter de surcharger le serveur
                await new Promise(resolve => setTimeout(resolve, 500));
            }

            console.log(`Scraping des chapitres du volume ${props.volume.number} terminé`);
        } catch (error) {
            console.error(`Erreur lors du scraping du volume ${props.volume.number}:`, error);
        } finally {
            isSearching.value = false;
        }
    };

    const handleDownload = async () => {
        // TODO: Implémenter le téléchargement du volume
        console.log('Téléchargement du volume:', props.volume.number);
    };
</script>