From b515f26238f91bb3485e7d76febf116e646deab0 Mon Sep 17 00:00:00 2001 From: rivalee Date: Thu, 16 Jul 2026 12:24:08 +0100 Subject: [PATCH] Update workflow step content --- .../workflow/workflow-side-navigation.njk | 2 +- app/views/appointments/images-manual.html | 2 +- app/views/events/images-automatic.html | 136 +++++++++++++ .../events/images-before-mammography.html | 48 +++++ app/views/events/images-manual.html | 178 ++++++++++++++++++ 5 files changed, 364 insertions(+), 2 deletions(-) create mode 100644 app/views/events/images-automatic.html create mode 100644 app/views/events/images-before-mammography.html create mode 100644 app/views/events/images-manual.html diff --git a/app/views/_includes/workflow/workflow-side-navigation.njk b/app/views/_includes/workflow/workflow-side-navigation.njk index ef0d2708..16d1821c 100644 --- a/app/views/_includes/workflow/workflow-side-navigation.njk +++ b/app/views/_includes/workflow/workflow-side-navigation.njk @@ -17,7 +17,7 @@ {% set workflowSteps = [ { id: 'confirm-identity', label: 'Confirm identity' }, { id: 'review-medical-information', label: 'Review medical information' }, - { id: 'take-images', label: 'Take images' }, + { id: 'take-images', label: 'Take mammogram images' }, { id: 'check-information', label: 'Check information' } ] %} diff --git a/app/views/appointments/images-manual.html b/app/views/appointments/images-manual.html index 63570ff4..74261261 100644 --- a/app/views/appointments/images-manual.html +++ b/app/views/appointments/images-manual.html @@ -4,7 +4,7 @@ {% set hideBackLink = true %} {% set activeWorkflowStep = 'take-images' %} -{% set pageHeading = "Manually record image information" %} +{% set pageHeading = "Take mammogram images" %} {% set gridColumn = "nhsuk-grid-column-two-thirds" %} diff --git a/app/views/events/images-automatic.html b/app/views/events/images-automatic.html new file mode 100644 index 00000000..4ddbc87a --- /dev/null +++ b/app/views/events/images-automatic.html @@ -0,0 +1,136 @@ +{% extends 'layout-appointment.html' %} + +{% set imageCount = event.mammogramData.metadata.totalImages %} + +{% set pageHeading = "Take mammogram images" %} + +{% set mammogramSource = event.mammogramData %} +{% set namePrefix = "event[mammogramData]" %} + +{% set showNavigation = true %} +{% set activeWorkflowStep = 'take-images' %} +{% set hideBackLink = true %} + +{# {% set hideBackLink = true %} #} + + +{% set gridColumn = "nhsuk-grid-column-full" %} +{% set formAction = './imaging-answer' %} + +{% set activeTab = 'images' %} + +{% set mammogramImages = getImagesForEvent(eventId, "diagrams", { event: event }) %} + +{# Build ordered image list for streaming simulation - bookmatched arrival order #} +{# CC first: RCC > RMLO > LMLO > LCC (right side then left mirrored) #} +{# MLO first: RMLO > RCC > LCC > LMLO #} +{% if data.settings.mammogramViewOrder == 'mlo-first' %} + {% set streamViewOrder = ['rmlo', 'rcc', 'lcc', 'lmlo'] %} +{% else %} + {% set streamViewOrder = ['rcc', 'rmlo', 'lmlo', 'lcc'] %} +{% endif %} + +{% set streamingImages = [] %} +{% if mammogramImages and mammogramImages.allPaths %} + {% for viewKey in streamViewOrder %} + {% set paths = mammogramImages.allPaths[viewKey] %} + {% if paths %} + {% if paths is string %} + {% set streamingImages = streamingImages | push({ view: viewKey | upper, src: paths }) %} + {% else %} + {% for path in paths %} + {% set streamingImages = streamingImages | push({ view: viewKey | upper, src: path }) %} + {% endfor %} + {% endif %} + {% endif %} + {% endfor %} +{% endif %} + +{% block pageContent %} + +

{{ pageHeading }}

+ + + + {% if data.event.workflowStatus["take-images"] == 'completed' %} + {{ button({ + text: "Next section", + classes: "nhsuk-u-margin-bottom-1" + }) }} + {% endif %} + + {% set insetTextHtml %} + {% if data.settings.screening.imageStreaming.enabled != 'false' and data.event.workflowStatus['take-images'] != 'completed' %} +

Receiving images… + 0 received +

+ {% else %} +

{{ imageCount }} images have been received

+ {% endif %} + {% endset %} + + {{ insetText({ + html: insetTextHtml + }) }} + + {# Convert object to an array of views and get machine room #} + {% set mammogramViews = event.mammogramData.views | getObjectValues %} + {% set machineRoom = event.mammogramData.machineRoom %} + + {# Show notice if any view has multiple images - repeats will be captured on the next page #} + {% set hasMultipleImages = false %} + {% for view in mammogramViews %} + {% if (view.images | length) > 1 %} + {% set hasMultipleImages = true %} + {% endif %} + {% endfor %} + + {# Display images in two breast cards #} + {% set thumbnailSize = "large" %} + {% set hideAdditionalDetails = true %} + {% include "_includes/mammogram-image-cards.njk" %} + +

View imported image metadata

+ +
+ +
+
+ + {% if hasMultipleImages %} + {% set repeatsInsetHtml %} +

Repeat or extra image details captured on the next screen

+ {% endset %} + {{ insetText({ html: repeatsInsetHtml }) }} + {% endif %} + + +

Additional details

+ + {% set namePrefix = "event[mammogramData]" %} + {% set mammogramSource = event.mammogramData %} + {% include "_includes/additional-image-details.njk" %} + + {{ button({ + text: "Confirm all images received" + }) }} + +
+
+ + {% include "_includes/images/image-troubleshooting.njk" %} + +{% endblock %} + +{% block pageScripts %} + + +{% endblock %} diff --git a/app/views/events/images-before-mammography.html b/app/views/events/images-before-mammography.html new file mode 100644 index 00000000..2733d6d8 --- /dev/null +++ b/app/views/events/images-before-mammography.html @@ -0,0 +1,48 @@ + +{% extends 'layout-appointment.html' %} + + +{% set pageHeading = "Take mammogram images" %} +{% set showNavigation = true %} +{% set activeWorkflowStep = 'take-images' %} +{% set hideBackLink = true %} + +{% set formAction = './images-automatic' %} + +{% set activeTab = 'images' %} + +{% block pageContent %} + +

{{ pageHeading }}

+ + {% set insetHtml %} +

+ Mammography images will appear below once they have been received +

+ {% endset %} + + {{ insetText({ + html: insetHtml + }) }} + + + {{ appHiddenInput({ + name: "event[workflowStatus][awaiting-images]", + value: "completed" + }) }} + +

+ + {# + Loading images... + #} +

+ + {% include "_includes/images/image-troubleshooting.njk" %} + + +{% endblock %} + + diff --git a/app/views/events/images-manual.html b/app/views/events/images-manual.html new file mode 100644 index 00000000..2117f4a1 --- /dev/null +++ b/app/views/events/images-manual.html @@ -0,0 +1,178 @@ +{% extends 'layout-appointment.html' %} + +{% set showNavigation = true %} +{% set hideBackLink = true %} +{% set activeWorkflowStep = 'take-images' %} + +{% set pageHeading = "Take mammogram images" %} + +{% set gridColumn = "nhsuk-grid-column-two-thirds" %} + +{% set formAction = './images-manual-answer' %} + +{% set activeTab = 'images' %} + +{% block pageContent %} + +

{{ pageHeading }}

+ + {% set mammogramSource = event.mammogramDataTemp or event.mammogramData %} + + {# Determine current room name #} + {% set currentRoomName = "" %} + {% set isMobileClinic = (clinic.location.type == 'mobile_unit') %} + + {% if isMobileClinic %} + {# For mobile clinics, use the mobile unit name #} + {% set currentRoomName = clinic.location.name %} + {% else %} + {# For hospital clinics, look up the room from screening rooms #} + {% for room in data.screeningRooms %} + {% if room.id == data.currentScreeningRoom %} + {% set currentRoomName = room.displayName %} + {% endif %} + {% endfor %} + {% endif %} + + {% if currentRoomName %} +

+ Mammogram location: {{ currentRoomName }}. + {% if not isMobileClinic %} +
Change room or machine details + {% endif %} +

+ + {{ appHiddenInput({ + name: "event[mammogramDataTemp][machineRoom]", + value: currentRoomName + }) }} + {% else %} +

+ Select a room before continuing +

+ {% endif %} + + {# {{ radios({ + name: "event[mammogramDataTemp][machineRoom]", + value: mammogramSource.machineRoom, + idPrefix: "machineRoom", + fieldset: { + legend: { + text: "Which room is imaging being done in?", + size: "m", + isPageHeading: false + } + }, + items: [ + { + value: "Room A - machine XYZ", + text: "Room A - machine XYZ" + }, + { + value: "Room B - machine ABC", + text: "Room B - machine ABC" + }, + { + value: "Room C - machine DEF", + text: "Room C - machine DEF" + } + ] + }) }} #} + + {# Show unscheduled-appointment setup details whenever the appointment is + being handled in manual image collection mode. The reason-for-switching + input is only shown when the user manually switched mid-appointment via + the troubleshooting link on the automatic images page (failover). #} + {% set isManualFailover = event.mammogramDataTemp.isManualFailover %} + {% set troubleshootingIssue = event.mammogramDataTemp.troubleshootingIssue %} + {% set hasTroubleshootingIssue = troubleshootingIssue in ['worklist-participant', 'wrong-image-count', 'incorrect-image-labels'] %} + {% set showWorklistMatchingContent = troubleshootingIssue == 'worklist-participant' %} + {% set showDefaultManualContent = data.settings.screening.manualImageCollection == 'true' or data.event.isManualImageCollection or isManualFailover %} + + {% if (hasTroubleshootingIssue and showWorklistMatchingContent) or (not hasTroubleshootingIssue and showDefaultManualContent) %} +

Manually add participant details

+

Set up an unscheduled appointment using the following information so mammograms can be assigned correctly:

+ {{ summaryList({ + rows: [ + { + key: { html: "Accession number" }, + value: { html: '' + (event.accessionNumber | formatAccessionNumber) + '' } + }, + { + key: { text: "NHS number" }, + value: { html: '' + (participant.medicalInformation.nhsNumber | formatNhsNumber) + '' } + }, + { + key: { text: "First names" }, + value: { text: participant | getFirstNames } + }, + { + key: { text: "Last name" }, + value: { text: participant.demographicInformation.lastName } + }, + { + key: { text: "Date of birth" }, + value: { text: participant.demographicInformation.dateOfBirth | formatDate } + } + ] + }) }} + + {# {% if isManualFailover %} + {% call details({ + summaryText: "Add reason for switching to manual" + }) %} + {{ textarea({ + label: { + text: "Reason for switching to manual", + classes: "nhsuk-label--s" + }, + id: "manualImageModeReason", + name: "event[mammogramDataTemp][manualImageModeReason]", + rows: 3, + value: mammogramSource.manualImageModeReason + }) }} + {% endcall %} + {% endif %} #} + {% endif %} + + {{ radios({ + idPrefix: "imagingComplete", + name: "event[mammogramDataTemp][isStandardSet]", + fieldset: { + legend: { + text: "Have you taken a standard set of images?", + size: "m", + isPageHeading: false + } + }, + value: mammogramSource.isStandardSet, + items: [ + { + value: "yes", + text: "Yes, 2 CC and 2 MLO" + }, + { + value: "custom", + text: "No, add other information", + hint: { + text: "Such as too few or additional images" + } + }, + { + divider: "or" + }, + { + value: "no", + text: "No images taken", + hint: { + text: "The appointment cannot proceed" + } + } + ] + }) }} + + {{ button({ + text: "Continue" + }) }} + +{% endblock %}