100 lines
3.7 KiB
Vue
100 lines
3.7 KiB
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">
|
|
<MagnifyingGlassIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
|
|
</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 { ref } from 'vue';
|
|
import {
|
|
BookmarkIcon,
|
|
ChevronUpIcon,
|
|
ChevronDownIcon,
|
|
MagnifyingGlassIcon,
|
|
ArrowDownTrayIcon
|
|
} from '@heroicons/vue/24/outline';
|
|
import MangaChapterList from './MangaChapterList.vue';
|
|
import { useMangaStore } from '../../application/store/mangaStore';
|
|
|
|
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 toggleVolume = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
|
|
const handleSearch = async () => {
|
|
// TODO: Implémenter la recherche du volume
|
|
console.log('Recherche du volume:', props.volume.number);
|
|
};
|
|
|
|
const handleDownload = async () => {
|
|
// TODO: Implémenter le téléchargement du volume
|
|
console.log('Téléchargement du volume:', props.volume.number);
|
|
};
|
|
</script>
|