- Ajout d'une pagination

- Résultats plu pertinent, affichage des livres seulement

src/Controller/APISearchController.php

@@ -23,9 +23,11 @@ class APISearchController extends AbstractController
     {
         // Récupérer le paramètre "q" depuis la requête
         $query = $request->query->get('q');
+        $nb_pages = $request->query->get('page') ?? '1';
 
+        
         // Appeler le service GoogleBooks avec la requête
-        return $this->googleBooksService->searchBooks($query);
+        return $this->googleBooksService->searchBooks($query, 'fr', ($nb_pages - 1) *10);
     }
 
     #[Route('/toggleLike/{idGoogle}', name: 'like', methods: "POST")]

src/services/GoogleService.php

@@ -13,20 +13,22 @@ class GoogleBooksService
         $this->client = $client;
     }
 
-    public function searchBooks(string $query, string $lang = 'fr'): array
+    public function searchBooks(string $query, string $lang = 'fr', string $nb_pages): array
     {
         $url = 'https://www.googleapis.com/books/v1/volumes';
         $response = $this->client->request('GET', $url, [
             'query' => [
                 'q' => $query,
                 'langRestrict' => $lang,
+                'maxResults' => 10,
+                'startIndex' => $nb_pages,
+                'printType' => 'books',
             ],
         ]);
 
 
         // Convertir la réponse JSON en tableau PHP
         $dataArray = $response->toArray();
-       
         return $dataArray;
     }
 }

templates/apiSearch/index.html.twig

@@ -3,6 +3,7 @@
 {% block title %}{% endblock %}
 
 {% block body %}
+
 	<div>
 		<div class="w-1/2 py-2 flex flex-col justify-center mt-5  mx-auto">
 			<h1 class="text-2xl font-bold">Résultats pour :
@@ -28,9 +29,12 @@
 								<p class="p-2 italic font-bold">Aux éditions :
 									<span class="font-normal">{{ book.volumeInfo.publisher }}</span>
 								</p>
-								<p class="p-2 italic font-bold">Date de publication :
+                                {% if book.volumeInfo.publishedDate is defined %}
+                                    <p class="p-2 italic font-bold">Date de publication :
 									<span class="font-normal">{{ book.volumeInfo.publishedDate }}</span>
 								</p>
+                                {% endif %}
+								
 								{% if book.volumeInfo.categories is defined %}
 									{% for categorie in book.volumeInfo.categories %}
 										<p class="p-2 italic font-bold">Catégorie :
@@ -72,12 +76,58 @@
 
 
 					{% endfor %}
+                    {% if favoris is empty %}
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300" x-data="{ liked: false }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
+							</svg>
+                    {% endif %}
 
 				{% endif %}
 
 
 			</div>
 		{% endfor %}
+        {% set nb_items = datas.totalItems %}
+{% set nb_pages = nb_items / 10 %}
+{% set current_page = app.request.get('page') ? app.request.get('page') : 1 %}
+
+{% if nb_pages > 1 %}
+    <div class="flex justify-center mt-5">
+        <ul class="flex">
+            {# Flèche "Précédent" #}
+            {% if current_page > 1 %}
+                <li class="mx-2">
+                    <a href="{{ path('api_search', {'q': query, 'page': current_page - 1}) }}" class="px-3 py-1 bg-blue-500 text-black rounded-lg">← Précédent</a>
+                </li>
+            {% else %}
+                <li class="mx-2">
+                    <span class="px-3 py-1 bg-gray-500 text-white rounded-lg cursor-not-allowed">← Précédent</span>
+                </li>
+            {% endif %}
+
+            {# Liens des pages proches de la page actuelle #}
+            {% for i in current_page - 3..current_page + 3 %}
+                {% if i > 0 and i <= nb_pages %}
+                    <li class="mx-2">
+                        <a href="{{ path('api_search', {'q': query, 'page': i}) }}" class="px-3 py-1 {{ i == current_page ? 'bg-blue-500 text-gray-700' : 'bg-gray-200 text-black' }} rounded-lg">{{ i }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+
+            {# Flèche "Suivant" #}
+            {% if current_page < nb_pages %}
+                <li class="mx-2">
+                    <a href="{{ path('api_search', {'q': query, 'page': current_page + 1}) }}" class="px-3 py-1 bg-blue-500 text-black rounded-lg">Suivant →</a>
+                </li>
+            {% else %}
+                <li class="mx-2">
+                    <span class="px-3 py-1 bg-gray-500 text-white rounded-lg cursor-not-allowed">Suivant →</span>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+{% endif %}
+
 	</div>
 
 	<script>