From 74eda13e566cf7f70003d36b59738bfb9c52244f Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 26 Nov 2024 10:24:49 +0100
Subject: [PATCH] handling localisation checkbox behaviour

---
 resources/js/dynamicSearch.js       | 34 +++++++++++++++++++++++++++--
 template-repertoire-des-metiers.php | 15 +++++--------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/resources/js/dynamicSearch.js b/resources/js/dynamicSearch.js
index 7413167..b1d3960 100644
--- a/resources/js/dynamicSearch.js
+++ b/resources/js/dynamicSearch.js
@@ -51,7 +51,7 @@ async function hydrateFields(formObjectDatas) {
   // );
 }
 
-function handleHierarchicalCheckboxRelation(e) {
+function handleHierarchicalTaxonomyCheckboxRelation(e) {
   // If parent is checked, check all children
   if (
     e.target.checked &&
@@ -99,6 +99,30 @@ function handleHierarchicalCheckboxRelation(e) {
   }
 }
 
+function handleLocalisationCheckboxBehaviour(e) {
+  const AlllocalisationsCheckboxes = document.querySelector(
+    '.localisation-checkbox[value="all"]'
+  );
+  // If parent is checked, check all children
+  if (e.target.checked && e.target.value === 'all') {
+    const localisationCheckboxes =
+      document.querySelectorAll('.localisation-checkbox');
+
+    localisationCheckboxes.forEach((checkbox) => {
+      checkbox.checked = true;
+    });
+  }
+  if (
+    !e.target.checked &&
+    AlllocalisationsCheckboxes.checked === true
+  ) {
+    AlllocalisationsCheckboxes.checked = false;
+  }
+  if (e.target.checked && e.target.value !== 'all') {
+    AlllocalisationsCheckboxes.checked = false;
+  }
+}
+
 function handleFormChange(e) {
   e.preventDefault();
 
@@ -106,7 +130,13 @@ function handleFormChange(e) {
     e.target.type === 'checkbox' &&
     e.target.classList.contains('taxonomy-checkbox')
   ) {
-    handleHierarchicalCheckboxRelation(e);
+    handleHierarchicalTaxonomyCheckboxRelation(e);
+  }
+  if (
+    e.target.type === 'checkbox' &&
+    e.target.classList.contains('localisation-checkbox')
+  ) {
+    handleLocalisationCheckboxBehaviour(e);
   }
   const form = e.target.closest('form');
   const formData = new FormData(form);
diff --git a/template-repertoire-des-metiers.php b/template-repertoire-des-metiers.php
index 35ffcbd..3a17154 100644
--- a/template-repertoire-des-metiers.php
+++ b/template-repertoire-des-metiers.php
@@ -154,7 +154,6 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 					</ul>
 				</fieldset>
 
-
 				<fieldset class="metier-patrimoine-searchbar__geographic-filters">
 
 					<div class="fieldset-titling">
@@ -164,27 +163,23 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 
 					<ul>
 						<li class="checkbox-choice">
-							<input type="checkbox" name="localisation[]" value="all">
+							<input class="localisation-checkbox" type="checkbox" name="localisation[]" value="all" checked>
 							<label> <?php echo __("Toute la Belgique", "metiers-patrimoine-theme") ?></label>
 						</li>
 						<li class="checkbox-choice">
-							<input type="checkbox" name="localisation[]" value="wallonia">
-							<label> <?php echo __("Wallonie", "metiers-patrimoine-theme") ?></label>
+							<input class="localisation-checkbox" type="checkbox" name="localisation[]" value="wallonia" checked>
+							<label><?php echo __("Wallonie", "metiers-patrimoine-theme") ?></label>
 						</li>
 						<li class="checkbox-choice">
-							<input type="checkbox" name="localisation[]" value="brussels" checked>
+							<input class="localisation-checkbox" 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="flanders">
+							<input class="localisation-checkbox" type="checkbox" name="localisation[]" value="flanders" checked>
 							<label> <?php echo __("Flandre", "metiers-patrimoine-theme") ?></label>
 						</li>
 					</ul>
-
 				</fieldset>
-
-
-				<!-- <button type="submit">submit</button> -->
 			</form>
 
 		</aside>