feat: ajout de la gestion de l'expansion des volumes dans les composants MangaVolume et MangaVolumeList. Intégration de la synchronisation de l'état d'expansion avec les props, ainsi que des méthodes pour étendre ou réduire tous les volumes. Amélioration de l'interface utilisateur pour une navigation plus fluide entre les volumes.

This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-07-23 16:08:20 +02:00
parent 330a0fac34
commit 7f9d583c94
3 changed files with 103 additions and 14 deletions

View File

@@ -27,7 +27,13 @@
<div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
</div>
<MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" :manga-id="mangaId" />
<MangaVolumeList
v-else
ref="volumeListRef"
:volumes="volumes"
:manga-slug="currentManga.slug"
:manga-id="mangaId"
v-model:expand-all="isAllExpanded" />
</div>
<!-- Modale des sources préférées -->
@@ -80,8 +86,8 @@
BookmarkIcon,
BookmarkSlashIcon,
ChevronDoubleDownIcon,
ChevronDoubleUpIcon,
Cog6ToothIcon,
DocumentArrowDownIcon,
PencilSquareIcon,
TrashIcon,
WrenchIcon
@@ -118,6 +124,10 @@ import { useMangaStore } from '../../application/store/mangaStore';
const isSavingChapters = ref(false);
const chaptersError = ref(null);
// État d'expansion des volumes
const isAllExpanded = ref(false);
const volumeListRef = ref(null);
const {
data: currentManga,
isLoading: isLoadingDetails,
@@ -270,6 +280,17 @@ import { useMangaStore } from '../../application/store/mangaStore';
}
};
// Fonction pour étendre/réduire tous les volumes
const handleExpandAll = () => {
if (!volumeListRef.value) return;
if (isAllExpanded.value) {
volumeListRef.value.collapseAllVolumes();
} else {
volumeListRef.value.expandAllVolumes();
}
};
const toolbarConfig = computed(() => ({
leftSection: [
{
@@ -286,12 +307,6 @@ import { useMangaStore } from '../../application/store/mangaStore';
type: 'button',
onClick: openManageChaptersModal
},
{
icon: DocumentArrowDownIcon,
label: 'Manage cbz',
type: 'button',
onClick: () => console.log('Manage cbz')
},
{
icon: Cog6ToothIcon,
label: 'Preferred Sources',
@@ -322,10 +337,11 @@ import { useMangaStore } from '../../application/store/mangaStore';
onClick: () => console.log('Delete')
},
{
icon: ChevronDoubleDownIcon,
label: 'Expand all',
icon: isAllExpanded.value ? ChevronDoubleUpIcon : ChevronDoubleDownIcon,
label: isAllExpanded.value ? 'Collapse all' : 'Expand all',
type: 'button',
onClick: () => console.log('Expand all')
onClick: handleExpandAll,
variant: isAllExpanded.value ? 'active' : 'default'
}
]
}));