74 lines
2.5 KiB
Vue
74 lines
2.5 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
|
|
}
|
|
}"
|
|
class="text-green-500">
|
|
{{ 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="text-gray-500 hover:text-green-500">
|
|
<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 { MagnifyingGlassIcon, ArrowDownTrayIcon, XMarkIcon, TrashIcon } from '@heroicons/vue/24/solid';
|
|
import { useMangaStore } from '../../application/store/mangaStore';
|
|
|
|
const props = defineProps({
|
|
chapter: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
mangaSlug: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const store = useMangaStore();
|
|
|
|
const handleSearch = async () => {
|
|
// TODO: Implémenter la recherche de chapitre
|
|
console.log('Recherche du chapitre:', props.chapter.id);
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
// TODO: Implémenter la suppression du chapitre
|
|
console.log('Suppression du chapitre:', props.chapter.id);
|
|
};
|
|
|
|
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>
|