- Ajout d'une pagination
- Résultats plu pertinent, affichage des livres seulement
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user