Adapting filter toolbars to handle results amount

resources/css/components/filters-toolbar.css

@@ -1,17 +1,33 @@
 .filters-toolbar {
-  @apply flex
+  @apply py-8;
-  flex-row
+  ul {
-  justify-start
+    @apply flex
-  md:justify-center
+    flex-row
-  lg:justify-start
+    justify-start
+    md:justify-center
+    lg:justify-start
   
-  flex-wrap
+    flex-wrap
-  container
+    container
-  mx-auto 
+    mx-auto 
-  gap-x-4 gap-y-3 p-0 py-8;
+    gap-x-4 gap-y-3 p-0;
+  }
   li {
     @apply h-auto;
   }
+  &__posts-results-amount {
+    @apply pb-4;
+
+    .results-filter-name {
+      @apply font-bold;
+    }
+    &.filter-disable {
+      .results-filter-name,
+      .results-for {
+        @apply hidden sr-only;
+      }
+    }
+  }
   &__action-button {
     @apply bg-white shadowed py-4 px-4 rounded-xl 
     font-bold 

resources/js/archive-template-news.js

@@ -3,30 +3,54 @@ async function filterPosts(e) {
     e.target.getAttribute('data-term-id') ??
     e.target.parentElement.getAttribute('data-term-id') ??
     null;
+  const termName =
+    e.target.getAttribute('data-term-name') ??
+    e.target.parentElement.getAttribute('data-term-name') ??
+    null;
 
   const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
 
   filterButtons.forEach((button) => {
     button.classList.remove('filters-toolbar__action-button--active');
   });
-  await hydrateNewsFeedByTypeId(filterID);
+  await hydrateNewsFeedByTypeId(filterID, termName);
+
   e.target.classList.add('filters-toolbar__action-button--active');
 }
 
-async function hydrateNewsFeedByTypeId(filterID) {
+async function hydrateNewsFeedByTypeId(filterID, termName) {
-  let newCardsContent;
+  let newCardsDatas;
   if (filterID === 'all') {
     const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
-    newCardsContent = await response.json();
+    newCardsDatas = await response.json();
   } else {
     const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`);
-    newCardsContent = await response.json();
+    newCardsDatas = await response.json();
   }
 
   let container = document.querySelector('.card-grid-container');
-  container.innerHTML = newCardsContent;
+  container.innerHTML = newCardsDatas.html_template;
+  updateSearchResultsAmount(newCardsDatas.total_posts_found, termName);
 }
 
+function updateSearchResultsAmount(totalPostsFound, termName) {
+  const searchResultsComponent = document.querySelector('.filters-toolbar__posts-results-amount');
+
+  if (termName !== 'all') {
+    searchResultsComponent.querySelector('.results-amount').innerHTML = totalPostsFound;
+    searchResultsComponent.querySelector('.results-filter-name').innerHTML = '"' + termName + '"';
+    searchResultsComponent.classList.add('filter-active');
+    searchResultsComponent.classList.remove('filter-disable');
+    return;
+  }
+  if (termName === 'all') {
+    searchResultsComponent.classList.remove('filter-active');
+    searchResultsComponent.classList.add('filter-disable');
+    searchResultsComponent.querySelector('.results-amount').innerHTML = totalPostsFound;
+    searchResultsComponent.querySelector('.results-filter-name').innerHTML = termName;
+    return;
+  }
+}
 function filterNewsInit() {
   const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
   if (!filterNewsToolbar) return;

template-archive-news.php

@@ -8,6 +8,16 @@ $args = array(
 $relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
 $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 
+$post_per_page = 12;
+$args = array(
+	"post_type" => "post",
+	"status" => "publish",
+	"posts_per_page" => $post_per_page,
+
+);
+$posts = new WP_Query($args);
+
+
 ?>
 <div class="template-archives template-archives--news">
 	<?php /* --------
@@ -38,38 +48,59 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 	));
 	?>
 
+
+
 	<?php /* --------
 		FILTERS
  ---------------*/ ?>
-	<ul class="filters-toolbar filters-toolbar--archive-news">
+	<div class="filters-toolbar filters-toolbar--archive-news">
-		<?php
+		<p class="filters-toolbar__posts-results-amount filter-disable" role="status">
-		$news_types = get_terms(array(
+			<span class="results-amount">
-			'taxonomy' => 'news_type',
+				<?php echo $posts->found_posts ?>
-			'hide_empty' => false,
+			</span>
-		));
+			<span class="results-text">
+				<?php echo __("résultat(s)", "homegrade-theme__texte-fonctionnel"); ?>
+			</span>
 
-		?>
+			<span class="results-for">
-		<li>
+				<?php echo __("pour", "homegrade-theme__texte-fonctionnel") . " : "; ?>
-			<button class="filters-toolbar__action-button" data-term-id="all">Tous</button>
+			</span>
-		</li>
+			<span class="results-filter-name">
-		<?php foreach ($news_types as $typeTerm) : ?>
+				<?php echo __("categorie", "homegrade-theme__texte-fonctionnel"); ?>
+			</span>
+
+		</p>
+
+		<ul>
 			<?php
-
+			$news_types = get_terms(array(
-			$termIcon = get_field('news_type_icon', "news_type" . '_' . $typeTerm->term_id) ?? null;
+				'taxonomy' => 'news_type',
+				'hide_empty' => false,
+			));
 
 			?>
 			<li>
-				<button class="filters-toolbar__action-button" data-term-id="<?php echo $typeTerm->term_id ?>">
+				<button class="filters-toolbar__action-button" data-term-id="all" data-term-name="all">Tous</button>
-					<?php if ($termIcon) : ?>
-						<img class="icon" src="<?php echo $termIcon['url'] ?>" alt='' />
-					<?php endif; ?>
-
-					<?php echo $typeTerm->name ?>
-
-				</button>
 			</li>
-		<?php endforeach; ?>
+			<?php foreach ($news_types as $typeTerm) : ?>
-	</ul>
+				<?php
+
+				$termIcon = get_field('news_type_icon', "news_type" . '_' . $typeTerm->term_id) ?? null;
+
+				?>
+				<li>
+					<button class="filters-toolbar__action-button" data-term-id="<?php echo $typeTerm->term_id ?>" data-term-name="<?php echo $typeTerm->name ?>">
+						<?php if ($termIcon) : ?>
+							<img class="icon" src="<?php echo $termIcon['url'] ?>" alt='' />
+						<?php endif; ?>
+
+						<?php echo $typeTerm->name ?>
+
+					</button>
+				</li>
+			<?php endforeach; ?>
+		</ul>
+	</div>
 
 
 	<?php /* -------------
@@ -77,16 +108,6 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
  --------------------*/ ?>
 
 	<section class="news-container">
-		<?php
-		$post_per_page = 12;
-		$args = array(
-			"post_type" => "post",
-			"status" => "publish",
-			"posts_per_page" => $post_per_page,
-
-		);
-		$posts = new WP_Query($args);
-		?>
 
 		<div class="card-grid-container">