FEATURE fonds archives toolbar api ajax behaviour

includes/api.php

@@ -150,6 +150,7 @@ function build_fonds_archives_posts_by_letter($request)
 	$posts_per_page = esc_html($request->get_param('posts_per_page')) ?? -1;
 
 	$start_letter = sanitize_text_field($request->get_param('start_letter'));
+	$show_all_letters = filter_var($request->get_param('show_all_letters'), FILTER_VALIDATE_BOOLEAN);
 
 	// Construire les arguments de la query WordPress
 	$args = array(
@@ -158,10 +159,14 @@ function build_fonds_archives_posts_by_letter($request)
 		'posts_per_page' => $posts_per_page,
 	);
 
-	if (!empty($start_letter)) {
+	// Si "show all" est actif, on n'applique aucun filtre alphabétique.
+	if (!$show_all_letters && !empty($start_letter)) {
 		$args['carhop_start_letter'] = $start_letter;
 	}
 
+	if ($show_all_letters) {
+		remove_filter('posts_where', 'carhop_posts_where_starts_with_letter', 10);
+	}
 
 	// Gestion du tri
 	switch ($sort_by) {

resources/css/pages/archive-fonds-archives.css

@@ -1,5 +1,6 @@
 .fonds-archives-grid {
   &__toolbar {
+    @apply flex flex-row  items-end flex-wrap;
     .alphabetical-order-select {
       @apply border-y border-carhop-green-700 py-10;
       @apply col-span-2;
@@ -14,5 +15,26 @@
         @apply font-extrabold underline underline-offset-4;
       }
     }
+    .alphabetical-order-select {
+      @apply w-full;
+    }
+    select[name='sort_by'] {
+      @apply ml-auto;
+    }
+    .reset-button {
+      @apply hidden relative items-center justify-center gap-3;
+
+      &:hover {
+        @apply underline underline-offset-4;
+      }
+    }
+
+    &:has(.alphabetical-order-select__button[aria-pressed='true']) {
+      &:not(.alphabetical-order-select__button[data-letter='all']) {
+        .reset-button {
+          @apply flex;
+        }
+      }
+    }
   }
 }

resources/js/archives/archives-fonds-archives.ts

@@ -8,6 +8,9 @@ export default function archivesFondsArchivesInit() {
   const sortBySelect = toolbar.querySelector(
     'select[name="sort_by"]',
   ) as HTMLSelectElement;
+  const resetButton = toolbar.querySelectorAll(
+    '.reset-button',
+  ) as NodeListOf<HTMLButtonElement>;
   const postsContainer = document.querySelector('.post-grid__list');
   const postCountElement = document.querySelector('.post-count__count');
 
@@ -21,14 +24,24 @@ export default function archivesFondsArchivesInit() {
   function setActiveLetterButton(letter: string) {
     lettersButtons.forEach((button) => {
       const isActive = button.dataset.letter === letter;
+
       button.classList.toggle('is-active', isActive);
       button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
     });
   }
 
+  function resetSearch() {
+    activeLetter = 'all';
+    setActiveLetterButton(activeLetter);
+    hydrateFondsArchivesByLetter();
+  }
+
   async function hydrateFondsArchivesByLetter() {
+    const showAllLetters = activeLetter === 'all' || activeLetter === '';
+    const startLetter = showAllLetters ? '' : activeLetter;
     const params = new URLSearchParams({
-      start_letter: activeLetter,
+      start_letter: startLetter,
+      show_all_letters: showAllLetters ? 'true' : 'false',
       sort_by: sortBySelect?.value ?? 'title_asc',
       post_type: 'fonds-archives',
     });
@@ -61,12 +74,25 @@ export default function archivesFondsArchivesInit() {
     button.addEventListener('click', (event) => {
       event.preventDefault();
       const clickedLetter = button.dataset.letter ?? '';
-      activeLetter = activeLetter === clickedLetter ? '' : clickedLetter;
+      if (clickedLetter === 'all') {
+        activeLetter = 'all';
+      } else {
+        activeLetter = activeLetter === clickedLetter ? '' : clickedLetter;
+      }
       setActiveLetterButton(activeLetter);
       hydrateFondsArchivesByLetter();
     });
   });
 
+  if (resetButton) {
+    resetButton.forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+        resetSearch();
+      });
+    });
+  }
+
   if (sortBySelect) {
     sortBySelect.addEventListener('change', () => {
       hydrateFondsArchivesByLetter();

template-parts/post-types/fonds-archives/fonds-archives-grid-toolbar.php

@@ -8,6 +8,8 @@ $etiquette_active_filter_slug = $args['etiquette_active_filter_slug'] ?? null;
 
 $post_ids = wp_list_pluck($posts_query->posts, 'ID');
 
+
+
 $types = get_terms(array(
     'taxonomy' => 'type',
     'hide_empty' => true,
@@ -38,6 +40,10 @@ $tags = get_terms(array(
             </span>
         <?php endif; ?>
     </h2>
+    <button class="reset-button">
+        <img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-reset-search-cross-green.svg" alt="<?php _e('Réinitialiser', 'carhop'); ?>">
+        <?php _e('Réinitialiser la recherche', 'dynamiques'); ?>
+    </button>
     <select name="sort_by">
         <option value="date_desc" selected><?php _e('Numéros récents en premier', 'dynamiques'); ?></option>
         <option value="date_asc"><?php _e('Numéros anciens en premier', 'dynamiques'); ?></option>
@@ -53,6 +59,10 @@ $tags = get_terms(array(
                     <?php echo $letter; ?>
                 </button>
             <?php endforeach; ?>
+            <button class="reset-button" data-letter="all">
+                <?php _e('Tous', 'dynamiques'); ?>
+            </button>
+
         </div>
     </div>
 </div>