Image reading v1.5 updates (#56)

* Simplify normal details page
* Update recall page
* Update annotation and recall pages
* Add clinic codes
* Clean up symptoms display
* Add forward-link component
* Refactor reading ui
* Move partial mammography lower
* Randomisation work, elements of multiple reads
* Add decorateAttributes, copied from DfE Register
* Work on recall for assessment pages
* Make symptoms card consistent

Author: edwardhorsford

app/assets/sass/_misc.scss

@@ -11,6 +11,27 @@
   }
 }
 
+.app-image-two-up {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  img {
+    width: 48%;
+  }
+}
+
+.app-position-relative {
+  position: relative;
+}
+
+.app-align-right {
+  float: right;
+  * {
+    text-align: right;
+  }
+}
+
 .app-suppress-link-styles * {
   text-decoration: none;
   color: $nhsuk-secondary-text-color;

app/assets/sass/components/_forward-link.scss

@@ -0,0 +1,63 @@
+////
+/// Back link component
+///
+/// 1. Allow space for the arrow.
+/// 2. Align the icon with the start of the back link.
+/// 3. Align the icon with the middle of the text.
+/// 4. Make back link same height as breadcrumb.
+///
+/// @group components
+////
+
+.app-forward-link {
+  margin-top: nhsuk-spacing(3);
+  line-height: 1; // [5]
+
+  @include mq($from: tablet) {
+    margin-top: nhsuk-spacing(4);
+  }
+}
+
+.app-forward-link__link {
+  @include nhsuk-typography-responsive(16);
+  @include nhsuk-link-style-default;
+
+  background: none;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0 16px 0 0; // [1]
+  position: relative;
+  text-decoration: none;
+
+  .nhsuk-icon__chevron-right {
+    height: 24px;
+    right: -8px; // [2]
+    position: absolute;
+    top: -1px; // [3]
+    width: 24px;
+
+    @include mq($from: tablet) {
+      top: 0; // [3]
+    }
+  }
+
+  &:visited {
+    color: $nhsuk-link-color;
+  }
+
+  &:hover {
+    color: $nhsuk-link-hover-color;
+    text-decoration: underline;
+
+    .nhsuk-icon__chevron-right {
+      fill: $nhsuk-link-hover-color;
+    }
+  }
+
+  &:focus {
+    .nhsuk-icon__chevron-right {
+      fill: $nhsuk-focus-text-color;
+    }
+  }
+}

app/assets/sass/main.scss

@@ -9,6 +9,7 @@
 @import 'components/header-organisation';
 @import 'components/secondary-navigation';
 @import 'components/count';
+@import 'components/forward-link';
 @import 'components/notification-banner';
 @import 'components/status';
 @import 'components/reading';

app/filters/form-attributes.js

@@ -0,0 +1,117 @@
+// app/filters/form-attributes.js
+
+const _ = require('lodash')
+
+/**
+ * Decorate attributes
+ * Add name, value, id, idPrefix and checked attributes to NHSUK form components
+ * Generate the attributes based on the application ID and the section they're in
+ *
+ * @param {Object} originalObject - The original component configuration
+ * @param {Object} data - The data object to extract values from
+ * @param {string} path - Path to the data property (e.g. "data.nationality")
+ * @returns {Object} The decorated component configuration
+ *
+ * @example
+ * {{ nhsukCheckboxes({
+ *   fieldset: {
+ *     legend: {
+ *       text: "Nationality",
+ *       classes: "nhsuk-fieldset__legend--s"
+ *     }
+ *   },
+ *   items: [
+ *     {
+ *       text: "British"
+ *     },
+ *     {
+ *       text: "Irish"
+ *     },
+ *     {
+ *       text: "Other"
+ *     }
+ *   ]
+ * } | decorateAttributes(data, "data.nationality"))}}
+ */
+const decorateAttributes = (originalObject, data, path) => {
+  // Deep clone to avoid modifying the original object
+  const obj = _.cloneDeep(originalObject)
+
+  // Map dot or bracket notation to path parts
+  const pathParts = _.toPath(path)
+
+  // Strip 'data' prefix if present
+  let dataPath = [...pathParts]
+  if (pathParts[0] === 'data') {
+    dataPath = dataPath.slice(1)
+  }
+
+  // Get the stored value from data
+  const storedValue = _.get(data, dataPath)
+
+  if (obj.items !== undefined) {
+    obj.items = obj.items.map(item => {
+      // Skip dividers
+      if (item.divider) return item
+
+      // Set default value to text if not provided
+      if (typeof item.value === 'undefined') {
+        item.value = item.text
+      }
+
+      // Default checked/selected states when no data exists
+      let checked = item.checked
+      let selected = item.selected
+
+      // Only process if we have a stored value to compare against
+      if (storedValue !== undefined) {
+        // For array values (like checkboxes)
+        if (Array.isArray(storedValue)) {
+          if (storedValue.includes(item.value)) {
+            checked = 'checked'
+            selected = 'selected'
+          } else {
+            // Clear any default checked state when we have data
+            checked = ''
+            selected = ''
+          }
+        } else {
+          // For single values (like radios)
+          if (storedValue === item.value) {
+            checked = 'checked'
+            selected = 'selected'
+          } else {
+            // Clear any default checked state when we have data
+            checked = ''
+            selected = ''
+          }
+        }
+      }
+
+      // Assign the computed values
+      item.checked = checked
+      item.selected = selected
+
+      return item
+    })
+
+    // Set idPrefix if not already defined
+    obj.idPrefix = obj.idPrefix || pathParts.join('-')
+  } else {
+    // For non-array components (like text inputs),
+    // set the value if not already defined
+    if (typeof obj.value === 'undefined') {
+      obj.value = storedValue
+    }
+  }
+
+  // Set id and name attributes if not already defined
+  obj.id = obj.id || pathParts.join('-')
+  obj.name = obj.name || pathParts.map(s => `[${s}]`).join('')
+  console.log("Object name:", obj.name)
+  return obj
+}
+
+module.exports = {
+  decorateAttributes
+}

app/lib/generators/clinic-generator.js

@@ -29,6 +29,13 @@ const determineClinicType = (location, breastScreeningUnit) => {
   })
 }
 
+const generateClinicCode = () => {
+  // Example format: AB123 where AB is one of an array.
+  const prefixOptions = ['CH', 'MU', 'WS',]
+  const suffix = faker.number.int({ min: 100, max: 999 })
+  return `${faker.helpers.arrayElement(prefixOptions)}${suffix}`
+}
+
 const generateTimeSlots = (date, sessionTimes, clinicType) => {
   const { slotDurationMinutes } = config.clinics
   const today = dayjs().startOf('day')
@@ -151,6 +158,7 @@ const generateClinic = (date, location, breastScreeningUnit, sessionTimes, overr
 
   return {
     id: generateId(),
+    clinicCode: generateClinicCode(),
     date: date.toISOString().split('T')[0],
     breastScreeningUnitId: breastScreeningUnit.id,
     locationType: location.type,