From ee6720607b04198bc58fda7d2fb836b9543dfdec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9line=20MS?= <celine@hello-birds.com>
Date: Wed, 3 Jul 2024 19:17:22 +0200
Subject: [PATCH] Filter GPS results by beneficiary name

---
 .../gps/includes/memberships_results.html     | 134 ++++++++++
 itou/templates/gps/my_groups.html             | 237 ++++--------------
 itou/www/gps/forms.py                         |  28 +++
 itou/www/gps/views.py                         |  11 +-
 tests/gps/__snapshots__/test_views.ambr       | 106 ++++----
 tests/gps/test_views.py                       |  52 +++-
 6 files changed, 323 insertions(+), 245 deletions(-)
 create mode 100644 itou/templates/gps/includes/memberships_results.html

diff --git a/itou/templates/gps/includes/memberships_results.html b/itou/templates/gps/includes/memberships_results.html
new file mode 100644
index 0000000000..b2ba4ca9a6
--- /dev/null
+++ b/itou/templates/gps/includes/memberships_results.html
@@ -0,0 +1,134 @@
+{% load str_filters %}
+
+<section aria-labelledby="results" id="follow-up-groups-section">
+    {% if not memberships_page %}
+        <div class="my-3 my-md-4 s-box__row row membership-card">Aucun résultat.</div>
+    {% else %}
+        {% for membership in memberships_page %}
+            <div class="my-3 my-md-4 s-box__row row membership-card">
+                <div class="c-box--results__header">
+
+                    <div class="c-box--results__summary">
+                        <i class="ri-user-line" aria-hidden="true"></i>
+                        <div>
+                            <h3>{{ membership.follow_up_group.beneficiary.get_full_name }}</h3>
+                            <span>{{ membership.follow_up_group.beneficiary.email }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="m-0 pb-4" />
+
+                <div class="d-flex justify-content-between mb-4">
+                    <div>
+                        {% with membership.nb_members|add:"-1" as counter %}
+                            <div>
+                                {% if not membership.created_in_bulk %}
+                                    <div>
+                                        {# djlint:off #}
+                                        {# Don't let djlint add a newline before the . or it will add a space after référent and . #}
+                                        Vous avez ajouté ce bénéficiaire le <strong>{{ membership.created_at|date:"d/m/Y" }}</strong>{% if membership.is_referent %} et êtes <strong>référent</strong>{% endif %}.{# djlint:on #}
+                                    </div>
+                                {% elif membership.is_referent %}
+                                    <div>
+                                        Vous êtes <strong>référent</strong>.
+                                    </div>
+                                {% endif %}
+                                {% if counter < 1 %}
+                                    Aucun autre professionnel que vous n'est intervenu auprès de ce bénéficiaire.
+                                {% else %}
+                                    {{ counter }} autre{{ counter|pluralizefr }} professionnel{{ counter|pluralizefr }}
+                                    {{ counter|pluralize:"est,sont" }}
+                                    intervenu{{ counter|pluralizefr }} auprès de ce bénéficiaire.
+                                {% endif %}
+                            </div>
+                        {% endwith %}
+                    </div>
+
+
+                </div>
+                <div class="d-flex justify-content-between">
+
+                    {% with membership.follow_up_group.beneficiary.public_id as public_id %}
+                        <div>
+
+                            {% url 'gps:leave_group' group_id=membership.follow_up_group.id as leave_group_url %}
+                            <a href="{% url 'users:details' public_id=public_id %}"
+                               class="btn btn-warning btn-block w-100 w-md-auto btn-ico"
+                               aria-label="Ne plus suivre {{ membership.follow_up_group.beneficiary.get_full_name }}"
+                               data-bs-toggle="modal"
+                               data-bs-target="#confirm_modal"
+                               data-bs-title="Êtes-vous sûr de ne plus vouloir suivre {{ membership.follow_up_group.beneficiary.get_full_name }} ?"
+                               data-bs-body="Vous pourrez toujours suivre ce bénéficiaire de nouveau plus tard."
+                               data-bs-confirm-text="Ne plus suivre"
+                               data-bs-confirm-url="{{ leave_group_url }}"
+                               data-bs-confirm-class="btn-danger">
+                                <i class="ri-user-unfollow-line" aria-hidden="true"></i>
+                                <span>Ne plus suivre</span>
+
+                            </a>
+
+
+                            {% if membership.is_referent %}
+
+                                {% url 'gps:toggle_referent' group_id=membership.follow_up_group.id as remove_referent_url %}
+                                <a href="{% url 'users:details' public_id=membership.follow_up_group.beneficiary.public_id %}"
+                                   class="btn btn-warning btn-block w-100 w-md-auto btn-ico"
+                                   aria-label="Ne plus être référent de {{ membership.follow_up_group.beneficiary.get_full_name }}"
+                                   data-bs-toggle="modal"
+                                   data-bs-target="#confirm_modal"
+                                   data-bs-title="Êtes-vous sûr de ne plus vouloir être référent de {{ membership.follow_up_group.beneficiary.get_full_name }} ?"
+                                   data-bs-body="Vous pourrez toujours devenir référent de ce bénéficiaire plus tard."
+                                   data-bs-confirm-text="Ne plus être référent"
+                                   data-bs-confirm-url="{{ remove_referent_url }}"
+                                   data-bs-confirm-class="btn-danger">
+
+                                    <i class="ri-map-pin-user-line font-weight-normal me-1" aria-hidden="true"></i>
+                                    <span>Ne plus être référent</span>
+
+                                </a>
+
+                            {% endif %}
+                        </div>
+
+
+                        <div>
+                            {% if not membership.is_referent %}
+                                {% url 'gps:toggle_referent' group_id=membership.follow_up_group.id as add_referent_url %}
+
+                                <a href="{% url 'users:details' public_id=membership.follow_up_group.beneficiary.public_id %}"
+                                   class="btn btn-outline-success btn-block w-100 w-md-auto btn-ico"
+                                   aria-label="Devenir référent de {{ membership.follow_up_group.beneficiary.get_full_name }}"
+                                   data-bs-toggle="modal"
+                                   data-bs-target="#confirm_modal"
+                                   data-bs-title="Êtes-vous sûr de vouloir devenir référent de {{ membership.follow_up_group.beneficiary.get_full_name }} ?"
+                                   data-bs-body="Vous pourrez toujours ne plus être référent de ce bénéficiaire plus tard."
+                                   data-bs-confirm-text="Devenir référent"
+                                   data-bs-confirm-url="{{ add_referent_url }}"
+                                   data-bs-confirm-class="btn-success">
+
+                                    <i class="ri-map-pin-user-line font-weight-normal me-1" aria-hidden="true"></i>
+                                    <span>Devenir référent</span>
+
+                                </a>
+
+                            {% endif %}
+                            <a href="{% url 'users:details' public_id=membership.follow_up_group.beneficiary.public_id %}"
+                               class="btn btn-outline-primary btn-block btn-ico w-100 w-md-auto"
+                               aria-label="Consulter la fiche de {{ membership.follow_up_group.beneficiary.get_full_name }}">
+                                <i class="ri-eye-line ri-xl font-weight-medium" aria-hidden="true"></i>
+                                <span>Consulter la fiche</span>
+                            </a>
+                        </div>
+                    {% endwith %}
+
+                </div>
+            </div>
+        {% endfor %}
+
+        <div class="mt-5">
+            {% include "includes/pagination.html" with page=memberships_page boost=True boost_target="#follow-up-groups-section" boost_indicator="#follow-up-groups-section" %}
+        </div>
+
+    {% endif %}
+</section>
diff --git a/itou/templates/gps/my_groups.html b/itou/templates/gps/my_groups.html
index 59c4f64e14..c857083b18 100644
--- a/itou/templates/gps/my_groups.html
+++ b/itou/templates/gps/my_groups.html
@@ -1,9 +1,11 @@
 {% extends "layout/base.html" %}
-{% load tally %}
+{% load django_bootstrap5 %}
 {% load matomo %}
+{% load static %}
 {% load str_filters %}
-{% load matomo %}
+{% load tally %}
 
+{% block title %}Mes bénéficiaires {{ block.super }}{% endblock %}
 
 {% block content_title %}<h1>Mes bénéficiaires</h1>{% endblock %}
 
@@ -16,196 +18,60 @@
         <div class="s-box__container container">
             <div class="s-box__row row">
                 <div class="col-12">
-                    <section aria-labelledby="results" id="follow-up-groups-section">
-                        <div id="gps_search-tip" class="alert alert-info alert-dismissible-once d-none" role="status">
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
-                            <div class="row">
-                                <div class="col-auto pe-0">
-                                    <i class="ri-user-search-line ri-xl text-info" aria-hidden="true"></i>
-                                </div>
-                                <div class="col">
-                                    <p class="mb-2">
-                                        <strong>Rechercher un bénéficiaire</strong>
-                                    </p>
-                                    <p class="mb-2">
-                                        En attendant que les fonctionalités de filtre et de tri soient déployées, vous pouvez retrouver rapidement votre bénéficiaire en utilisant la recherche de votre navigateur (ctrl&#8209;F sur PC ou ⌘&#8209;F sur macOS).
-                                    </p>
-                                    <p class="mb-0">Nous vous remercions de votre patience.</p>
-                                </div>
+                    <div class="alert alert-info alert-dismissible fade show" role="status">
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
+                        <div class="row">
+                            <div class="col-auto pe-0">
+                                <i class="ri-mail-send-line ri-xl text-important" aria-hidden="true"></i>
                             </div>
-                        </div>
-
-                        <div class="alert alert-info alert-dismissible fade show" role="status">
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
-                            <div class="row">
-                                <div class="col-auto pe-0">
-                                    <i class="ri-mail-send-line ri-xl text-info" aria-hidden="true"></i>
-                                </div>
-                                <div class="col">
-                                    <p class="mb-2">
-                                        <strong>Inviter un partenaire</strong>
-                                    </p>
-                                    <p class="mb-0">
-                                        Invitez un partenaire à rejoindre l’expérimentation GPS pour suivre ses propres bénéficiaires. Votre partenaire recevra un email de votre part afin de créer son compte.
-                                    </p>
-                                </div>
-                                <div class="col-12 col-md-auto mt-3 mt-md-0 d-flex align-items-center justify-content-center">
-                                    <a href='{% tally_form_url form_id="w5kLqM" user_public_id=user.public_id user_first_name=user.first_name user_last_name=user.last_name %}&{% if request.current_organization %}&user_organization_uid={{ request.current_organization.uid }}&user_organization_name={{ request.current_organization.display_name }}{% endif %}'
-                                       rel="noopener"
-                                       target="_blank"
-                                       aria-label="Inviter un partenaire."
-                                       class="btn btn-sm btn-primary"
-                                       {% matomo_event "gps" "clic" "liste_benef_inviter_partenaire" %}>
-                                        <span>Inviter un partenaire</span>
-                                        <i class="ri-external-link-line font-weight-normal ms-2"></i>
-                                    </a>
-                                </div>
+                            <div class="col">
+                                <p class="mb-2">
+                                    <strong>Inviter un partenaire</strong>
+                                </p>
+                                <p class="mb-0">
+                                    Invitez un partenaire à rejoindre l’expérimentation GPS pour suivre ses propres bénéficiaires. Votre partenaire recevra un email de votre part afin de créer son compte.
+                                </p>
                             </div>
-                        </div>
-
-                        <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 memberships_page.paginator.count as counter %}
-                                    {{ counter }} bénéficiaire{{ counter|pluralizefr }} suivi{{ counter|pluralizefr }}
-                                {% endwith %}
-                            </h3>
-                            <div class="flex-column flex-md-row btn-group btn-group-sm btn-group-action" role="group" aria-label="Actions sur les groupes de suivi">
-
-                                <a href="{% url 'gps:join_group' %}" class="btn btn-ico btn-primary mt-3 mt-md-0" aria-label="Rejoindre un group de suivi" {% matomo_event "GPS_liste_groupes" "clic" "ajout_groupe" %}>
-                                    <i class="ri-user-add-line" aria-hidden="true"></i>
-                                    <span>Ajouter un bénéficiaire</span>
+                            <div class="col-12 col-md-auto mt-3 mt-md-0 d-flex align-items-center justify-content-center">
+                                <a href='{% tally_form_url form_id="w5kLqM" user_public_id=user.public_id user_first_name=user.first_name user_last_name=user.last_name %}&{% if request.current_organization %}&user_organization_uid={{ request.current_organization.uid }}&user_organization_name={{ request.current_organization.display_name }}{% endif %}'
+                                   rel="noopener"
+                                   target="_blank"
+                                   aria-label="Inviter un partenaire."
+                                   class="btn btn-sm btn-primary"
+                                   {% matomo_event "gps" "clic" "liste_benef_inviter_partenaire" %}>
+                                    <span>Inviter un partenaire</span>
+                                    <i class="ri-external-link-line font-weight-normal ms-2"></i>
                                 </a>
                             </div>
                         </div>
-
-                        <div class="col-6 col-lg-auto"></div>
-
-                        {% for membership in memberships_page %}
-                            <div class="my-3 my-md-4 s-box__row row membership-card">
-                                <div class="c-box--results__header">
-
-                                    <div class="c-box--results__summary">
-                                        <i class="ri-user-line" aria-hidden="true"></i>
-                                        <div>
-                                            <h3>{{ membership.follow_up_group.beneficiary.get_full_name }}</h3>
-                                            <span>{{ membership.follow_up_group.beneficiary.email }}</span>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <hr class="m-0 pb-4" />
-
-                                <div class="d-flex justify-content-between mb-4">
-                                    <div>
-                                        {% with membership.nb_members|add:"-1" as counter %}
-                                            <div>
-                                                {% if not membership.created_in_bulk %}
-                                                    <div>
-                                                        {# djlint:off #}
-                                                        {# Don't let djlint add a newline before the . or it will add a space after référent and . #}
-                                                        Vous avez ajouté ce bénéficiaire le <strong>{{ membership.created_at|date:"d/m/Y" }}</strong>{% if membership.is_referent %} et êtes <strong>référent</strong>{% endif %}.{# djlint:on #}
-                                                    </div>
-                                                {% elif membership.is_referent %}
-                                                    <div>
-                                                        Vous êtes <strong>référent</strong>.
-                                                    </div>
-                                                {% endif %}
-                                                {% if counter < 1 %}
-                                                    Aucun autre professionnel que vous n'est intervenu auprès de ce bénéficiaire.
-                                                {% else %}
-                                                    {{ counter }} autre{{ counter|pluralizefr }} professionnel{{ counter|pluralizefr }}
-                                                    {{ counter|pluralize:"est,sont" }}
-                                                    intervenu{{ counter|pluralizefr }} auprès de ce bénéficiaire.
-                                                {% endif %}
-                                            </div>
-                                        {% endwith %}
-                                    </div>
-
-
-                                </div>
-                                <div class="d-flex justify-content-between">
-
-                                    {% with membership.follow_up_group.beneficiary.public_id as public_id %}
-                                        <div>
-
-                                            {% url 'gps:leave_group' group_id=membership.follow_up_group.id as leave_group_url %}
-                                            <a href="{% url 'users:details' public_id=public_id %}"
-                                               class="btn btn-warning btn-block w-100 w-md-auto btn-ico"
-                                               aria-label="Ne plus suivre {{ membership.follow_up_group.beneficiary.get_full_name }}"
-                                               data-bs-toggle="modal"
-                                               data-bs-target="#confirm_modal"
-                                               data-bs-title="Êtes-vous sûr de ne plus vouloir suivre {{ membership.follow_up_group.beneficiary.get_full_name }} ?"
-                                               data-bs-body="Vous pourrez toujours suivre ce bénéficiaire de nouveau plus tard."
-                                               data-bs-confirm-text="Ne plus suivre"
-                                               data-bs-confirm-url="{{ leave_group_url }}"
-                                               data-bs-confirm-class="btn-danger">
-                                                <i class="ri-user-unfollow-line" aria-hidden="true"></i>
-                                                <span>Ne plus suivre</span>
-
-                                            </a>
-
-
-                                            {% if membership.is_referent %}
-
-                                                {% url 'gps:toggle_referent' group_id=membership.follow_up_group.id as remove_referent_url %}
-                                                <a href="{% url 'users:details' public_id=membership.follow_up_group.beneficiary.public_id %}"
-                                                   class="btn btn-warning btn-block w-100 w-md-auto btn-ico"
-                                                   aria-label="Ne plus être référent de {{ membership.follow_up_group.beneficiary.get_full_name }}"
-                                                   data-bs-toggle="modal"
-                                                   data-bs-target="#confirm_modal"
-                                                   data-bs-title="Êtes-vous sûr de ne plus vouloir être référent de {{ membership.follow_up_group.beneficiary.get_full_name }} ?"
-                                                   data-bs-body="Vous pourrez toujours devenir référent de ce bénéficiaire plus tard."
-                                                   data-bs-confirm-text="Ne plus être référent"
-                                                   data-bs-confirm-url="{{ remove_referent_url }}"
-                                                   data-bs-confirm-class="btn-danger">
-
-                                                    <i class="ri-map-pin-user-line font-weight-normal me-1" aria-hidden="true"></i>
-                                                    <span>Ne plus être référent</span>
-
-                                                </a>
-
-                                            {% endif %}
-                                        </div>
-
-
-                                        <div>
-                                            {% if not membership.is_referent %}
-                                                {% url 'gps:toggle_referent' group_id=membership.follow_up_group.id as add_referent_url %}
-
-                                                <a href="{% url 'users:details' public_id=membership.follow_up_group.beneficiary.public_id %}"
-                                                   class="btn btn-outline-success btn-block w-100 w-md-auto btn-ico"
-                                                   aria-label="Devenir référent de {{ membership.follow_up_group.beneficiary.get_full_name }}"
-                                                   data-bs-toggle="modal"
-                                                   data-bs-target="#confirm_modal"
-                                                   data-bs-title="Êtes-vous sûr de vouloir devenir référent de {{ membership.follow_up_group.beneficiary.get_full_name }} ?"
-                                                   data-bs-body="Vous pourrez toujours ne plus être référent de ce bénéficiaire plus tard."
-                                                   data-bs-confirm-text="Devenir référent"
-                                                   data-bs-confirm-url="{{ add_referent_url }}"
-                                                   data-bs-confirm-class="btn-success">
-
-                                                    <i class="ri-map-pin-user-line font-weight-normal me-1" aria-hidden="true"></i>
-                                                    <span>Devenir référent</span>
-
-                                                </a>
-
-                                            {% endif %}
-                                            <a href="{% url 'users:details' public_id=membership.follow_up_group.beneficiary.public_id %}"
-                                               class="btn btn-outline-primary btn-block btn-ico w-100 w-md-auto"
-                                               aria-label="Consulter la fiche de {{ membership.follow_up_group.beneficiary.get_full_name }}">
-                                                <i class="ri-eye-line ri-xl font-weight-medium" aria-hidden="true"></i>
-                                                <span>Consulter la fiche</span>
-                                            </a>
-                                        </div>
-                                    {% endwith %}
-
-                                </div>
-                            </div>
-                        {% endfor %}
-                    </section>
+                    </div>
                 </div>
-                <div class="col-12 mt-2">
-                    {% include "includes/pagination.html" with page=memberships_page boost=False boost_target=""  boost_indicator="" %}
+                <div class="col-12">
+                    <div class="d-flex flex-column flex-md-row my-3 my-md-4">
+                        <h3 class="h4 mb-0 flex-grow-1" id="results">
+                            {% with memberships_page.paginator.count as counter %}
+                                {{ counter }} bénéficiaire{{ counter|pluralizefr }} suivi{{ counter|pluralizefr }}
+                            {% endwith %}
+                        </h3>
+                        <form class="px-3"
+                              hx-get="{{ request.path }}"
+                              hx-trigger="change delay:.5s, duetChange delay:.5s, change from:#id_beneficiary"
+                              hx-indicator="#follow-up-groups-section"
+                              hx-target="#follow-up-groups-section"
+                              hx-include="#id_beneficiary"
+                              hx-swap="outerHTML"
+                              hx-push-url="true">
+                            {% bootstrap_field filters_form.beneficiary wrapper_class="w-lg-400px" show_label=False %}
+                        </form>
+                        <div class="btn-group btn-group-sm btn-group-action" role="group" aria-label="Actions sur les groupes de suivi">
+                            <a href="{% url 'gps:join_group' %}" class="btn btn-ico btn-primary mt-3 mt-md-0" aria-label="Rejoindre un group de suivi" {% matomo_event "GPS_liste_groupes" "clic" "ajout_groupe" %}>
+                                <i class="ri-user-add-line" aria-hidden="true"></i>
+                                <span>Ajouter un bénéficiaire</span>
+                            </a>
+                        </div>
+                    </div>
                 </div>
+                <div class="col-12">{% include "gps/includes/memberships_results.html" with memberships_page=memberships_page %}</div>
             </div>
         </div>
 
@@ -230,6 +96,7 @@ <h3 class="modal-title"></h3>
 
 {% block script %}
     {{ block.super }}
+    <script src='{% static "js/htmx_compat.js" %}'></script>
 
     <script nonce="{{ CSP_NONCE }}">
         htmx.onLoad((target) => {
diff --git a/itou/www/gps/forms.py b/itou/www/gps/forms.py
index 6c5187e2fa..25094b0f85 100644
--- a/itou/www/gps/forms.py
+++ b/itou/www/gps/forms.py
@@ -1,6 +1,7 @@
 from django import forms
 from django.urls import reverse_lazy
 from django.utils.text import format_lazy
+from django_select2.forms import Select2Widget
 
 from itou.companies import enums as companies_enums
 from itou.companies.models import Company
@@ -37,3 +38,30 @@ def __init__(self, *args, **kwargs):
         self.fields["user"].widget.attrs["data-no-results-url"] = (
             reverse_lazy("apply:start", kwargs={"company_pk": singleton.pk}) + "?gps=true"
         )
+
+
+class MembershipsFiltersForm(forms.Form):
+    beneficiary = forms.ChoiceField(
+        required=False,
+        label="Nom du bénéficiaire",
+        widget=Select2Widget(
+            attrs={"data-placeholder": "Nom du bénéficiaire"},
+        ),
+    )
+
+    def __init__(self, memberships_qs, *args, **kwargs):
+        self.queryset = memberships_qs
+        super().__init__(*args, **kwargs)
+        self.fields["beneficiary"].choices = self._get_beneficiary_choices()
+
+    def filter(self):
+        queryset = self.queryset
+        if beneficiary := self.cleaned_data.get("beneficiary"):
+            queryset = queryset.filter(follow_up_group__beneficiary_id=beneficiary, is_active=True)
+        return queryset
+
+    def _get_beneficiary_choices(self):
+        beneficiaries_ids = self.queryset.values_list("follow_up_group__beneficiary_id", flat=True)
+        users = User.objects.filter(id__in=beneficiaries_ids)
+        users = [(user.id, user.get_full_name().title()) for user in users if user.get_full_name()]
+        return sorted(users, key=lambda user: user[1])
diff --git a/itou/www/gps/views.py b/itou/www/gps/views.py
index 1a64c50e9b..a3dc5cbc4d 100644
--- a/itou/www/gps/views.py
+++ b/itou/www/gps/views.py
@@ -7,7 +7,7 @@
 from itou.gps.models import FollowUpGroup, FollowUpGroupMembership
 from itou.utils.pagination import pager
 from itou.utils.urls import get_safe_url
-from itou.www.gps.forms import GpsUserSearchForm
+from itou.www.gps.forms import GpsUserSearchForm, MembershipsFiltersForm
 
 
 def is_allowed_to_use_gps(user):
@@ -29,18 +29,23 @@ def my_groups(request, template_name="gps/my_groups.html"):
         .select_related("follow_up_group", "follow_up_group__beneficiary", "member")
         .prefetch_related("follow_up_group__members")
     )
-    memberships_page = pager(memberships, request.GET.get("page"), items_per_page=10)
+    filters_form = MembershipsFiltersForm(memberships_qs=memberships, data=request.GET or None)
+
+    if filters_form.is_valid():
+        memberships = filters_form.filter()
 
+    memberships_page = pager(memberships, request.GET.get("page"), items_per_page=10)
     breadcrumbs = {
         "Mes bénéficiaires": reverse("gps:my_groups"),
     }
 
     context = {
         "breadcrumbs": breadcrumbs,
+        "filters_form": filters_form,
         "memberships_page": memberships_page,
     }
 
-    return render(request, template_name, context)
+    return render(request, "gps/includes/memberships_results.html" if request.htmx else template_name, context)
 
 
 @login_required
diff --git a/tests/gps/__snapshots__/test_views.ambr b/tests/gps/__snapshots__/test_views.ambr
index acc271b79d..c62425be25 100644
--- a/tests/gps/__snapshots__/test_views.ambr
+++ b/tests/gps/__snapshots__/test_views.ambr
@@ -181,78 +181,78 @@
 # name: test_my_groups[test_my_groups__group_card]
   '''
   <div class="my-3 my-md-4 s-box__row row membership-card">
-                                  <div class="c-box--results__header">
-  
-                                      <div class="c-box--results__summary">
-                                          <i aria-hidden="true" class="ri-user-line"></i>
-                                          <div>
-                                              <h3>Jane DOE</h3>
-                                              <span>jane.doe@test.local</span>
-                                          </div>
-                                      </div>
-                                  </div>
+                  <div class="c-box--results__header">
+  
+                      <div class="c-box--results__summary">
+                          <i aria-hidden="true" class="ri-user-line"></i>
+                          <div>
+                              <h3>Jane DOE</h3>
+                              <span>jane.doe@test.local</span>
+                          </div>
+                      </div>
+                  </div>
   
-                                  <hr class="m-0 pb-4"/>
+                  <hr class="m-0 pb-4"/>
   
-                                  <div class="d-flex justify-content-between mb-4">
+                  <div class="d-flex justify-content-between mb-4">
+                      <div>
+                          
+                              <div>
+                                  
                                       <div>
                                           
-                                              <div>
-                                                  
-                                                      <div>
-                                                          
-                                                          
-                                                          Vous avez ajouté ce bénéficiaire le <strong>21/06/2024</strong>.
-                                                      </div>
-                                                  
-                                                  
-                                                      1 autre professionnel
-                                                      est
-                                                      intervenu auprès de ce bénéficiaire.
-                                                  
-                                              </div>
                                           
+                                          Vous avez ajouté ce bénéficiaire le <strong>21/06/2024</strong>.
                                       </div>
+                                  
+                                  
+                                      1 autre professionnel
+                                      est
+                                      intervenu auprès de ce bénéficiaire.
+                                  
+                              </div>
+                          
+                      </div>
   
   
-                                  </div>
-                                  <div class="d-flex justify-content-between">
+                  </div>
+                  <div class="d-flex justify-content-between">
   
-                                      
-                                          <div>
+                      
+                          <div>
   
-                                              
-                                              <a aria-label="Ne plus suivre Jane DOE" class="btn btn-warning btn-block w-100 w-md-auto btn-ico" data-bs-body="Vous pourrez toujours suivre ce bénéficiaire de nouveau plus tard." data-bs-confirm-class="btn-danger" data-bs-confirm-text="Ne plus suivre" data-bs-confirm-url="/gps/groups/34/leave" data-bs-target="#confirm_modal" data-bs-title="Êtes-vous sûr de ne plus vouloir suivre Jane DOE ?" data-bs-toggle="modal" href="/users/details/7614fc4b-aef9-4694-ab17-12324300180a">
-                                                  <i aria-hidden="true" class="ri-user-unfollow-line"></i>
-                                                  <span>Ne plus suivre</span>
+                              
+                              <a aria-label="Ne plus suivre Jane DOE" class="btn btn-warning btn-block w-100 w-md-auto btn-ico" data-bs-body="Vous pourrez toujours suivre ce bénéficiaire de nouveau plus tard." data-bs-confirm-class="btn-danger" data-bs-confirm-text="Ne plus suivre" data-bs-confirm-url="/gps/groups/34/leave" data-bs-target="#confirm_modal" data-bs-title="Êtes-vous sûr de ne plus vouloir suivre Jane DOE ?" data-bs-toggle="modal" href="/users/details/7614fc4b-aef9-4694-ab17-12324300180a">
+                                  <i aria-hidden="true" class="ri-user-unfollow-line"></i>
+                                  <span>Ne plus suivre</span>
   
-                                              </a>
+                              </a>
   
   
-                                              
-                                          </div>
+                              
+                          </div>
   
   
-                                          <div>
-                                              
-                                                  
+                          <div>
+                              
+                                  
   
-                                                  <a aria-label="Devenir référent de Jane DOE" class="btn btn-outline-success btn-block w-100 w-md-auto btn-ico" data-bs-body="Vous pourrez toujours ne plus être référent de ce bénéficiaire plus tard." data-bs-confirm-class="btn-success" data-bs-confirm-text="Devenir référent" data-bs-confirm-url="/gps/groups/34/toggle_referent" data-bs-target="#confirm_modal" data-bs-title="Êtes-vous sûr de vouloir devenir référent de Jane DOE ?" data-bs-toggle="modal" href="/users/details/7614fc4b-aef9-4694-ab17-12324300180a">
+                                  <a aria-label="Devenir référent de Jane DOE" class="btn btn-outline-success btn-block w-100 w-md-auto btn-ico" data-bs-body="Vous pourrez toujours ne plus être référent de ce bénéficiaire plus tard." data-bs-confirm-class="btn-success" data-bs-confirm-text="Devenir référent" data-bs-confirm-url="/gps/groups/34/toggle_referent" data-bs-target="#confirm_modal" data-bs-title="Êtes-vous sûr de vouloir devenir référent de Jane DOE ?" data-bs-toggle="modal" href="/users/details/7614fc4b-aef9-4694-ab17-12324300180a">
   
-                                                      <i aria-hidden="true" class="ri-map-pin-user-line font-weight-normal me-1"></i>
-                                                      <span>Devenir référent</span>
+                                      <i aria-hidden="true" class="ri-map-pin-user-line font-weight-normal me-1"></i>
+                                      <span>Devenir référent</span>
   
-                                                  </a>
+                                  </a>
   
-                                              
-                                              <a aria-label="Consulter la fiche de Jane DOE" class="btn btn-outline-primary btn-block btn-ico w-100 w-md-auto" href="/users/details/7614fc4b-aef9-4694-ab17-12324300180a">
-                                                  <i aria-hidden="true" class="ri-eye-line ri-xl font-weight-medium"></i>
-                                                  <span>Consulter la fiche</span>
-                                              </a>
-                                          </div>
-                                      
+                              
+                              <a aria-label="Consulter la fiche de Jane DOE" class="btn btn-outline-primary btn-block btn-ico w-100 w-md-auto" href="/users/details/7614fc4b-aef9-4694-ab17-12324300180a">
+                                  <i aria-hidden="true" class="ri-eye-line ri-xl font-weight-medium"></i>
+                                  <span>Consulter la fiche</span>
+                              </a>
+                          </div>
+                      
   
-                                  </div>
-                              </div>
+                  </div>
+              </div>
   '''
 # ---
diff --git a/tests/gps/test_views.py b/tests/gps/test_views.py
index a47dbdd937..735fde8aa3 100644
--- a/tests/gps/test_views.py
+++ b/tests/gps/test_views.py
@@ -17,6 +17,7 @@
     JobSeekerWithAddressFactory,
     PrescriberFactory,
 )
+from tests.utils.htmx.test import assertSoupEqual, update_page_with_htmx
 from tests.utils.test import TestCase, parse_response_to_soup
 
 
@@ -367,13 +368,56 @@ def test_remove_members_from_group(client):
     assert len(soup.select("div.gps_intervenant")) == 3
 
 
-def test_groups_pagination(client):
+def test_groups_pagination_and_name_filter(client):
     prescriber = PrescriberFactory(membership__organization__authorized=True)
-    FollowUpGroupFactory.create_batch(11, memberships=1, memberships__member=prescriber)
+    created_groups = FollowUpGroupFactory.create_batch(11, memberships=1, memberships__member=prescriber)
 
     client.force_login(prescriber)
     my_groups_url = reverse("gps:my_groups")
     response = client.get(my_groups_url)
-    groups = response.context["memberships_page"]
-    assert len(groups) == 10
+    assert len(response.context["memberships_page"].object_list) == 10
     assert f"{my_groups_url}?page=2" in response.content.decode()
+
+    # Filter by beneficiary name.
+    beneficiary = created_groups[0].beneficiary
+    response = client.get(my_groups_url, {"beneficiary": beneficiary.pk})
+    memberships_page = response.context["memberships_page"]
+    assert len(memberships_page.object_list) == 1
+    assert memberships_page[0].follow_up_group.beneficiary == beneficiary
+    # Assert 11 names are displayed in the dropdown.
+    form = response.context["filters_form"]
+    assert len(form.fields["beneficiary"].choices) == 11
+
+    # Inactive memberships should not be displayed in the dropdown.
+    membership = created_groups[0].memberships.first()
+    membership.is_active = False
+    membership.save()
+    response = client.get(my_groups_url)
+    form = response.context["filters_form"]
+    assert len(form.fields["beneficiary"].choices) == 10
+
+    # Filtering by another beneficiary should not be allowed.
+    beneficiary = FollowUpGroupFactory().beneficiary
+    response = client.get(my_groups_url, {"beneficiary": beneficiary.pk})
+    memberships_page = response.context["memberships_page"]
+    assert len(memberships_page.object_list) == 10
+
+    # HTMX
+    beneficiary = created_groups[-1].beneficiary
+    response = client.get(my_groups_url, {"beneficiary": beneficiary.pk})
+    page = parse_response_to_soup(response, selector="#main")
+    [results] = page.select("#follow-up-groups-section")
+
+    response = client.get(
+        my_groups_url,
+        {"beneficiary": beneficiary.pk},
+        headers={"HX-Request": "true"},
+    )
+    update_page_with_htmx(page, f"form[hx-get='{my_groups_url}']", response)
+
+    response = client.get(
+        my_groups_url,
+        {"beneficiary": beneficiary.pk},
+    )
+    fresh_results = parse_response_to_soup(response, selector="#follow-up-groups-section")
+    assertSoupEqual(results, fresh_results)