127 lines
3.3 KiB
JavaScript
127 lines
3.3 KiB
JavaScript
function formatFormDataArray(formData) {
|
|
let formObjectDatas = {};
|
|
|
|
for (const [name, value] of formData) {
|
|
const cleanName = name.replace('[]', '');
|
|
|
|
if (formObjectDatas[cleanName]) {
|
|
// Si la clé correspond à un tableau (comme les checkboxes)
|
|
// ajouter la nouvelle valeur au tableau
|
|
if (Array.isArray(formObjectDatas[cleanName])) {
|
|
formObjectDatas[cleanName].push(value);
|
|
} else {
|
|
formObjectDatas[cleanName] = [
|
|
formObjectDatas[cleanName],
|
|
value,
|
|
];
|
|
}
|
|
} else {
|
|
formObjectDatas[cleanName] = value;
|
|
}
|
|
}
|
|
return formObjectDatas;
|
|
}
|
|
async function hydrateFields(formObjectDatas) {
|
|
const currentLanguage = document
|
|
.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}&localisation=${localisation}`
|
|
);
|
|
const artisansDatas = await response.json();
|
|
|
|
// console.log(artisansDatas);
|
|
|
|
const artisansGrid = document.querySelector(
|
|
'.artisans-posts__grid'
|
|
);
|
|
artisansGrid.innerHTML = artisansDatas.html_template;
|
|
// brochureRows.setAttribute(
|
|
// 'current-post-count',
|
|
// brochuresDatas.total_posts_found
|
|
// );
|
|
}
|
|
|
|
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'
|
|
);
|
|
|
|
if (!form) {
|
|
return;
|
|
}
|
|
form.addEventListener('change', handleFormChange);
|
|
}
|