Skip to content

Commit

Permalink
feat(tags): afficher les filtres sur les tags (#752)
Browse files Browse the repository at this point in the history 
gi## Description

🎸 Afficher les filtres sur les `tags` des `Forum` enfants
(`descendants`)
🎸 Mettre à jour la liste des `Forum` enfants par une vue `ListView` HTMX
🎸 Seuls les `tags` associés aux `Forum` enfant sont affichés
🎸 Le filtrage n'est possible que sur un seul `tag` à la fois.

🦺 suite des PR #746 #750 #751 

## Type de changement

🎢 Nouvelle fonctionnalité (changement non cassant qui ajoute une
fonctionnalité).

### Points d'attention

🦺 choix d'une vue indépendante pour éviter la surcharge de `ForumView`.
Conséquence, ne permet pas la mise à jour dynamique de l'url avec le
paramètre `hx-push`
🦺 mise à jour de `parse_response_to_soup` : gestion de `hx-get` en plus
de `hx-post` et `href`
🦺 mise à jour de la command `populate` : ajout de tags aux `Forum`
générés
🦺 suppression du template `partials/tag.html`, mutualisation inutile
avec l'affichage des `tags` des `Topics`

⚠️ #750 installait la capacité de la vue à recevoir plusieurs tags en
paramètre de la requete. cette capacité est retirée ici car non
utilisable par l'UI

### Captures d'écran (optionnel)

Categorie avec fiches sans tag


![image](https://github.com/user-attachments/assets/cc96b706-0235-41e9-8755-8657543c794e)


Categorie avec fiches taggées non filtrées


![image](https://github.com/user-attachments/assets/af981989-dcbb-4f90-b76f-2a6dcaeeebc8)


Categorie avec fiches taggées filtrées


![image](https://github.com/user-attachments/assets/b8eabf50-c861-472b-a690-7cb4fff34614)
  • Loading branch information
@vincentporte
vincentporte authored Sep 5, 2024
1 parent 91bea96 commit 7a10488
Show file tree
Hide file tree
Showing 17 changed files with 489 additions and 129 deletions.
3 changes: 3 additions & 0 deletions lacommunaute/forum/management/commands/populate.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ def handle(self, *args, **options):

for i in range(1, 4):
parent = CategoryForumFactory(with_public_perms=True, name=f"Thème {i}")
TopicFactory.create_batch(
2, forum=ForumFactory(parent=parent, with_public_perms=True, name=f"Fiche {i}-0"), with_post=True
)
for j in range(1, 4):
TopicFactory.create_batch(
2,
Expand Down
175 changes: 175 additions & 0 deletions lacommunaute/forum/tests/__snapshots__/test_subcategoryforum_listview.ambr
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
# serializer version: 1
# name: test_listview_filtering[subcategoryforum_listview_filtering_on_existing_tag]
'''
<html><head></head><body><div class="container-fluid" id="subforums_area">

<div class="c-box">
<div class="container-fluid d-flex justify-content-center mb-3">Afficher les fiches contenant l'étiquette</div>
<div class="container-fluid d-flex justify-content-center">



<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="forum" hx-get="/forum/category-forum-[PK of Forum]/subs/" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-jazz">
<i class="ri-close-fill ri-xs"></i>Jazz
</button>





<button aria-label="Filtrer par Blues" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="forum" hx-get="/forum/category-forum-[PK of Forum]/subs/?forum_tag=blues" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-blues">Blues</button>




</div>
</div>

<div class="row mt-4" id="documentation-category-subforums">

<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="Ella Fitzgerald" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
</div>

<div class="card-body pb-0">
<p class="h3 lh-base">Ella Fitzgerald</p>
<div>

<span class="tag bg-info-lighter text-info">Jazz</span>



<span class="tag bg-info-lighter text-info">Blues</span>


</div>
<div class="mt-3">Test 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="fiches_techniques" href="/forum/ella-fitzgerald-[PK of Forum]/">
<i class="ri-arrow-right-line ri-lg"></i>
</a>
</div>
</div>
</div>

</div>
</div>
</body></html>
'''
# ---
# name: test_listview_filtering[subcategoryforum_listview_filtering_on_non_existing_tag]
'''
<html><head></head><body><div class="container-fluid" id="subforums_area">

<div class="c-box">
<div class="container-fluid d-flex justify-content-center mb-3">Afficher les fiches contenant l'étiquette</div>
<div class="container-fluid d-flex justify-content-center">



<button aria-label="Filtrer par Jazz" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="forum" hx-get="/forum/category-forum-[PK of Forum]/subs/?forum_tag=jazz" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-jazz">Jazz</button>





<button aria-label="Filtrer par Blues" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="forum" hx-get="/forum/category-forum-[PK of Forum]/subs/?forum_tag=blues" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-blues">Blues</button>




</div>
</div>

<div class="row mt-4" id="documentation-category-subforums">

</div>
</div>
</body></html>
'''
# ---
# name: test_listview_filtering[subcategoryforum_listview_without_filter]
'''
<html><head></head><body><div class="container-fluid" id="subforums_area">

<div class="c-box">
<div class="container-fluid d-flex justify-content-center mb-3">Afficher les fiches contenant l'étiquette</div>
<div class="container-fluid d-flex justify-content-center">



<button aria-label="Filtrer par Jazz" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="forum" hx-get="/forum/category-forum-[PK of Forum]/subs/?forum_tag=jazz" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-jazz">Jazz</button>





<button aria-label="Filtrer par Blues" class="tag bg-info-lighter text-info matomo-event" data-matomo-action="filter" data-matomo-category="engagement" data-matomo-option="forum" hx-get="/forum/category-forum-[PK of Forum]/subs/?forum_tag=blues" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-blues">Blues</button>




</div>
</div>

<div class="row mt-4" id="documentation-category-subforums">

<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="Ella Fitzgerald" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
</div>

<div class="card-body pb-0">
<p class="h3 lh-base">Ella Fitzgerald</p>
<div>

<span class="tag bg-info-lighter text-info">Jazz</span>



<span class="tag bg-info-lighter text-info">Blues</span>


</div>
<div class="mt-3">Test 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="fiches_techniques" href="/forum/ella-fitzgerald-[PK of Forum]/">
<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="Mayra Andrade" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
</div>

<div class="card-body pb-0">
<p class="h3 lh-base">Mayra Andrade</p>
<div>
</div>
<div class="mt-3">Test 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="fiches_techniques" href="/forum/mayra-andrade-[PK of Forum]/">
<i class="ri-arrow-right-line ri-lg"></i>
</a>
</div>
</div>
</div>

</div>
</div>
</body></html>
'''
# ---
132 changes: 83 additions & 49 deletions lacommunaute/forum/tests/__snapshots__/tests_views.ambr
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,31 +153,32 @@
# name: TestDocumentationCategoryForumContent.test_documentation_category_subforum_list[documentation_category_subforum_list]
'''
<div class="row mt-4" id="documentation-category-subforums">

<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 Forum" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
</div>

<div class="card-body pb-0">
<p class="h3 lh-base">Test Forum</p>

<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="mt-3">Test 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="fiches_techniques" href="/forum/test-forum-10000/">
<i class="ri-arrow-right-line ri-lg"></i>
</a>
<div class="card-header card-header-thumbnail rounded">
<img alt="Test Forum" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
</div>

<div class="card-body pb-0">
<p class="h3 lh-base">Test Forum</p>
<div>
</div>
<div class="mt-3">Test 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="fiches_techniques" href="/forum/test-forum-10000/">
<i class="ri-arrow-right-line ri-lg"></i>
</a>
</div>
</div>
</div>
</div>

</div>

</div>
'''
# ---
# name: TestDocumentationCategoryForumContent.test_show_subforum_tags[documentation_category_subforum_tags]
# name: TestDocumentationCategoryForumContent.test_show_subforum_tag[documentation_category_subforum_tag]
'''
<main class="s-main" id="main" role="main">

Expand Down Expand Up @@ -234,44 +235,77 @@
<div class="s-section__row row">
<div class="s-section__col col-12">

<div class="row mt-4" id="documentation-category-subforums">
<div class="container-fluid" id="subforums_area">

<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="c-box">
<div class="container-fluid d-flex justify-content-center mb-3">Afficher les fiches contenant l'étiquette</div>
<div class="container-fluid d-flex justify-content-center">

<div class="card-body pb-0">
<p class="h3 lh-base">Test-1</p>

<div class="mt-3">Test 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="fiches_techniques" href="/forum/test-1-10000/">
<i class="ri-arrow-right-line ri-lg"></i>
</a>
</div>


<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="forum" hx-get="/forum/test-forum-9999/subs/?forum_tag=tag1" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-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="forum" hx-get="/forum/test-forum-9999/subs/?forum_tag=tag2" hx-swap="outerHTML" hx-target="#subforums_area" id="filterforum-tag2">tag2</button>




</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-2" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
<div class="row mt-4" id="documentation-category-subforums">

<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-body pb-0">
<p class="h3 lh-base">Test-1</p>
<div>
</div>
<div class="mt-3">Test 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="fiches_techniques" href="/forum/test-1-10000/">
<i class="ri-arrow-right-line ri-lg"></i>
</a>
</div>

<div class="card-body pb-0">
<p class="h3 lh-base">Test-2</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 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="fiches_techniques" href="/forum/test-2-10001/">
<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-2" class="img-fitcover img-fluid" loading="lazy" src="[img src]"/>
</div>

<div class="card-body pb-0">
<p class="h3 lh-base">Test-2</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 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="fiches_techniques" href="/forum/test-2-10001/">
<i class="ri-arrow-right-line ri-lg"></i>
</a>
</div>
</div>
</div>

</div>
</div>


Expand Down
Loading

0 comments on commit 7a10488

Please sign in to comment.