From ca86c6ebf2ec5bd72b2268881cff58c9bfc3ad93 Mon Sep 17 00:00:00 2001
From: hellodeloo <hello@hellodeloo.com>
Date: Wed, 15 May 2024 15:10:12 +0200
Subject: [PATCH] feat: update employee record list filters ui

---
 .../includes/approvals_filters/expiry.html    |  2 +-
 .../employee_record_filters/status.html       | 17 ++++++++++
 .../includes/list_counter.html                |  7 ++++
 .../includes/list_form_fields.html            | 21 ------------
 .../employee_record/includes/list_order.html  | 13 ++++++++
 .../includes/list_results.html                | 25 +++-----------
 itou/templates/employee_record/list.html      | 33 +++++++++++--------
 itou/www/employee_record_views/forms.py       |  8 +++--
 itou/www/employee_record_views/views.py       | 10 +++---
 tests/www/employee_record_views/test_list.py  | 24 +++++++++++++-
 10 files changed, 95 insertions(+), 65 deletions(-)
 create mode 100644 itou/templates/employee_record/includes/employee_record_filters/status.html
 create mode 100644 itou/templates/employee_record/includes/list_counter.html
 delete mode 100644 itou/templates/employee_record/includes/list_form_fields.html
 create mode 100644 itou/templates/employee_record/includes/list_order.html

diff --git a/itou/templates/approvals/includes/approvals_filters/expiry.html b/itou/templates/approvals/includes/approvals_filters/expiry.html
index 0898d44957..bcbad18dad 100644
--- a/itou/templates/approvals/includes/approvals_filters/expiry.html
+++ b/itou/templates/approvals/includes/approvals_filters/expiry.html
@@ -7,7 +7,7 @@
             <li>
                 <div class="dropdown-item">
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="{{ choice.data.name }}" id="{{ choice.id_for_label }}" value="{{ choice.data.value }}"{% if choice.data.selected %} checked="checked"{% endif %}>
+                        <input class="form-check-input" type="radio" name="{{ choice.data.name }}" id="{{ choice.id_for_label }}" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
                         <label class="form-check-label" for="{{ choice.id_for_label }}">{{ choice.data.label }}</label>
                     </div>
                 </div>
diff --git a/itou/templates/employee_record/includes/employee_record_filters/status.html b/itou/templates/employee_record/includes/employee_record_filters/status.html
new file mode 100644
index 0000000000..ad0fb6fe84
--- /dev/null
+++ b/itou/templates/employee_record/includes/employee_record_filters/status.html
@@ -0,0 +1,17 @@
+{% load list_filters %}
+
+<div id="employee-records-list-filters"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
+    {% for choice, badge in form.status|zip:badges %}
+        <li>
+            <div class="dropdown-item">
+                <div class="form-check">
+                    <input class="form-check-input" type="radio" name="{{ choice.data.name }}" id="{{ choice.id_for_label }}" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                    <label class="form-check-label" for="{{ choice.id_for_label }}">
+                        {{ choice.data.label }}
+                        <span class="badge rounded-pill badge-xs {{ badge.1 }}">{{ badge.0 }}</span>
+                    </label>
+                </div>
+            </div>
+        </li>
+    {% endfor %}
+</div>
diff --git a/itou/templates/employee_record/includes/list_counter.html b/itou/templates/employee_record/includes/list_counter.html
new file mode 100644
index 0000000000..869ff32caf
--- /dev/null
+++ b/itou/templates/employee_record/includes/list_counter.html
@@ -0,0 +1,7 @@
+{% load str_filters %}
+
+{% with navigation_pages.paginator.count as counter %}
+    <h3 class="h4 m-0 me-auto" id="employee-record-list-count"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
+        {{ counter }} résultat{{ counter|pluralizefr }}
+    </h3>
+{% endwith %}
diff --git a/itou/templates/employee_record/includes/list_form_fields.html b/itou/templates/employee_record/includes/list_form_fields.html
deleted file mode 100644
index d3a49719b2..0000000000
--- a/itou/templates/employee_record/includes/list_form_fields.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% load django_bootstrap5 %}
-{% load list_filters %}
-<div id="employee-records-list-filters" class="c-aside-filters__card__body"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
-    <fieldset>
-        <legend>Statut</legend>
-        <div class="form-group">
-            {% for status, badge in form.status|zip:badges %}
-                <div class="d-flex mb-2">
-                    <div class="flex-grow-1">{{ status }}</div>
-                    <div>
-                        <span class="badge rounded-pill badge-xs {{ badge.1 }}">{{ badge.0 }}</span>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
-    </fieldset>
-    <fieldset>
-        <legend>Par candidat</legend>
-        {% bootstrap_field filters_form.job_seekers show_label=False %}
-    </fieldset>
-</div>
diff --git a/itou/templates/employee_record/includes/list_order.html b/itou/templates/employee_record/includes/list_order.html
new file mode 100644
index 0000000000..451dfefd41
--- /dev/null
+++ b/itou/templates/employee_record/includes/list_order.html
@@ -0,0 +1,13 @@
+<div id="employee-record-order"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
+    <span class="fs-sm">Trier par :</span>
+    <button type="button" class="btn btn-sm btn-link dropdown-toggle p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ ordered_by_label }}
+    </button>
+    <div class="dropdown-menu dropdown-menu-end" id="order-form-group">
+        {% for order_value, order_label in form.order.field.choices %}
+            <button class="dropdown-item {% if order_value == form.order.value %}active{% endif %}" type="button" value="{{ order_value }}">
+                {{ order_label }}
+            </button>
+        {% endfor %}
+    </div>
+</div>
diff --git a/itou/templates/employee_record/includes/list_results.html b/itou/templates/employee_record/includes/list_results.html
index ac14ed7a38..dffee24a1f 100644
--- a/itou/templates/employee_record/includes/list_results.html
+++ b/itou/templates/employee_record/includes/list_results.html
@@ -1,25 +1,7 @@
+{% load django_bootstrap5 %}
 {% load str_filters %}
+
 <div id="employee-records-container">
-    <div class="d-flex align-items-center">
-        <div class="flex-grow-1">
-            {% with navigation_pages.paginator.count as counter %}
-                <h3 class="h4 m-0">{{ counter }} résultat{{ counter|pluralizefr }}</h3>
-            {% endwith %}
-        </div>
-        <div>
-            <span class="fs-sm">Trier par :</span>
-            <button type="button" class="btn btn-sm btn-link dropdown-toggle p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                {{ ordered_by_label }}
-            </button>
-            <div class="dropdown-menu dropdown-menu-end" id="order-form-group">
-                {% for order_value, order_label in form.order.field.choices %}
-                    <button class="dropdown-item {% if order_value == form.order.value %}active{% endif %}" type="button" value="{{ order_value }}">
-                        {{ order_label }}
-                    </button>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
     {# "Real" employee records objects #}
     <div class="employee-records-list">
         {% if employee_records_list %}
@@ -42,9 +24,10 @@ <h3 class="h4 m-0">{{ counter }} résultat{{ counter|pluralizefr }}</h3>
     {% endif %}
     {% include "includes/pagination.html" with page=navigation_pages boost=True boost_target="#employee-records-container" boost_indicator="#employee-records-container" %}
 </div>
+
 {% if request.htmx %}
+    {% include "employee_record/includes/list_order.html" %}
     {% include "employee_record/includes/list_status_help.html" with request=request status=form.status.value only %}
     {% include "employee_record/includes/list_counter.html" %}
     {% include "employee_record/includes/employee_record_filters/status.html" %}
-    {% include "employee_record/includes/employee_record_filters/reset.html" %}
 {% endif %}
diff --git a/itou/templates/employee_record/list.html b/itou/templates/employee_record/list.html
index b53d7e6ac9..c34ee88b56 100644
--- a/itou/templates/employee_record/list.html
+++ b/itou/templates/employee_record/list.html
@@ -57,18 +57,23 @@ <h2 class="h3">Nous transférons vos fiches salarié à l'ASP afin de vous faire
                 </div>
             </div>
             <div class="row">
-                <div class="col-12 col-md-4 mb-3 mb-md-5">
-                    <aside class="c-aside-filters">
-                        <button class="c-aside-filters__btn__collapse" data-bs-toggle="collapse" data-bs-target="#asideFiltersCollapse" aria-expanded="true" aria-controls="asideFiltersCollapse">
-                            <i class="ri-filter-line" aria-hidden="true"></i>
-                            <span>Filtres des fiches salarié</span>
-                        </button>
-                        <div class="c-aside-filters__card collapse show" id="asideFiltersCollapse">
-                            <form hx-get="{% url 'employee_record_views:list' %}" hx-trigger="change delay:.5s" hx-indicator="#employee-records-container" hx-target="#employee-records-container" hx-swap="outerHTML" hx-push-url="true">
-                                {% include "employee_record/includes/list_form_fields.html" %}
-                                {# Filled via jQuery. Does not need reloading with HTMX, its content is static. #}
-                                {{ form.order.as_hidden }}
-                            </form>
+                <div class="col-12">
+                    <form hx-get="{% url 'employee_record_views:list' %}"
+                          hx-trigger="change delay:.5s, change from:#id_job_seekers"
+                          hx-indicator="#employee-records-container"
+                          hx-target="#employee-records-container"
+                          hx-swap="outerHTML"
+                          hx-push-url="true"
+                          hx-include="#id_job_seekers">
+                        <div class="btn-dropdown-filter-group mb-3 mb-md-4">
+                            <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">
+                                    {% include "employee_record/includes/employee_record_filters/status.html" %}
+                                </ul>
+                            </div>
                         </div>
                         {# Filled via jQuery. Does not need reloading with HTMX, its content is static. #}
                         {{ form.order.as_hidden }}
@@ -79,14 +84,13 @@ <h2 class="h3">Nous transférons vos fiches salarié à l'ASP afin de vous faire
                 <div class="col-12">
                     <div class="d-flex flex-column flex-md-row align-items-md-center mb-3 mb-md-4">
                         {% include "employee_record/includes/list_counter.html" %}
-                        {% include "employee_record/includes/list_sort.html" %}
+                        {% include "employee_record/includes/list_order.html" %}
                         <div class="flex-column flex-md-row mt-3 mt-md-0 ms-md-3">
                             {% bootstrap_field filters_form.job_seekers layout="inline" %}
                         </div>
                     </div>
                     {% include "employee_record/includes/list_results.html" %}
                 </div>
-                <div class="col-12 col-md-8">{% include "employee_record/includes/list_results.html" %}</div>
             </div>
         </div>
     </section>
@@ -95,6 +99,7 @@ <h2 class="h3">Nous transférons vos fiches salarié à l'ASP afin de vous faire
 {% block script %}
     {{ block.super }}
     <script src='{% static "js/htmx_compat.js" %}'></script>
+    <script src='{% static "js/htmx_dropdown_filter.js" %}'></script>
     <!-- Needed to use Select2MultipleWidget. -->
     {{ filters_form.media.js }}
     <script nonce="{{ CSP_NONCE }}">
diff --git a/itou/www/employee_record_views/forms.py b/itou/www/employee_record_views/forms.py
index c14d897619..39845e1bc8 100644
--- a/itou/www/employee_record_views/forms.py
+++ b/itou/www/employee_record_views/forms.py
@@ -82,8 +82,12 @@ class SelectEmployeeRecordStatusForm(forms.Form):
 class EmployeeRecordFilterForm(forms.Form):
     job_seekers = forms.MultipleChoiceField(
         required=False,
-        label="Nom du candidat",
-        widget=Select2MultipleWidget,
+        label="Nom du salarié",
+        widget=Select2MultipleWidget(
+            attrs={
+                "data-placeholder": "Nom du salarié",
+            }
+        ),
     )
 
     def __init__(self, job_seekers, *args, **kwargs):
diff --git a/itou/www/employee_record_views/views.py b/itou/www/employee_record_views/views.py
index e9bb624f55..96572d9743 100644
--- a/itou/www/employee_record_views/views.py
+++ b/itou/www/employee_record_views/views.py
@@ -193,11 +193,11 @@ def list_employee_records(request, template_name="employee_record/list.html"):
             len(eligible_job_applications) if status == Status.NEW else eligible_job_applications.count(),
             "bg-info",
         ),
-        (employee_record_badges.get(Status.READY, 0), "bg-secondary"),
-        (employee_record_badges.get(Status.SENT, 0), "bg-warning"),
-        (employee_record_badges.get(Status.REJECTED, 0), "bg-danger"),
-        (employee_record_badges.get(Status.PROCESSED, 0), "bg-success"),
-        (employee_record_badges.get(Status.DISABLED, 0), "bg-emploi-lightest text-primary"),
+        (employee_record_badges.get(Status.READY, 0), "bg-emploi-lightest text-info"),
+        (employee_record_badges.get(Status.SENT, 0), "bg-emploi-lightest text-info"),
+        (employee_record_badges.get(Status.REJECTED, 0), "bg-warning"),
+        (employee_record_badges.get(Status.PROCESSED, 0), "bg-emploi-lightest text-info"),
+        (employee_record_badges.get(Status.DISABLED, 0), "bg-emploi-lightest text-info"),
     ]
 
     # Employee records are created with a job application object.
diff --git a/tests/www/employee_record_views/test_list.py b/tests/www/employee_record_views/test_list.py
index f7b27334d7..f8e8d1d9bf 100644
--- a/tests/www/employee_record_views/test_list.py
+++ b/tests/www/employee_record_views/test_list.py
@@ -506,12 +506,27 @@ def test_htmx(self):
         fresh_page = parse_response_to_soup(response)
         assertSoupEqual(simulated_page, fresh_page)
 
+    def test_htmx_order(self):
+        self.client.force_login(self.user)
+        response = self.client.get(self.URL, {"status": "NEW"})
+        simulated_page = parse_response_to_soup(response)
+
+        # Page JavaScript does that.
+        [order_field] = simulated_page.find_all("input", attrs={"name": "order"})
+        order_field["value"] = "name"
+        response = self.client.get(self.URL, {"status": "NEW", "order": "name"}, headers={"HX-Request": "true"})
+        update_page_with_htmx(simulated_page, f"form[hx-get='{self.URL}']", response)
+
+        response = self.client.get(self.URL, {"status": "NEW", "order": "name"})
+        fresh_page = parse_response_to_soup(response)
+        assertSoupEqual(simulated_page, fresh_page)
+
     def test_htmx_new_employee_record_updates_badge_count(self):
         self.client.force_login(self.user)
         response = self.client.get(self.URL, {"status": "NEW"})
         simulated_page = parse_response_to_soup(response)
         # This new application should update the counter badge on NEW.
-        JobApplicationWithApprovalNotCancellableFactory(to_company=self.company)
+        new_job_app = JobApplicationWithApprovalNotCancellableFactory(to_company=self.company)
 
         [new_status] = simulated_page.find_all("input", attrs={"name": "status", "value": "NEW"})
         del new_status["checked"]
@@ -523,6 +538,13 @@ def test_htmx_new_employee_record_updates_badge_count(self):
 
         response = self.client.get(self.URL + "?status=READY")
         fresh_page = parse_response_to_soup(response)
+        # Reloading the job seekers select2 with HTMX would change the
+        # select input the form listens to via hx-trigger, causing the
+        # form to no longer pick up change events from the select2.
+        # Given that options aren’t added frequently to that dropdown, wait
+        # until the next full page load to get new job seekers.
+        [new_jobseeker_opt] = fresh_page.select(f'#id_job_seekers > option[value="{new_job_app.job_seeker_id}"]')
+        new_jobseeker_opt.decompose()
         assertSoupEqual(simulated_page, fresh_page)