add pagination

config/settings.py

@@ -153,6 +153,7 @@
             ROOT_DIR / 'node_modules' / '@uktrade' / 'great-design-system' / 'dist' / 'components' / 'cta_banner',
             ROOT_DIR / 'node_modules' / '@uktrade' / 'great-design-system' / 'dist' / 'components' / 'action_link',
             ROOT_DIR / 'node_modules' / '@uktrade' / 'great-design-system' / 'dist' / 'components' / 'responsive_image',
+            ROOT_DIR / 'node_modules' / '@uktrade' / 'great-design-system' / 'dist' / 'components' / 'pagination',
             ROOT_DIR
             / 'node_modules'
             / '@uktrade'

international_online_offer/models.py

@@ -1,5 +1,6 @@
 from django import forms
 from django.contrib.postgres.fields import ArrayField
+from django.core.paginator import Paginator
 from django.db import models
 from django.http import HttpResponseRedirect
 from django.shortcuts import redirect, render
@@ -405,6 +406,10 @@ def get_context(self, request, *args, **kwargs):
                 IOOTradeShowPage.objects.live().filter(dbt_sectors__contains=[triage_data.sector])
             )
 
+        paginator = Paginator(all_tradeshows, 20)
+        page = request.GET.get('page', 1)
+        paginated_tradeshows = paginator.get_page(page)
+
         breadcrumbs = [
             {'name': 'Home', 'url': '/international/'},
             {
@@ -414,7 +419,8 @@ def get_context(self, request, *args, **kwargs):
         ]
         context.update(
             triage_data=triage_data,
-            all_tradeshows=all_tradeshows,
+            paginated_tradeshows=paginated_tradeshows,
+            num_pages=paginator.num_pages,
             breadcrumbs=breadcrumbs,
         )
         self.set_ga360_payload(
@@ -459,10 +465,10 @@ class IOOTradeShowPage(BaseContentPage):
         blank=True,
     )
     tradeshow_locale = models.CharField(blank=True, null=True)
-    tradeshow_city = models.TextField(
+    tradeshow_city = models.CharField(
         choices=region_sector_helpers.generate_location_choices(include_regions=False), blank=True, null=True
     )
-    tradeshow_region = models.TextField(
+    tradeshow_region = models.CharField(
         choices=region_sector_helpers.generate_location_choices(include_cities=False), blank=True, null=True
     )
     tradeshow_link = models.URLField(blank=True, max_length=255, null=True)
@@ -489,6 +495,27 @@ class IOOTradeShowPage(BaseContentPage):
         FieldPanel('tags'),
     ]
 
+    @property
+    def location_display(self):
+        output = ''
+
+        if self.tradeshow_locale:
+            output += self.tradeshow_locale
+
+            if self.tradeshow_city or self.tradeshow_region:
+                output += ', '
+
+        if self.tradeshow_city:
+            output += self.get_tradeshow_city_display()
+
+            if self.tradeshow_region:
+                output += ', '
+
+        if self.tradeshow_region:
+            output += self.get_tradeshow_region_display()
+
+        return output
+
 
 class EYBArticlesPage(BaseContentPage):
     parent_page_types = ['international_online_offer.EYBGuidePage', 'international_online_offer.EYBArticlesPage']

international_online_offer/sass/components/article-list-item.scss

@@ -123,3 +123,24 @@
     }
 
 }
+
+.listitem{
+    &-logo {
+        width: 60px;
+        height: 60px;
+        background-position: top;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+    &-title-link {
+        text-decoration: none !important;
+
+        &::after {
+            content: '\f35d';
+            font-family: 'Font Awesome 5 Free';
+            font-weight: 900;
+            position: static;
+            padding-left: 5px;
+        }
+    }
+}

international_online_offer/templates/eyb/includes/list_item.html

@@ -0,0 +1,28 @@
+{% load static %}
+<div class="govuk-!-margin-bottom-6 govuk-!-padding-bottom-2 great-grey-bottom-border great-display-flex great-align-items-top great-gap">
+    <div>
+        {% if icon %}
+            <div class="listitem-logo"
+                 style="background-image: url('{% static 'svg/icon-planning-status.svg' %}')"></div>
+        {% endif %}
+    </div>
+    <div class="great-full-width">
+        <a href="{{ url }}"
+           {% if rel %}rel="{{ rel }}"{% endif %}
+           {% if target %}target="{{ target }}"{% endif %}
+           class="govuk-heading-xs govuk-!-margin-bottom-1 great-heading-link great-ds-heading-link listitem-title-link">
+            <h2 class="govuk-heading-xs great-heading-link__heading govuk-!-font-size-24">
+                <span>{{ link_title }}</span>
+            </h2>
+        </a>
+        {% if location %}
+            <p class="govuk-body govuk-!-margin-bottom-1">
+                <i class="fa fa-map-marker-alt govuk-!-margin-right-1"
+                   aria-hidden="true">
+                </i>
+                <span class="govuk-hint">{{ location }}</span>
+            </p>
+        {% endif %}
+        {% if description %}<p class="govuk-body govuk-!-margin-bottom-4">{{ description }}</p>{% endif %}
+    </div>
+</div>

international_online_offer/templates/eyb/trade_shows.html

@@ -2,6 +2,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 {% load sector_filters %}
+{% load range_from_1 from eyb_tags %}
 {% load static %}
 {% block head_title %}Trade events {{ block.super }}{% endblock %}
 {% block meta_title %}Trade events {{ block.super }}{% endblock %}
@@ -22,14 +23,14 @@ <h1 class="govuk-heading-xl">UK events</h1>
             </div>
         </div>
         <div class="govuk-grid-row govuk-!-margin-bottom-6">
-            {% if all_tradeshows %}
+            {% if paginated_tradeshows %}
                 <div class="govuk-grid-column-full">
-                    {% for page in all_tradeshows %}
+                    {% for page in paginated_tradeshows.object_list %}
                         {% if request.user.is_authenticated %}
-                            {% include './includes/article_list_item.html' with rel="noopener noreferrer" target="_blank" url=page.specific.tradeshow_link link_title=page.specific.tradeshow_title link_description=page.specific.tradeshow_subheading %}
+                            {% include './includes/list_item.html' with rel="noopener noreferrer" target="_blank" icon='icon' url=page.specific.tradeshow_link link_title=page.specific.tradeshow_title description=page.specific.tradeshow_subheading location=page.specific.location_display %}
                         {% else %}
                             {% url 'international_online_offer:signup' as signup_url %}
-                            {% include './includes/article_list_item.html' with url=signup_url link_title=page.specific.tradeshow_title link_description=page.specific.tradeshow_subheading %}
+                            {% include './includes/list_item.html' with url=signup_url link_title=page.specific.tradeshow_title link_description=page.specific.tradeshow_subheading %}
                         {% endif %}
                     {% endfor %}
                 </div>
@@ -45,6 +46,13 @@ <h1 class="govuk-heading-xl">UK events</h1>
                 </div>
             {% endif %}
         </div>
+        {% if num_pages > 1 %}
+            <div class="govuk-grid-row">
+                <div class="govuk-grid-column-full">
+                    {% include '_numbered_pagination.html' with currentPage=request.GET.page totalPagesRange=num_pages|range_from_1 %}
+                </div>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}
 {% block feedback_reporter %}

international_online_offer/templatetags/eyb_tags.py

@@ -12,3 +12,9 @@ def get_salary_display_classes(context):
         result['salary_card_class'] = 'govuk-grid-column-one-half'
 
     return result
+
+
+# for pagination component - check if tag is elsewhere
+@register.filter
+def range_from_1(value):
+    return range(1, value + 1)

package.json

@@ -75,7 +75,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "@fortawesome/fontawesome-free": "^5.15.4",
-    "@uktrade/great-design-system": "1.0.15",
+    "@uktrade/great-design-system": "1.1.4",
     "govuk-frontend": "^4.5.0",
     "great-styles": "github:uktrade/great-styles",
     "prop-types": "15.7.2",