diff --git a/includes/api.php b/includes/api.php index 0c3ce16..f3468e7 100644 --- a/includes/api.php +++ b/includes/api.php @@ -98,7 +98,7 @@ function build_search_artisan_posts_cards($request) if ($newsPostsDatas->found_posts === 0) { - $html_template = "

" . __("Aucun résultat trouvé", "metiers-patrimoine-theme") . "

" . __("Essayez d'ajouter un filtre supplémentaire pour trouver plus de résultats", "metiers-patrimoine-theme") . "

"; + $html_template = "

" . __("Aucun résultat trouvé", "metiers-patrimoine-theme") . "

" . __("Essayez d'ajouter un filtre supplémentaire pour trouver plus de résultats", "metiers-patrimoine-theme") . "

"; } $response_data = array( 'html_template' => $html_template, @@ -143,4 +143,4 @@ function debugQueryTest() $newsPostsDatas = new WP_Query($args); // write_log($newsPostsDatas->posts); } -debugQueryTest(); +// debugQueryTest(); diff --git a/resources/css/pages/repertoire-metiers.css b/resources/css/pages/repertoire-metiers.css index 216b6da..031a6b9 100644 --- a/resources/css/pages/repertoire-metiers.css +++ b/resources/css/pages/repertoire-metiers.css @@ -1,13 +1,17 @@ .artisans-posts { @apply md:flex gap-4 pt-8; + &__grid { @apply flex flex-col lg:grid grid-cols-1 lg:grid-cols-2 gap-6 w-full h-fit; .no-results { @apply col-span-2 text-center pt-4; + &__cover { + @apply w-40 mx-auto; + } h3 { - @apply text-patrimoine-sante-securite; + @apply text-patrimoine-sante-securite mt-8; } p { @apply text-neutral-900 tracking-wide; @@ -23,6 +27,57 @@ } */ .metier-patrimoine-searchbar { @apply w-80 lg:w-80 shrink-0 h-fit sticky top-0; + .posts-results-count { + @apply shrink-0; + } + &__results-indications { + @apply flex gap-1 items-center flex-wrap; + .results-count { + @apply font-bold; + } + .posts-results-count { + @apply !my-0; + } + .active-research-indicator { + @apply !flex items-center gap-x-1 gap-y-0 !my-0 relative; + + &[is-active='true'] { + @apply block; + } + &[is-active='false'] { + @apply !hidden; + } + + /* max-width: -webkit-calc(100% - 40px); + max-width: 90%; */ + @apply w-fit; + max-width: calc(100% - 40px); + + button { + @apply flex items-center; + @apply border-2 border-solid border-neutral-800 rounded-full px-3 py-2 my-0; + .current-queried-word { + max-width: 200px; + @apply font-bold text-sm; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: fit-content; + } + &:after { + @apply block w-5 h-5 ml-2 shrink-0; + max-width: 100%; + content: ''; + background-image: url('../resources/img/graphic-assets/cross-in-cirle-thick.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } + } + } + } + h4 { @apply my-0; } diff --git a/resources/img/graphic-assets/cross-in-cirle-thick.svg b/resources/img/graphic-assets/cross-in-cirle-thick.svg new file mode 100644 index 0000000..fd7d2aa --- /dev/null +++ b/resources/img/graphic-assets/cross-in-cirle-thick.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/resources/img/illustrations/Homegrade_resultats-filtres-cactus.svg b/resources/img/illustrations/Homegrade_resultats-filtres-cactus.svg new file mode 100644 index 0000000..ffe1ae0 --- /dev/null +++ b/resources/img/illustrations/Homegrade_resultats-filtres-cactus.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/js/dynamicSearch.js b/resources/js/dynamicSearch.js index d6a4b52..809db22 100644 --- a/resources/js/dynamicSearch.js +++ b/resources/js/dynamicSearch.js @@ -22,6 +22,40 @@ function formatFormDataArray(formData) { return formObjectDatas; } +function observeSearchResetButton() { + const currentSearchWordQueryButton = + document.querySelector('.active-research-indicator'); + + const searchInput = + document.querySelector('#search-input'); + + currentSearchWordQueryButton.addEventListener( + 'click', + resetTextualSearch + ); + + searchInput.addEventListener('input', (event) => { + console.log(event); + if (event.target.value === '') { + resetTextualSearch(); + } + }); +} + +function resetTextualSearch() { + const searchInput = + document.querySelector('#search-input'); + searchInput.value = ''; + hydrateWithAllArtisans({}); + + const currentSearchWordQueryButton = + document.querySelector('.active-research-indicator'); + currentSearchWordQueryButton.setAttribute( + 'is-active', + 'false' + ); +} + function formatSearchDataArray(formData) { let formObjectDatas = {}; @@ -50,7 +84,6 @@ async function hydrateFields(formObjectDatas) { .getAttribute('current-language'); const taxonomy = formObjectDatas.search_by; const localisation = formObjectDatas.localisation ?? null; - console.log(`localisation : ${localisation}`); const taxonomyIds = taxonomy === 'metiers' @@ -62,16 +95,37 @@ async function hydrateFields(formObjectDatas) { ); const artisansDatas = await response.json(); - // console.log(artisansDatas); + const artisansGrid = document.querySelector( + '.artisans-posts__grid' + ); + artisansGrid.innerHTML = artisansDatas.html_template; + const postResultsLiveDiv = document.querySelector( + '.posts-results-count .results-count' + ); + + postResultsLiveDiv.innerHTML = + artisansDatas.total_posts_found.toString(); +} +async function hydrateWithAllArtisans() { + const currentLanguage = document + .querySelector('body') + .getAttribute('current-language'); + + const response = await fetch( + `/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}` + ); + const artisansDatas = await response.json(); const artisansGrid = document.querySelector( '.artisans-posts__grid' ); artisansGrid.innerHTML = artisansDatas.html_template; - // brochureRows.setAttribute( - // 'current-post-count', - // brochuresDatas.total_posts_found - // ); + const postResultsLiveDiv = document.querySelector( + '.posts-results-count .results-count' + ); + + postResultsLiveDiv.innerHTML = + artisansDatas.total_posts_found.toString(); } async function hydrateSearch(searchValue) { @@ -84,17 +138,27 @@ async function hydrateSearch(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 + + const postResultsAriaLiveDiv = document.querySelector( + '.posts-results-count .results-count' ); + + postResultsAriaLiveDiv.innerHTML = + searchArtisansDatas.total_posts_found.toString(); + + const currentQueriedWordAriaLiveDiv = + document.querySelector('.current-queried-word'); + const activeSearchIndicator = document.querySelector( + '.active-research-indicator' + ); + + currentQueriedWordAriaLiveDiv.innerHTML = searchValue; + activeSearchIndicator.setAttribute('is-active', 'true'); } function handleHierarchicalTaxonomyCheckboxRelation(e) { @@ -207,14 +271,12 @@ function handleSearchSubmit(e) { 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' ); @@ -245,4 +307,5 @@ export default function dynamicSearch() { ); searchForm.addEventListener('submit', handleSearchSubmit); + observeSearchResetButton(); } diff --git a/template-repertoire-des-metiers.php b/template-repertoire-des-metiers.php index eb226a2..ee193be 100644 --- a/template-repertoire-des-metiers.php +++ b/template-repertoire-des-metiers.php @@ -47,11 +47,15 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;