colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: page MangaDetails en vue.js

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-03-24 18:01:24 +01:00
parent bee8572dc5
commit 41dc3c51aa
10 changed files with 477 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue Normal file
View File

@@ -0,0 +1,279 @@
<template>
<!-- États de chargement et d'erreur -->
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
<div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{{ error }}
</div>
<div v-else-if="currentManga" class="relative">
<!-- Bannière avec image de fond -->
<div class="shadow-lg text-white">
<div class="relative h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${currentManga.imageUrl}')` }">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="absolute inset-0 flex flex-row justify-center p-4">
<!-- Image de couverture -->
<div class="hidden mr-12 xl:block 2xl:block">
<img :src="currentManga.thumbnailUrl" :alt="currentManga.title" class="max-w-72 max-h-72 ml-4">
</div>
<!-- Informations du manga -->
<div class="flex flex-col">
<div class="flex items-center mb-4">
<BookmarkIcon class="h-8 w-8 text-white" />
<h1 class="text-3xl font-bold ml-4">{{ currentManga.title }}</h1>
</div>
<div class="flex items-center mb-4">
<span class="mr-4">{{ currentManga.year }}</span>
<span>Chapitres: {{ currentManga.totalChapters }}</span>
</div>
<div class="flex items-center mb-4">
<FolderIcon class="h-6 w-6 text-gray-400 mr-2" />
<span class="truncate">/media/mangas/{{ currentManga.title }} ({{ currentManga.year }})</span>
<span class="ml-auto bg-green-600 py-1 px-2 rounded">{{ currentManga.status || 'Terminé' }}</span>
</div>
<div class="flex items-center mb-4">
<template v-if="currentManga.tags?.length">
<template v-for="(tag, index) in currentManga.tags.slice(0, 5)" :key="index">
<span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">{{ tag }}</span>
</template>
<span v-if="currentManga.tags.length > 5" class="bg-gray-700 py-1 px-2 rounded-sm mr-2">...</span>
</template>
</div>
<div class="mb-4">
<div class="flex items-center mb-2">
<HeartIcon class="h-6 w-6 text-red-500 mr-2" />
<span>{{ currentManga.rating }}</span>
</div>
<p>{{ currentManga.description }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- Liste des volumes et chapitres -->
<div class="p-4">
<div v-for="volume in volumes" :key="volume.number" class="mb-4">
<div class="bg-white rounded-sm shadow">
<!-- 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.progress === '0/0',
'bg-yellow-500': volume.progress !== volume.chapters.length + '/0',
'bg-green-500': volume.progress === volume.chapters.length + '/0'
}
]">
{{ volume.progress }}
</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="isVolumeOpen(volume.number) ? ChevronUpIcon : ChevronDownIcon"
class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
@click="toggleVolume(volume)"
/>
</div>
<!-- Actions du volume -->
<div class="flex space-x-2 text-xl text-bold">
<button class="w-8 text-center" @click="searchVolume(volume)">
<MagnifyingGlassIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
</button>
<button class="w-8 text-center" @click="downloadVolume(volume)">
<ArrowDownTrayIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
</button>
</div>
</div>
<!-- Liste des chapitres -->
<div v-show="isVolumeOpen(volume.number)" class="p-4 border-t">
<table class="min-w-full table-auto">
<thead>
<tr>
<th class="px-4 py-2 text-left">#</th>
<th class="px-4 py-2 text-left">Titre</th>
<th class="px-4 py-2 text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="chapter in volume.chapters"
:key="chapter.id"
class="border-t hover:bg-green-100">
<td class="px-4 py-2" :class="{ 'text-green-500': chapter.isDownloaded }">
{{ String(chapter.number).padStart(2, '0') }}
</td>
<td class="px-4 py-2 w-full text-left">
<router-link
v-if="chapter.isDownloaded"
:to="{ name: 'reader', params: { mangaSlug: currentManga.slug, chapterNumber: chapter.number, pageNumber: 1 }}"
class="hover: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.isDownloaded"
@click="searchChapter(chapter)"
class="text-gray-500 hover:text-green-500">
<MagnifyingGlassIcon class="h-5 w-5" />
</button>
<button v-else
@click="deleteChapter(chapter)"
class="text-gray-500 hover:text-green-500">
<XMarkIcon class="h-5 w-5" />
</button>
<button @click="downloadChapter(chapter)"
class="text-gray-500 hover:text-green-500">
<ArrowDownTrayIcon class="h-5 w-5" />
</button>
<button @click="hideChapter(chapter)"
class="text-gray-500 hover:text-green-500">
<TrashIcon class="h-5 w-5" />
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMangaStore } from '../../application/store/mangaStore';
import { storeToRefs } from 'pinia';
import {
BookmarkIcon,
FolderIcon,
HeartIcon,
ChevronUpIcon,
ChevronDownIcon,
MagnifyingGlassIcon,
ArrowDownTrayIcon,
XMarkIcon,
TrashIcon
} from '@heroicons/vue/24/outline';
const route = useRoute();
const router = useRouter();
const store = useMangaStore();
const { currentManga, chapters, loading, error } = storeToRefs(store);
// Map réactif pour stocker l'état d'ouverture des volumes
const openVolumes = ref(new Map());
// Organise les chapitres par volumes
const volumes = computed(() => {
if (!chapters.value) return [];
const chaptersArray = Array.isArray(chapters.value) ? chapters.value :
(chapters.value.items ? chapters.value.items : []);
const volumeMap = new Map();
chaptersArray.forEach(chapter => {
const volumeNumber = chapter.volume || 'Unknown';
if (!volumeMap.has(volumeNumber)) {
// Initialiser l'état d'ouverture si ce n'est pas déjà fait
if (!openVolumes.value.has(volumeNumber)) {
openVolumes.value.set(volumeNumber, volumeNumber === chaptersArray[0]?.volume);
}
volumeMap.set(volumeNumber, {
number: volumeNumber,
progress: '0/0',
chapters: []
});
}
volumeMap.get(volumeNumber).chapters.push({
...chapter,
isDownloaded: Boolean(chapter.cbzPath)
});
});
// Calcul du progrès pour chaque volume
for (const volume of volumeMap.values()) {
const downloaded = volume.chapters.filter(c => c.isDownloaded).length;
const total = volume.chapters.length;
volume.progress = `${downloaded}/${total}`;
}
return Array.from(volumeMap.values()).sort((a, b) => b.number - a.number);
});
const isVolumeOpen = (volumeNumber) => {
return openVolumes.value.get(volumeNumber) || false;
};
const toggleVolume = (volume) => {
openVolumes.value.set(volume.number, !openVolumes.value.get(volume.number));
};
const loadData = async () => {
const mangaId = route.params.id;
await Promise.all([
store.fetchMangaDetails(mangaId),
store.fetchMangaChapters(mangaId)
]);
};
// Actions sur les chapitres et volumes
const searchChapter = async (chapter) => {
// TODO: Implémenter la recherche de chapitre
console.log('Recherche du chapitre:', chapter.id);
};
const downloadChapter = async (chapter) => {
// TODO: Implémenter le téléchargement du chapitre
console.log('Téléchargement du chapitre:', chapter.id);
};
const deleteChapter = async (chapter) => {
// TODO: Implémenter la suppression du chapitre
console.log('Suppression du chapitre:', chapter.id);
};
const hideChapter = async (chapter) => {
// TODO: Implémenter le masquage du chapitre
console.log('Masquage du chapitre:', chapter.id);
};
const searchVolume = async (volume) => {
// TODO: Implémenter la recherche du volume
console.log('Recherche du volume:', volume.number);
};
const downloadVolume = async (volume) => {
// TODO: Implémenter le téléchargement du volume
console.log('Téléchargement du volume:', volume.number);
};
onMounted(() => {
loadData();
});
onUnmounted(() => {
store.clearCurrentManga();
});
</script>