Add pagination to pharmacies

app/routes/pharmacies.js

@@ -160,6 +160,8 @@ const renderAddUserPermissionLevelPage = (res, organisation, existingUser, error
 module.exports = router => {
 
   router.get('/pharmacies', (req, res) => {
+    const perPage = 50
+    const requestedPage = parseInt(req.query.page, 10) || 1
     const data = req.session.data
     const added = req.query.added
     const deleted = req.query.deleted === 'true'
@@ -171,8 +173,13 @@ module.exports = router => {
     const allOrganisations = data.organisations.filter((organisation) => organisation.companyId === companyId).sort(sortByNameThenPostcode())
 
     // Separate active/deactivated pharmacies from closed ones
-    const organisations = allOrganisations.filter((org) => org.status !== 'Closed')
+    const activeOrganisations = allOrganisations.filter((org) => org.status !== 'Closed')
     const closedOrganisations = allOrganisations.filter((org) => org.status === 'Closed')
+    const totalOrganisations = activeOrganisations.length
+    const totalPages = Math.max(1, Math.ceil(totalOrganisations / perPage))
+    const page = Math.min(Math.max(requestedPage, 1), totalPages)
+    const indexStartFrom = (page - 1) * perPage
+    const organisations = activeOrganisations.slice(indexStartFrom, indexStartFrom + perPage)
 
     let organisationUserCounts = {}
 
@@ -188,6 +195,9 @@ module.exports = router => {
       organisations,
       closedOrganisations,
       organisationUserCounts,
+      page,
+      totalOrganisations,
+      totalPages,
       added,
       deleted,
       deletedName,

app/views/pharmacies/index.html

@@ -49,9 +49,9 @@ <h1 class="nhsuk-heading-l">Pharmacies</h1>
 
       {% if (organisations | length) > 0 %}
         <table class="nhsuk-table" id="pharmacies-table">
-          <caption class="nhsuk-table__caption nhsuk-table__caption--m">Pharmacies added ({{ organisations | length }})</caption>
+          <caption class="nhsuk-table__caption nhsuk-table__caption--m">Pharmacies added ({{ totalOrganisations }})</caption>
         </table>
-        {% if (organisations | length) > 10 %}
+        {% if totalOrganisations > 10 %}
           <div class="nhsuk-form-group nhsuk-u-margin-bottom-4" style="margin-top: -30px;">
             <label class="nhsuk-label" for="pharmacy-search">Search</label>
             <input class="nhsuk-input nhsuk-input--width-20" id="pharmacy-search" name="pharmacy-search" type="search" autocomplete="off" placeholder="">
@@ -107,6 +107,37 @@ <h1 class="nhsuk-heading-l">Pharmacies</h1>
 
           </tbody>
         </table>
+
+        {% if totalPages > 1 %}
+          {% set items = [] %}
+          {% set ellipsisAdded = false %}
+
+          {%- for i in range(1, totalPages + 1) -%}
+            {% if i == 1 or i == (page - 1) or i == page or i == (page + 1) or i == totalPages %}
+              {% set items = (items.push({
+                number: i,
+                href: "/pharmacies?page=" + i,
+                current: (i === page)
+              }), items) %}
+              {% set ellipsisAdded = false %}
+            {% elif ellipsisAdded == false %}
+              {% set items = (items.push({
+                ellipsis: true
+              }), items) %}
+              {% set ellipsisAdded = true %}
+            {% endif %}
+          {%- endfor %}
+
+          {{ pagination({
+            previous: {
+              href: "/pharmacies?page=" + (page - 1)
+            } if page != 1,
+            next: {
+              href: "/pharmacies?page=" + (page + 1)
+            } if page != totalPages,
+            items: items
+          }) }}
+        {% endif %}
       {% endif %}
 
       {% if closedOrganisations.length > 0 %}