Update records section with filters (#468)

This is a design spike to look at how we could update the 'Records'
section so that, instead of just searching for records by patient name
or NHS number, you can also filter by:

* vaccination type
* batch number
* vaccinator

We’ve heard these could be useful in some circumstances, such as
correcting mistakes or checking that records were recorded correctly.

To accommodate these options, we could have a 'Filters' box, with the
most common filters shown by default, and more available under a
revealed section.

The records could be sorted by date and time recorded (most recent
first), with pagination at the bottom.

By default, all vaccination records (from your organisation) would be
shown (limited to most recent 500 or so?). This could mean that if you
just need to correct a mistake recorded within the past few minutes or
hour, you don't even need to use the filters at all, as it’ll be near
the top of the list.

I did also consider having the filters in a left hand column, but the
space is pretty tight given the number of filters and the number of
columns shown in the list. However it could be possible to make it work
if the content is reduced down a bit.

[Jira card](https://nhsd-jira.digital.nhs.uk/browse/RAVS-573)

## Screenshots

### Default filters

<img width="2240" height="1945" alt="localhost_3000_records"
src="https://github.com/user-attachments/assets/d5c0c613-5284-4451-89cb-f26b03bb29d8"
/>

### Additional filters

<img width="2240" height="3515" alt="localhost_3000_records (1)"
src="https://github.com/user-attachments/assets/49fa6e31-adb2-455a-9c11-8477eeaf986d"
/>

Author: frankieroberto

app/assets/sass/components/_card.scss

@@ -0,0 +1,9 @@
+@use "sass:color";
+
+.app-card--filters {
+  background-color: color.scale(nhsuk-colour("grey-4"), $alpha: -50%);
+
+  .nhsuk-card__heading--feature {
+    background-color: nhsuk-colour("grey-1");
+  }
+}

app/assets/sass/components/_checkboxes.scss

@@ -3,3 +3,30 @@
 .nhsuk-label {
   box-sizing: border-box;
 }
+
+
+.app-checkboxes--small {
+
+  .nhsuk-checkboxes__item,
+  .nhsuk-radios__item {
+    margin-bottom: 0;
+  }
+
+  .nhsuk-checkboxes__label,
+  .nhsuk-radios__label {
+    padding-left: 0;
+
+    &::before {
+      border-width: 3px;
+      padding: 0;
+      transform: scale(0.6667);
+      transform-origin: center left;
+    }
+
+    &::after {
+      box-sizing: border-box;
+      left: 3px;
+      transform: rotate(-45deg) scale(0.6667);
+    }
+  }
+}

app/assets/sass/components/_search.scss

@@ -0,0 +1,20 @@
+.app-search {
+  display: flex;
+  gap: nhsuk-spacing(1);
+
+
+  .app-search--input {
+    display: flex;
+    flex: 1;
+    margin: 0;
+  }
+
+  .nhsuk-form-group {
+    width: 100%;
+  }
+
+  .app-search--button {
+    display: flex;
+    flex: 0;
+  }
+}

app/assets/sass/main.scss

@@ -12,11 +12,13 @@
 @import 'components/checkboxes';
 
 // Local components or modifiers
+@import 'components/card';
 @import 'components/header';
 @import 'components/summary-list';
 @import 'components/table';
 @import 'components/button';
 @import 'components/filters';
+@import 'components/search';
 @import 'components/section';
 @import 'components/tag';
 @import 'components/numbered-heading';

app/routes.js

@@ -11,7 +11,7 @@ require('./routes/user-onboarding')(router)
 require('./routes/user-profile')(router)
 require('./routes/vaccines')(router)
 require('./routes/reports')(router)
-require('./routes/find-record')(router)
+require('./routes/records')(router)
 require('./routes/prototype-admin')(router)
 require('./routes/lists')(router)
 require('./routes/support')(router)

app/routes/helpers.js

@@ -69,6 +69,10 @@ module.exports = router => {
     const data = req.session.data
     const currentOrganisation = res.locals.currentOrganisation
 
+    const listOfFirstNames = ["Susana", "Steven", "Aleah", "Kaylen", "Stephan", "Donavon", "Emely", "Kailee", "Brooks", "Brenton", "Miles", "Emanuel", "Jedidiah", "Glenn", "Jude", "Ivory", "Austen", "Alyson", "Jaime", "Jordin", "Chad", "Janay", "Tahj", "Reginald", "Enoch", "Amiyah", "Benito", "April", "Joelle", "Brant"]
+
+    const listOfLastNames = ["Ross", "Friedman", "Switzer", "Devore", "Dominguez", "Kohn", "Moreau", "Farrar", "Hogue", "Goldsmith", "Wilkins", "Cornwell", "Wimberly", "Messer", "Woods", "Forrest", "Aiello", "Kuykendall", "Trout", "Bigelow", "Moreland", "Lentz", "Hurst", "Quinonez", "Pak", "McNally", "Longo", "Hunt", "Villa", "Breaux"]
+
     const vaccinationsToAdd = parseInt(data.numberOfVaccinationsToAdd);
 
     const dateToday = new Date()
@@ -78,28 +82,51 @@ module.exports = router => {
     const monthToday = (dateToday.getMonth() + 1)
     const yearToday = (dateToday.getFullYear())
 
+    const organisationVaccines = currentOrganisation.vaccines || []
+
+    const vaccinesEnabled = organisationVaccines
+      .filter((vaccine) => vaccine.status === "enabled")
+
+    const vaccinators = data.users.filter(function(user) {
+      const userInOrganisation = (user.organisations || []).find((userOrg) => userOrg.id === currentOrganisation.id)
+
+      return (userInOrganisation && userInOrganisation.vaccinator)
+    })
 
     for (let i = 0; i < vaccinationsToAdd; i++) {
 
       const generatedId = Math.floor(Math.random() * 10000000).toString()
+      const randomVaccine = randomItem(vaccinesEnabled)
+
+      const vaccineProductsInStock = data.vaccineStock.filter((vaccineStockItem) => vaccineStockItem.vaccine == randomVaccine.name)
+
+      const randomVaccineProduct = randomItem(vaccineProductsInStock)
+      const randombatchNumber = randomItem(randomVaccineProduct.batches)
+
+      const vaccinator = randomItem(vaccinators)
+
+      const randomName = randomItem(listOfFirstNames) + " " + randomItem(listOfLastNames)
+
+      const randomNhsNumber = "9" + (100000000 + Math.floor(Math.random() * 900000000)).toString()
 
       data.vaccinationsRecorded.push({
         id: generatedId,
+        organisationId: "RW3",
         siteId: "RW3NM",
         date: {
           day: dayToday.toString(),
           month: monthToday.toString(),
           year: yearToday.toString()
         },
-        vaccine: "RSV",
-        vaccineProduct: "Abrysvo",
+        vaccine: randomVaccine.name,
+        vaccineProduct: randomVaccineProduct.vaccineProduct,
         patient: {
-          name: "Jodie Brown",
-          nhsNumber: "9123123123"
+          name: randomName,
+          nhsNumber: randomNhsNumber
         },
-        batchNumber: "74725GJ0",
+        batchNumber: randombatchNumber.batchNumber,
         batchExpiryDate: "2025-01-05",
-        vaccinator: "Anna Brown",
+        vaccinatorId: vaccinator.id,
         eligibility: ["Pregnant"],
         pregnancyDueDate: {
           day: "04",
@@ -113,7 +140,7 @@ module.exports = router => {
       })
     }
 
-    res.redirect('/home')
+    res.redirect('/records')
   });
 
 

app/routes/record-vaccinations.js

@@ -596,8 +596,6 @@ module.exports = router => {
       data.vaccinationDate.year = yearToday
     }
 
-    const vaccinator = data.users.find((user) => user.id === data.vaccinatorId)
-
     data.vaccinationsRecorded.push({
       id: generatedId,
       date: data.vaccinationDate,
@@ -610,7 +608,7 @@ module.exports = router => {
       batchNumber: data.vaccineBatch,
       batchExpiryDate: "2025-12-05",
       siteId: data.deliveryTeam,
-      vaccinator: (vaccinator.firstName + " " + vaccinator.lastName),
+      vaccinatorId: data.vaccinatorId,
       eligibility: data.eligibility,
       pregnancyDueDate: data.pregnancyDueDate,
       consent: data.consent,

app/routes/find-record.js app/routes/records.jsapp/routes/find-record.js renamed to app/routes/records.js

@@ -1,5 +1,53 @@
 module.exports = router => {
 
+  router.get('/records', (req, res) => {
+
+    const data = req.session.data
+
+    const currentOrganisation = res.locals.currentOrganisation
+
+    let vaccinationsRecorded = data.vaccinationsRecorded.filter((vaccination) => vaccination.organisationId === currentOrganisation.id)
+
+    const totalVaccinationsRecorded = vaccinationsRecorded.length
+
+    // Get a list of all the different vaccine names recorded so far
+    const vaccinesRecorded = [...new Set(vaccinationsRecorded
+      .map((record) => record.vaccine))]
+
+    const idOfVaccinators = [...new Set(vaccinationsRecorded.map((vaccination) => vaccination.vaccinatorId))]
+
+    const vaccinators = data.users.filter((user) => idOfVaccinators.includes(user.id))
+
+    const nameOrNhsNumberSearch = data.nameOrNhsNumber
+
+    if (nameOrNhsNumberSearch && nameOrNhsNumberSearch != "") {
+      vaccinationsRecorded = vaccinationsRecorded.filter(function(record) {
+        return (
+          record.patient.name.toLowerCase().startsWith(nameOrNhsNumberSearch.toLowerCase()) ||
+          (record.patient.nhsNumber === nameOrNhsNumberSearch)
+        )
+      })
+    }
+
+    if (data.vaccinatorId && data.vaccinatorId != "") {
+      vaccinationsRecorded = vaccinationsRecorded.filter(function(record) {
+        return (
+          record.vaccinatorId === data.vaccinatorId
+        )
+      })
+    }
+
+    if (totalVaccinationsRecorded === 0) {
+      res.render('records/no-vaccinations-recorded')
+    } else {
+      res.render('records/index', {
+        vaccinesRecorded,
+        vaccinationsRecorded,
+        vaccinators
+      })
+    }
+  })
+
  router.post('/records/answer-search', (req, res) => {
   const data = req.session.data
 

app/views/records/check.html

@@ -6,7 +6,7 @@
 
 {% block beforeContent %}
   {{ backLink({
-    href: "/records/patient-history",
+    href: "/records",
     text: "Back"
   }) }}
 {% endblock %}
@@ -25,6 +25,9 @@
 
       <h1 class="nhsuk-heading-l">{{ vaccination.patient.name }}’s {{vaccination.vaccine}} vaccination record</h1>
 
+
+      {% set vaccinator = (data.users | findById(vaccination.vaccinatorId)) %}
+
       {{ summaryList({
         rows: [
         {
@@ -138,7 +141,7 @@ <h1 class="nhsuk-heading-l">{{ vaccination.patient.name }}’s {{vaccination.vac
               text: "Vaccinator"
             },
             value: {
-              text: vaccination.vaccinator
+              text: (vaccinator.firstName + " " + vaccinator.lastName)
             },
             actions: {
               items: [