Ajoute la possibilité de filtrer par type

Ajoute la possibilité de filtrer par type de document sur une fiche
détection.

- Ajoute django-filters pour faciliter la gestion des filtres sur le long
terme
- Ajoute une deuxième type de document pour pouvoir tester le filtre
- Ouverture du bon onglet si on est en train de manipuler les documents
  (approche assez naïve)

core/filters.py

@@ -0,0 +1,18 @@
+import django_filters
+from django.forms import forms
+
+from .models import Document
+from .forms import DSFRForm
+
+
+class FilterForm(DSFRForm, forms.Form):
+    pass
+
+
+class DocumentFilter(django_filters.FilterSet):
+    class Meta:
+        model = Document
+        fields = [
+            "document_type",
+        ]
+        form = FilterForm

core/migrations/0007_alter_document_document_type.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.0.3 on 2024-07-10 14:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("core", "0006_document"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="document",
+            name="document_type",
+            field=models.CharField(
+                choices=[("cartographie", "Cartographie"), ("autre", "Autre document")],
+                max_length=100,
+                verbose_name="Type de document",
+            ),
+        ),
+    ]

core/mixins.py

@@ -1,4 +1,5 @@
 from core.forms import DocumentUploadForm, DocumentEditForm
+from .filters import DocumentFilter
 
 
 class WithDocumentUploadFormMixin:
@@ -19,7 +20,9 @@ class WithDocumentListInContextMixin:
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         documents = self.get_object().documents.ordered()
-        for document in documents:
+        document_filter = DocumentFilter(self.request.GET, queryset=documents)
+        for document in document_filter.qs:
             document.edit_form = DocumentEditForm(instance=document)
-        context["document_list"] = documents
+        context["document_filter"] = document_filter
+
         return context

core/models.py

@@ -26,11 +26,12 @@ class Meta:
 
 class Document(models.Model):
     DOCUMENT_AUTRE = "autre"
-    DOCUMENT_TYPE_CHOICES = ((DOCUMENT_AUTRE, "Autre document"),)
+    DOCUMENT_CARTOGRAPHIE = "cartographie"
+    DOCUMENT_TYPE_CHOICES = ((DOCUMENT_CARTOGRAPHIE, "Cartographie"), (DOCUMENT_AUTRE, "Autre document"))
 
     nom = models.CharField(max_length=256)
     description = models.TextField()
-    document_type = models.CharField(max_length=100, choices=DOCUMENT_TYPE_CHOICES)
+    document_type = models.CharField(max_length=100, choices=DOCUMENT_TYPE_CHOICES, verbose_name="Type de document")
     file = models.FileField(upload_to="")
     date_creation = models.DateTimeField(auto_now_add=True, verbose_name="Date de création")
     is_deleted = models.BooleanField(default=False)

core/templates/core/_documents.html

@@ -1,16 +1,33 @@
-<div class="fr-btns-group--right fr-mb-2w">
-    <button class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line" data-testid="documents-add" data-fr-opened="false" aria-controls="fr-modal-add-doc">
-        Ajouter un document
-    </button>
-</div>
+<div class="fr-container--fluid fr-mb-4w" id="documents">
+    <div class="fr-grid-row">
+        <div class="fr-col-4">
+            <form method="get" action="#documents" class="documents__filters">
+                {{ document_filter.form.as_dsfr_div }}
+                <p class="fr-my-2w fr-ml-2w"> <button type="submit" class="fr-btn" data-testid="documents-filter">Filtrer</button></p>
+            </form>
 
-{% include "core/_modale_ajout_document.html" %}
-<div class="fr-container--fluid">
-    <div class="fr-grid-row fr-grid-row--gutters">
-        {% for document in document_list %}
-            <div class="fr-col-3 fr-col-xl-2">
-                {% include "core/_carte_resume_document.html" %}
+        </div>
+        <div class="fr-col-5"></div>
+        <div class="fr-col-3">
+            <div class="fr-btns-group--right fr-mt-3w">
+                <button class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line" data-testid="documents-add" data-fr-opened="false" aria-controls="fr-modal-add-doc">
+                    Ajouter un document
+                </button>
             </div>
-        {% endfor %}
+        </div>
     </div>
 </div>
+{% include "core/_modale_ajout_document.html" %}
+<div class="fr-container--fluid">
+    {% if document_filter.qs %}
+        <div class="fr-grid-row fr-grid-row--gutters">
+            {% for document in document_filter.qs %}
+                <div class="fr-col-3 fr-col-xl-2">
+                    {% include "core/_carte_resume_document.html" %}
+                </div>
+            {% endfor %}
+        </div>
+    {% else %}
+        <p>Aucun document</p>
+    {% endif %}
+</div>

requirements.in

@@ -13,4 +13,5 @@ pytest-playwright
 djhtml
 model-bakery
 sentry-sdk[django]
-django-storages[s3]
+django-storages[s3]
+django-filter

requirements.txt

@@ -27,11 +27,14 @@ dj-static==0.0.6
 django==5.0.3
     # via
     #   -r requirements.in
+    #   django-filter
     #   django-storages
     #   model-bakery
     #   sentry-sdk
 django-environ==0.11.2
     # via -r requirements.in
+django-filter==24.2
+    # via -r requirements.in
 django-storages[s3]==1.14.3
     # via -r requirements.in
 djhtml==3.0.6

seves/settings.py

@@ -54,6 +54,7 @@
     "django.contrib.staticfiles",
     "sv.apps.SvConfig",
     "core.apps.CoreConfig",
+    "django_filters",
 ]
 
 MIDDLEWARE = [

sv/static/core/bloc_commun.css

@@ -25,3 +25,7 @@
 .document__actions a {
     background-image: none;
 }
+.documents__filters {
+    display:flex;
+    align-items: end;
+}

sv/static/sv/fichedetection_detail.js

@@ -21,4 +21,11 @@ document.addEventListener('DOMContentLoaded', function() {
 	// Afficher l'élément de détail par défaut
     detailElement.classList.remove(hiddenClass);
     syntheseElement.classList.add(hiddenClass);
+
+    if(window.location.hash && window.location.hash === "#documents") {
+        document.getElementById("tabpanel-404").setAttribute("aria-selected", false);
+        document.getElementById("tabpanel-405").setAttribute("aria-selected", false);
+        document.getElementById("tabpanel-406").setAttribute("aria-selected", true);
+
+    }
 });

sv/tests/test_fichedetection_documents.py

@@ -14,7 +14,7 @@ def test_can_add_document_to_fiche_detection(live_server, page: Page, fiche_dete
     expect(page.locator("#fr-modal-add-doc")).to_be_visible()
 
     page.locator("#id_nom").fill("Name of the document")
-    page.locator("#id_document_type").select_option("autre")
+    page.locator("#fr-modal-add-doc #id_document_type").select_option("autre")
     page.locator("#id_description").fill("Description")
     page.locator("#id_file").set_input_files("README.md")
     page.get_by_test_id("documents-send").click()
@@ -80,3 +80,22 @@ def test_can_edit_document_on_fiche_detection(live_server, page: Page, fiche_det
 
     page.get_by_test_id("documents").click()
     expect(page.get_by_text("New name", exact=True)).to_be_visible()
+
+
+def test_can_filter_documents_on_fiche_detection(live_server, page: Page, fiche_detection: FicheDetection):
+    document_1 = baker.make(Document, nom="Test document", document_type="autre", _create_files=True)
+    document_2 = baker.make(Document, nom="Cartographie", document_type="cartographie", _create_files=True)
+    fiche_detection.documents.set([document_1, document_2])
+
+    page.goto(f"{live_server.url}{fiche_detection.get_absolute_url()}#documents")
+
+    expect(page.get_by_role("heading", name="Test document")).to_be_visible()
+    expect(page.get_by_role("heading", name="Cartographie")).to_be_visible()
+
+    page.locator(".documents__filters #id_document_type").select_option("autre")
+    page.get_by_test_id("documents-filter").click()
+
+    page.wait_for_url(f"**{fiche_detection.get_absolute_url()}?document_type=autre#documents")
+
+    expect(page.get_by_role("heading", name="Test document")).to_be_visible()
+    expect(page.get_by_role("heading", name="Cartographie")).not_to_be_visible()