Add referrer functionality so we can go back to places sensibly

Author: edwardhorsford

app/assets/sass/_misc.scss

@@ -14,3 +14,9 @@
   text-decoration: none;
   color: $nhsuk-secondary-text-color;
 }
+
+
+.app-image-flip-horizontal {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}

app/lib/utils/referrers.js

@@ -0,0 +1,84 @@
+// app/lib/utils/referrers.js
+
+/**
+ * Handle chained referrer URLs for back navigation
+ * Allows deep linking while maintaining proper back navigation chains
+ */
+
+/**
+ * Parse referrer string into array of URLs
+ * @private
+ * @param {string|Array} referrer - Referrer string or array
+ * @returns {Array} Array of referrer URLs
+ */
+const parseReferrerChain = (referrer) => {
+  if (!referrer) return []
+  if (Array.isArray(referrer)) return referrer
+  return referrer.split(',').filter(Boolean)
+}
+
+/**
+ * Get destination from referrer chain, falling back to provided URL if no referrer
+ * @param {string} url - Default URL to use if no referrer
+ * @param {string} referrer - Referrer chain
+ * @returns {string} URL to use for back link
+ * @example
+ * // In templates:
+ * <a href="{{ '/default-path' | orReferrer(referrer) }}">Back</a>
+ */
+const orReferrer = function(url, referrer) {
+  // Get currentUrl from context if available
+  const currentUrl = this?.ctx?.currentUrl
+
+  const chain = parseReferrerChain(referrer)
+    .filter(ref => ref !== currentUrl)
+
+  if (!chain.length) return url
+
+  // For single referrer, return it directly
+  if (chain.length === 1) return chain[0]
+
+  // For multiple referrers, return last one with remaining chain as query param
+  const remainingChain = chain.slice(0, -1)
+  const destination = chain[chain.length - 1]
+
+  return `${destination}?referrer=${remainingChain.join(',')}`
+}
+
+/**
+ * Add referrer to URL as query parameter
+ * @param {string} url - Base URL
+ * @param {string} referrer - Referrer to append
+ * @returns {string} URL with referrer query param
+ * @example
+ * // In templates:
+ * <a href="{{ '/next-page' | withReferrer(referrer) }}">Continue</a>
+ */
+const withReferrer = (url, referrer) => {
+  if (!referrer) return url
+  return `${url}?referrer=${referrer}`
+}
+
+/**
+ * Append a URL to an existing referrer chain
+ * @param {string|Array} existingReferrer - Existing referrer chain
+ * @param {string} newUrl - URL to append
+ * @returns {string} Combined referrer chain
+ * @example
+ * // In templates:
+ * {% set updatedReferrer = referrer | appendReferrer(currentUrl) %}
+ */
+const appendReferrer = (existingReferrer, newUrl) => {
+  if (!newUrl) return existingReferrer
+  if (!existingReferrer) return newUrl
+
+  const chain = parseReferrerChain(existingReferrer)
+  chain.push(newUrl)
+  return chain.join(',')
+}
+
+module.exports = {
+  orReferrer,
+  withReferrer,
+  appendReferrer,
+}

app/locals.js

@@ -1,9 +1,17 @@
 // app/locals.js
 
 module.exports = (config) => (req, res, next) => {
-  res.locals.serviceName = config.serviceName
-  res.locals.url = req.path
-  res.locals.flash = req.flash()
-  res.locals.query = req.query
+
+  const locals = {
+    serviceName: config.serviceName,
+    currentUrl: req.path,
+    flash: req.flash(),
+    query: req.query,
+    referrer: req.query.referrer
+  }
+
+  // Assign all local variables at once
+  Object.assign(res.locals, locals)
+
   next()
 }

app/views/_includes/event-header.njk

@@ -38,5 +38,5 @@
 
 <p>{{ event.timing.startTime | formatTime }} ({{ event.timing.duration }} minutes) - {{ clinic.date | formatDate }} ({{ clinic.date | formatRelativeDate }})<span class="nhsuk-u-margin-left-3"><a href="#">Reschedule appointment</a></span></p>
 
-<p class="nhsuk-u-margin-bottom-4"><a href="/participants/{{ participant.id }}">View participant record</a></p>
+<p class="nhsuk-u-margin-bottom-4"><a href="{{ '/participants/' + participant.id | withReferrer(currentUrl) }}">View participant record</a></p>
 

app/views/_includes/fake-images.njk

@@ -1,14 +1,14 @@
 {% set images = [
   {
-    view: "CC (cranio-caudal)",
+    view: "CC (craniocaudal)",
     side: "Right"
   },
   {
     view: "MLO (mediolateral oblique)",
     side: "Right"
   },
   {
-    view: "CC (cranio-caudal)",
+    view: "CC (craniocaudal)",
     side: "Left"
   },
   {
@@ -45,6 +45,7 @@
   <div class="nhsuk-grid-column-one-quarter">
 
     <div class="app-mammogram-image--placeholder">
+      <img class="nhsuk-image__img {{ 'app-image-flip-horizontal' if params.side == 'Right' }}" src="/images/mammograms/nci-vol-9405-72.jpg" alt="Close-up of a person’s tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.">
       <p>[IMAGE HERE]</p>
     </div>
   </div>
@@ -92,7 +93,7 @@
             text: "Is a repeat"
           },
           value: {
-            text: params.repeat or "No"
+            html: params.repeat or "No"
           },
           actions: {
             items: [
@@ -120,6 +121,19 @@
               }
             ]
           }
+        },
+        {
+          key: {
+            text: "Details",
+            classes: "foo"
+          },
+          value: {
+            html: params.details or "Not provided"
+          },
+          actions: {
+            items: []
+          },
+          classes: "nhsuk-summary-list--no-border"
         }
       ]
     }) }}
@@ -134,7 +148,7 @@
  #}
 <div class="nhsuk-u-margin-bottom-4">
 
-  {% set timeNow = "" | now %}
+  {% set timeNow = dayjs().subtract(1, 'minute')  %}
 
   {% set imageSides = images | groupby("side") %}
 
@@ -147,18 +161,27 @@
     {% set imageSideHtml %}
       {% for image in sideImages %}
 
-        {% if not loop.first %}
-          {% set randomSeconds = [3,4,5] | random %}
+        {# {% if not loop.first %} #}
+          {% set randomSeconds = [24,49,52] | random %}
           {% set timeNow = dayjs(timeNow).add(randomSeconds, 'seconds')  %}
-        {% endif %}
+        {# {% endif %} #}
+
+        {% set detailsHtml -%}
+        Captured:
+        {{ timeNow | formatDate("D MMMM YYYY h:mm:ss")}}
+        Accession: 
+        9583011-14/{{loop.index}}
+        {%- endset %}
+        
 
         {% set params = {
           view: image.view,
           side: image.side,
           repeat: image.repeat or "No",
           comment: image.comment,
           index: loop.index,
-          timeNow: timeNow
+          timeNow: timeNow,
+          details: detailsHtml | trim | nl2br
         } %}
 
         {{ makeImage(params) }}

app/views/participants/show.html

@@ -9,8 +9,8 @@
 
 
 {% set back = {
-  href: "/participants",
-  text: "Back to participants"
+  href: "/participants" | orReferrer(referrer),
+  text: "Back to participants" if not referrer else "Back to appointment"
 } %}
 
 {% block pageContent %}