add pagination

config/settings.py

@@ -151,8 +151,9 @@
             ROOT_DIR / 'node_modules' / '@uktrade' / 'great-design-system' / 'dist' / 'components' / 'details',
             ROOT_DIR / 'node_modules' / '@uktrade' / 'great-design-system' / 'dist' / 'components' / 'accordion',
             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' / '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,11 @@ 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)
+        total_pages_range = range(1, paginator.num_pages + 1)
+
         breadcrumbs = [
             {'name': 'Home', 'url': '/international/'},
             {
@@ -414,7 +420,9 @@ def get_context(self, request, *args, **kwargs):
         ]
         context.update(
             triage_data=triage_data,
-            all_tradeshows=all_tradeshows,
+            paginated_tradeshows=paginated_tradeshows,
+            total_pages=paginator.num_pages,
+            total_pages_range=total_pages_range,
             breadcrumbs=breadcrumbs,
         )
         self.set_ga360_payload(
@@ -459,10 +467,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 +497,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/guide.html

@@ -141,7 +141,7 @@ <h3 class="govuk-heading-m">
                                     </ul>
                                     <div class="govuk-grid-row govuk-!-padding-1">
                                         <div class="govuk-grid-column-full">
-                                            {% include '_action_link.html' with linkText='Compare market data across UK nations and regions' linkHref='/international/expand-your-business-in-the-uk/business-cluster-information/?area=K03000001' %}
+                                            {% include '_action-link.html' with linkText='Compare market data across UK nations and regions' linkHref='/international/expand-your-business-in-the-uk/business-cluster-information/?area=K03000001' %}
                                         </div>
                                     </div>
                                     <div class="govuk-grid-row govuk-!-padding-top-3">

international_online_offer/templates/eyb/includes/list_item.html

@@ -0,0 +1,28 @@
+{% load static %}
+<div class="govuk-!-padding-bottom-6 govuk-!-padding-top-6 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">{{ description }}</p>{% endif %}
+    </div>
+</div>

international_online_offer/templates/eyb/trade_shows.html

@@ -17,19 +17,19 @@ <h1 class="govuk-heading-xl">UK events</h1>
         <div class="govuk-grid-row">
             <div class="govuk-grid-column-full">
                 <p class="govuk-body">
-                    Attending a UK trade event can help you develop networks and get the latest insights from your sector.
+                    Attending conferences, fairs or trade shows can help you make industry connections in the UK and get the latest insights from your sector.
                 </p>
             </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 +45,13 @@ <h1 class="govuk-heading-xl">UK events</h1>
                 </div>
             {% endif %}
         </div>
+        {% if total_pages > 1 %}
+            <div class="govuk-grid-row">
+                <div class="govuk-grid-column-full">
+                    {% include '_numbered_pagination.html' with currentPage=request.GET.page totalPagesRange=total_pages_range %}
+                </div>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}
 {% block feedback_reporter %}

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",