From 7f9d583c941a1b36d7f6724e8011bb483be95dda Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Wed, 23 Jul 2025 16:08:20 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ajout=20de=20la=20gestion=20de=20l'expa?=
 =?UTF-8?q?nsion=20des=20volumes=20dans=20les=20composants=20MangaVolume?=
 =?UTF-8?q?=20et=20MangaVolumeList.=20Int=C3=A9gration=20de=20la=20synchro?=
 =?UTF-8?q?nisation=20de=20l'=C3=A9tat=20d'expansion=20avec=20les=20props,?=
 =?UTF-8?q?=20ainsi=20que=20des=20m=C3=A9thodes=20pour=20=C3=A9tendre=20ou?=
 =?UTF-8?q?=20r=C3=A9duire=20tous=20les=20volumes.=20Am=C3=A9lioration=20d?=
 =?UTF-8?q?e=20l'interface=20utilisateur=20pour=20une=20navigation=20plus?=
 =?UTF-8?q?=20fluide=20entre=20les=20volumes.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../presentation/components/MangaVolume.vue   | 10 ++-
 .../components/MangaVolumeList.vue            | 69 ++++++++++++++++++-
 .../manga/presentation/pages/MangaDetails.vue | 38 +++++++---
 3 files changed, 103 insertions(+), 14 deletions(-)

diff --git a/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue b/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue
index d8b4ab7..241bc93 100644
--- a/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue
+++ b/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue
@@ -83,7 +83,7 @@
     ChevronUpIcon,
     MagnifyingGlassIcon
 } from '@heroicons/vue/24/outline';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useMangaStore } from '../../application/store/mangaStore';
 import MangaChapterList from './MangaChapterList.vue';
 
@@ -106,13 +106,21 @@ import MangaChapterList from './MangaChapterList.vue';
         }
     });
 
+    const emit = defineEmits(['toggle']);
+
     const store = useMangaStore();
     const isOpen = ref(props.isOpen);
     const isSearching = ref(false);
     const isDownloading = ref(false);
 
+    // Synchroniser l'état local avec la prop
+    watch(() => props.isOpen, (newValue) => {
+        isOpen.value = newValue;
+    });
+
     const toggleVolume = () => {
         isOpen.value = !isOpen.value;
+        emit('toggle', props.volume.number);
     };
 
     const handleSearch = async () => {
diff --git a/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue b/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue
index e04be61..4623b87 100644
--- a/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue
+++ b/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue
@@ -6,12 +6,14 @@
             :volume="volume"
             :mangaSlug="mangaSlug"
             :mangaId="mangaId"
-            :isOpen="index === 0" />
+            :isOpen="expandedVolumes.has(volume.number)"
+            @toggle="handleVolumeToggle" />
     </div>
 </template>
 
 <script setup>
-    import MangaVolume from './MangaVolume.vue';
+    import { ref, watch } from 'vue';
+import MangaVolume from './MangaVolume.vue';
 
     const props = defineProps({
         volumes: {
@@ -25,6 +27,69 @@
         mangaId: {
             type: Number,
             required: true
+        },
+        expandAll: {
+            type: Boolean,
+            default: false
         }
     });
+
+    const emit = defineEmits(['update:expandAll']);
+
+    // Set pour stocker les numéros de volumes ouverts
+    const expandedVolumes = ref(new Set());
+
+    // Initialiser avec le premier volume ouvert par défaut
+    watch(() => props.volumes, (newVolumes) => {
+        if (newVolumes.length > 0 && expandedVolumes.value.size === 0) {
+            // Ouvrir le premier volume (volume 00) par défaut
+            expandedVolumes.value.add(newVolumes[0].number);
+        }
+    }, { immediate: true });
+
+    // Gérer l'expansion de tous les volumes
+    watch(() => props.expandAll, (shouldExpand) => {
+        if (shouldExpand) {
+            // Ouvrir tous les volumes
+            props.volumes.forEach(volume => {
+                expandedVolumes.value.add(volume.number);
+            });
+        } else {
+            // Fermer tous les volumes (y compris le volume 00)
+            expandedVolumes.value.clear();
+        }
+    });
+
+    const handleVolumeToggle = (volumeNumber) => {
+        if (expandedVolumes.value.has(volumeNumber)) {
+            expandedVolumes.value.delete(volumeNumber);
+        } else {
+            expandedVolumes.value.add(volumeNumber);
+        }
+
+        // Émettre l'état d'expansion
+        const allExpanded = props.volumes.length > 0 &&
+                           props.volumes.every(volume => expandedVolumes.value.has(volume.number));
+        emit('update:expandAll', allExpanded);
+    };
+
+    // Méthode publique pour contrôler l'expansion
+    const expandAllVolumes = () => {
+        props.volumes.forEach(volume => {
+            expandedVolumes.value.add(volume.number);
+        });
+        emit('update:expandAll', true);
+    };
+
+    const collapseAllVolumes = () => {
+        expandedVolumes.value.clear();
+        // Ne plus garder le premier volume ouvert, tous les volumes sont fermés
+        emit('update:expandAll', false);
+    };
+
+    // Exposer les méthodes pour le composant parent
+    defineExpose({
+        expandAllVolumes,
+        collapseAllVolumes
+    });
 </script>
diff --git a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
index 070d4c2..5ba9664 100644
--- a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
@@ -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'
             }
         ]
     }));