Merge remote-tracking branch 'origin/main'

# Conflicts:
#	templates/apiSearch/index.html.twig

assets/js/modal.js

@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const datas = {{ datas | tojson }};
+
+    datas.items.forEach((book, index) => {
+        const openModalBtn = document.getElementById(`openModalBtn-${index + 1}`);
+        const closeModalSvg = document.getElementById(`closeModalSvg-${index + 1}`);
+        const closeModalBtn = document.getElementById(`closeModalBtn-${index + 1}`);
+        const modal = document.getElementById(`myModal-${index + 1}`);
+
+        if (openModalBtn) {
+            openModalBtn.addEventListener('click', () => {
+                modal.classList.remove('hidden');
+            });
+        }
+
+        if (closeModalSvg) {
+            closeModalSvg.addEventListener('click', () => {
+                modal.classList.add('hidden');
+            });
+        }
+
+        if (closeModalBtn) {
+            closeModalBtn.addEventListener('click', () => {
+                modal.classList.add('hidden');
+            });
+        }
+    });
+});

templates/apiSearch/index.html.twig

@@ -14,6 +14,7 @@
             </p>
         </div>
 		{% for book in datas.items %}
+			{% include '/apiSearch/modal.html.twig' with { 'loop': loop} %}
 			<div class="relative flex rounded-xl border bg-white shadow-lg hover:shadow-xl transition-shadow duration-300 w-1/2 mx-auto py-2 mt-5">
 				<div class="flex flex-col justify-start">
 					<div class="flex flex-col p-2 text-2xl">
@@ -55,7 +56,7 @@
 										<span class="font-normal">{{ book.searchInfo.textSnippet | raw }}</span>
 									{% endif %}
 								</p>
-							
+
 						</div>
 					</div>
 					<div class="w-full p-2">
@@ -68,21 +69,21 @@
 
 				{% if app.user %}
             {% set isLiked = book.id in favoris|map(f => f.getIdGoogle()) %}
-            <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: {{ isLiked ? 'true' : 'false' }} }" 
-                :fill="liked ? 'red' : 'none'" 
-                :stroke="liked ? 'red' : 'currentColor'" 
+            <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: {{ isLiked ? 'true' : 'false' }} }"
+                :fill="liked ? 'red' : 'none'"
+                :stroke="liked ? 'red' : 'currentColor'"
                 @click="toggleLike('{{ book.id }}', liked, $el); 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 %}
-				
+
 
 				<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
 					<div class="relative bg-white p-6 rounded-lg w-1/3">
@@ -143,16 +144,15 @@
 {% set current_page = app.request.get('page') ? app.request.get('page') : 1 %}
 
 {% if nb_pages > 1 %}
-    <div class="flex justify-center mt-5">
+    <div class="flex justify-center mt-8 mb-8">
         <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>
+                    <a href="{{ path('api_search', {'q': query, 'page': current_page - 1}) }}" class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg mr-32">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 %}
 
@@ -160,7 +160,7 @@
             {% 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>
+                        <a href="{{ path('api_search', {'q': query, 'page': i}) }}" class="px-4 py-3 text-white {{ i == current_page ? 'dark:bg-[#9db1bd] text-gray-700' : 'bg-gray-200 text-black' }} rounded-lg">{{ i }}</a>
                     </li>
                 {% endif %}
             {% endfor %}
@@ -168,61 +168,86 @@
             {# 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>
+                    <a href="{{ path('api_search', {'q': query, 'page': current_page + 1}) }}" class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg ml-32">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>
+                    <span class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg  cursor-not-allowed ml-32">Suivant</span>
                 </li>
             {% endif %}
         </ul>
     </div>
 {% endif %}
-
 	</div>
 
 	<script>
-		function toggleLike(idGoogle, liked, element) {
-    if (liked) {
-        fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest'
-            },
-            body: JSON.stringify({})
-        }).then(response => response.json()).then(data => {
-            if (data.status === 'removed') {
-                console.log('Livre retiré des favoris');
-                // Mettre à jour l'état visuel
-                element.setAttribute('x-data', '{ liked: false }');
-                element.querySelector('path').setAttribute('fill', 'none');
-                element.querySelector('path').setAttribute('stroke', 'currentColor');
+        function toggleLike(idGoogle, liked, element) {
+            if (liked) {
+                fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    body: JSON.stringify({})
+                }).then(response => response.json()).then(data => {
+                    if (data.status === 'removed') {
+                        console.log('Livre retiré des favoris');
+                        // Mettre à jour l'état visuel
+                        element.setAttribute('x-data', '{ liked: false }');
+                        element.querySelector('path').setAttribute('fill', 'none');
+                        element.querySelector('path').setAttribute('stroke', 'currentColor');
+                    }
+                }).catch(error => {
+                    console.error('Erreur AJAX', error);
+                });
+            } else {
+                fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    body: JSON.stringify({})
+                }).then(response => response.json()).then(data => {
+                    if (data.status === 'added') {
+                        console.log('Livre ajouté aux favoris');
+                        // Mettre à jour l'état visuel
+                        element.setAttribute('x-data', '{ liked: true }');
+                        element.querySelector('path').setAttribute('fill', 'red');
+                        element.querySelector('path').setAttribute('stroke', 'red');
+                    }
+                }).catch(error => {
+                    console.error('Erreur AJAX', error);
+                });
             }
-        }).catch(error => {
-            console.error('Erreur AJAX', error);
-        });
-    } else {
-        fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest'
-            },
-            body: JSON.stringify({})
-        }).then(response => response.json()).then(data => {
-            if (data.status === 'added') {
-                console.log('Livre ajouté aux favoris');
-                // Mettre à jour l'état visuel
-                element.setAttribute('x-data', '{ liked: true }');
-                element.querySelector('path').setAttribute('fill', 'red');
-                element.querySelector('path').setAttribute('stroke', 'red');
+        }
+        document.addEventListener('DOMContentLoaded', () => {
+            {% for book in datas.items %}
+            const openModalBtn{{ loop.index }} = document.getElementById('openModalBtn-{{ loop.index }}');
+            const closeModalSvg{{ loop.index }} = document.getElementById('closeModalSvg-{{ loop.index }}');
+            const closeModalBtn{{ loop.index }} = document.getElementById('closeModalBtn-{{ loop.index }}');
+            const modal{{ loop.index }} = document.getElementById('myModal-{{ loop.index }}');
+
+            if (openModalBtn{{ loop.index }}) {
+                openModalBtn{{ loop.index }}.addEventListener('click', () => {
+                    modal{{ loop.index }}.classList.remove('hidden');
+                });
             }
-        }).catch(error => {
-            console.error('Erreur AJAX', error);
+
+            if (closeModalSvg{{ loop.index }}) {
+                closeModalSvg{{ loop.index }}.addEventListener('click', () => {
+                    modal{{ loop.index }}.classList.add('hidden');
+                });
+            }
+
+            if (closeModalBtn{{ loop.index }}) {
+                closeModalBtn{{ loop.index }}.addEventListener('click', () => {
+                    modal{{ loop.index }}.classList.add('hidden');
+                });
+            }
+            {% endfor %}
         });
-    }
-}
 
 	</script>
 

templates/apiSearch/modal.html.twig

@@ -0,0 +1,76 @@
+{% block body %}
+
+<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
+    <div class="relative bg-white p-6 rounded-lg w-1/3 max-h-screen overflow-y-auto">
+        <div class="flex mx-auto flex-row w-1/4">
+            {% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
+                <img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
+            {% endif %}
+        </div>
+        <svg id="closeModalSvg-{{ loop.index }}" 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 text-gray-500 hover:text-gray-700">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+
+        {% if book.volumeInfo.title is defined and book.volumeInfo.title is not empty %}
+            <p class="p-2 italic font-bold">Titre : <span class="font-normal">{{ book.volumeInfo.title }}</span></p>
+        {% endif %}
+
+        {% if book.volumeInfo.authors is defined %}
+            <p class="p-2 italic font-bold"> Auteur(s) : <span class="font-normal"> {{ book.volumeInfo.authors | join(", ") }}</span></p>
+        {% endif %}
+
+        {% if book.volumeInfo.publisher is defined and book.volumeInfo.publisher is not empty %}
+            <p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
+        {% endif %}
+
+        {% if book.volumeInfo.publishedDate is defined and book.volumeInfo.publishedDate is not empty %}
+            <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 and book.volumeInfo.categories is not empty %}
+            {% for categorie in book.volumeInfo.categories %}
+                <p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
+            {% endfor %}
+        {% endif %}
+
+        {% if book.volumeInfo.pageCount is defined and book.volumeInfo.pageCount is not empty %}
+            <p class="p-2 italic font-bold">Nombre de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
+        {% endif %}
+
+        {% if book.volumeInfo is defined and book.volumeInfo.description is defined and book.volumeInfo.description is not empty %}
+            <p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.volumeInfo.description | raw }}</span></p>
+        {% endif %}
+
+        <hr class="mt-6">
+
+        <div class="mt-4">
+            <h3 class="font-bold text-lg">Laisser un commentaire :</h3>
+            <form id="commentForm-{{ loop.index }}" action="" method="POST" class="space-y-4">
+                <textarea id="commentText-{{ loop.index }}" name="comment" rows="4" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Écrivez votre commentaire ici..." required></textarea>
+                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Envoyer</button>
+            </form>
+        </div>
+
+        <hr class="mt-8">
+        <div id="commentsSection-{{ loop.index }}" class="mt-4 max-h-60 overflow-y-auto">
+            <h3 class="font-bold text-lg">Commentaires :</h3>
+            <div class="mt-2">
+                <div class="p-2 border-b border-gray-200">
+                    <p class="font-semibold">Auteur : Fabien</p>
+                    <p>Très bon livre pour les débutants.</p>
+                </div>
+            </div>
+        </div>
+
+        <button id="closeModalBtn-{{ loop.index }}" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 mt-4">
+            Fermer
+        </button>
+    </div>
+</div>
+    {% endblock %}
+{% block javascripts %}
+    <script src="{{ asset('js/modal.js') }}"></script>
+{% endblock %}
+