feat: ajout d'une route GetMangaByIdHandler.php et fix de la SearchBar.vue

assets/vue/app/domain/manga/application/queries/searchMangas.js

@@ -15,4 +15,4 @@ export class SearchMangas {
       throw error;
     }
   }
-} 
+}

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

@@ -1,5 +1,5 @@
-import { defineStore } from 'pinia';
-import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+import {defineStore} from 'pinia';
+import {ApiMangaRepository} from '../../infrastructure/api/apiMangaRepository';
 
 const mangaRepository = new ApiMangaRepository();
 
@@ -19,32 +19,26 @@ export const useMangaStore = defineStore('manga', {
     // Actions pour la collection
     async loadCollection() {
       if (this.loading) return;
-      
-      console.log('Starting loadCollection...');
+
       this.loading = true;
       this.error = null;
-      
+
       try {
-        console.log('Fetching collection from repository...');
         this.collection = await mangaRepository.getCollection();
-        console.log('Collection loaded:', this.collection);
       } catch (err) {
         this.error = err.message;
-        console.error('Failed to load collection:', err);
       } finally {
         this.loading = false;
-        console.log('loadCollection finished. Loading:', this.loading);
       }
     },
 
     async refreshCollectionInBackground() {
       if (this.isBackgroundLoading) return;
-      
+
       this.isBackgroundLoading = true;
-      
+
       try {
-        const updatedCollection = await mangaRepository.getCollection();
-        this.collection = updatedCollection;
+        this.collection = await mangaRepository.getCollection();
       } catch (err) {
         console.error('Failed to refresh collection:', err);
       } finally {
@@ -70,12 +64,10 @@ export const useMangaStore = defineStore('manga', {
       this.error = null;
       try {
         const response = await mangaRepository.getChapters(mangaId);
-        console.log('API Response:', response); // Pour déboguer
-        this.chapters = Array.isArray(response) ? response : 
+        this.chapters = Array.isArray(response) ? response :
                        (response.items ? response.items : []);
       } catch (error) {
         this.error = error.message;
-        console.error('Failed to fetch chapters:', error);
       } finally {
         this.loading = false;
       }
@@ -86,4 +78,4 @@ export const useMangaStore = defineStore('manga', {
       this.chapters = [];
     }
   }
-}); 
+});

assets/vue/app/domain/manga/domain/entities/manga.js

@@ -6,6 +6,7 @@ export class Manga {
     description = null,
     authors = [],
     imageUrl = null,
+    thumbnailUrl = null,
     publicationYear = null,
     status = null,
     rating = null,
@@ -18,6 +19,7 @@ export class Manga {
     this.description = description;
     this.authors = authors;
     this.imageUrl = imageUrl;
+    this.thumbnailUrl = thumbnailUrl;
     this.publicationYear = publicationYear;
     this.status = status;
     this.rating = rating;

assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js

@@ -24,7 +24,7 @@ export class ApiMangaRepository {
 
   async getMangaById(id) {
     try {
-      const response = await fetch(`/api/mangas/${id}`);
+      const response = await fetch(`/api/mangas/by-id/${id}`);
       if (!response.ok) {
         throw new Error('Failed to fetch manga details');
       }
@@ -64,7 +64,7 @@ export class ApiMangaRepository {
 
   async getMangaBySlug(slug) {
     try {
-      const response = await fetch(`/api/mangas/${slug}`);
+      const response = await fetch(`/api/mangas/by-slug/${slug}`);
       if (!response.ok) {
         throw new Error('Failed to fetch manga details');
       }
@@ -87,4 +87,4 @@ export class ApiMangaRepository {
       throw error;
     }
   }
-} 
+}

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

@@ -17,7 +17,7 @@ import { storeToRefs } from 'pinia';
 import { useMangaStore } from '../../application/store/mangaStore';
 import MangaGrid from '../components/MangaGrid.vue';
 import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
-import { 
+import {
   ArrowPathIcon,
   MagnifyingGlassIcon,
   Cog6ToothIcon,
@@ -29,35 +29,22 @@ import {
 const router = useRouter();
 const mangaStore = useMangaStore();
 
-const { 
-  collection, 
-  loading, 
-  error, 
-  isBackgroundLoading 
+const {
+  collection,
+  loading,
+  error,
+  isBackgroundLoading
 } = storeToRefs(mangaStore);
 
 onMounted(() => {
-  console.log('HomePage mounted');
-  console.log('Store state before loadCollection:', {
-    collection: collection.value,
-    loading: loading.value,
-    error: error.value
-  });
-  
   mangaStore.loadCollection();
-  
-  console.log('loadCollection called');
 });
 
-const handleAddMangaClick = (query = '') => {
-  router.push(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
-};
-
 const toolbarConfig = {
   leftSection: [
-    { 
-      icon: ArrowPathIcon, 
-      label: 'Refresh', 
+    {
+      icon: ArrowPathIcon,
+      label: 'Refresh',
       onClick: () => mangaStore.refreshCollectionInBackground(),
       active: isBackgroundLoading
     },
@@ -70,4 +57,4 @@ const toolbarConfig = {
     { icon: FunnelIcon, onClick: () => {} }
   ]
 };
-</script> 
+</script>

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

@@ -159,7 +159,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useMangaStore } from '../../application/store/mangaStore';
 import { storeToRefs } from 'pinia';
@@ -238,6 +238,13 @@ const loadData = async () => {
   ]);
 };
 
+// Ajouter le watcher sur l'ID de la route
+watch(() => route.params.id, (newId, oldId) => {
+  if (newId !== oldId) {
+    loadData();
+  }
+});
+
 // Actions sur les chapitres et volumes
 const searchChapter = async (chapter) => {
   // TODO: Implémenter la recherche de chapitre

assets/vue/app/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '../shared/components/layout/Layout.vue';
 import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
+import MangaDetails from "../domain/manga/presentation/pages/MangaDetails.vue";
 
 // Placeholder component for new routes
 const PlaceholderComponent = {
@@ -31,7 +32,7 @@ const routes = [
       {
         path: '/manga/:id',
         name: 'manga-details',
-        component: () => import('../domain/manga/presentation/pages/MangaDetails.vue')
+        component: MangaDetails
       },
       {
         path: '/add',
@@ -133,4 +134,4 @@ const routes = [
 export const router = createRouter({
   history: createWebHistory('/vue/'),
   routes
-}); 
+});

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

@@ -25,11 +25,11 @@
           <button
             v-for="manga in results"
             :key="manga.id"
-            @click="handleMangaClick(manga.slug)"
+            @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.imageUrl"
+              :src="manga.thumbnailUrl"
               :alt="manga.title"
               class="w-10 h-14 object-cover rounded"
             />
@@ -90,17 +90,20 @@ const searchManga = async () => {
 
   loading.value = true;
   try {
-    results.value = await searchMangas.execute(query.value);
+    const response = await searchMangas.execute(query.value);
+    results.value = Array.isArray(response) ? response : response.items || [];
     hasSearched.value = true;
+    console.log('Résultats de recherche:', results.value);
   } catch (error) {
     console.error('Search error:', error);
+    results.value = [];
   } finally {
     loading.value = false;
   }
 };
 
-const handleMangaClick = (slug) => {
-  router.push(`/manga/${slug}`);
+const handleMangaClick = (id) => {
+  router.push(`/manga/${id}`);
   isOpen.value = false;
   query.value = '';
   hasSearched.value = false;