handling checking/unchecking subtaxonomies

resources/css/pages/repertoire-metiers.css

@@ -13,17 +13,29 @@
   h4 {
     @apply my-0;
   }
-  .checkbox-choice {
-    @apply pl-0;
-    @apply flex flex-wrap;
 
+  .checkbox-choice {
+    @apply pl-0 pt-1;
+    @apply flex flex-wrap;
+    transition: all 0.3s ease;
     &__subtaxonomy-list {
       @apply pl-4 my-1 w-full hidden;
     }
 
     &:has(> input[type='checkbox']:checked) {
       .checkbox-choice__subtaxonomy-list {
-        @apply block bg-patrimoine-sante-securite-light;
+        @apply block;
+      }
+    }
+
+    &.checkbox-choice-parent {
+      @apply px-2 rounded-2xl;
+    }
+    &.checkbox-choice-parent:has(.child-checkbox:checked) {
+      transition: all 0.3s ease;
+      @apply bg-patrimoine-sante-securite-light pt-3;
+      .checkbox-choice__subtaxonomy-list {
+        @apply block;
       }
     }
 
@@ -93,6 +105,7 @@
   &__metiers-filters {
     @apply border border-neutral-300 p-4 rounded-3xl my-4 w-full;
   }
+
   &__elements-batiments-filters,
   &__metiers-filters {
     @apply hidden;

resources/js/dynamicSearch.js

@@ -26,17 +26,20 @@ async function hydrateFields(formObjectDatas) {
     .querySelector('body')
     .getAttribute('current-language');
   const taxonomy = formObjectDatas.search_by;
+  const localisation = formObjectDatas.localisation ?? null;
+  console.log(`localisation  : ${localisation}`);
+
   const taxonomyIds =
     taxonomy === 'metiers'
       ? formObjectDatas.metiers
       : formObjectDatas.elementsbatiments;
 
   const response = await fetch(
-    `/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}`
+    `/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}&localisation=${localisation}`
   );
   const artisansDatas = await response.json();
 
-  console.log(artisansDatas);
+  // console.log(artisansDatas);
 
   const artisansGrid = document.querySelector(
     '.artisans-posts__grid'
@@ -48,6 +51,69 @@ async function hydrateFields(formObjectDatas) {
   // );
 }
 
+function handleHierarchicalCheckboxRelation(e) {
+  // If parent is checked, check all children
+  if (
+    e.target.checked &&
+    e.target.classList.contains('parent-checkbox')
+  ) {
+    const parentRootTag = e.target.closest(
+      '.checkbox-choice'
+    );
+    const children = parentRootTag.querySelectorAll(
+      '.child-checkbox'
+    );
+
+    children.forEach((child) => {
+      child.checked = true;
+    });
+  }
+  if (
+    !e.target.checked &&
+    e.target.classList.contains('parent-checkbox')
+  ) {
+    // alert('uncheck parent');
+    const parent = e.target.closest('.checkbox-choice');
+    const children = parent.querySelectorAll(
+      '.child-checkbox'
+    );
+
+    children.forEach((child) => {
+      child.checked = false;
+    });
+  }
+
+  if (
+    !e.target.checked &&
+    e.target.classList.contains('child-checkbox')
+  ) {
+    const checkboxRootTag = e.target.closest(
+      '.checkbox-choice'
+    );
+    const parentCheckbox =
+      checkboxRootTag.parentElement.parentElement.querySelector(
+        '.parent-checkbox'
+      );
+
+    parentCheckbox.checked = false;
+  }
+}
+
+function handleFormChange(e) {
+  e.preventDefault();
+
+  if (
+    e.target.type === 'checkbox' &&
+    e.target.classList.contains('taxonomy-checkbox')
+  ) {
+    handleHierarchicalCheckboxRelation(e);
+  }
+  const form = e.target.closest('form');
+  const formData = new FormData(form);
+
+  let formObjectDatas = formatFormDataArray(formData);
+  hydrateFields(formObjectDatas);
+}
 export default function dynamicSearch() {
   const form = document.querySelector(
     '.metier-patrimoine-searchform'
@@ -56,15 +122,5 @@ export default function dynamicSearch() {
   if (!form) {
     return;
   }
-  form.addEventListener('change', (e) => {
+  form.addEventListener('change', handleFormChange);
-    e.preventDefault();
-
-    const form = e.target.closest('form');
-    const formData = new FormData(form);
-
-    let formObjectDatas = formatFormDataArray(formData);
-    console.log(formObjectDatas);
-
-    hydrateFields(formObjectDatas);
-  });
 }

template-repertoire-des-metiers.php

@@ -44,7 +44,6 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 	?>
 
 
-
 	<section class="artisans-posts">
 		<aside class="metier-patrimoine-searchbar">
 			<div class="metier-patrimoine-searchbar__results-indications">
@@ -82,37 +81,15 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 					</div>
 					<ul>
 						<?php
-						// Récupérer tous les termes de la taxonomie 'elementsbatiments' avec une hiérarchie
-						$ElementBatimentsTerms = get_terms([
-							'taxonomy' => 'elementsbatiments',
-							'orderby' => 'name',
-							'order' => 'ASC',
-							'hide_empty' => false,
-						]);
 
-						if ($ElementBatimentsTerms) :
+						$terms_by_parent = getAllBatimentsTermsByParents();
-							// Organiser les termes par parent (hiérarchie)
-							$terms_by_parent = [];
-
-							// Boucle pour organiser les termes en fonction de leurs parents
-							foreach ($ElementBatimentsTerms as $term) {
-								if ($term->parent == 0) {
-									// Si c'est un parent, on le place dans le tableau des parents
-									$terms_by_parent[$term->term_id] = [
-										'term' => $term,
-										'children' => [],
-									];
-								} else {
-									$terms_by_parent[$term->parent]['children'][] = $term;
-								}
-							}
 
 						// Afficher les termes parents et leurs enfants
 						foreach ($terms_by_parent as $parent_term_data) :
 							$parent_term = $parent_term_data['term'];
 						?>
-								<li class="checkbox-choice">
+							<li class="checkbox-choice checkbox-choice-parent">
-									<input type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
+								<input class="parent-checkbox taxonomy-checkbox" type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
 								<label>
 									<?php echo esc_html($parent_term->name); ?>
 								</label>
@@ -120,8 +97,8 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 								<?php if (!empty($parent_term_data['children'])) : ?>
 									<ul class="checkbox-choice__subtaxonomy-list">
 										<?php foreach ($parent_term_data['children'] as $child_term) : ?>
-												<li class="checkbox-choice">
+											<li class="checkbox-choice checkbox-choice-child">
-													<input type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
+												<input class="child-checkbox taxonomy-checkbox" type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
 												<label>
 													<?php echo esc_html($child_term->name); ?>
 												</label>
@@ -131,7 +108,7 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 								<?php endif; ?>
 							</li>
 						<?php endforeach;
-						endif; ?>
+						?>
 					</ul>
 				</fieldset>
 
@@ -145,45 +122,14 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 
 					<ul>
 						<?php
-						// Récupérer tous les termes de la taxonomie 'metiers' avec une hiérarchie
-						$MertiersTerms = get_terms([
-							'taxonomy' => 'metiers',
-							'orderby' => 'name',
-							'order' => 'ASC',
-							'hide_empty' => false,
-							'stat'
-						]);
-
-						if ($MertiersTerms) :
-							$terms_by_parent = [];
-							foreach ($MertiersTerms as $term) {
-								if ($term->parent == 0 && !isset($terms_by_parent[$term->term_id])) {
-									$terms_by_parent[$term->term_id] = [
-										'term' => $term,
-										'children' => [],
-									];
-								}
-								if ($term->parent == 0 && isset($terms_by_parent[$term->term_id])) {
-									$terms_by_parent[$term->term_id]['term'] = $term;
-								} else {
-
-									if (!isset($terms_by_parent[$term->parent])) {
-										$terms_by_parent[$term->parent] = [
-											'term' => null,
-											'children' => [],
-										];
-									}
-									$terms_by_parent[$term->parent]['children'][] = $term;
-								}
-							}
-
 
+						$terms_by_parent = getAllMetiersTermsByParents();
 
 						foreach ($terms_by_parent as $parent_term_data) :
 							$parent_term = $parent_term_data['term'];
 						?>
-								<li class="checkbox-choice">
+							<li class="checkbox-choice checkbox-choice-parent">
-									<input type="checkbox" name="metiers[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
+								<input class="parent-checkbox taxonomy-checkbox" type="checkbox" name="metiers[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
 								<label>
 									<?php echo esc_html($parent_term->name); ?>
 
@@ -193,9 +139,9 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 								<?php if (!empty($parent_term_data['children'])) : ?>
 									<ul class="checkbox-choice__subtaxonomy-list">
 										<?php foreach ($parent_term_data['children'] as $child_term) : ?>
-												<li class="checkbox-choice">
+											<li class="checkbox-choice checkbox-choice-child">
 
-													<input type="checkbox" name="metiers[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
+												<input class="child-checkbox taxonomy-checkbox" type="checkbox" name="metiers[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
 												<label>
 													<?php echo esc_html($child_term->name); ?>
 												</label>
@@ -205,7 +151,7 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 								<?php endif; ?>
 							</li>
 						<?php endforeach;
-						endif; ?>
+						?>
 					</ul>
 				</fieldset>
 
@@ -223,15 +169,15 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 							<label> <?php echo __("Toute la Belgique", "metiers-patrimoine-theme") ?></label>
 						</li>
 						<li class="checkbox-choice">
-							<input type="checkbox" name="localisation[]" value="wallonie">
+							<input type="checkbox" name="localisation[]" value="wallonia">
 							<label> <?php echo __("Wallonie", "metiers-patrimoine-theme") ?></label>
 						</li>
 						<li class="checkbox-choice">
-							<input type="checkbox" name="localisation[]" value="bruxelles">
+							<input type="checkbox" name="localisation[]" value="brussels" checked>
 							<label> <?php echo __("Bruxelles", "metiers-patrimoine-theme") ?></label>
 						</li>
 						<li class="checkbox-choice">
-							<input type="checkbox" name="localisation[]" value="flandre">
+							<input type="checkbox" name="localisation[]" value="flanders">
 							<label> <?php echo __("Flandre", "metiers-patrimoine-theme") ?></label>
 						</li>
 					</ul>