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

<template>
    <tr class="border-t dark:border-gray-700 hover:bg-green-100 dark:hover:bg-green-900/20">
        <td class="px-4 py-2 text-gray-900 dark:text-gray-100" :class="{ 'text-green-500 dark:text-green-400': chapter.isAvailable }">
            <template v-if="chapter.isVolumeGroup">{{ chapter.volumeChaptersRange }}</template>
            <template v-else>{{ String(chapter.number).padStart(2, '0') }}</template>
        </td>
        <td class="px-4 py-2 w-full text-left text-gray-900 dark:text-gray-100">
            <router-link
                v-if="chapter.isAvailable"
                class="hover:text-green-500 dark:hover:text-green-400"
                :to="{
                    name: 'reader',
                    params: {
                        chapterId: chapter.id
                    }
                }">
                <template v-if="chapter.isVolumeGroup && chapter.volumeChapterCount > 1">
                    Chapitres {{ chapter.volumeChaptersRange }}
                </template>
                <template v-else>{{ chapter.title || 'Sans titre' }}</template>
            </router-link>
            <span v-else class="text-gray-500 dark:text-gray-400">
                <template v-if="chapter.isVolumeGroup && chapter.volumeChapterCount > 1">
                    Chapitres {{ chapter.volumeChaptersRange }}
                </template>
                <template v-else>{{ chapter.title || 'Sans titre' }}</template>
            </span>
        </td>
        <td class="px-4 py-2 flex justify-end gap-2">
            <button v-if="!chapter.isAvailable" @click="handleSearch" :class="buttonClass">
                <MagnifyingGlassIcon class="h-5 w-5" />
            </button>
            <button v-else @click="handleDelete" class="text-gray-500 hover:text-green-500">
                <XMarkIcon class="h-5 w-5" />
            </button>
            <button @click="handleDownload" :class="downloadButtonClass" :disabled="isDownloading || !chapter.isAvailable">
                <ArrowDownTrayIcon class="h-5 w-5" />
            </button>
            <button @click="handleHide" :class="hideButtonClass" :disabled="isHiding">
                <TrashIcon class="h-5 w-5" />
            </button>
        </td>
    </tr>
</template>

<script setup>
    import { ArrowDownTrayIcon, MagnifyingGlassIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/solid';
import { computed, ref, watch } from 'vue';
import { useMangaStore } from '../../application/store/mangaStore';

    const props = defineProps({
        chapter: {
            type: Object,
            required: true
        },
        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,
        (newValue, oldValue) => {
            console.log(
                `MangaChapter: État du chapitre ${props.chapter.number} (ID: ${props.chapter.id}) modifié - ${oldValue} => ${newValue}`
            );

            // Si le chapitre devient disponible, on arrête le chargement
            if (newValue === true) {
                isLoading.value = false;
            }
        }
    );

    const handleSearch = async () => {
        try {
            console.log(`MangaChapter: Recherche du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
            // Montrer l'indicateur de chargement
            isLoading.value = true;

            // Lancer la recherche du chapitre - L'UI sera mise à jour par l'événement Mercure
            await store.searchChapter(props.chapter.id);
        } catch (error) {
            // En cas d'erreur, on arrête le chargement
            isLoading.value = false;
            console.error('Erreur lors de la recherche du chapitre:', error);
        }
    };

    const handleDelete = async () => {
        try {
            console.log(`MangaChapter: Suppression du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
            await store.deleteChapter(props.chapter.id);
        } catch (error) {
            console.error('Erreur lors de la suppression du chapitre:', error);
        }
    };

    const handleDownload = async () => {
        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 () => {
        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>