handling search

resources/js/dynamicSearch.js

@@ -21,6 +21,29 @@ function formatFormDataArray(formData) {
   }
   return formObjectDatas;
 }
+
+function formatSearchDataArray(formData) {
+  let formObjectDatas = {};
+
+  for (const [name, value] of formData) {
+    formObjectDatas[cleanName] = value;
+  }
+  return formObjectDatas;
+}
+
+function handleRadioCardClick(card) {
+  card.addEventListener('click', (e) => {
+    const radioInput = card.querySelector(
+      'input[type="radio"]'
+    );
+    radioInput.checked = true;
+    const artisanPosts = document.querySelector(
+      '.artisans-posts'
+    );
+    if (!artisanPosts) return;
+    artisanPosts.scrollIntoView({ behavior: 'smooth' });
+  });
+}
 async function hydrateFields(formObjectDatas) {
   const currentLanguage = document
     .querySelector('body')
@@ -51,6 +74,29 @@ async function hydrateFields(formObjectDatas) {
   // );
 }
 
+async function hydrateSearch(searchValue) {
+  const currentLanguage = document
+    .querySelector('body')
+    .getAttribute('current-language');
+
+  const response = await fetch(
+    `/wp-json/metiers-patrimoine-datas/v1/build/artisans?search=${searchValue}`
+  );
+  const searchArtisansDatas = await response.json();
+
+  console.log(searchArtisansDatas);
+
+  const artisansGrid = document.querySelector(
+    '.artisans-posts__grid'
+  );
+  artisansGrid.innerHTML =
+    searchArtisansDatas.html_template;
+  brochureRows.setAttribute(
+    'current-post-count',
+    brochuresDatas.total_posts_found
+  );
+}
+
 function handleHierarchicalTaxonomyCheckboxRelation(e) {
   // If parent is checked, check all children
   if (
@@ -144,6 +190,38 @@ function handleFormChange(e) {
   let formObjectDatas = formatFormDataArray(formData);
   hydrateFields(formObjectDatas);
 }
+
+function handleSearchSubmit(e) {
+  e.preventDefault();
+
+  const searchBy = document.querySelector(
+    '.metier-patrimoine-searchbar__search-by'
+  );
+  const elementsBatimentsCheckbox = document.querySelector(
+    '#elements_batiments_checkbox'
+  );
+  const metiersCheckbox = document.querySelector(
+    '#metiers_checkbox'
+  );
+
+  metiersCheckbox.checked = false;
+  elementsBatimentsCheckbox.checked = false;
+
+  console.log(metiersCheckbox);
+
+  const form = e.target.closest('form');
+  const searchValue =
+    form.querySelector('#search-input').value;
+
+  hydrateSearch(searchValue);
+  
+  const artisanPosts = document.querySelector(
+    '.artisans-posts'
+  );
+  if (!artisanPosts) return;
+  artisanPosts.scrollIntoView({ behavior: 'smooth' });
+}
+
 export default function dynamicSearch() {
   const form = document.querySelector(
     '.metier-patrimoine-searchform'
@@ -153,4 +231,18 @@ export default function dynamicSearch() {
     return;
   }
   form.addEventListener('change', handleFormChange);
+
+  const searchRadioCards = document.querySelectorAll(
+    '.search-radio-card'
+  );
+
+  searchRadioCards.forEach((card) => {
+    handleRadioCardClick(card);
+  });
+
+  const searchForm = document.querySelector(
+    '.artisan-search-bar'
+  );
+
+  searchForm.addEventListener('submit', handleSearchSubmit);
 }