Add bookmarks to return requirements view page (#1187)

https://eaflood.atlassian.net/browse/WATER-4595 > Part of the return requirements set up work When setting up return requirements for a licence, it is possible that you need quite a few! Some licences have more than 10. Because of the amount of information needed in each, once approved, it makes the view return requirements page hard to navigate. To help with this, we're adding bookmarks to the page that will allow users to quickly navigate to each one. The bookmarks will only display when there is more than one. That's it!
DEFRA · Jul 11, 2024 · b02c540 · b02c540
1 parent fc27772
commit b02c540
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/app/presenters/return-requirements/view.presenter.js b/app/presenters/return-requirements/view.presenter.js
@@ -32,7 +32,7 @@ function go (returnVersion) {
     licenceId: licence.id,
     licenceRef: licence.licenceRef,
     notes,
-    pageTitle: `Check the requirements for returns for ${licence.$licenceHolder()}`,
+    pageTitle: `Requirements for returns for ${licence.$licenceHolder()}`,
     reason: returnRequirementReasons[reason] || '',
     requirements: _requirements(returnRequirements),
     startDate: formatLongDate(startDate),

diff --git a/app/views/return-requirements/view.njk b/app/views/return-requirements/view.njk
@@ -87,6 +87,19 @@
 {% if requirements.length > 0 %}
     <div class="govuk-!-margin-bottom-9">
       <h2 class="govuk-heading-l govuk-!-margin-bottom-4">Requirements for returns</h2>
+
+      {# Bookmarks - only displays when there us more than 1 return requirement #}
+      {% if requirements.length > 1 %}
+        <div class="govuk-body govuk-!-margin-bottom-6">
+          <ul>
+            {% for requirement in requirements %}
+              {% set requirementIndex = loop.index0 %}
+              <li><a href="#requirement-{{ requirementIndex }}">Return reference {{ requirement.returnReference }}</a></li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
+
       {% for requirement in requirements %}
         {# Generate the points cell #}
         {# When a requirement has more than 5 points it is displayed as a GOVUK Details component which displays the count #}
@@ -116,6 +129,9 @@
               card: {
                 title: {
                   html: "<p> Return reference " + requirement.returnReference + "</p>" + requirement.title
+                },
+                attributes: {
+                  id: 'requirement-' + rowIndex
                 }
               },
               attributes: {

diff --git a/test/presenters/return-requirements/view.presenter.test.js b/test/presenters/return-requirements/view.presenter.test.js
@@ -30,7 +30,7 @@ describe('Return Requirements - View presenter', () => {
         licenceId: '761bc44f-80d5-49ae-ab46-0a90495417b5',
         licenceRef: '01/123',
         notes: 'A special note',
-        pageTitle: 'Check the requirements for returns for Mr Ingles',
+        pageTitle: 'Requirements for returns for Mr Ingles',
         reason: 'New licence',
         requirements: [
           {
@@ -107,7 +107,7 @@ describe('Return Requirements - View presenter', () => {
       it("returns the title incorporating the licence holder's name", () => {
         const result = ViewPresenter.go(returnVersion)
 
-        expect(result.pageTitle).to.equal('Check the requirements for returns for Mr Ingles')
+        expect(result.pageTitle).to.equal('Requirements for returns for Mr Ingles')
       })
     })
 

diff --git a/test/services/return-requirements/view.service.test.js b/test/services/return-requirements/view.service.test.js
@@ -39,7 +39,7 @@ describe('Return Requirements - View service', () => {
         licenceId: '761bc44f-80d5-49ae-ab46-0a90495417b5',
         licenceRef: '01/123',
         notes: null,
-        pageTitle: 'Check the requirements for returns for Mr Ingles',
+        pageTitle: 'Requirements for returns for Mr Ingles',
         reason: 'New licence',
         requirements: [
           {