Update automatic images (#196)

* Start refactoring automatic images
* Update automatic image display
* Default view counts for common case
* Show placeholder if view is missing

Author: edwardhorsford

app/assets/sass/_misc.scss

@@ -4,8 +4,8 @@
 
 .app-mammogram-image--placeholder {
   background-color: black;
-  width: 75px;
-  height: 100px;
+  width: 125px;
+  // height: 150px;
 
   outline: 1px solid rgba(255, 255, 255, 0.2);
 
@@ -15,6 +15,21 @@
   }
 }
 
+.app-mammogram-image--missing {
+  background-color: $color_nhsuk-grey-5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 125px;
+  height: 187.5px;
+  border: 2px dashed $color_nhsuk-grey-2;
+}
+
+.app-mammogram-image--missing-content {
+  text-align: center;
+  font-size: 16px;
+}
+
 // Progressive enhancement helpers
 .app-js-only {
   display: none;

app/lib/generators/event-generator.js

@@ -15,6 +15,7 @@ const {
 } = require('./special-appointment-generator')
 const { generateAppointmentNote } = require('./appointment-note-generator')
 const users = require('../../data/users')
+const screeningRooms = require('../../data/screening-rooms')
 
 const NOT_SCREENED_REASONS = [
   'Recent mammogram at different facility',
@@ -248,6 +249,17 @@ const generateEvent = ({
         config: participant.config
       })
 
+      // Add machine room for hospital locations
+      if (clinic.location?.id) {
+        const availableRooms = screeningRooms.filter(
+          (room) => room.locationId === clinic.location.id
+        )
+        if (availableRooms.length > 0) {
+          const randomRoom = faker.helpers.arrayElement(availableRooms)
+          event.mammogramData.machineRoom = randomRoom.displayName
+        }
+      }
+
       // Pretend some events have previous images requested
       event.hasRequestedImages = weighted.select({ true: 0.3, false: 0.7 })
 

app/lib/utils/strings.js

@@ -369,6 +369,34 @@ const pluralise = (word, ...args) => {
   return pluralizeLib(word, ...args)
 }
 
+/**
+ * Format mammogram view code for display
+ * Converts "REklund" or "LEklund" to "Right Eklund" or "Left Eklund"
+ * Leaves standard codes like "RCC", "RMLO", "LCC", "LMLO" unchanged
+ *
+ * @param {string} code - View code to format
+ * @returns {string} Formatted view code
+ * @example
+ * formatMammogramViewCode('RCC') // returns 'RCC'
+ * formatMammogramViewCode('REklund') // returns 'Right Eklund'
+ * formatMammogramViewCode('Left Eklund') // returns 'Left Eklund' (already formatted)
+ */
+const formatMammogramViewCode = (code) => {
+  if (!code || typeof code !== 'string') return code
+
+  // Already in the correct format (has a space)
+  if (code.includes(' ')) return code
+
+  // Handle REklund -> Right Eklund
+  if (code === 'REklund') return 'Right Eklund'
+
+  // Handle LEklund -> Left Eklund
+  if (code === 'LEklund') return 'Left Eklund'
+
+  // Return standard codes unchanged (RCC, RMLO, LCC, LMLO, etc)
+  return code
+}
+
 module.exports = {
   addIndefiniteArticle,
   formatCurrency,
@@ -393,5 +421,6 @@ module.exports = {
   stringIncludes,
   stringLiteral,
   formatPhoneNumber,
-  pluralise
+  pluralise,
+  formatMammogramViewCode
 }

app/routes/events.js

@@ -1445,6 +1445,18 @@ module.exports = (router) => {
           isSeedData: false,
           config: eventData?.participant?.config
         })
+
+        // Add machine room from current screening room
+        if (data.currentScreeningRoom) {
+          const screeningRooms = data.screeningRooms || []
+          const currentRoom = screeningRooms.find(
+            (room) => room.id === data.currentScreeningRoom
+          )
+          if (currentRoom) {
+            mammogramData.machineRoom = currentRoom.displayName
+          }
+        }
+
         data.event.mammogramData = mammogramData
         res.locals.event = data.event
       }
@@ -1504,13 +1516,75 @@ module.exports = (router) => {
     (req, res) => {
       const { clinicId, eventId } = req.params
       const data = req.session.data
+
+      // Save current screening room if not already set
+      if (!data.event.mammogramData.machineRoom && data.currentScreeningRoom) {
+        const screeningRooms = data.screeningRooms || []
+        const currentRoom = screeningRooms.find(
+          (room) => room.id === data.currentScreeningRoom
+        )
+        if (currentRoom) {
+          data.event.mammogramData.machineRoom = currentRoom.displayName
+        }
+      }
+
+      // Process repeat data from form submission for automatic flow
+      // The form fields are named like "event[mammogramData][repeatNeeded-RCC]"
+      // and are already in data.event.mammogramData
+      const mammogramData = data.event.mammogramData
+      if (mammogramData.views) {
+        for (const [viewKey, viewData] of Object.entries(mammogramData.views)) {
+          const code = viewData.viewShortWithSide
+          const imageCount = viewData.images ? viewData.images.length : 0
+
+          if (imageCount > 1) {
+            const repeatNeeded = mammogramData[`repeatNeeded-${code}`]
+            const extraImageCount = imageCount - 1
+            let repeatCount = 0
+            let repeatReasons = null
+
+            if (repeatNeeded === 'yes') {
+              // Single extra image answered "yes"
+              repeatCount = 1
+              const reasons = mammogramData[`repeatReasons-${code}`]
+              if (reasons && reasons.length > 0) {
+                repeatReasons = reasons
+              }
+            } else if (repeatNeeded === 'all-repeats') {
+              // All extra images were repeats
+              repeatCount = extraImageCount
+              const reasons = mammogramData[`repeatReasons-${code}`]
+              if (reasons && reasons.length > 0) {
+                repeatReasons = reasons
+              }
+            } else if (repeatNeeded === 'some-repeats') {
+              // Some were repeats, some were additional
+              repeatCount = parseInt(mammogramData[`repeatCount-${code}`]) || 0
+              const reasons = mammogramData[`repeatReasons-${code}`]
+              if (reasons && reasons.length > 0) {
+                repeatReasons = reasons
+              }
+            }
+
+            // Update view with repeat information
+            viewData.repeatCount = repeatCount
+            viewData.repeatReasons = repeatReasons
+          }
+        }
+      }
+
       const isPartialMammography = data.event.mammogramData.isPartialMammography
 
       // Check if array includes 'yes' (checkbox format) or equals 'yes' (string format from manual entry)
       const hasPartialMammography = Array.isArray(isPartialMammography)
         ? isPartialMammography.includes('yes')
         : isPartialMammography === 'yes'
 
+      // Initialize workflowStatus if it doesn't exist
+      if (!data.event.workflowStatus) {
+        data.event.workflowStatus = {}
+      }
+
       // Mark the workflow step as completed regardless of partial mammography status
       data.event.workflowStatus['take-images'] = 'completed'
 
@@ -1521,9 +1595,41 @@ module.exports = (router) => {
 
   // Manual imaging routes
 
-  // Add this section to events.js after the existing imaging routes
+  // Handle take-images route - redirect to appropriate page based on state
+  router.get('/clinics/:clinicId/events/:eventId/take-images', (req, res) => {
+    const { clinicId, eventId } = req.params
+    const data = req.session.data
 
-  // Manual imaging routes
+    const isManualImageCollection =
+      data.settings?.screening?.manualImageCollection
+    const imagesStageCompleted =
+      data.event?.workflowStatus?.['take-images'] === 'completed'
+
+    // If manual flow and images already completed, redirect to details page for editing
+    if (
+      isManualImageCollection &&
+      imagesStageCompleted &&
+      data.event?.mammogramData?.isManualEntry
+    ) {
+      return res.redirect(
+        `/clinics/${clinicId}/events/${eventId}/images-manual-details`
+      )
+    }
+
+    // If automatic flow and images completed, redirect to automatic page
+    if (
+      !isManualImageCollection &&
+      imagesStageCompleted &&
+      data.event?.mammogramData
+    ) {
+      return res.redirect(
+        `/clinics/${clinicId}/events/${eventId}/images-automatic`
+      )
+    }
+
+    // Otherwise render the take-images template which will determine which flow to show
+    res.render('events/take-images')
+  })
 
   // Initialize or edit manual imaging - clears temp or prepopulates from existing data
   router.get('/clinics/:clinicId/events/:eventId/images-manual', (req, res) => {
@@ -1748,7 +1854,12 @@ module.exports = (router) => {
 
       // Only add view if count > 0
       if (count > 0) {
-        const code = `${config.sideCode}${config.viewType}`
+        // For Eklund views, use full form like "Right Eklund" or "Left Eklund"
+        // For standard views, use abbreviated form like "RCC" or "LMLO"
+        const code =
+          config.viewType === 'Eklund'
+            ? `${config.side.charAt(0).toUpperCase() + config.side.slice(1)} ${config.viewType}`
+            : `${config.sideCode}${config.viewType}`
 
         // Get repeat data if this view has count > 1
         let repeatCount = 0
@@ -1936,30 +2047,6 @@ module.exports = (router) => {
       const data = req.session.data
       const formData = data.event?.mammogramDataTemp || {}
 
-      // Normalize checkbox data into count fields (our single source of truth)
-      if (formData.uiVersion === 'checkboxes') {
-        const rightViews = formData.viewsRightBreast || []
-        const leftViews = formData.viewsLeftBreast || []
-
-        // Set counts to 0 for unchecked views, preserve existing counts for checked views
-        const viewTypes = ['CC', 'MLO', 'Eklund']
-
-        viewTypes.forEach((viewType) => {
-          // Right breast
-          if (!rightViews.includes(viewType)) {
-            formData[`viewsRightBreast${viewType}Count`] = '0'
-          }
-          // Left breast
-          if (!leftViews.includes(viewType)) {
-            formData[`viewsLeftBreast${viewType}Count`] = '0'
-          }
-        })
-
-        // Delete the checkbox arrays - we only keep the count fields
-        delete formData.viewsRightBreast
-        delete formData.viewsLeftBreast
-      }
-
       // Validate at least one view has a count > 0
       const viewTypes = ['CC', 'MLO', 'Eklund']
       const breasts = ['Right', 'Left']
@@ -2029,7 +2116,14 @@ module.exports = (router) => {
 
       // Clean up and normalize repeat reasons based on which option was selected
       const formData = data.event?.mammogramDataTemp || {}
-      const viewCodes = ['RCC', 'RMLO', 'REklund', 'LCC', 'LMLO', 'LEklund']
+      const viewCodes = [
+        'RCC',
+        'RMLO',
+        'Right Eklund',
+        'LCC',
+        'LMLO',
+        'Left Eklund'
+      ]
 
       viewCodes.forEach((code) => {
         const repeatNeeded = formData[`repeatNeeded-${code}`]