Skip to content

Add breast features review later button and prompt page #358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rivalee wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add breast features review later button and prompt page #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bf94015
Add breast features review later button and prompt page
rivalee Jul 7, 2026
331b856
Small fix
rivalee Jul 7, 2026
00f21ea
Content tweaks
rivalee Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 145 additions & 40 deletions app/assets/javascript/expandable-sections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,79 @@
// app/assets/javascript/expandable-sections.js

const BREAST_FEATURES_SECTION_ID = 'breast-features'
const CONFIRM_AFTER_IMAGING_STATUS = 'Review after imaging'
const LEGACY_CONFIRM_AFTER_IMAGING_STATUS = 'Confirm after imaging'

// Handle expandable sections with completion tracking
document.addEventListener('DOMContentLoaded', function () {
// console.log('Expandable sections script loaded') // Debug log
const sections = document.querySelectorAll('.js-expandable-section')
const completedSections = new Set()
const reviewAfterImagingField = document.querySelector(
'input[name="event[workflowStatus][review-breast-features-after-imaging]"]'
)

function getReviewAfterImagingWorkflowStatus() {
if (!reviewAfterImagingField) {
return ''
}

return reviewAfterImagingField.value || ''
}

function setReviewAfterImagingFlag(statusValue) {
if (!reviewAfterImagingField) {
return
}

reviewAfterImagingField.value = statusValue || ''
}

function completeSectionAndContinue(section, index, options = {}) {
const forcedStatus = options.forcedStatus

// Mark current section as completed
completedSections.add(index)

// Determine current status and set new status
const currentStatus = getCurrentSectionStatus(section)
let newStatus

if (forcedStatus) {
newStatus = forcedStatus
} else if (
currentStatus === CONFIRM_AFTER_IMAGING_STATUS ||
currentStatus === LEGACY_CONFIRM_AFTER_IMAGING_STATUS
) {
newStatus = CONFIRM_AFTER_IMAGING_STATUS
} else if (currentStatus === 'Incomplete') {
newStatus = 'Complete'
} else if (currentStatus === 'To review') {
newStatus = 'Reviewed'
} else if (currentStatus === 'Reviewed') {
newStatus = 'Reviewed' // Keep as reviewed
} else {
newStatus = 'Complete' // Default fallback
}

// Update the status for this section
updateSectionStatus(section, newStatus)

// Save status to sessionStorage
const sectionId = section.getAttribute('id')
if (sectionId && window.saveSectionStatus) {
window.saveSectionStatus(sectionId, newStatus)
}

// Close current section
section.removeAttribute('open')

// Find and open the next incomplete section after this one
openNextIncompleteSection(index, sections, completedSections)

// Update progress counter
updateProgress(sections, completedSections)
}

sections.forEach(function (section, index) {
const content = section.querySelector('.nhsuk-details__text')
Expand All @@ -16,7 +85,27 @@ document.addEventListener('DOMContentLoaded', function () {

// Create button container
const buttonContainer = document.createElement('div')
buttonContainer.className = 'nhsuk-form-group'
buttonContainer.className = 'nhsuk-form-group nhsuk-button-group'

const sectionId = section.getAttribute('id')
const isBreastFeaturesSection = sectionId === BREAST_FEATURES_SECTION_ID

if (isBreastFeaturesSection) {
const reviewAfterImagingWorkflowStatus =
getReviewAfterImagingWorkflowStatus()

if (reviewAfterImagingWorkflowStatus === 'yes') {
updateSectionStatus(section, CONFIRM_AFTER_IMAGING_STATUS)
if (window.saveSectionStatus) {
window.saveSectionStatus(sectionId, CONFIRM_AFTER_IMAGING_STATUS)
}
} else if (reviewAfterImagingWorkflowStatus === 'answered') {
updateSectionStatus(section, 'Reviewed')
if (window.saveSectionStatus) {
window.saveSectionStatus(sectionId, 'Reviewed')
}
}
}

// Create button
const button = document.createElement('button')
Expand All @@ -30,49 +119,38 @@ document.addEventListener('DOMContentLoaded', function () {

buttonContainer.appendChild(button)

if (isBreastFeaturesSection) {
const reviewAfterImagingButton = document.createElement('button')
reviewAfterImagingButton.className =
'nhsuk-button nhsuk-button--secondary nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-3'
reviewAfterImagingButton.type = 'button'
reviewAfterImagingButton.textContent = 'Review after imaging'

buttonContainer.appendChild(reviewAfterImagingButton)

reviewAfterImagingButton.addEventListener('click', function () {
setReviewAfterImagingFlag('yes')
completeSectionAndContinue(section, index, {
forcedStatus: CONFIRM_AFTER_IMAGING_STATUS
})
updateButtonText(section, button)
})
}

// Append HR first, then button container
content.appendChild(hr)
content.appendChild(buttonContainer)

// Add click handler
button.addEventListener('click', function () {
// Mark current section as completed
completedSections.add(index)

// Determine current status and set new status
const currentStatus = getCurrentSectionStatus(section)
let newStatus

if (currentStatus === 'Incomplete') {
newStatus = 'Complete'
} else if (currentStatus === 'To review') {
newStatus = 'Reviewed'
} else if (currentStatus === 'Reviewed') {
newStatus = 'Reviewed' // Keep as reviewed
} else {
newStatus = 'Complete' // Default fallback
if (isBreastFeaturesSection) {
setReviewAfterImagingFlag('')
}

// Update the status for this section
updateSectionStatus(section, newStatus)

// Save status to sessionStorage
const sectionId = section.getAttribute('id')
if (sectionId && window.saveSectionStatus) {
window.saveSectionStatus(sectionId, newStatus)
}
completeSectionAndContinue(section, index)

// Update button text based on new status
updateButtonText(section, button)

// Close current section
section.removeAttribute('open')

// Find and open the next incomplete section after this one
openNextIncompleteSection(index, sections, completedSections)

// Update progress counter
updateProgress(sections, completedSections)
})
}
})
Expand All @@ -88,14 +166,35 @@ document.addEventListener('DOMContentLoaded', function () {
button.addEventListener('click', function (event) {
// Mark all sections as completed
sections.forEach(function (section, index) {
const sectionId = section.getAttribute('id')
const isBreastFeaturesSection =
sectionId === BREAST_FEATURES_SECTION_ID

// Add to completed set
completedSections.add(index)

// Determine current status and set new status
const currentStatus = getCurrentSectionStatus(section)
let newStatus

if (currentStatus === 'Incomplete') {
const reviewAfterImagingWorkflowStatus =
getReviewAfterImagingWorkflowStatus()

if (
isBreastFeaturesSection &&
reviewAfterImagingWorkflowStatus === 'yes'
) {
newStatus = CONFIRM_AFTER_IMAGING_STATUS
} else if (
isBreastFeaturesSection &&
reviewAfterImagingWorkflowStatus === 'answered'
) {
newStatus = 'Reviewed'
} else if (
currentStatus === CONFIRM_AFTER_IMAGING_STATUS ||
currentStatus === LEGACY_CONFIRM_AFTER_IMAGING_STATUS
) {
newStatus = CONFIRM_AFTER_IMAGING_STATUS
} else if (currentStatus === 'Incomplete') {
newStatus = 'Complete'
} else if (currentStatus === 'To review') {
newStatus = 'Reviewed'
Expand All @@ -109,7 +208,6 @@ document.addEventListener('DOMContentLoaded', function () {
updateSectionStatus(section, newStatus)

// Save status to sessionStorage
const sectionId = section.getAttribute('id')
if (sectionId && window.saveSectionStatus) {
window.saveSectionStatus(sectionId, newStatus)
}
Expand Down Expand Up @@ -353,7 +451,12 @@ function updateSectionStatus(section, statusText) {

if (statusElement) {
// console.log('Found status element:', statusElement)
statusElement.textContent = statusText
const normalisedStatusText =
statusText === LEGACY_CONFIRM_AFTER_IMAGING_STATUS
? CONFIRM_AFTER_IMAGING_STATUS
: statusText

statusElement.textContent = normalisedStatusText

// Update the tag colour class based on status
// Reset all status classes first
Expand All @@ -363,11 +466,13 @@ function updateSectionStatus(section, statusText) {
'nhsuk-tag--yellow'
)

if (statusText === 'Complete' || statusText === 'Reviewed') {
if (normalisedStatusText === 'Complete' || normalisedStatusText === 'Reviewed') {
statusElement.classList.add('nhsuk-tag--green')
} else if (normalisedStatusText === CONFIRM_AFTER_IMAGING_STATUS) {
statusElement.classList.add('nhsuk-tag--green')
} else if (statusText === 'Incomplete') {
} else if (normalisedStatusText === 'Incomplete') {
statusElement.classList.add('nhsuk-tag--blue')
} else if (statusText === 'To review') {
} else if (normalisedStatusText === 'To review') {
statusElement.classList.add('nhsuk-tag--yellow')
}

Expand Down
17 changes: 13 additions & 4 deletions app/assets/javascript/expanded-state-tracker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
const STORAGE_KEY_PREFIX = 'expanded-sections-'
const PENDING_EXPAND_KEY_PREFIX = 'pending-expand-'
const STATUS_KEY_PREFIX = 'section-statuses-'
const CONFIRM_AFTER_IMAGING_STATUS = 'Review after imaging'
const LEGACY_CONFIRM_AFTER_IMAGING_STATUS = 'Confirm after imaging'

function getStorageKey() {
return STORAGE_KEY_PREFIX + window.location.pathname
Expand Down Expand Up @@ -131,7 +133,12 @@
}

if (statusElement) {
statusElement.textContent = statusText
const normalisedStatusText =
statusText === LEGACY_CONFIRM_AFTER_IMAGING_STATUS
? CONFIRM_AFTER_IMAGING_STATUS
: statusText

statusElement.textContent = normalisedStatusText

// Update the tag colour class based on status
statusElement.classList.remove(
Expand All @@ -140,11 +147,13 @@
'nhsuk-tag--yellow'
)

if (statusText === 'Complete' || statusText === 'Reviewed') {
if (normalisedStatusText === 'Complete' || normalisedStatusText === 'Reviewed') {
statusElement.classList.add('nhsuk-tag--green')
} else if (normalisedStatusText === CONFIRM_AFTER_IMAGING_STATUS) {
statusElement.classList.add('nhsuk-tag--green')
} else if (statusText === 'Incomplete') {
} else if (normalisedStatusText === 'Incomplete') {
statusElement.classList.add('nhsuk-tag--blue')
} else if (statusText === 'To review') {
} else if (normalisedStatusText === 'To review') {
statusElement.classList.add('nhsuk-tag--yellow')
}
}
Expand Down
8 changes: 7 additions & 1 deletion app/lib/utils/status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,8 @@ const getStatusTagColour = (status) => {
'incomplete': 'blue',
'complete': 'green',
'to_review': 'blue',
'review_after_imaging': 'green',
'confirm_after_imaging': 'green',
'reviewed': 'green',

// Image reading
Expand Down Expand Up @@ -327,7 +329,11 @@ const getStatusText = (status) => {
prior_requested: 'Requested',
prior_received: 'Received',
prior_not_available: 'Not available',
prior_not_needed: 'Not needed'
prior_not_needed: 'Not needed',

// Task list statuses
review_after_imaging: 'Review after imaging',
confirm_after_imaging: 'Review after imaging'

// "technical-recall": 'Technical recall',
// "recall-for-assesment": 'Recall for assessment',
Expand Down
Loading