From 60e6d9daf7b8d64d8681e83cddeea6bcdc4ec075 Mon Sep 17 00:00:00 2001
From: Kilian Beraud <kilianberaud3@gmail.com>
Date: Thu, 30 Jan 2025 11:05:12 +0100
Subject: [PATCH 1/2] - Ajout des favoris

---
 templates/apiSearch/index.html.twig   | 8 +++++---
 templates/components/navbar.html.twig | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/templates/apiSearch/index.html.twig b/templates/apiSearch/index.html.twig
index fc0c3b4..ec3bd54 100644
--- a/templates/apiSearch/index.html.twig
+++ b/templates/apiSearch/index.html.twig
@@ -33,6 +33,7 @@
 								<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 %}
                                     <p class="p-2 italic font-bold">Date de publication :
 									<span class="font-normal">{{ book.volumeInfo.publishedDate }}</span>
@@ -54,7 +55,7 @@
 										<span class="font-normal">{{ book.searchInfo.textSnippet | raw }}</span>
 									{% endif %}
 								</p>
-							{% endif %}
+							
 						</div>
 					</div>
 					<div class="w-full p-2">
@@ -79,13 +80,14 @@
 						{% endif %}
 
 					{% endfor %}
-				{% endif %}
-				{% if favoris is empty %}
+                    {% 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 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">
diff --git a/templates/components/navbar.html.twig b/templates/components/navbar.html.twig
index adccdfe..9465235 100644
--- a/templates/components/navbar.html.twig
+++ b/templates/components/navbar.html.twig
@@ -63,7 +63,7 @@
 			<div
 				class="relative flex items-center">
 				<!-- Cart Icon -->
-				<a class="me-4 text-neutral-600 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="#">
+				<a class="me-4 text-neutral-600 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="/favoris">
 						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
 							<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>

From 4acc1955a908c8e9e7aa77422ae06d12ad490359 Mon Sep 17 00:00:00 2001
From: Kilian Beraud <kilianberaud3@gmail.com>
Date: Thu, 30 Jan 2025 11:26:54 +0100
Subject: [PATCH 2/2] =?UTF-8?q?-=20R=C3=A9glages=20du=20bug=20pour=20enlev?=
 =?UTF-8?q?er=20des=20favoris?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/apiSearch/index.html.twig | 137 ++++++++++++----------------
 1 file changed, 56 insertions(+), 81 deletions(-)

diff --git a/templates/apiSearch/index.html.twig b/templates/apiSearch/index.html.twig
index ec3bd54..cce03b0 100644
--- a/templates/apiSearch/index.html.twig
+++ b/templates/apiSearch/index.html.twig
@@ -67,26 +67,21 @@
 
 
 				{% if app.user %}
-					{% for favori in favoris %}
-						{% if favori.getIdGoogle() == book.id %}
-							<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: true }" :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 %}
-						{% if favori.getIdGoogle() != book.id %}
-							<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 %}
-
-					{% 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 %}
+            {% 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'" 
+                @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">
@@ -187,67 +182,47 @@
 	</div>
 
 	<script>
-		function toggleLike(idGoogle, liked) {
-			if (liked) {
-				fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-						'X-Requested-With': 'XMLHttpRequest'
-					},
-					body: JSON.stringify({ // D'autres données peuvent être envoyées si nécessaire
-					})
-				}).then(response => response.json()).then(data => {
-					if (data.status === 'removed') { // Mettre à jour le SVG ou l'état du bouton pour retirer le like
-						console.log('Livre retiré des favoris');
-					}
-				}).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');
-					}
-				}).catch(error => {
-					console.error('Erreur AJAX', error);
-				});
-			}
-		}
-		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');
-				});
-			}
-
-			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 %}
-		});
+		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);
+        });
+    }
+}
 
 	</script>