TWE-665: Restore tags on BlogPage and BlogIndexPage

This is a partial revert of both
59b373d and
2d7b425.

Author: bmispelon

tbx/blog/models.py

@@ -1,11 +1,14 @@
+from itertools import chain
 import math
 import string
 
 from django import forms
 from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
 from django.db import models
+from django.db.models import Case, Q, When
 from django.dispatch import receiver
 from django.utils.functional import cached_property
+from django.utils.http import urlencode
 
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 from wagtail.admin.panels import (
@@ -75,11 +78,25 @@ def blog_posts(self):
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
 
+        # Get blog_posts
+        blog_posts = self.blog_posts
+
+        # Filter by related_service slug
+        slug_filter = request.GET.get("filter")
+        extra_url_params = {}
+
+        if slug_filter and slug_filter in self.taxonomy_slugs:
+            blog_posts = blog_posts.filter(
+                Q(related_sectors__slug=slug_filter)
+                | Q(related_services__slug=slug_filter)
+            )
+            extra_url_params["filter"] = slug_filter
+
         # use page to filter
         page = request.GET.get("page", 1)
 
         # Pagination
-        paginator = Paginator(self.blog_posts, 10)  # Show 10 blog_posts per page
+        paginator = Paginator(blog_posts, 10)  # Show 10 blog_posts per page
 
         try:
             blog_posts = paginator.page(page)
@@ -88,8 +105,20 @@ def get_context(self, request, *args, **kwargs):
         except EmptyPage:
             blog_posts = paginator.page(paginator.num_pages)
 
+        # Only show Sectors and Services that have been used
+        related_sectors = Sector.objects.filter(
+            pk__in=models.Subquery(self.blog_posts.values("related_sectors"))
+        )
+
+        related_services = Service.objects.filter(
+            pk__in=models.Subquery(self.blog_posts.values("related_services"))
+        )
+        tags = chain(related_services, related_sectors)
+
         context.update(
             blog_posts=blog_posts,
+            tags=tags,
+            extra_url_params=urlencode(extra_url_params),
         )
         return context
 
@@ -133,6 +162,18 @@ def set_body_word_count(self):
         ).split()
         self.body_word_count = len(body_words)
 
+    @cached_property
+    def sectors(self):
+        return self.related_sectors.all()
+
+    @cached_property
+    def services(self):
+        return self.related_services.all()
+
+    @property
+    def tags(self):
+        return chain(self.services, self.sectors)
+
     def get_related_blog_posts(self):
         # Assumption that blog posts for the same division
         # will be under the same blog index page.
@@ -142,7 +183,7 @@ def get_related_blog_posts(self):
         if related := self.related_posts.values_list("page"):
             # If some blog posts have been manually selected we show those first
             base_queryset |= BlogPage.objects.filter(pk__in=related)
-            manual_first = models.Case(models.When(pk__in=related, then=1), default=2)
+            manual_first = Case(When(pk__in=related, then=1), default=2)
             order_by.insert(0, manual_first)
 
         prefetch_author_images = models.Prefetch(
@@ -220,7 +261,6 @@ def type(self):
                     FieldPanel("related_services", widget=forms.CheckboxSelectMultiple),
                 ],
                 heading="Taxonomies",
-                help_text="For internal use only, will not be rendered on the final page.",
             ),
             InlinePanel(
                 "related_posts",

tbx/blog/tests/test_models.py

@@ -133,12 +133,3 @@ def test_related_blog_posts_padded_if_not_enough(self):
             ],
             transform=attrgetter("title"),
         )
-
-    def test_tags_not_rendered(self):
-        page = BlogPageFactory(
-            parent=self.blog_index,
-            related_services=[ServiceFactory(name="SHOULD_NOT_BE_RENDERED")],
-            related_sectors=[SectorFactory(name="SHOULD_NOT_BE_RENDERED")],
-        )
-        response = self.client.get(page.url)
-        self.assertNotContains(response, "SHOULD_NOT_BE_RENDERED")

tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.html

@@ -8,6 +8,7 @@
             'author-title' : '{{ page.first_author.role }}',
             'author-name' : '{{ page.first_author.name }}',
             'published' : '{{ page.date|date:"Ymd" }}',
+            'tags' : [{% for tag in page.tags %}'{{tag.name}}'{% if not forloop.last %}, {% endif %}{% endfor %}],
             'read-time' : '{{ page.read_time }}',
             'id': '{{ page.id }}',
             'page-h1' : '{{ page.title }}',
@@ -33,6 +34,13 @@
             <h1 class="heading heading--one">{{ page.title }}</h1>
 
             {% pageurl page.blog_index as blog_index_url %}
+
+            <div class="tags tags--with-title">
+                <span class="sr-only">Related post categories</span>
+                {% for tag in page.tags %}
+                    {% include "patterns/atoms/tag/tag.html" with tag_slug=tag.slug tag_name=tag.name tag_link_base=blog_index_url %}
+                {% endfor %}
+            </div>
         </div>
 
         <div class="blog-meta">
@@ -47,7 +55,7 @@ <h2 class="motif-heading section-title--related-posts section-title--large-gap"
             <ul class="grid__related-posts streamfield__related-posts">
                 {% for post in page.related_blog_posts %}
                     {% pageurl post as post_url %}
-                    {% include "patterns/molecules/listing/listing--avatar.html" with title=post.title name=post.first_author.name job_title=post.first_author.role link=post_url date=post.date reading_time=post.read_time hide_tags=True avatar=post.first_author.image tag_link_base=blog_index_url %}
+                    {% include "patterns/molecules/listing/listing--avatar.html" with title=post.title name=post.first_author.name job_title=post.first_author.role link=post_url date=post.date reading_time=post.read_time tags=post.tags hide_tags=True avatar=post.first_author.image tag_link_base=blog_index_url %}
                 {% endfor %}
 
                 <li class="mx-auto lg:mx-0 mt-spacerSmall">

tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.yaml

@@ -14,6 +14,13 @@ context:
     date: 07 Aug 2024
     get_verbose_name: Blog page
     read_time: 5
+    tags:
+      - name: Digital products
+        slug: digital-products
+      - name: Wagtail
+        slug: wagtail
+      - name: Digital Marketing
+        slug: digital-marketing
     related_blog_posts:
       - link: '/'
         title: Reimagining our Agile training and ways of working
@@ -22,20 +29,38 @@ context:
           role: Product Director
         date: 05 Sep 23
         read_time: 4
+        tags_screenreader_text: 'Filter blog posts by category'
+        tags:
+          - name: Innovation
+            slug: innovation
+          - name: Culture
+            slug: culture
       - link: '/'
         title: The future of AI in healthcare
         first_author:
           name: Emily Johnson
           role: Data Scientist
         date: 05 Sep 23
         read_time: 6
+        tags_screenreader_text: 'Filter blog posts by category'
+        tags:
+          - name: Artificial Intelligence
+            slug: ai
+          - name: Healthcare
+            slug: healthcare
       - link: '/'
         title: The impact of machine learning in finance
         first_author:
           name: Sarah Thompson
           role: Financial Analyst
         date: 05 Sep 23
         read_time: 8
+        tags_screenreader_text: 'Filter blog posts by category'
+        tags:
+          - name: Machine Learning
+            slug: machine-learning
+          - name: Finance
+            slug: finance
 
 tags:
   include_block:

tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html

@@ -10,12 +10,12 @@
 
 {% block content %}
     <div class="grid grid--spacer-large">
-        {% include "patterns/molecules/title-filters/title-filters.html" with item=page hide_tags=True %}
+        {% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags hide_tags=True %}
 
         <ul class="page-listing page-listing--blog">
             {% for post in blog_posts %}
                 {% pageurl post as link %}
-                {% include "patterns/molecules/listing/listing--avatar.html" with link=link avatar=post.first_author.image title=post.title name=post.first_author.name job_title=post.first_author.role date=post.date reading_time=post.read_time hide_tags=True tag_link_base=blog_index_url base_class="page-listing__item" %}
+                {% include "patterns/molecules/listing/listing--avatar.html" with link=link avatar=post.first_author.image title=post.title name=post.first_author.name job_title=post.first_author.role date=post.date reading_time=post.read_time tags=post.tags hide_tags=True tag_link_base=blog_index_url base_class="page-listing__item" %}
             {% endfor %}
         </ul>
 

tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.yaml

@@ -23,41 +23,71 @@ context:
       first_author:
         name: Paul Vetch
         role: Strategy Director
+      tags:
+        - name: Digital products
+          slug: digital-products
+        - name: Wagtail
+          slug: wagtail
 
     - title: Wagtail for Public Sector
       date: 20 Oct 2023
       read_time: '5'
       first_author:
         name: Paul Vetch
         role: Strategy Director
+      tags:
+        - name: Social Media
+          slug: social-media
+        - name: Culture
+          slug: culture
 
     - title: Explore the potential of AI in content management
       date: 20 Oct 2023
       read_time: '5'
       first_author:
         name: Paul Vetch
         role: Strategy Director
+      tags:
+        - name: Social Media
+          slug: social-media
+        - name: Culture
+          slug: culture
 
     - title: Wagtail for Public Sector
       date: 20 Oct 2023
       read_time: '5'
       first_author:
         name: Will Heinemann
         role: New Business Director
+      tags:
+        - name: Digital products
+          slug: digital-products
+        - name: Wagtail
+          slug: wagtail
 
     - title: Explore the potential of AI in content management
       date: 20 Oct 2023
       read_time: '5'
       first_author:
         name: Will Heinemann
         role: New Business Director
+      tags:
+        - name: Digital products
+          slug: digital-products
+        - name: Wagtail
+          slug: wagtail
 
     - title: Wagtail for Public Sector
       date: 20 Oct 2023
       read_time: '5'
       first_author:
         name: Will Heinemann
         role: New Business Director
+      tags:
+        - name: Digital products
+          slug: digital-products
+        - name: Wagtail
+          slug: wagtail
 
 tags:
   srcset_image: