108 lines
3.8 KiB
Vue
108 lines
3.8 KiB
Vue
<template>
|
|
<tr class="border-t hover:bg-green-100">
|
|
<td class="px-4 py-2" :class="{ 'text-green-500': chapter.isAvailable }">
|
|
{{ String(chapter.number).padStart(2, '0') }}
|
|
</td>
|
|
<td class="px-4 py-2 w-full text-left">
|
|
<router-link
|
|
v-if="chapter.isAvailable"
|
|
:to="{
|
|
name: 'reader',
|
|
params: {
|
|
chapterId: chapter.id
|
|
}
|
|
}">
|
|
{{ chapter.title || 'Sans titre' }}
|
|
</router-link>
|
|
<span v-else>{{ chapter.title || 'Sans titre' }}</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="text-gray-500 hover:text-green-500">
|
|
<ArrowDownTrayIcon class="h-5 w-5" />
|
|
</button>
|
|
<button @click="handleHide" class="text-gray-500 hover:text-green-500">
|
|
<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
|
|
}
|
|
});
|
|
|
|
const store = useMangaStore();
|
|
const isLoading = ref(false);
|
|
|
|
const buttonClass = computed(() => {
|
|
return isLoading.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 () => {
|
|
// TODO: Implémenter le téléchargement du chapitre
|
|
console.log('Téléchargement du chapitre:', props.chapter.id);
|
|
};
|
|
|
|
const handleHide = async () => {
|
|
// TODO: Implémenter le masquage du chapitre
|
|
console.log('Masquage du chapitre:', props.chapter.id);
|
|
};
|
|
</script>
|