FEATURE Handling letter filtering for fonds archive

includes/api.php

@@ -13,8 +13,29 @@ add_action('rest_api_init', function () {
 		'callback' => 'build_posts',
 		'permission_callback' => '__return_true',
 	));
+
+	register_rest_route('carhop-datas/v1/build', '/fonds-archives', array(
+		'methods' => 'GET',
+		'callback' => 'build_fonds_archives_posts_by_letter',
+		'permission_callback' => '__return_true',
+	));
 });
 
+function carhop_posts_where_starts_with_letter($where, $query)
+{
+	global $wpdb;
+
+	$start_letter = $query->get('carhop_start_letter');
+	if (empty($start_letter)) {
+		return $where;
+	}
+
+	$start_letter = mb_substr((string) $start_letter, 0, 1);
+	$like = $wpdb->esc_like($start_letter) . '%';
+
+	return $where . $wpdb->prepare(" AND {$wpdb->posts}.post_title LIKE %s", $like);
+}
+
 
 // ################ FILTER POSTS ################
 
@@ -117,3 +138,77 @@ function build_posts($request)
 
 	return $response;
 }
+
+
+
+
+function build_fonds_archives_posts_by_letter($request)
+{
+	$post_type = 'fonds-archives';
+	$sort_by = esc_html($request->get_param('sort_by'));
+	$offset = esc_html($request->get_param('offset')) ?? 0;
+	$posts_per_page = esc_html($request->get_param('posts_per_page')) ?? -1;
+
+	$start_letter = sanitize_text_field($request->get_param('start_letter'));
+
+	// Construire les arguments de la query WordPress
+	$args = array(
+		'post_type' => $post_type,
+		'offset' => $offset,
+		'posts_per_page' => $posts_per_page,
+	);
+
+	if (!empty($start_letter)) {
+		$args['carhop_start_letter'] = $start_letter;
+	}
+
+
+	// Gestion du tri
+	switch ($sort_by) {
+		case 'date_desc':
+			$args['orderby'] = 'date';
+			$args['order'] = 'DESC';
+			break;
+		case 'date_asc':
+			$args['orderby'] = 'date';
+			$args['order'] = 'ASC';
+			break;
+		case 'title_asc':
+			$args['orderby'] = 'title';
+			$args['order'] = 'ASC';
+			break;
+		default:
+			$args['orderby'] = 'date';
+			$args['order'] = 'DESC';
+	}
+
+	add_filter('posts_where', 'carhop_posts_where_starts_with_letter', 10, 2);
+	$posts_query = new WP_Query($args);
+	remove_filter('posts_where', 'carhop_posts_where_starts_with_letter', 10);
+
+	ob_start();
+	if ($posts_query->have_posts()) :
+		while ($posts_query->have_posts()) : $posts_query->the_post();
+			get_template_part('template-parts/components/cards/post-card', null, array(
+				'ID' => get_the_ID(),
+				'current_post_type' => $post_type
+			));
+		endwhile;
+	else :
+		echo '<p>Aucune archive trouvée commençant par la lettre ' . '<span class="font-extrabold">' . $start_letter . '</span></p>';
+	endif;
+	wp_reset_postdata();
+
+	$html_template = ob_get_clean();
+
+	$response_data = array(
+		'html_template' => $html_template,
+		'post_count' => $posts_query->found_posts,
+		'query_args' => $args, // Pour debug
+	);
+	$response = new WP_REST_Response($response_data);
+
+	$response->set_status(200);
+
+	return $response;
+}

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

@@ -10,6 +10,9 @@
       .alphabetical-order-select__list {
         @apply flex gap-5;
       }
+      .alphabetical-order-select__button[aria-pressed='true'] {
+        @apply font-extrabold underline underline-offset-4;
+      }
     }
   }
 }

resources/js/app.ts

@@ -6,6 +6,7 @@ import alternatePictures from './alternate-pictures';
 import { searchBarInit } from './search-bar';
 import singlesInit from './singles/singles';
 import archivesInit from './archives/archives';
+import archivesFondsArchivesInit from './archives/archives-fonds-archives';
 import handleCiteButton from './singles/cite-button';
 import titlesInit from './titles';
 import {
@@ -22,6 +23,7 @@ window.addEventListener('load', function () {
   searchBarInit();
   singlesInit();
   archivesInit();
+  archivesFondsArchivesInit();
   handleCiteButton();
   titlesInit();
   pageHeaderAnimationInit();

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

@@ -0,0 +1,75 @@
+export default function archivesFondsArchivesInit() {
+  const toolbar = document.querySelector('.fonds-archives-grid__toolbar');
+  if (!toolbar) return;
+
+  const lettersButtons = toolbar.querySelectorAll(
+    '.alphabetical-order-select__button',
+  ) as NodeListOf<HTMLButtonElement>;
+  const sortBySelect = toolbar.querySelector(
+    'select[name="sort_by"]',
+  ) as HTMLSelectElement;
+  const postsContainer = document.querySelector('.post-grid__list');
+  const postCountElement = document.querySelector('.post-count__count');
+
+  if (!lettersButtons.length || !postsContainer) return;
+  const postsContainerElement = postsContainer as HTMLElement;
+
+  let activeLetter = '';
+  let currentAbortController: AbortController | null = null;
+  let lastRequestId = 0;
+
+  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');
+    });
+  }
+
+  async function hydrateFondsArchivesByLetter() {
+    const params = new URLSearchParams({
+      start_letter: activeLetter,
+      sort_by: sortBySelect?.value ?? 'title_asc',
+      post_type: 'fonds-archives',
+    });
+
+    const url = `/wp-json/carhop-datas/v1/build/fonds-archives?${params.toString()}`;
+
+    if (currentAbortController) currentAbortController.abort();
+    currentAbortController = new AbortController();
+    const requestId = ++lastRequestId;
+
+    try {
+      const response = await fetch(url, { signal: currentAbortController.signal });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = await response.json();
+
+      if (requestId !== lastRequestId) return;
+
+      postsContainerElement.innerHTML = data.html_template;
+      if (postCountElement) {
+        postCountElement.textContent = String(data.post_count ?? 0);
+      }
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') return;
+      console.error('Erreur lors de la récupération des fonds d’archives:', error);
+    }
+  }
+
+  lettersButtons.forEach((button) => {
+    button.setAttribute('aria-pressed', 'false');
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      const clickedLetter = button.dataset.letter ?? '';
+      activeLetter = activeLetter === clickedLetter ? '' : clickedLetter;
+      setActiveLetterButton(activeLetter);
+      hydrateFondsArchivesByLetter();
+    });
+  });
+
+  if (sortBySelect) {
+    sortBySelect.addEventListener('change', () => {
+      hydrateFondsArchivesByLetter();
+    });
+  }
+}

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

@@ -13,7 +13,6 @@ $query_args = array(
 
 
 $posts_query = new WP_Query($query_args);
-
 ?>
 
 

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

@@ -49,7 +49,7 @@ $tags = get_terms(array(
         <h3 class="alphabetical-order-select__title">Rechercher par ordre alphabétique</h3>
         <div class="alphabetical-order-select__list">
             <?php foreach ($letters as $letter) : ?>
-                <button class="alphabetical-order-select__button">
+                <button class="alphabetical-order-select__button" data-letter="<?php echo $letter; ?>">
                     <?php echo $letter; ?>
                 </button>
             <?php endforeach; ?>