diff --git a/itou/static/css/itou.css b/itou/static/css/itou.css index 7d5bf6d8515..74bf4e1834a 100644 --- a/itou/static/css/itou.css +++ b/itou/static/css/itou.css @@ -148,11 +148,6 @@ margin-left: 2px; } -.c-aside-filters .select2-container--bootstrap-5 { - width: auto !important; - display: block !important; -} - /* Force the display of `.invalid-feedback` for Duet Date Picker with Bootstrap 4. See also `duet_date_picker.html`. @@ -466,3 +461,8 @@ an input field being invalid, generating an uncontrolled red box-shadow. */ border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } + +/* Fix for form.company and form.job_seeker width */ +.w-lg-400px .select2-selection__rendered { + white-space: nowrap !important; +} diff --git a/itou/static/js/htmx_dropdown_filter.js b/itou/static/js/htmx_dropdown_filter.js index f39105ef961..23c7d5b7269 100644 --- a/itou/static/js/htmx_dropdown_filter.js +++ b/itou/static/js/htmx_dropdown_filter.js @@ -1,10 +1,49 @@ -htmx.onLoad((target) => { +(function() { + const filtersContentId = "offcanvasApplyFiltersContent"; + const filtersContent = document.getElementById(filtersContentId); + const filtersCount = document.getElementById("all-filters-btn"); + + function fieldHasValue(container) { + return ( + container.querySelector('input:checked:not([value=""])') + || container.querySelector('input[value]:not([type=checkbox]):not([type=radio]):not([value=""])') + || container.querySelector('duet-date-picker[value]:not([value=""])') + || container.querySelector("select > option:not([value=''])[selected]") + ); + } + function toggleHasSelectedItem() { const dropdown = this.closest('.dropdown'); - this.classList.toggle('has-selected-item', dropdown.querySelector('input:checked:not([value=""])')); + this.classList.toggle('has-selected-item', fieldHasValue(dropdown)); + this.classList.toggle('font-weight-bold', fieldHasValue(dropdown)); + } + + function initFilters(sidebar) { + let activeFiltersCount = 0; + Array.from(sidebar.querySelectorAll(".collapsed")).forEach((collapse) => { + const collapseTarget = document.querySelector(collapse.dataset.bsTarget); + if (fieldHasValue(collapseTarget)) { + activeFiltersCount++; + bootstrap.Collapse.getOrCreateInstance(collapseTarget, { delay: 0 }).show(); + } + }); + if (filtersCount) { + filtersCount.textContent = activeFiltersCount ? ` (${activeFiltersCount})` : ""; + } + } + + function onLoad(target) { + target.querySelectorAll('.btn-dropdown-filter.dropdown-toggle').forEach((dropdownFilter) => { + dropdownFilter.addEventListener('hide.bs.dropdown', toggleHasSelectedItem); + toggleHasSelectedItem.call(dropdownFilter); + }); + if (target.id === filtersContentId) { + initFilters(target); + } + } + + if (filtersContent) { + initFilters(filtersContent); } - target.querySelectorAll('.btn-dropdown-filter.dropdown-toggle').forEach((dropdownFilter) => { - dropdownFilter.addEventListener('hide.bs.dropdown', toggleHasSelectedItem); - toggleHasSelectedItem.call(dropdownFilter); - }); -}); + htmx.onLoad(onLoad); +})(); diff --git a/itou/templates/search/includes/siaes_search_filters.html b/itou/templates/search/includes/siaes_search_filters.html deleted file mode 100644 index bdd844bf9c8..00000000000 --- a/itou/templates/search/includes/siaes_search_filters.html +++ /dev/null @@ -1,37 +0,0 @@ -{% load django_bootstrap5 %} - - diff --git a/itou/templates/search/includes/siaes_search_filters_company.html b/itou/templates/search/includes/siaes_search_filters_company.html deleted file mode 100644 index 2fccf9e5f0d..00000000000 --- a/itou/templates/search/includes/siaes_search_filters_company.html +++ /dev/null @@ -1,9 +0,0 @@ -{% load django_bootstrap5 %} -
- {% if form.company %} -
-
- {% bootstrap_field form.company wrapper_class="form-group mb-0" label_class="d-block font-weight-bold mb-3" %} -
- {% endif %} -
diff --git a/itou/templates/search/includes/siaes_search_filters_contract_types.html b/itou/templates/search/includes/siaes_search_filters_contract_types.html new file mode 100644 index 00000000000..b7d771733e3 --- /dev/null +++ b/itou/templates/search/includes/siaes_search_filters_contract_types.html @@ -0,0 +1,15 @@ +
+ + +
diff --git a/itou/templates/search/includes/siaes_search_filters_departments.html b/itou/templates/search/includes/siaes_search_filters_departments.html index a6d915ff324..dc0cac7a6c4 100644 --- a/itou/templates/search/includes/siaes_search_filters_departments.html +++ b/itou/templates/search/includes/siaes_search_filters_departments.html @@ -1,78 +1,84 @@ {% load django_bootstrap5 %} -{% if form.departments %} -
-
-
- +
+ {% if form.departments %} +
+ +
    + {% for choice in form.departments %} +
  • +
    +
    + + +
    +
    +
    • + {% endfor %} +
-
-{% endif %} + {% endif %} -{# getattr and list still painful in Django template #} -{% if form.districts_13 %} -
-
-
- + {# getattr and list still painful in Django template #} + {% if form.districts_13 %} +
+ +
    + {% for choice in form.districts_13 %} +
  • +
    +
    + + +
    +
    +
    • + {% endfor %} +
-
-{% endif %} + {% endif %} -{% if form.districts_69 %} -
-
-
- + {% if form.districts_69 %} +
+ +
    + {% for choice in form.districts_69 %} +
  • +
    +
    + + +
    +
    +
    • + {% endfor %} +
-
-{% endif %} + {% endif %} -{% if form.districts_75 %} -
-
-
- + {% if form.districts_75 %} +
+ +
    + {% for choice in form.districts_75 %} +
  • +
    +
    + + +
    +
    +
    • + {% endfor %} +
-
-{% endif %} + {% endif %} + diff --git a/itou/templates/search/includes/siaes_search_filters_distance.html b/itou/templates/search/includes/siaes_search_filters_distance.html new file mode 100644 index 00000000000..8f2ead5fd1a --- /dev/null +++ b/itou/templates/search/includes/siaes_search_filters_distance.html @@ -0,0 +1,15 @@ +
+ + +
diff --git a/itou/templates/search/includes/siaes_search_filters_domains.html b/itou/templates/search/includes/siaes_search_filters_domains.html new file mode 100644 index 00000000000..3283b98a69f --- /dev/null +++ b/itou/templates/search/includes/siaes_search_filters_domains.html @@ -0,0 +1,15 @@ +
+ + +
diff --git a/itou/templates/search/includes/siaes_search_filters_kinds.html b/itou/templates/search/includes/siaes_search_filters_kinds.html new file mode 100644 index 00000000000..0ecc3da8f31 --- /dev/null +++ b/itou/templates/search/includes/siaes_search_filters_kinds.html @@ -0,0 +1,15 @@ +
+ + +
diff --git a/itou/templates/search/includes/siaes_search_results.html b/itou/templates/search/includes/siaes_search_results.html index 396774b0e27..113f8ded786 100644 --- a/itou/templates/search/includes/siaes_search_results.html +++ b/itou/templates/search/includes/siaes_search_results.html @@ -1,4 +1,4 @@ -
+
{% for item in results_page %} {% if request.resolver_match.view_name == "search:employers_results" %} {% include "companies/includes/_card_siae.html" with siae=item %} @@ -20,7 +20,7 @@ {# Cannot use block in includes #} - Les emplois de l'inclusion - {% include "search/includes/siaes_search_filters_company.html" %} + {% include "search/includes/siaes_search_subtitle.html" %} {% include "search/includes/siaes_search_top.html" %} {% include "search/includes/siaes_search_tabs.html" %} {% endif %} diff --git a/itou/templates/search/includes/siaes_search_subtitle.html b/itou/templates/search/includes/siaes_search_subtitle.html new file mode 100644 index 00000000000..1faeb5a4b87 --- /dev/null +++ b/itou/templates/search/includes/siaes_search_subtitle.html @@ -0,0 +1,11 @@ +{% load str_filters %} + +
+ {% if request.resolver_match.view_name == "search:employers_results" %} +

Employeur{{ siaes_count|pluralizefr }}

+ {% else %} +

+ Poste{{ job_descriptions_count|pluralizefr }} ouvert{{ job_descriptions_count|pluralizefr }} au recrutement +

+ {% endif %} +
diff --git a/itou/templates/search/includes/siaes_search_top.html b/itou/templates/search/includes/siaes_search_top.html index 04df47d2e3c..4d9e641c60d 100644 --- a/itou/templates/search/includes/siaes_search_top.html +++ b/itou/templates/search/includes/siaes_search_top.html @@ -1,58 +1,59 @@ {% load str_filters %} +{% load django_bootstrap5 %} +
{% if request.resolver_match.view_name == "search:employers_results" %} -

Employeur{{ siaes_count|pluralizefr }}

-
+

- {{ siaes_count }} résultat{{ siaes_count|pluralizefr }} - {% if form.is_valid %} - - Emplois inclusifs à {{ distance }} km du centre de {{ city }} - {% endif %} + {{ siaes_count }} résultat{{ siaes_count|pluralizefr }}

- {% if siaes_count %} - -