add filtering on tag in CategoryDetailView

gip-inclusion · Oct 9, 2024 · 5aaf7ba · 5aaf7ba
1 parent d2fcd7e
commit 5aaf7ba
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 35 deletions.
diff --git a/lacommunaute/documentation/tests/__snapshots__/tests_category_detail_view.ambr b/lacommunaute/documentation/tests/__snapshots__/tests_category_detail_view.ambr
@@ -54,6 +54,7 @@
               </div>
           </section>
 
+      <div id="documents_area">
 
           <section class="s-section">
               <div class="s-section__container container">
@@ -64,11 +65,11 @@
                               <div class="text-center tag-group">
 
 
-                                          <button aria-label="Filtrer par tag1" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="#" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag1">tag1</button>
+                                          <button aria-label="Filtrer par tag1" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="/documentation/test-category-[PK of Category]/?tag=tag1" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag1">tag1</button>
 
 
 
-                                          <button aria-label="Filtrer par tag2" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="#" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>
+                                          <button aria-label="Filtrer par tag2" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="/documentation/test-category-[PK of Category]/?tag=tag2" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>
 
 
                               </div>
@@ -87,6 +88,32 @@
                               <div class="col-12 col-md-4 mb-3 mb-md-5">
       <div class="card c-card has-one-link-inside h-100">
 
+              <div class="card-header card-header-thumbnail rounded">
+                  <img alt="Document without tags" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
+              </div>
+
+          <div class="card-body pb-0">
+              <p class="h3 lh-base">Document without tags</p>
+              <div>
+
+              </div>
+              <div class="mt-3">Test short description</div>
+          </div>
+          <div class="card-footer text-end">
+
+                  <a class="btn btn-sm btn-ico btn-link stretched-link matomo-event" data-matomo-action="view" data-matomo-category="engagement" data-matomo-option="document" href="/documentation/[PK of Category]/test-category-[PK of Document]/">
+                      <span>Consulter la fiche</span>
+                      <i class="ri-arrow-right-line ri-lg"></i>
+                  </a>
+
+          </div>
+      </div>
+  </div>
+
+
+                              <div class="col-12 col-md-4 mb-3 mb-md-5">
+      <div class="card c-card has-one-link-inside h-100">
+
               <div class="card-header card-header-thumbnail rounded">
                   <img alt="Test Document" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
               </div>
@@ -100,7 +127,7 @@
           </div>
           <div class="card-footer text-end">
 
-                  <a class="btn btn-sm btn-ico btn-link stretched-link matomo-event" data-matomo-action="view" data-matomo-category="engagement" data-matomo-option="document" href="/documentation/[PK of Category]/test-document-[PK of Document]/">
+                  <a class="btn btn-sm btn-ico btn-link stretched-link matomo-event" data-matomo-action="view" data-matomo-category="engagement" data-matomo-option="document" href="/documentation/[PK of Category]/test-category-[PK of Document]/">
                       <span>Consulter la fiche</span>
                       <i class="ri-arrow-right-line ri-lg"></i>
                   </a>
@@ -115,6 +142,8 @@
               </div>
           </div>
       </section>
+  </div>
+
 
 
           </main>
@@ -175,6 +204,7 @@
               </div>
           </section>
 
+      <div id="documents_area">
 
           <section class="s-section">
               <div class="s-section__container container">
@@ -185,13 +215,13 @@
                               <div class="text-center tag-group">
 
 
-                                          <button aria-label="Supprimer ce filtre" class="tag bg-info text-white matomo-event" data-bs-placement="top" data-bs-title="Supprimer ce filtre" data-bs-toggle="tooltip" data-matomo-action="unfilter" data-matomo-category="engagement" data-matomo-option="document" hx-get="#" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag1">
+                                          <button aria-label="Supprimer ce filtre" class="tag bg-info text-white matomo-event" data-bs-placement="top" data-bs-title="Supprimer ce filtre" data-bs-toggle="tooltip" data-matomo-action="unfilter" data-matomo-category="engagement" data-matomo-option="document" hx-get="/documentation/test-category-[PK of Category]/" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag1">
                                               <i class="ri-close-fill ri-xs"></i>tag1
                                           </button>
 
 
 
-                                          <button aria-label="Filtrer par tag2" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="#" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>
+                                          <button aria-label="Filtrer par tag2" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="/documentation/test-category-[PK of Category]/?tag=tag2" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>
 
 
                               </div>
@@ -223,7 +253,7 @@
           </div>
           <div class="card-footer text-end">
 
-                  <a class="btn btn-sm btn-ico btn-link stretched-link matomo-event" data-matomo-action="view" data-matomo-category="engagement" data-matomo-option="document" href="/documentation/[PK of Category]/test-document-[PK of Document]/">
+                  <a class="btn btn-sm btn-ico btn-link stretched-link matomo-event" data-matomo-action="view" data-matomo-category="engagement" data-matomo-option="document" href="/documentation/[PK of Category]/test-category-[PK of Document]/">
                       <span>Consulter la fiche</span>
                       <i class="ri-arrow-right-line ri-lg"></i>
                   </a>
@@ -238,6 +268,8 @@
               </div>
           </div>
       </section>
+  </div>
+
 
 
           </main>
@@ -298,6 +330,7 @@
               </div>
           </section>
 
+      <div id="documents_area">
 
           <section class="s-section">
               <div class="s-section__container container">
@@ -308,11 +341,11 @@
                               <div class="text-center tag-group">
 
 
-                                          <button aria-label="Filtrer par tag1" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="#" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag1">tag1</button>
+                                          <button aria-label="Filtrer par tag1" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="/documentation/test-category-[PK of Category]/?tag=tag1" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag1">tag1</button>
 
 
 
-                                          <button aria-label="Filtrer par tag2" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="#" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>
+                                          <button aria-label="Filtrer par tag2" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="document" hx-get="/documentation/test-category-[PK of Category]/?tag=tag2" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>
 
 
                               </div>
@@ -328,37 +361,13 @@
                   <div class="s-section__col col-12">
                       <div class="row mt-4" id="documents">
 
-                              <div class="col-12 col-md-4 mb-3 mb-md-5">
-      <div class="card c-card has-one-link-inside h-100">
-
-              <div class="card-header card-header-thumbnail rounded">
-                  <img alt="Test Document" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
-              </div>
-
-          <div class="card-body pb-0">
-              <p class="h3 lh-base">Test Document</p>
-              <div>
-                  <span class="tag bg-info-lighter text-info">tag1</span><span class="tag bg-info-lighter text-info">tag2</span>
-              </div>
-              <div class="mt-3">Test short description</div>
-          </div>
-          <div class="card-footer text-end">
-
-                  <a class="btn btn-sm btn-ico btn-link stretched-link matomo-event" data-matomo-action="view" data-matomo-category="engagement" data-matomo-option="document" href="/documentation/[PK of Category]/test-document-[PK of Document]/">
-                      <span>Consulter la fiche</span>
-                      <i class="ri-arrow-right-line ri-lg"></i>
-                  </a>
-
-          </div>
-      </div>
-  </div>
-
-
                       </div>
                   </div>
               </div>
           </div>
       </section>
+  </div>
+
 
 
           </main>

diff --git a/lacommunaute/documentation/tests/tests_category_detail_view.py b/lacommunaute/documentation/tests/tests_category_detail_view.py
@@ -20,6 +20,7 @@ def fixture_category():
 )
 def test_category_detail_view_with_tagged_documents(client, db, category, active_tag, snapshot_name, snapshot):
     DocumentFactory(category=category, with_tags=["tag1", "tag2"], for_snapshot=True)
+    DocumentFactory(category=category, for_snapshot=True, name="Document without tags")
     url = f"{category.get_absolute_url()}?tag={active_tag}" if active_tag else category.get_absolute_url()
     response = client.get(url)
     assert response.status_code == 200
@@ -52,3 +53,6 @@ def test_template_name(client, db, category, headers, expected_template_name):
     response = client.get(category.get_absolute_url(), headers=headers)
     assert response.status_code == 200
     assert response.template_name == [expected_template_name]
+
+
+# test numqueries with and without tag
diff --git a/lacommunaute/documentation/views.py b/lacommunaute/documentation/views.py
@@ -24,6 +24,16 @@ def get_template_names(self):
             return ["documentation/document_list.html"]
         return ["documentation/category_detail.html"]
 
+    def get_active_tag_slug(self):
+        if not hasattr(self, "active_tag_slug"):
+            self.active_tag_slug = self.request.GET.get("tag") or None
+        return self.active_tag_slug
+
+    def get_filtered_documents(self):
+        if self.get_active_tag_slug():
+            return self.object.documents.filter(tags__slug=self.get_active_tag_slug()).prefetch_related("tags")
+        return self.object.documents.all()
+
     def get_tags_of_documents(self):
         return Tag.objects.filter(
             taggit_taggeditem_items__content_type=ContentType.objects.get_for_model(Document),
@@ -36,7 +46,8 @@ def get_queryset(self):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["tags"] = self.get_tags_of_documents()
-        context["active_tag_slug"] = self.request.GET.get("tag") or None
+        context["active_tag_slug"] = self.get_active_tag_slug()
+        context["documents"] = self.get_filtered_documents()
         return context