Start work on normal details page (#45)

* Start work on normal details page

* Tweaks to annotation page

Author: edwardhorsford

app/routes/reading.js

@@ -5,6 +5,7 @@ const { getReadingClinics, getReadingProgress, getReadableEvents, getClinicReadi
 const { needsReading } = require('../lib/utils/status')
 const { getFullName } = require('../lib/utils/participants')
 const { snakeCase } = require('../lib/utils/strings')
+const { has } = require('browser-sync')
 
 module.exports = router => {
   // Set nav state
@@ -137,8 +138,8 @@ module.exports = router => {
     if (!event) return res.redirect(`/reading/clinics/${clinicId}`)
 
     // Check if current event has symptoms that need acknowledging
-    // const hasSymptoms = event?.currentSymptoms?.length > 0
-    // const hasRepeatImages = event?.mammogramData?.metadata?.hasRepeat
+    const hasSymptoms = event?.currentSymptoms?.length > 0
+    const hasRepeatImages = event?.mammogramData?.metadata?.hasRepeat
     // const hasAcknowledgedItems = data?.acknowledgeItems?.includes('true')
 
     // if ((hasSymptoms || hasRepeatImages) && !hasAcknowledgedItems) {
@@ -156,7 +157,11 @@ module.exports = router => {
       case 'normal':
         if (data.confirmNormalResults === 'true') {
           return res.redirect(`/reading/clinics/${clinicId}/events/${eventId}/confirm-normal`)
-        } else {
+        }
+        else if (hasSymptoms) {
+          return res.redirect(`/reading/clinics/${clinicId}/events/${eventId}/normal-details`)
+        }
+        else {
           return res.redirect(307, `/reading/clinics/${clinicId}/events/${eventId}/result-normal`)
         }
       case 'technical_recall':

app/views/reading/annotation.html

@@ -2,7 +2,7 @@
 
 {% extends 'layout-reading.html' %}
 
-{% set pageHeading = "Add annotation for " + query.side + " breast" %}
+{% set pageHeading = "Add " + query.side + " breast annotation" %}
 
 {% set gridColumn = "nhsuk-grid-column-two-thirds" %}
 
@@ -24,6 +24,23 @@ <h1 class="nhsuk-heading-l js-image-count">
     {{ pageHeading }}
   </h1>
 
+  {{ input({
+    label: {
+      text: "Where in the breast is this annotation for?",
+      classes: "nhsuk-label--s"
+    },
+    id: "location",
+    name: "location"
+  }) }}
+
+  <div class="nhsuk-form-group nhsuk-u-margin-bottom-0">
+    {{ button({
+      text: "Select location on image",
+      classes: "nhsuk-button--secondary",
+      href: "#"
+    }) }}
+  </div>
+
   {% set checkboxItems = [] %}
 
   {% set abnormalityList = [
@@ -43,12 +60,30 @@ <h1 class="nhsuk-heading-l js-image-count">
     }) %}
   {% endfor %}
 
+  {% set otherTextInputHtml %}
+    {{ input({
+      label: {
+        text: "Provide details"
+      },
+      id: "other text",
+      name: "other text"
+    }) }}
+  {% endset %}
+
+  {% set checkboxItems = checkboxItems | push({
+    value: "other",
+    text: "Other",
+    conditional: {
+      html: otherTextInputHtml
+    }
+  }) %}
+
   {{ checkboxes({
     idPrefix: "example",
     name: "example",
     fieldset: {
       legend: {
-        text: "What have you observed?",
+        text: "What features have you idenitfied?",
         classes: "nhsuk-fieldset__legend--s",
         isPageHeading: true
       }
@@ -60,7 +95,8 @@ <h1 class="nhsuk-heading-l js-image-count">
     id: "select-1",
     name: "select-1",
     label: {
-      text: "Level of concern"
+      text: "What is your level of concern?",
+      classes: "nhsuk-label--s"
     },
     items: [
       {
@@ -92,35 +128,28 @@ <h1 class="nhsuk-heading-l js-image-count">
     ]
   }) }}
 
-  {{ input({
-    label: {
-      text: "Location on " + query.side + " breast"
-    },
-    id: "location",
-    name: "location"
-  }) }}
 
-  <div class="nhsuk-form-group nhsuk-u-margin-bottom-0">
-    {{ button({
-      text: "Mark location on mammogram",
-      classes: "nhsuk-button--secondary",
-      href: "#"
-    }) }}
-  </div>
 
-  {{ input({
+  {{ textarea({
     label: {
-      text: "General comment"
+      text: "Provide additional comments",
+      classes: "nhsuk-label--s"
     },
     id: "comment",
     name: "comment"
   }) }}
 
   <div class="nhsuk-form-group nhsuk-u-margin-top-7">
     {{ button({
-      text: "Add annotation",
+      text: "Save and close",
       href: "./recall-for-assessment-details?annotatedSide" + query.side + "=true"
     }) }}
+
+    {{ button({
+      text: "Save and add another",
+      classes: "nhsuk-button--secondary",
+      href: "#"
+    }) }}
   </div>
 
 {% endblock %}

app/views/reading/assessment.html

@@ -228,7 +228,7 @@ <h2>{{ questionText }}</h2>
           {# Go to page to collect a comment and mark features #}
           {% if not hasSymptoms %}
             <p class="nhsuk-u-margin-bottom-0">
-              <a href="#" class="nhsuk-link--no-visited-state">
+              <a href="./normal-details" class="nhsuk-link--no-visited-state">
                 Normal, but add details
               </a>
             </p>

app/views/reading/list.html

@@ -112,12 +112,12 @@ <h3 class="nhsuk-notification-banner__heading">
                 })}}
               {% endif %}
               {# Only for testing showing where repeats are: #}
-              {# {% if event.mammogramData.metadata.hasRepeat %}
+              {% if event.mammogramData.metadata.hasRepeat %}
                 {{ tag({
                   text: "Has repeat",
                   classes: "nhsuk-tag--yellow"
                 })}}
-              {% endif %} #}
+              {% endif %}
             </td>
             <td>
               {{ event.participant.demographicInformation.dateOfBirth | formatDate }}

app/views/reading/normal-details.html

@@ -0,0 +1,103 @@
+{# /app/views/events/reading/recall-reason.html #}
+
+{% extends 'layout-reading.html' %}
+
+{% set pageHeading = "Confirm your opinion" %}
+
+{% set gridColumn = "nhsuk-grid-column-two-thirds" %}
+
+{% set formAction = './result-normal' %}
+
+{% set hideSecondaryNavigation = true %}
+
+{% set backLink = value %}
+
+{% block pageContent %}
+
+  {{ participant | log("Participant") }}
+  {{ event | log("Event") }}
+
+  <span class="nhsuk-caption-l">
+    {{ participant | getFullName }}
+  </span>
+
+  <h1 class="nhsuk-heading-l js-image-count">
+    {{ pageHeading }}
+  </h1>
+
+  {% set hasSymptoms = event.currentSymptoms | length > 0 %}
+
+  {% if hasSymptoms %}
+
+      <h2>{{ event.currentSymptoms | length }} {{ "symptom" | pluralise(event.currentSymptoms | length )}} reported</h2>
+      {% set symptoms = event.currentSymptoms %}
+      {% include "summary-lists/symptoms.njk" %}
+
+    {{ textarea({
+      name: "symptomsExplanation",
+      id: "symptomsExplanation",
+      label: {
+        text: "Explain why these symptoms do not require further assessment (optional)",
+        classes: "nhsuk-label--s"
+      },
+      _hint: {
+        text: "Any other details that may be relevant"
+      }
+    }) }}
+
+    <h2>Other details</h2>
+
+  {% endif %}
+
+  {% for side in ['right', 'left'] %}
+    {{ input({
+      label: {
+        text: (side + " breast comment (optional)") | sentenceCase,
+        classes: "nhsuk-label--s"
+      },
+      _classes: "nhsuk-u-width-two-thirds",
+      id: "normalDetails-" + side,
+      name: "normalDetails-" + side
+    }) }}
+  {% endfor %}
+
+  {% set radioConditionalHtml %}
+    <p>
+      <a href="./annotation?side={{ params.side }}">Add an annotation</a>
+    </p>
+  {% endset %}
+
+  {{ radios({
+    idPrefix: "markFeatures",
+    name: "markFeatures",
+    fieldset: {
+      legend: {
+        text: "Do you want to mark any features on these images?",
+        classes: "nhsuk-fieldset__legend--s",
+        isPageHeading: false
+      }
+    },
+    items: [
+      {
+        value: "yes",
+        text: "Yes",
+        conditional: {
+          html: radioConditionalHtml
+        }
+      },
+      {
+        value: "no",
+        text: "No"
+      }
+    ]
+  }) }}
+
+
+
+  {{ button({
+    text: "Submit normal and move to next"
+  }) }}
+
+{% endblock %}
+
+