feat: ajout de la recherche de chapitres dans le store Manga et mise à jour de l'API pour récupérer les chapitres, ainsi que des ajustements dans la configuration de Tailwind et la suppression de l'entrée React dans Webpack.

assets/app.js

@@ -1,4 +1,3 @@
-import { registerReactControllerComponents } from '@symfony/ux-react';
 import './bootstrap.js';
 
 import '@fortawesome/fontawesome-free/js/all.js';
@@ -15,4 +14,4 @@ import './styles/app.scss';
 // start the Stimulus application
 import './bootstrap';
 
-//registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
+// La ligne registerReactControllerComponents a déjà été commentée

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

@@ -128,6 +128,19 @@ export const useMangaStore = defineStore('manga', {
             } finally {
                 this.addingManga = false;
             }
+        },
+
+        // --- Chapter Actions ---
+        async searchChapter(chapterId) {
+            try {
+                await mangaRepository.searchChapter(chapterId);
+                // Rafraîchir la collection après la recherche
+                await this.refreshCollectionInBackground();
+                return true;
+            } catch (error) {
+                console.error('Erreur lors de la recherche du chapitre:', error);
+                return false;
+            }
         }
     }
 });

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

@@ -119,4 +119,23 @@ export class ApiMangaRepository {
             throw error;
         }
     }
+
+    async searchChapter(chapterId) {
+        try {
+            const response = await fetch('https://localhost/api/scraping/chapters', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ chapterId })
+            });
+            if (!response.ok) {
+                throw new Error('Échec de la recherche du chapitre');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
 }

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

@@ -52,8 +52,11 @@
     const store = useMangaStore();
 
     const handleSearch = async () => {
-        // TODO: Implémenter la recherche de chapitre
+        try {
-        console.log('Recherche du chapitre:', props.chapter.id);
+            await store.searchChapter(props.chapter.id);
+        } catch (error) {
+            console.error('Erreur lors de la recherche du chapitre:', error);
+        }
     };
 
     const handleDelete = async () => {

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

@@ -1,20 +1,16 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
-    <MangaCard 
+        <MangaCard v-for="manga in mangas" :key="manga.id" :manga="manga" />
-      v-for="manga in mangas" 
+    </div>
-      :key="manga.id" 
-      :manga="manga"
-    />
-  </div>
 </template>
 
 <script setup>
-import MangaCard from './MangaCard.vue';
+    import MangaCard from './MangaCard.vue';
 
-defineProps({
+    defineProps({
-  mangas: {
+        mangas: {
-    type: Array,
+            type: Array,
-    required: true
+            required: true
-  }
+        }
-});
+    });
 </script>

config/routes.yaml

@@ -4,15 +4,6 @@ controllers:
         namespace: App\Controller
     type: attribute
 
-react_app:
-    path: /react/{req}
-    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
-    defaults:
-        template: 'react/index.html.twig'
-        req: ''
-    requirements:
-        req: ".*"
-
 vue_app:
     path: /vue/{req}
     controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController

tailwind.config.js

@@ -1,20 +1,16 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
+    content: [
-      './templates/**/*.html.twig',
+        './templates/**/*.html.twig',
-      './assets/react/**/*.{js,jsx}',
+        './assets/react/**/*.{js,jsx}',
-      './assets/**/*.{js,jsx}'
+        './assets/**/*.{js,jsx}',
-  ],
+        './assets/vue/**/*.{js,vue}'
-  theme: {
+    ],
-    extend: {},
+    theme: {
-  },
+        extend: {}
-  plugins: [
+    },
-    // require("daisyui"),
+    plugins: [
-  ],
+        // require("daisyui"),
-  safelist: [
+    ],
-    'bg-red-500',
+    safelist: ['bg-red-500', 'bg-blue-500', 'bg-yellow-500', 'bg-green-500']
-    'bg-blue-500',
+};
-    'bg-yellow-500',
-    'bg-green-500',
-  ],
-}

webpack.config.js

@@ -21,7 +21,6 @@ Encore
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
     .addEntry('app', './assets/app.js')
-    .addEntry('react-app', './assets/react/app/index.jsx')
     .addEntry('vue-app', './assets/vue/app/index.js')
     // .addEntry('alpine', 'alpinejs')
 
@@ -31,7 +30,6 @@ Encore
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()
 
-    .enableReactPreset()
     .enableVueLoader()
 
     // will require an extra script tag for runtime.js
@@ -57,7 +55,7 @@ Encore
     // })
 
     // enables and configure @babel/preset-env polyfills
-    .configureBabelPresetEnv((config) => {
+    .configureBabelPresetEnv(config => {
         config.useBuiltIns = 'usage';
         config.corejs = '3.23';
     })
@@ -68,17 +66,9 @@ Encore
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()
 
-    // uncomment if you use React
-    //.enableReactPreset()
-
-    // uncomment to get integrity="..." attributes on your script & link tags
-    // requires WebpackEncoreBundle 1.4 or higher
-    //.enableIntegrityHashes(Encore.isProduction())
-
     // uncomment if you're having problems with a jQuery plugin
     //.autoProvidejQuery()
 
-    .enablePostCssLoader()
+    .enablePostCssLoader();
-;
 
 module.exports = Encore.getWebpackConfig();