FEATURE Handling a rest button for the search on single

includes/api.php

@@ -21,6 +21,13 @@ add_action('rest_api_init', function () {
 		'permission_callback' => '__return_true',
 	));
 
+	// ################ RÉCUPÉRATION DES ARTICLES D'UNE REVUE ################
+	register_rest_route('dynamiques-datas/v1/build', '/revues/(?P<revue_id>\d+)/articles', array(
+		'methods' => 'GET',
+		'callback' => 'build_revue_articles',
+		'permission_callback' => '__return_true',
+	));
+
 
 	/* ----------------
 		INTERACTIONS ROUTES
@@ -36,11 +43,11 @@ add_action('rest_api_init', function () {
 });
 
 
-
 // ################ FILTER ARTICLES ################
 
 function build_articles($request)
 {
+
 	$etiquette = esc_html($request->get_param('etiquette'));
 	$auteur = esc_html($request->get_param('auteur'));
 	$sort_by = esc_html($request->get_param('sort_by'));
@@ -133,10 +140,12 @@ function build_articles($request)
 
 // ################ FILTER REVUES ################
 
-function build_revues($request)
+function build_revue_articles($request)
 {
+
+
 	$search = esc_html($request->get_param('search'));
-	$current_revue_id = intval($request->get_param('current_revue_id'));
+	$current_revue_id = intval($request->get_param('revue_id'));
 
 	// Récupérer les articles liés à la revue courante
 	$issue_related_articles = get_field('articles', $current_revue_id);

resources/css/pages/singles.css

@@ -71,6 +71,13 @@
     }
     .search-field {
       @apply relative;
+      .reset-search-button {
+        @apply absolute top-1/2 right-0 -translate-y-1/2;
+        @apply mr-2 w-8 h-8;
+        @apply bg-contain hidden;
+        background-image: url('../resources/img/icons/carhop-reset-search-cross-green.svg');
+      }
+
       &:after {
         content: ' ';
         @apply block w-8 h-8;
@@ -79,6 +86,16 @@
         @apply bg-contain;
         background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
       }
+
+      &:has(input:not(:placeholder-shown)) {
+        .reset-search-button {
+          @apply block;
+        }
+        &:after {
+          @apply hidden;
+        }
+      }
+
       input {
         @apply border border-primary text-primary w-full;
         @apply w-full p-4 relative;
@@ -91,8 +108,12 @@
     .tags {
       @apply hidden lg:block;
     }
+    .search-field + .article-tags,
+    .search-field + .revue-tags {
+      @apply mt-8;
+    }
     .tags__title {
-      @apply text-lg uppercase font-semibold mt-8 my-4 nunito;
+      @apply text-lg uppercase font-semibold mt-0 my-4 nunito;
     }
     .tags-list {
       @apply flex flex-wrap gap-4;

resources/img/icons/carhop-reset-search-cross-green.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="17" stroke="#136F63" stroke-width="2"/>
+<path d="M11.8828 25L26.0005 11" stroke="#136F63" stroke-width="2"/>
+<path d="M25.1172 25L10.9995 11" stroke="#136F63" stroke-width="2"/>
+</svg>

resources/js/singles/search-revue.ts

@@ -6,9 +6,26 @@ export default function handleSearchRevue() {
   const currentRevueId = document
     .querySelector('.page--single-revue')
     ?.getAttribute('data-revue-id') as string;
+  const revueToolbarButtons = document.querySelectorAll(
+    '.page--single-revue .revue-toolbar button'
+  ) as NodeListOf<HTMLButtonElement>;
 
   if (!searchRevue || !contentArea) return;
 
+  const resetSearchButton = document.querySelector(
+    '.page--single-revue .sidebar .search-field .reset-search-button'
+  ) as HTMLButtonElement;
+  if (!resetSearchButton) return;
+
+  function resetSearch() {
+    searchRevue.value = '';
+    contentArea.innerHTML = originalContent;
+  }
+
+  resetSearchButton.addEventListener('click', () => {
+    resetSearch();
+  });
+
   // Sauvegarder le contenu original
   const originalContent = contentArea.innerHTML;
 
@@ -23,9 +40,9 @@ export default function handleSearchRevue() {
 
     try {
       const response = await fetch(
-        `/wp-json/dynamiques-datas/v1/build/revues?search=${encodeURIComponent(
+        `/wp-json/dynamiques-datas/v1/build/revues/${currentRevueId}/articles?search=${encodeURIComponent(
           searchValue
-        )}&current_revue_id=${currentRevueId}`
+        )}`
       );
       const data = await response.json();
 
@@ -40,4 +57,11 @@ export default function handleSearchRevue() {
       `;
     }
   });
+
+  revueToolbarButtons.forEach((button) => {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      resetSearch();
+    });
+  });
 }

single-articles.php

@@ -12,10 +12,11 @@ $revueID = get_field('related_revue', get_the_ID());
 
 			<div class="content-wrapper" data-active-tab="article">
 				<aside class="sidebar">
-					<div class="search-field">
+					// commenting because not needed for articles
+					<!-- <div class="search-field">
 						<input type="text" placeholder="Rechercher">
-					</div>
+						<button type="button" class="reset-search-button" title="Réinitialiser la recherche"></button>
-
+					</div> -->
 
 					<?php get_template_part('template-parts/articles/article-tags'); ?>
 					<?php get_template_part('template-parts/articles/index-panel'); ?>
@@ -57,9 +58,5 @@ $revueID = get_field('related_revue', get_the_ID());
 	<?php endif; ?>
 </div>
 
-</article>
-
-
-</div>
 <?php
 get_footer();

single-revues.php

@@ -23,22 +23,26 @@ $articles = get_field('articles', $current_issue->ID);
 				<div class="sidebar">
 					<div class="search-field">
 						<input type="text" placeholder="Rechercher dans la revue">
+						<button type="button" class="reset-search-button" title="Réinitialiser la recherche"></button>
+
 					</div>
 					<?php
 					$tags = get_revue_terms($current_issue->ID, 'etiquettes');
 					?>
 					<?php if ($tags) : ?>
-						<div class="tags">
+						<div id="revue-tags" class="revue-tags">
-							<h3 class="tags__title">Tags</h3>
+							<div class="tags">
-							<ul class="tags-list">
+								<h3 class="tags__title">Tags</h3>
-								<?php foreach ($tags as $tag) : ?>
+								<ul class="tags-list">
-									<li>
+									<?php foreach ($tags as $tag) : ?>
-										<a class="article-tag" href="<?php echo add_query_arg('etiquette', $tag->slug, get_post_type_archive_link('articles')); ?>">
+										<li>
-											<?php echo $tag->name; ?>
+											<a class="article-tag" href="<?php echo add_query_arg('etiquette', $tag->slug, get_post_type_archive_link('articles')); ?>">
-										</a>
+												<?php echo $tag->name; ?>
-									</li>
+											</a>
-								<?php endforeach; ?>
+										</li>
-							</ul>
+									<?php endforeach; ?>
+								</ul>
+							</div>
 						</div>
 					<?php endif; ?>
 				</div>

template-parts/articles/articles-grid.php

@@ -61,7 +61,7 @@ $thematiques = get_terms(array(
 					<?php _e('articles', 'dynamiques'); ?>
 				</span>
 			</h2>
-			<div class="post-grid__toolbar-actions">
+			<div class="post-grid__toolbar-actions" data-post-type="articles">
 				<div class="search-bar">
 					<input type="text" placeholder="<?php _e('Rechercher par mot-clé', 'dynamiques'); ?>">
 				</div>

template-parts/revues/revues-grid.php

@@ -32,7 +32,7 @@ $thematiques = get_terms(array(
 				<input type="text" placeholder="<?php _e('Rechercher par mot-clé', 'dynamiques'); ?>">
 			</div>
 
-			<div class="post-grid__toolbar-actions">
+			<div class="post-grid__toolbar-actions" data-post-type="revues">
 
 				<select name="etiquettes">
 					<option value="1"><?php _e('Thématiques', 'dynamiques'); ?></option>