Add more pagination examples

app/routes/helpers.js

@@ -31,9 +31,9 @@ module.exports = router => {
 
       for (let vaccineProduct of vaccine.products) {
 
-        const numberOfBatchesToAdd = 1 + Math.floor(Math.random() * 10)
+        const numberOfBatchesToAdd = 1 + Math.floor(Math.random() * 40)
 
-        let batches = []
+        let batchesToAdd = []
 
         const generatedVaccineId = Math.floor(Math.random() * 10000000).toString()
 
@@ -44,20 +44,28 @@ module.exports = router => {
 
           const generatedExpiryDate = new Date(dateNow.getTime() + (Math.random() * 100 * millisecondsPerDay)).toISOString()
 
-          batches.push({
+          batchesToAdd.push({
             id: generatedBatchId,
             batchNumber: generatedBatchNumber,
             expiryDate: generatedExpiryDate
           })
         }
 
-        vaccineStock.push({
-          id: generatedVaccineId,
-          vaccine: vaccine.name,
-          vaccineProduct: vaccineProduct.name,
-          siteId: siteId,
-          batches: batches
-        })
+        const existingVaccineStockItem = vaccineStock.find((item) => ((item.vaccine === vaccine.name) && (item.vaccineProduct === vaccineProduct.name) && (item.siteId === siteId) && (item.organisationId === currentOrganisation.id)))
+
+        if (existingVaccineStockItem) {
+          existingVaccineStockItem.batches.push(...batchesToAdd)
+        } else {
+          vaccineStock.push({
+            id: generatedVaccineId,
+            vaccine: vaccine.name,
+            vaccineProduct: vaccineProduct.name,
+            organisationId: currentOrganisation.id,
+            siteId: siteId,
+            batches: batchesToAdd
+          })
+        }
+
       }
     }
 

app/routes/records.js

@@ -3,6 +3,8 @@ module.exports = router => {
   router.get('/records', (req, res) => {
 
     const data = req.session.data
+    const perPage = 20; // Max number of users to show per page
+    const page = parseInt(req.query.page) || 1;  // Current page, default to 1
 
     const currentOrganisation = res.locals.currentOrganisation
 
@@ -37,13 +39,22 @@ module.exports = router => {
       })
     }
 
+    const indexStartFrom = (page - 1) * perPage
+    const vaccinations = vaccinationsRecorded.slice(indexStartFrom, indexStartFrom + perPage)
+    const totalPages = Math.ceil(vaccinationsRecorded.length / perPage)
+
+    const totalMatchingRecords = vaccinationsRecorded.length
+
     if (totalVaccinationsRecorded === 0) {
       res.render('records/no-vaccinations-recorded')
     } else {
       res.render('records/index', {
+        page,
+        totalPages,
         vaccinesRecorded,
-        vaccinationsRecorded,
-        vaccinators
+        vaccinations,
+        vaccinators,
+        totalMatchingRecords
       })
     }
   })

app/views/records/index.html

@@ -147,7 +147,7 @@ <h1 class="nhsuk-heading-l">Records</h1>
       }) }}
 
 
-      <h2 class="nhsuk-heading-m">{{ vaccinationsRecorded | length | plural("record") }}
+      <h2 class="nhsuk-heading-m">{{ totalMatchingRecords | plural("record") }}
       {% if data.nameOrNhsNumber %} matching {{ data.nameOrNhsNumber }}{% endif %}
       </h2>
 
@@ -162,7 +162,7 @@ <h2 class="nhsuk-heading-m">{{ vaccinationsRecorded | length | plural("record")
             </tr>
           </thead>
           <tbody>
-            {% for record in vaccinationsRecorded %}
+            {% for record in vaccinations %}
               <tr>
                 <td>
                   <a href="/records/records/{{ record.id }}">{{ record.patient.name }}</a><br>
@@ -197,7 +197,41 @@ <h2 class="nhsuk-heading-m">{{ vaccinationsRecorded | length | plural("record")
         descriptionHtml: resultsTableHtml
       }) }}
 
-        <p>Showing 1 to {{ data.vaccinationsRecorded | length }} of {{ data.vaccinationsRecorded | length }} records<p>
+      {% set items = [] %}
+
+      {% set queryString = "?" %}
+      {% if data.nameOrNhsNumber %}
+        {% set queryString = queryString + "&nameOrNhsNumber=" + data.nameOrNhsNumber %}
+      {% endif %}
+
+      {% 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: "/records" + queryString + "&page=" + i,
+            current: (i === page)
+          }), items) %}
+          {% set ellipsisAdded = false %}
+        {% elif ellipsisAdded == false %}
+          {% set items = (items.push({
+            ellipsis: true
+          }), items) %}
+          {% set ellipsisAdded = true %}
+        {% endif %}
+      {%- endfor %}
+
+      {% if totalPages > 1 %}
+        {{ pagination({
+          previous: {
+            href: "/records" + queryString + "&page=" + (page - 1)
+          } if page != 1,
+          next: {
+            href: "/records" + queryString + "&page=" + (page + 1)
+          } if page != totalPages,
+          items: items
+        }) }}
+      {% endif %}
 
     </div>
   </div>

app/views/regions/index.html

@@ -72,6 +72,25 @@ <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
           </table>
       </div>
     </div>
+
+
+    {{ pagination({
+      next: {
+        href: "#"
+      },
+      items: [
+        {
+          number: 1,
+          href: "#",
+          current: true
+        },
+        {
+          number: 2,
+          href: "#"
+        }
+      ]
+    }) }}
+
   {% endif %}
 
   {% if closedOrganisationsCount > 0 %}

app/views/regions/organisation.html

@@ -110,6 +110,23 @@ <h1 class="nhsuk-heading-l">{{ organisation.name }}</h1>
           </table>
         {% endif %}
 
+        {{ pagination({
+          next: {
+            href: "#"
+          },
+          items: [
+            {
+              number: 1,
+              href: "#",
+              current: true
+            },
+            {
+              number: 2,
+              href: "#"
+            }
+          ]
+        }) }}
+
         {% set buttonText = "Add another user" if (organisation.leadUsers | length) > 0  else "Add user" %}
 
         {{ button({ text: buttonText, href: "/regions/organisations/" + organisation.id + "/add-email"}) }}