Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(documentation): partie 6, ajout du filtrage dans la vue de detail de category #791

Closed
wants to merge 5 commits into from
Closed

refactor(documentation): partie 6, ajout du filtrage dans la vue de detail de category #791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9fa5033
simplify content_summary template
vincentporte Sep 30, 2024
d2fcd7e
make CategoryDetailView able to manage HX Request
vincentporte Sep 30, 2024
5aaf7ba
add filtering on tag in CategoryDetailView
vincentporte Sep 30, 2024
1d32abe
add a test on queries count
vincentporte Sep 30, 2024
506d51b
thanks to tests, fix content_summary template
vincentporte Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 43 additions & 34 deletions lacommunaute/documentation/tests/__snapshots__/tests_category_detail_view.ambr
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
</div>
</section>

<div id="documents_area">

<section class="s-section">
<div class="s-section__container container">
Expand All @@ -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="[Category detail view url]?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="[Category detail view url]?tag=tag2" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>


</div>
Expand All @@ -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="[Document detail view url]">
<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>
Expand All @@ -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="[Document detail view url]">
<span>Consulter la fiche</span>
<i class="ri-arrow-right-line ri-lg"></i>
</a>
Expand All @@ -115,6 +142,8 @@
</div>
</div>
</section>
</div>



</main>
Expand Down Expand Up @@ -175,6 +204,7 @@
</div>
</section>

<div id="documents_area">

<section class="s-section">
<div class="s-section__container container">
Expand All @@ -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="[Category detail view url]" 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="[Category detail view url]?tag=tag2" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>


</div>
Expand Down Expand Up @@ -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="[Document detail view url]">
<span>Consulter la fiche</span>
<i class="ri-arrow-right-line ri-lg"></i>
</a>
Expand All @@ -238,6 +268,8 @@
</div>
</div>
</section>
</div>



</main>
Expand Down Expand Up @@ -298,6 +330,7 @@
</div>
</section>

<div id="documents_area">

<section class="s-section">
<div class="s-section__container container">
Expand All @@ -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="[Category detail view url]?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="[Category detail view url]?tag=tag2" hx-push-url="true" hx-swap="outerHTML" hx-target="#documents_area" id="filterdocument-tag2">tag2</button>


</div>
Expand All @@ -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>
Expand Down
37 changes: 35 additions & 2 deletions lacommunaute/documentation/tests/tests_category_detail_view.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import pytest # noqa

from django.db import connection
from lacommunaute.documentation.factories import CategoryFactory, DocumentFactory
from lacommunaute.users.factories import UserFactory
from lacommunaute.utils.testing import parse_response_to_soup
from django.test.utils import CaptureQueriesContext


@pytest.fixture(name="category")
Expand All @@ -20,14 +21,16 @@ 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
content = parse_response_to_soup(
response,
selector="main",
replace_img_src=True,
replace_in_href=[category] + [doc for doc in category.documents.all()],
replace_in_href=[(category.get_absolute_url(), "[Category detail view url]")]
+ [(doc.get_absolute_url(), "[Document detail view url]") for doc in category.documents.all()],
)
assert str(content) == snapshot(name=snapshot_name)

Expand All @@ -42,3 +45,33 @@ def test_link_to_update_view(client, db, category, user, link_is_visible):
response = client.get(category.get_absolute_url())
assert response.status_code == 200
assert bool(category.get_update_url() in response.content.decode()) == link_is_visible


@pytest.mark.parametrize(
"headers,expected_template_name",
[(None, "documentation/category_detail.html"), ({"HX-Request": True}, "documentation/document_list.html")],
)
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]


@pytest.fixture(name="category_with_tons_of_documents")
def category_with_tons_of_documents():
category = CategoryFactory()
DocumentFactory(category=category, with_tags=[f"tag{i}" for i in range(50)])
DocumentFactory.create_batch(25, category=category)
return category


@pytest.mark.parametrize("tag,expected_count", [(None, 10), ("tag1", 12)])
def test_numqueries(client, db, category_with_tons_of_documents, tag, expected_count):
url = (
f"{category_with_tons_of_documents.get_absolute_url()}?tag={tag}"
if tag
else category_with_tons_of_documents.get_absolute_url()
)
with CaptureQueriesContext(connection) as queries:
client.get(url)
assert len(queries) == expected_count
19 changes: 17 additions & 2 deletions lacommunaute/documentation/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,23 @@ class CategoryListView(ListView):

class CategoryDetailView(DetailView):
model = Category
template_name = "documentation/category_detail.html"
context_object_name = "category"

def get_template_names(self):
if self.request.META.get("HTTP_HX_REQUEST"):
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),
Expand All @@ -32,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


Expand Down
57 changes: 1 addition & 56 deletions lacommunaute/templates/documentation/category_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,60 +16,5 @@
</div>
</section>
{% endif %}
{% if tags %}
<section class="s-section">
<div class="s-section__container container">
<div class="s-section__row row">
<div class="s-section__col col-12">
<div class="c-box">
<div class="text-center mb-3">Afficher les fiches contenant l'étiquette</div>
<div class="text-center tag-group">
{% for tag in tags %}
{% if tag.slug == active_tag_slug %}
<button id="filterdocument-{{ tag.slug }}"
hx-target="#documents_area"
hx-swap="outerHTML"
hx-get="#"
class="tag bg-info text-white matomo-event"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Supprimer ce filtre"
aria-label="Supprimer ce filtre"
data-matomo-category="engagement"
data-matomo-action="unfilter"
data-matomo-option="document">
<i class="ri-close-fill ri-xs"></i>{{ tag.name }}
</button>
{% else %}
<button id="filterdocument-{{ tag.slug }}"
hx-target="#documents_area"
hx-swap="outerHTML"
hx-get="#"
class="tag bg-info-lighter text-info matomo-event"
data-matomo-category="engagement"
aria-label="Filtrer par {{ tag.name }}"
data-matomo-action="filter"
data-matomo-option="document">{{ tag.name }}</button>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
{% endif %}
<section class="s-section">
<div class="s-section__container container">
<div class="s-section__row row">
<div class="s-section__col col-12">
<div class="row mt-4" id="documents">
{% for obj in category.documents.all %}
{% include 'documentation/partials/content_summary.html' with obj=obj kind='document' only %}
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% include 'documentation/document_list.html' with category=category documents=documents tags=tags active_tag_slug=active_tag_slug only %}
{% endblock content %}
2 changes: 1 addition & 1 deletion lacommunaute/templates/documentation/category_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h2 class="mt-3">
<div class="s-section__container container">
<div class="s-section__row row">
{% for category in categories %}
{% include 'documentation/partials/content_summary.html' with obj=category kind='category' only %}
{% include 'documentation/partials/content_summary.html' with obj=category only %}
{% endfor %}
</div>
</div>
Expand Down
Loading
Loading