wip: update apply filters ui

itou/templates/apply/includes/job_applications_filters/criteria.html

@@ -1,10 +1,13 @@
 {% load django_bootstrap5 %}
 
-
 {% if filters_form.criteria %}
     <hr>
     <fieldset>
-        <legend>Critères administratifs déclarés</legend>
-        {% bootstrap_field filters_form.criteria wrapper_class="" %}
+        <legend>
+            <button class="btn btn-outline-transparent has-collapse-caret collapsed" data-bs-toggle="collapse" data-bs-target="#collapseCriteria" type="button" aria-expanded="false" aria-controls="collapseCriteria">
+                Critères administratifs déclarés
+            </button>
+        </legend>
+        <div class="mt-3 collapse" id="collapseCriteria">{% bootstrap_field filters_form.criteria %}</div>
     </fieldset>
 {% endif %}

itou/templates/apply/includes/job_applications_filters/dates.html

@@ -2,7 +2,13 @@
 
 <hr>
 <fieldset>
-    <legend>Date d'envoi de la candidature</legend>
-    {% bootstrap_field filters_form.start_date %}
-    {% bootstrap_field filters_form.end_date %}
+    <legend>
+        <button class="btn btn-outline-transparent has-collapse-caret collapsed" data-bs-toggle="collapse" data-bs-target="#collapseDate" type="button" aria-expanded="false" aria-controls="collapseDate">
+            Date d'envoi de la candidature
+        </button>
+    </legend>
+    <div class="mt-3 collapse" id="collapseDate">
+        {% bootstrap_field filters_form.start_date %}
+        {% bootstrap_field filters_form.end_date %}
+    </div>
 </fieldset>

itou/templates/apply/includes/job_applications_filters/departments.html

@@ -1,8 +1,47 @@
 {% load django_bootstrap5 %}
 
 {% if filters_form.departments %}
-    <hr>
-    <fieldset>
-        {% bootstrap_field filters_form.departments %}
-    </fieldset>
+    {% if btn_dropdown_filter %}
+        <div class="dropdown">
+            <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                {{ filters_form.departments.label | capfirst }}
+            </button>
+            <ul class="dropdown-menu">
+                {% for choice in filters_form.departments %}
+                    <li>
+                        <div class="dropdown-item">
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" {% if choice.data.selected %}checked=""{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% else %}
+        <hr>
+        <fieldset>
+            <legend>
+                <button class="btn btn-outline-transparent has-collapse-caret collapsed"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseDdepartments"
+                        type="button"
+                        aria-expanded="false"
+                        aria-controls="collapseDdepartments">{{ filters_form.departments.label | capfirst }}</button>
+            </legend>
+            <div class="mt-3 mb-3 collapse" id="collapseDdepartments">
+                <ul>
+                    {% for choice in filters_form.departments %}
+                        <li>
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" {% if choice.data.selected %}checked=""{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </fieldset>
+    {% endif %}
 {% endif %}

itou/templates/apply/includes/job_applications_filters/eligibility_validated.html

@@ -3,7 +3,16 @@
 {% if filters_form.eligibility_validated %}
     <hr>
     <fieldset>
-        <legend>Éligibilité IAE</legend>
-        {% bootstrap_field filters_form.eligibility_validated %}
+        <legend>
+            <button class="btn btn-outline-transparent has-collapse-caret collapsed"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapseEligibilityIAE"
+                    type="button"
+                    aria-expanded="false"
+                    aria-controls="collapseEligibilityIAE">
+                {{ filters_form.eligibility_validated.label | capfirst }}
+            </button>
+        </legend>
+        <div class="mt-3 collapse" id="collapseEligibilityIAE">{% bootstrap_field filters_form.eligibility_validated %}</div>
     </fieldset>
 {% endif %}

itou/templates/apply/includes/job_applications_filters/job_seekers.html

@@ -3,6 +3,13 @@
 {% if filters_form.job_seekers %}
     <hr>
     <fieldset>
-        {% bootstrap_field filters_form.job_seekers %}
+        <legend>
+            <button class="btn has-collapse-caret collapsed" data-bs-toggle="collapse" data-bs-target="#collapseJobSeekers" type="button" aria-expanded="false" aria-controls="collapseJobSeekers">
+                {{ filters_form.job_seekers.label | capfirst }}
+            </button>
+        </legend>
+        <div class="mt-3 collapse" id="collapseJobSeekers">
+            {% bootstrap_field filters_form.job_seekers show_label=False %}
+        </div>
     </fieldset>
 {% endif %}

itou/templates/apply/includes/job_applications_filters/pass.html

@@ -3,8 +3,16 @@
 {% if filters_form.pass_iae_suspended %}
     <hr>
     <fieldset>
-        <legend>Statut du PASS IAE</legend>
-        {% bootstrap_field filters_form.pass_iae_active wrapper_class="mb-2" %}
-        {% bootstrap_field filters_form.pass_iae_suspended wrapper_class="" %}
+        <legend>
+            <button class="btn btn-outline-transparent has-collapse-caret collapsed" data-bs-toggle="collapse" data-bs-target="#collapsePassIAE" type="button" aria-expanded="false" aria-controls="collapsePassIAE">
+                Statut du PASS IAE
+            </button>
+        </legend>
+        <div class="mt-3 mb-3 collapse" id="collapsePassIAE">
+            <ul>
+                <li>{% bootstrap_field filters_form.pass_iae_active wrapper_class="" %}</li>
+                <li>{% bootstrap_field filters_form.pass_iae_suspended wrapper_class="" %}</li>
+            </ul>
+        </div>
     </fieldset>
 {% endif %}

itou/templates/apply/includes/job_applications_filters/selected_jobs.html

@@ -1,8 +1,45 @@
-{% load django_bootstrap5 %}
-
 {% if filters_form.selected_jobs %}
-    <hr>
-    <fieldset>
-        {% bootstrap_field filters_form.selected_jobs %}
-    </fieldset>
+    {% if btn_dropdown_filter %}
+        <div class="dropdown">
+            <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                {{ filters_form.selected_jobs.label | capfirst }}
+            </button>
+            <ul class="dropdown-menu">
+                {% for choice in filters_form.selected_jobs %}
+                    <li>
+                        <div class="dropdown-item">
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" {% if choice.data.selected %}checked=""{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% else %}
+        <hr>
+        <fieldset>
+            <legend>
+                <button class="btn btn-outline-transparent has-collapse-caret collapsed"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseSelectedJob"
+                        type="button"
+                        aria-expanded="false"
+                        aria-controls="collapseSelectedJob">{{ filters_form.selected_jobs.label | capfirst }}</button>
+            </legend>
+            <div class="mt-3 mb-3 collapse" id="collapseSelectedJob">
+                <ul>
+                    {% for choice in filters_form.selected_jobs %}
+                        <li>
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" {% if choice.data.selected %}checked=""{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </fieldset>
+    {% endif %}
 {% endif %}

itou/templates/apply/includes/job_applications_filters/sender.html

@@ -1,17 +1,19 @@
 {% load django_bootstrap5 %}
 
-{% if filters_form.senders or filters_form.sender_organizations %}
-    <hr>
-    <fieldset>
-        <legend>Émetteur</legend>
-    {% endif %}
+<hr>
+<fieldset>
+    <legend>
+        <button class="btn btn-outline-transparent has-collapse-caret collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSenders" type="button" aria-expanded="false" aria-controls="collapseSenders">
+            Émetteur
+        </button>
+    </legend>
+    <div class="mt-3 collapse" id="collapseSenders">
+        {% if filters_form.senders %}
+            {% bootstrap_field filters_form.senders %}
+        {% endif %}
 
-    {% if filters_form.senders %}
-        {% bootstrap_field filters_form.senders %}
-    {% endif %}
-
-    {% if filters_form.sender_organizations %}
-        {% bootstrap_field filters_form.sender_organizations %}
-    {% endif %}
-
-    {% if filters_form.senders or filters_form.sender_organizations %}</fieldset>{% endif %}
+        {% if filters_form.sender_organizations %}
+            {% bootstrap_field filters_form.sender_organizations %}
+        {% endif %}
+    </div>
+</fieldset>

itou/templates/apply/includes/job_applications_filters/statut.html

@@ -1,13 +1,39 @@
-<fieldset>
-    <legend>Statut candidature</legend>
-    <ul>
-        {% for choice in filters_form.states %}
-            <li>
-                <div class="form-check">
-                    <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" {% if choice.data.selected %}checked=""{% endif %}>
-                    <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
-                </div>
-            </li>
-        {% endfor %}
-    </ul>
-</fieldset>
+{% if btn_dropdown_filter %}
+    <div class="dropdown">
+        <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+            Statut
+        </button>
+        <ul class="dropdown-menu">
+            {% for choice in filters_form.states %}
+                <li>
+                    <div class="dropdown-item">
+                        <div class="form-check">
+                            <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" {% if choice.data.selected %}checked=""{% endif %}>
+                            <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                        </div>
+                    </div>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+{% else %}
+    <fieldset>
+        <legend>
+            <button class="btn btn-outline-transparent has-collapse-caret collapsed" data-bs-toggle="collapse" data-bs-target="#collapseStates" type="button" aria-expanded="false" aria-controls="collapseStates">
+                Statut
+            </button>
+        </legend>
+        <div class="mt-3 mb-3 collapse" id="collapseStates">
+            <ul>
+                {% for choice in filters_form.states %}
+                    <li>
+                        <div class="form-check">
+                            <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" {% if choice.data.selected %}checked=""{% endif %}>
+                            <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </fieldset>
+{% endif %}

itou/templates/apply/includes/job_applications_filters/to_companies.html

@@ -3,8 +3,13 @@
 {% if filters_form.to_companies %}
     <hr>
     <fieldset>
-        <legend>Structure destinataire</legend>
-        {% bootstrap_field filters_form.to_companies show_label=False %}
+        <legend>
+            <button class="btn has-collapse-caret collapsed" data-bs-toggle="collapse" data-bs-target="#collapseToCompanies" type="button" aria-expanded="false" aria-controls="collapseToCompanies">
+                Structure destinataire
+            </button>
+        </legend>
+        <div class="mt-3 collapse" id="collapseToCompanies">
+            {% bootstrap_field filters_form.to_companies show_label=False %}
+        </div>
     </fieldset>
-
 {% endif %}

itou/templates/apply/includes/list_counter.html

@@ -0,0 +1,7 @@
+{% load str_filters %}
+
+<h3 class="h4 mb-0" id="apply-list-count"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
+    {% with job_applications_page.paginator.count as counter %}
+        {{ counter }} <strong>résultat{{ counter|pluralizefr }}</strong>
+    {% endwith %}
+</h3>

itou/templates/apply/includes/list_job_applications.html

@@ -2,23 +2,7 @@
 {% load static %}
 {% load str_filters %}
 
-<section aria-labelledby="results" id="job-applications-section">
-    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-md-between mb-3 mb-md-4">
-        <h3 class="h4 mb-0" id="results">
-            {% with job_applications_page.paginator.count as counter %}
-                {{ counter }} <strong>résultat{{ counter|pluralizefr }}</strong>
-            {% endwith %}
-        </h3>
-        <div class="flex-column flex-md-row btn-group btn-group-sm btn-group-action">
-            {% if filters_counter > 0 %}
-                <a href="{% if request.user.is_prescriber %}{% url 'apply:list_prescriptions' %}{% elif request.user.is_employer %}{% url 'apply:list_for_siae' %}{% else %}{% url 'apply:list_for_job_seeker' %}{% endif %}"
-                   class="btn btn-secondary btn-ico mt-3 mt-md-0">
-                    <i class="ri-arrow-go-back-line" aria-hidden="true"></i>
-                    <span>Réinitialiser les filtres ({{ filters_counter }})</span>
-                </a>
-            {% endif %}
-        </div>
-    </div>
+<section aria-labelledby="apply-list-count" id="job-applications-section">
     {% if not job_applications_page %}
         <div class="text-center my-3 my-md-4">
             <img class="img-fluid" src="{% static 'img/illustration-siae-card-no-result.svg' %}" alt="" loading="lazy">

itou/templates/apply/includes/list_reset_filters.html

@@ -0,0 +1,19 @@
+{% load str_filters %}
+
+{% if btn_dropdown_filter %}
+    <div class="ms-md-auto" id="apply-list-filter-counter"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
+        {% if filters_counter > 0 %}
+            <a href="{% if request.user.is_prescriber %}{% url 'apply:list_prescriptions' %}{% elif request.user.is_employer %}{% url 'apply:list_for_siae' %}{% else %}{% url 'apply:list_for_job_seeker' %}{% endif %}"
+               class="btn btn-ico btn-dropdown-filter"
+               aria-label="Réinitialiser le{{ filters_counter|pluralizefr }} filtre{{ filters_counter|pluralizefr }} actif{{ filters_counter|pluralizefr }}">
+                <i class="ri-eraser-line font-weight-bold" aria-hidden="true"></i>
+                <span>Effacer tout</span>
+            </a>
+        {% endif %}
+    </div>
+{% else %}
+    <button class="btn btn-ico btn-block btn-outline-primary">
+        <i class="ri-eraser-line font-weight-medium" aria-hidden="true"></i>
+        <span>Effacer tout</span>
+    </button>
+{% endif %}