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:
parent
330a0fac34
commit
7f9d583c94
@@ -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'
|
||||
}
|
||||
]
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user