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.

This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-06-29 23:25:33 +02:00
parent 8692fa14c6
commit 17f9feea7b
8 changed files with 160 additions and 28 deletions

View File

@@ -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>