Persist section status during appointment (#169)

* Persist section status during appointment

* Update button text once sections are reviewed

Author: edwardhorsford

app/assets/javascript/expandable-sections.js

@@ -22,10 +22,12 @@ document.addEventListener('DOMContentLoaded', function () {
       const button = document.createElement('button')
       button.className =
         'nhsuk-button nhsuk-button--secondary nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-3 js-save-and-next'
-      button.textContent = 'Mark as reviewed'
       button.type = 'button'
       button.setAttribute('data-section-index', index)
 
+      // Set initial button text based on current status
+      updateButtonText(section, button)
+
       buttonContainer.appendChild(button)
 
       // Append HR first, then button container
@@ -54,6 +56,15 @@ document.addEventListener('DOMContentLoaded', function () {
         // 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)
+        }
+
+        // Update button text based on new status
+        updateButtonText(section, button)
+
         // Close current section
         section.removeAttribute('open')
 
@@ -68,6 +79,51 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Initialize progress
   updateProgress(sections, completedSections)
+
+  // Handle "Complete all and continue" button
+  const completeAllButtons = document.querySelectorAll(
+    '.js-complete-all-sections'
+  )
+  completeAllButtons.forEach(function (button) {
+    button.addEventListener('click', function (event) {
+      // Mark all sections as completed
+      sections.forEach(function (section, index) {
+        // Add to completed set
+        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
+        }
+
+        // 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 the section
+        section.removeAttribute('open')
+      })
+
+      // Update progress counter
+      updateProgress(sections, completedSections)
+
+      console.log('All sections marked as complete')
+    })
+  })
 })
 
 // Function to get current section status
@@ -134,6 +190,17 @@ function getCurrentSectionStatus(section) {
   return statusElement ? statusElement.textContent.trim() : 'Incomplete'
 }
 
+// Function to update button text based on section status
+function updateButtonText(section, button) {
+  const currentStatus = getCurrentSectionStatus(section)
+
+  if (currentStatus === 'Reviewed' || currentStatus === 'Complete') {
+    button.textContent = 'Next section'
+  } else {
+    button.textContent = 'Mark as reviewed'
+  }
+}
+
 // Function to find and open the next incomplete section after the current one
 function openNextIncompleteSection(currentIndex, sections, completedSections) {
   // First, search from the section after the current one to the end
@@ -288,7 +355,7 @@ function updateSectionStatus(section, statusText) {
     console.log('Found status element:', statusElement)
     statusElement.textContent = statusText
 
-    // Update the tag color class based on status
+    // Update the tag colour class based on status
     // Reset all status classes first
     statusElement.classList.remove(
       'nhsuk-tag--blue',
@@ -333,3 +400,14 @@ function updateProgress(sections, completedSections) {
     `Progress: ${completed}/${totalSections} completed, ${inProgress} in progress`
   )
 }
+
+// Expose function globally for use by expanded-state-tracker
+window.updateSectionButtonText = function (sectionId) {
+  const section = document.getElementById(sectionId)
+  if (section) {
+    const button = section.querySelector('.js-save-and-next')
+    if (button) {
+      updateButtonText(section, button)
+    }
+  }
+}

app/assets/javascript/expanded-state-tracker.js

@@ -2,12 +2,14 @@
 
 // Generic expanded state tracker
 // Tracks open/closed state of elements with .js-track-expanded class
+// Also tracks section statuses for elements with .js-expandable-section class
 
 ;(function () {
   'use strict'
 
   const STORAGE_KEY_PREFIX = 'expanded-sections-'
   const PENDING_EXPAND_KEY_PREFIX = 'pending-expand-'
+  const STATUS_KEY_PREFIX = 'section-statuses-'
 
   function getStorageKey() {
     return STORAGE_KEY_PREFIX + window.location.pathname
@@ -17,6 +19,10 @@
     return PENDING_EXPAND_KEY_PREFIX + window.location.pathname
   }
 
+  function getStatusStorageKey() {
+    return STATUS_KEY_PREFIX + window.location.pathname
+  }
+
   function saveExpandedState() {
     const trackableElements = document.querySelectorAll('.js-track-expanded')
     const expandedSections = []
@@ -30,6 +36,120 @@
     sessionStorage.setItem(getStorageKey(), JSON.stringify(expandedSections))
   }
 
+  function saveStatusState(sectionId, statusText) {
+    const storedStatuses = sessionStorage.getItem(getStatusStorageKey())
+    let statuses = {}
+
+    if (storedStatuses) {
+      try {
+        statuses = JSON.parse(storedStatuses)
+      } catch (e) {
+        console.warn('Failed to parse stored statuses:', e)
+      }
+    }
+
+    statuses[sectionId] = statusText
+    sessionStorage.setItem(getStatusStorageKey(), JSON.stringify(statuses))
+  }
+
+  function restoreStatusState() {
+    const storedStatuses = sessionStorage.getItem(getStatusStorageKey())
+    if (storedStatuses) {
+      try {
+        const statuses = JSON.parse(storedStatuses)
+        Object.keys(statuses).forEach((sectionId) => {
+          const section = document.getElementById(sectionId)
+          if (section && section.classList.contains('js-expandable-section')) {
+            const statusText = statuses[sectionId]
+            updateSectionStatusDisplay(section, statusText)
+          }
+        })
+      } catch (e) {
+        console.warn('Failed to restore status state:', e)
+      }
+    }
+  }
+
+  function updateSectionStatusDisplay(section, statusText) {
+    const sectionId = section.getAttribute('id')
+    let statusElement = null
+
+    // Use the same strategies to find the status element
+    const parent = section.parentElement
+    if (parent) {
+      statusElement = parent.querySelector('.app-details__status .nhsuk-tag')
+    }
+
+    if (!statusElement && sectionId) {
+      statusElement =
+        document.querySelector(`[data-section="${sectionId}"] .nhsuk-tag`) ||
+        document.querySelector(`#${sectionId}-status .nhsuk-tag`)
+    }
+
+    if (!statusElement) {
+      let currentElement = section.previousElementSibling
+      while (currentElement && !statusElement) {
+        statusElement = currentElement.querySelector(
+          '.app-details__status .nhsuk-tag'
+        )
+
+        if (!statusElement) {
+          currentElement = currentElement.previousElementSibling
+        }
+      }
+    }
+
+    if (!statusElement) {
+      let currentElement = section.nextElementSibling
+      while (currentElement && !statusElement) {
+        statusElement = currentElement.querySelector(
+          '.app-details__status .nhsuk-tag'
+        )
+
+        if (!statusElement) {
+          currentElement = currentElement.nextElementSibling
+        }
+      }
+    }
+
+    if (!statusElement) {
+      const container =
+        section.closest('.nhsuk-grid-column-two-thirds') ||
+        section.closest('.nhsuk-grid-row') ||
+        document.body
+
+      const allStatusElements = container.querySelectorAll(
+        '.app-details__status .nhsuk-tag'
+      )
+
+      const allSections = container.querySelectorAll('.js-expandable-section')
+      const sectionIndex = Array.from(allSections).indexOf(section)
+
+      if (allStatusElements[sectionIndex]) {
+        statusElement = allStatusElements[sectionIndex]
+      }
+    }
+
+    if (statusElement) {
+      statusElement.textContent = statusText
+
+      // Update the tag colour class based on status
+      statusElement.classList.remove(
+        'nhsuk-tag--blue',
+        'nhsuk-tag--green',
+        'nhsuk-tag--yellow'
+      )
+
+      if (statusText === 'Complete' || statusText === 'Reviewed') {
+        statusElement.classList.add('nhsuk-tag--green')
+      } else if (statusText === 'Incomplete') {
+        statusElement.classList.add('nhsuk-tag--blue')
+      } else if (statusText === 'To review') {
+        statusElement.classList.add('nhsuk-tag--yellow')
+      }
+    }
+  }
+
   function restoreExpandedState() {
     const storedState = sessionStorage.getItem(getStorageKey())
     if (storedState) {
@@ -63,6 +183,9 @@
         console.warn('Failed to restore pending expand state:', e)
       }
     }
+
+    // Restore section statuses
+    restoreStatusState()
   }
 
   function clearExpandedStateIfNeeded() {
@@ -78,7 +201,8 @@
     Object.keys(sessionStorage).forEach((key) => {
       if (
         key.startsWith(STORAGE_KEY_PREFIX) ||
-        key.startsWith(PENDING_EXPAND_KEY_PREFIX)
+        key.startsWith(PENDING_EXPAND_KEY_PREFIX) ||
+        key.startsWith(STATUS_KEY_PREFIX)
       ) {
         sessionStorage.removeItem(key)
       }
@@ -129,6 +253,7 @@
     setupEventListeners()
   })
 
-  // Expose clear function globally for clear data link
+  // Expose functions globally
   window.clearAllExpandedStates = clearAllExpandedStates
+  window.saveSectionStatus = saveStatusState
 })()

app/views/events/record-medical-information.html

@@ -35,7 +35,7 @@
     <div class="nhsuk-grid-column-two-thirds">
       {{ button({
         text: "Complete all and continue" if data.event.workflowStatus['record-medical-information'] != 'completed' else "Next section",
-        classes: "nhsuk-u-margin-bottom-0 nhsuk-button"
+        classes: "nhsuk-u-margin-bottom-0 nhsuk-button js-complete-all-sections"
       }) }}
 
     </div>
@@ -47,7 +47,8 @@
 
   <div class="nhsuk-form-group">
     {{ button({
-      text: "Complete all and continue"
+      text: "Complete all and continue",
+      classes: "js-complete-all-sections"
     }) }}
 
     {% include "screening-cannot-proceed-link.njk" %}