feat: ajout de la fonctionnalité de réinitialisation des résultats de recherche dans le store Manga, mise à jour des routes pour une meilleure structure, et amélioration de l'affichage des mangas dans les composants MangaCard et MangaList avec des liens RouterLink

assets/vue/app/domain/manga/application/store/mangaStore.js

@@ -105,6 +105,12 @@ export const useMangaStore = defineStore('manga', {
             }
         },
 
+        clearSearchResults() {
+            this.searchResults = [];
+            this.searchError = null;
+            this.loadingSearch = false;
+        },
+
         // --- Add Manga Actions ---
         async createFromMangaDex(externalId) {
             if (this.addingManga) return;

assets/vue/app/domain/manga/presentation/components/MangaCard.vue

@@ -1,7 +1,7 @@
 <template>
-    <div
+    <RouterLink
-        class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
+        :to="{ name: 'manga-details', params: { id: manga.id } }"
-        @click="navigateToDetails">
+        class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
         <div class="relative pb-[150%]">
             <img
                 :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
@@ -15,14 +15,10 @@
             </div>
             <div class="mt-1 text-sm text-gray-500"> Added: {{ formatDate(manga.createdAt) }} </div>
         </div>
-    </div>
+    </RouterLink>
 </template>
 
 <script setup>
-    import { useRouter } from 'vue-router';
-
-    const router = useRouter();
-
     const props = defineProps({
         manga: {
             type: Object,
@@ -30,13 +26,6 @@
         }
     });
 
-    const navigateToDetails = () => {
-        router.push({
-            name: 'manga-details',
-            params: { id: props.manga.id }
-        });
-    };
-
     const formatDate = dateString => {
         const date = new Date(dateString);
         return date.toLocaleDateString('en-US', {

assets/vue/app/domain/manga/presentation/components/MangaList.vue

@@ -19,8 +19,8 @@
                 <p v-if="manga.publicationYear" class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{
                     manga.publicationYear
                 }}</p>
-                <p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2 line-clamp-3">
+                <p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2">
-                    {{ manga.description }}
+                    {{ truncateDescription(manga.description) }}
                 </p>
                 <p v-if="manga.createdAt" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                     Added: {{ formatDate(manga.createdAt) }}
@@ -49,9 +49,14 @@
             return new Date(dateString).toLocaleDateString(undefined, options);
         } catch (e) {
             console.error('Error formatting date:', e);
-            return dateString; // Return original string if formatting fails
+            return dateString;
         }
     };
+
+    const truncateDescription = description => {
+        if (!description) return '';
+        return description.length > 500 ? description.slice(0, 500) + '...' : description;
+    };
 </script>
 
 <style scoped>
@@ -66,4 +71,14 @@
             -webkit-box-orient: vertical;
         }
     }
+
+    .description-truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        max-width: 500px;
+    }
 </style>

assets/vue/app/domain/manga/presentation/pages/AddManga.vue

@@ -29,8 +29,10 @@
         </div>
 
         <!-- Résultats de recherche -->
-        <MangaList v-if="searchResults.length > 0" :mangas="searchResults" @manga-click="openMangaModal" />
+        <div class="max-w-full overflow-hidden">
-        <p v-else-if="!loading && searchQuery" class="text-center text-gray-600">Aucun résultat trouvé</p>
+            <MangaList v-if="searchResults.length > 0" :mangas="searchResults" @manga-click="openMangaModal" />
+            <p v-else-if="!loading && searchQuery" class="text-center text-gray-600">Aucun résultat trouvé</p>
+        </div>
 
         <!-- Modal de confirmation -->
         <Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
@@ -80,7 +82,7 @@
 </template>
 
 <script setup>
-    import { ref, onMounted, computed } from 'vue';
+    import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
     import { storeToRefs } from 'pinia';
     import { useMangaStore } from '../../application/store/mangaStore';
@@ -115,6 +117,12 @@
         }
     });
 
+    // Nettoyer la recherche et les résultats lors du démontage du composant
+    onBeforeUnmount(() => {
+        searchQuery.value = '';
+        mangaStore.clearSearchResults();
+    });
+
     const performSearch = async () => {
         if (!searchQuery.value.trim()) return;
         try {

assets/vue/app/router/index.js

@@ -38,30 +38,30 @@ const routes = [
                 component: HomePage
             },
             {
-                path: '/manga/:id',
+                path: '/manga/details/:id',
                 name: 'manga-details',
                 component: MangaDetails
             },
             {
-                path: '/add',
+                path: '/manga/add',
                 name: 'add-manga',
                 component: AddManga
             },
             {
-                path: '/reader/:chapterId',
+                path: '/manga/reader/:chapterId',
                 name: 'reader',
                 component: ChapterPage,
                 props: { title: 'Lecteur' }
             },
             // Pages placeholder avec chargement différé
             {
-                path: '/import',
+                path: '/manga/import',
                 name: 'import',
                 component: PlaceholderComponent,
                 props: { title: 'Import de bibliothèque' }
             },
             {
-                path: '/discover',
+                path: '/manga/discover',
                 name: 'discover',
                 component: PlaceholderComponent,
                 props: { title: 'Découvrir' }

assets/vue/app/shared/components/layout/SearchBar.vue

@@ -1,133 +1,122 @@
 <template>
-  <div ref="searchRef" class="relative flex-1 max-w-xl mx-4">
+    <div ref="searchRef" class="relative flex-1 max-w-xl mx-4">
-    <div class="flex items-center py-1">
+        <div class="flex items-center py-1">
-      <MagnifyingGlassIcon class="h-5 w-5 text-white" />
+            <MagnifyingGlassIcon class="h-5 w-5 text-white" />
-      <input
+            <input
-        type="text"
+                type="text"
-        v-model="query"
+                v-model="query"
-        @input="handleInput"
+                @input="handleInput"
-        @focus="isOpen = true"
+                @focus="isOpen = true"
-        placeholder="Rechercher"
+                placeholder="Rechercher"
-        class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
+                class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0" />
-      />
-    </div>
-
-    <div v-if="isOpen && query.trim()" class="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
-      <div v-if="loading" class="p-4 text-center text-gray-400">
-        Chargement...
-      </div>
-
-      <template v-else-if="results.length > 0">
-        <div class="py-2">
-          <h3 class="px-4 py-2 text-sm font-semibold text-gray-400">
-            Mangas existants
-          </h3>
-          <button
-            v-for="manga in results"
-            :key="manga.id"
-            @click="handleMangaClick(manga.id)"
-            class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
-          >
-            <img
-              :src="manga.thumbnailUrl"
-              :alt="manga.title"
-              class="w-10 h-14 object-cover rounded"
-            />
-            <div class="text-left">
-              <div class="font-medium">{{ manga.title }}</div>
-              <div class="text-sm text-gray-400">{{ manga.author }} ({{ manga.publicationYear }})</div>
-            </div>
-          </button>
         </div>
-      </template>
 
-      <template v-else-if="hasSearched">
+        <div
-        <div class="py-2">
+            v-if="isOpen && query.trim()"
-          <button
+            class="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
-            @click="handleAddMangaClick"
+            <div v-if="loading" class="p-4 text-center text-gray-400"> Chargement... </div>
-            class="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
+
-          >
+            <template v-else-if="results.length > 0">
-            <PlusIcon class="h-5 w-5" />
+                <div class="py-2">
-            <span>Ajouter "{{ query }}"</span>
+                    <h3 class="px-4 py-2 text-sm font-semibold text-gray-400"> Mangas existants </h3>
-          </button>
+                    <RouterLink
+                        v-for="manga in results"
+                        :key="manga.id"
+                        :to="{ name: 'manga-details', params: { id: manga.id } }"
+                        @click="
+                            () => {
+                                isOpen = false;
+                                query = '';
+                                hasSearched = false;
+                            }
+                        "
+                        class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white">
+                        <img :src="manga.thumbnailUrl" :alt="manga.title" class="w-10 h-14 object-cover rounded" />
+                        <div class="text-left">
+                            <div class="font-medium">{{ manga.title }}</div>
+                            <div class="text-sm text-gray-400">{{ manga.author }} ({{ manga.publicationYear }})</div>
+                        </div>
+                    </RouterLink>
+                </div>
+            </template>
+
+            <template v-else-if="hasSearched">
+                <div class="py-2">
+                    <RouterLink
+                        :to="{ name: 'add-manga', query: query ? { q: query } : undefined }"
+                        @click="
+                            () => {
+                                isOpen = false;
+                                query = '';
+                                hasSearched = false;
+                            }
+                        "
+                        class="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50">
+                        <PlusIcon class="h-5 w-5" />
+                        <span>Ajouter "{{ query }}"</span>
+                    </RouterLink>
+                </div>
+            </template>
         </div>
-      </template>
     </div>
-  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+    import { ref, onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
+    import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/vue/24/outline';
-import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/vue/24/outline';
+    import { ApiMangaRepository } from '../../../domain/manga/infrastructure/api/apiMangaRepository';
-import {ApiMangaRepository} from "../../../domain/manga/infrastructure/api/apiMangaRepository";
+    import { SearchMangas } from '../../../domain/manga/application/queries/searchMangas';
-import {SearchMangas} from "../../../domain/manga/application/queries/searchMangas";
 
-const mangaRepository = new ApiMangaRepository();
+    const mangaRepository = new ApiMangaRepository();
-const searchMangas = new SearchMangas(mangaRepository);
+    const searchMangas = new SearchMangas(mangaRepository);
 
-const router = useRouter();
+    const searchRef = ref(null);
-const searchRef = ref(null);
+    const query = ref('');
-const query = ref('');
+    const results = ref([]);
-const results = ref([]);
+    const isOpen = ref(false);
-const isOpen = ref(false);
+    const loading = ref(false);
-const loading = ref(false);
+    const hasSearched = ref(false);
-const hasSearched = ref(false);
 
-let searchTimeout;
+    let searchTimeout;
 
-const handleInput = () => {
+    const handleInput = () => {
-  clearTimeout(searchTimeout);
+        clearTimeout(searchTimeout);
-  searchTimeout = setTimeout(searchManga, 300);
+        searchTimeout = setTimeout(searchManga, 300);
-};
+    };
 
-const searchManga = async () => {
+    const searchManga = async () => {
-  if (!query.value.trim()) {
+        if (!query.value.trim()) {
-    results.value = [];
+            results.value = [];
-    hasSearched.value = false;
+            hasSearched.value = false;
-    return;
+            return;
-  }
+        }
 
-  loading.value = true;
+        loading.value = true;
-  try {
+        try {
-    const response = await searchMangas.execute(query.value);
+            const response = await searchMangas.execute(query.value);
-    results.value = Array.isArray(response) ? response : response.items || [];
+            results.value = Array.isArray(response) ? response : response.items || [];
-    hasSearched.value = true;
+            hasSearched.value = true;
-    console.log('Résultats de recherche:', results.value);
+            console.log('Résultats de recherche:', results.value);
-  } catch (error) {
+        } catch (error) {
-    console.error('Search error:', error);
+            console.error('Search error:', error);
-    results.value = [];
+            results.value = [];
-  } finally {
+        } finally {
-    loading.value = false;
+            loading.value = false;
-  }
+        }
-};
+    };
 
-const handleMangaClick = (id) => {
+    const handleClickOutside = event => {
-  router.push(`/manga/${id}`);
+        if (searchRef.value && !searchRef.value.contains(event.target)) {
-  isOpen.value = false;
+            isOpen.value = false;
-  query.value = '';
+        }
-  hasSearched.value = false;
+    };
-};
 
-const handleAddMangaClick = () => {
+    onMounted(() => {
-  router.push(`/add${query.value ? `?q=${encodeURIComponent(query.value)}` : ''}`);
+        document.addEventListener('mousedown', handleClickOutside);
-  isOpen.value = false;
+    });
-  query.value = '';
-  hasSearched.value = false;
-};
 
-const handleClickOutside = (event) => {
+    onUnmounted(() => {
-  if (searchRef.value && !searchRef.value.contains(event.target)) {
+        document.removeEventListener('mousedown', handleClickOutside);
-    isOpen.value = false;
+        clearTimeout(searchTimeout);
-  }
+    });
-};
-
-onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside);
-  clearTimeout(searchTimeout);
-});
 </script>

assets/vue/app/shared/components/layout/Sidebar.vue

@@ -49,13 +49,13 @@
             to: '/manga',
             id: 'manga',
             subItems: [
-                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
+                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/manga/add' },
                 {
                     icon: ArrowDownTrayIcon,
                     text: 'Import bibliothèque',
-                    to: '/import'
+                    to: '/manga/import'
                 },
-                { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
+                { icon: GlobeAltIcon, text: 'Découvrir', to: '/manga/discover' }
             ]
         },
         {