diff --git a/resources/css/pages/repertoire-metiers.css b/resources/css/pages/repertoire-metiers.css index 471b4e4..193ea25 100644 --- a/resources/css/pages/repertoire-metiers.css +++ b/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; diff --git a/resources/js/dynamicSearch.js b/resources/js/dynamicSearch.js index 45fa4a6..7413167 100644 --- a/resources/js/dynamicSearch.js +++ b/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) => { - e.preventDefault(); - - const form = e.target.closest('form'); - const formData = new FormData(form); - - let formObjectDatas = formatFormDataArray(formData); - console.log(formObjectDatas); - - hydrateFields(formObjectDatas); - }); + form.addEventListener('change', handleFormChange); } diff --git a/template-repertoire-des-metiers.php b/template-repertoire-des-metiers.php index fc4bf34..4322ae6 100644 --- a/template-repertoire-des-metiers.php +++ b/template-repertoire-des-metiers.php @@ -44,7 +44,6 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null; ?> -