Merge pull request #1037 from ministryofjustice/CAS-270-fe-users-can-…

…filter-referrals-by-name-as-well-as-crn-part-2 Add SearchByCrnOrNameForm and SearchByCrnOrNameResult component
ministryofjustice · Aug 12, 2024 · 05a030f · 05a030f
2 parents 3721b16 + ce47c16
commit 05a030f
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 95 deletions.
diff --git a/server/views/components/search-by-crn-or-name-form/macro.njk b/server/views/components/search-by-crn-or-name-form/macro.njk
@@ -0,0 +1,38 @@
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+
+{# params - Type of Object - Description #}
+{# uiStatus - String - Specific status the record would be in #}
+{# type - String - Either "bookings" or "referrals" #}
+{# basePath - String - URL used to define where form should be submitted to and the link the "Clear" should take the user too  #}
+{# crnOrName - String - Either a CRN or Name which the user would like to search for#}
+
+
+{% macro searchByCrnOrNameForm(params) %}
+    {% set searchLabel = 'Search ' + params.uiStatus + ' ' +  params.type + ' by CRN (case reference number)' %}
+
+    <form action="{{ params.basePath }}" method="get">
+
+        {{ govukInput(
+            {
+                label: {
+                classes: 'govuk-label--m',
+                text: searchLabel
+            },
+                hint: {
+                text: 'For example, XD7364CD'
+            },
+                name: 'crn',
+                id: 'crn',
+                value: params.crnOrName
+            }
+        ) }}
+
+        <div class="govuk-button-group">
+            {{ govukButton({ text: "Search", attributes: { id: 'search-button' }, preventDoubleClick: true}) }}
+
+            <a class="govuk-link" href="{{ params.basePath }}">Clear</a>
+        </div>
+    </form>
+{% endmacro %}
diff --git a/server/views/components/search-by-crn-or-name-results/macro.njk b/server/views/components/search-by-crn-or-name-results/macro.njk
@@ -0,0 +1,37 @@
+{%- from "moj/components/pagination/macro.njk" import mojPagination -%}
+
+
+{# params - Type of Object - Description #}
+{# errors - Object - Errors object from the view, soon to be removed #}
+{# resultsHtml - String - HTML string containing the pagination and results. Currently parent view is responsible for this. We will look to moving that logic into this component #}
+{# crnOrName - String - Either a CRN or Name which the user would like to search for #}
+{# uiStatus - String - Specific status the record would be in #}
+{# type - String - Either "bookings" or "referrals".  #}
+
+
+{% macro searchByCrnOrNameResults(params) %}
+    {% if params.errors.crn %}
+        <h2>You have not entered any search terms</h2>
+
+        <p>Enter a CRN. This can be found in nDelius.</p>
+
+    {% elif (params.resultsHtml| trim |length > 0) or (not params.crnOrName) %}
+        {{ params.resultsHtml | safe | trim | indent(8)}}
+
+    {% else %}
+        <h2>There are no results for ‘{{ params.crnOrName }}’ in {{ params.uiStatus }} {{ params.type }}.</h2>
+
+        <p>Check the other lists.</p>
+
+        {% if params.type === 'bookings' %}
+            {% set type_name = 'booking' %}
+        {% elif params.type ==='referrals' %}
+            {% set type_name = 'referral' %}
+        {% endif %}
+
+        <p>
+            If the {{ type_name }} is missing from every list, <a href="mailto:{{ PhaseBannerUtils.supportEmail }}">contact
+            support</a> for help.
+        </p>
+    {% endif %}
+{% endmacro %}
diff --git a/server/views/temporary-accommodation/assessments/index.njk b/server/views/temporary-accommodation/assessments/index.njk
@@ -1,6 +1,7 @@
 {% from "govuk/components/table/macro.njk" import govukTable %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
+{% from "../../components/search-by-crn-or-name-form/macro.njk" import searchByCrnOrNameForm%}
+{% from "../../components/search-by-crn-or-name-results/macro.njk" import searchByCrnOrNameResults%}
 {% from "moj/components/sub-navigation/macro.njk" import mojSubNavigation %}
 {%- from "moj/components/pagination/macro.njk" import mojPagination -%}
 {% from "../../partials/breadCrumb.njk" import breadCrumb %}
@@ -11,6 +12,24 @@
 {% set pageTitle = title + " - " + applicationName %}
 {% set mainClasses = "app-container govuk-body" %}
 
+{# TODO Move this HTML to the searchByCrnOrNameResult once HTML can be standardised between referrals and bookings #}
+{% set resultsHtml %}
+    {% if (not context.errors.prn) and ((tableRows|length > 0) or (not crn)) %}
+        <div class="govuk-!-margin-bottom-4">
+            {{ mojPagination(pagination) }}
+        </div>
+
+        {{ govukTable({
+            firstCellIsHeader: true,
+            head: tableHeaders,
+            rows: tableRows
+        }) }}
+
+        {{ mojPagination(pagination) | replace('Pagination navigation', 'Pagination navigation after results') }}
+    {% endif %}
+{% endset %}
+
+
 {% block beforeContent %}
     {{ breadCrumb('Referrals', []) }}
 {% endblock %}
@@ -44,58 +63,22 @@
     {% endblock %}
 
     <div class="govuk-template govuk-!-padding-8 govuk-!-padding-bottom-static-3 govuk-!-margin-bottom-8">
-        <form action="{{ basePath }}" method="get">
-
-            {{ govukInput(
-                {
-                    label: {
-                    classes: 'govuk-label--m',
-                    text: 'Search ' + uiStatus + ' referrals by CRN (case reference number)'
-                },
-                    hint: {
-                    text: 'For example, XD7364CD'
-                },
-                    name: 'crn',
-                    id: 'crn',
-                    value: crn
-                }
-            ) }}
-
-            <div class="govuk-button-group">
-                {{ govukButton({ text: "Search", attributes: { id: 'search-button' }, preventDoubleClick: true}) }}
-
-                <a class="govuk-link" href="{{ basePath }}">Clear</a>
-            </div>
-        </form>
+        {{ searchByCrnOrNameForm({
+            type: 'referrals',
+            basePath: basePath, 
+            uiStatus: uiStatus, 
+            crnOrName: crn
+        })}}
     </div>
 
-    {% if context.errors.crn %}
-        <h2>You have not entered any search terms</h2>
-
-        <p>Enter a CRN. This can be found in nDelius.</p>
-
-        {% elif (tableRows|length > 0) or (not crn) %}
-
-        <div class="govuk-!-margin-bottom-4">
-            {{ mojPagination(pagination) }}
-        </div>
-
-        {{ govukTable({
-            firstCellIsHeader: true,
-            head: tableHeaders,
-            rows: tableRows
-        }) }}
-
-        {{ mojPagination(pagination) | replace('Pagination navigation', 'Pagination navigation after results') }}
-
-    {% else %}
-        <h2>There are no results for ‘{{ crn }}’ in {{ uiStatus }} referrals.</h2>
-
-        <p>Check the other lists.</p>
-
-        <p>If the referral is missing from every list, <a href="mailto:{{ PhaseBannerUtils.supportEmail }}">contact
-                support</a> for help.</p>
-    {% endif %}
+    {{ searchByCrnOrNameResults({
+        type: 'referrals',
+        errors: context.errors,
+        uiStatus: uiStatus,
+        tableRows: tableRows,
+        resultsHtml: resultsHtml,
+        crnOrName: crn
+    })}}
 
     {% block archivedLink %}
         <div class="govuk-!-margin-top-9">

diff --git a/server/views/temporary-accommodation/booking-search/results.njk b/server/views/temporary-accommodation/booking-search/results.njk
@@ -1,6 +1,6 @@
 {% from "govuk/components/table/macro.njk" import govukTable %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
+{% from "../../components/search-by-crn-or-name-form/macro.njk" import searchByCrnOrNameForm%}
+{% from "../../components/search-by-crn-or-name-results/macro.njk" import searchByCrnOrNameResults%}
 {%- from "moj/components/sub-navigation/macro.njk" import mojSubNavigation -%}
 {%- from "moj/components/pagination/macro.njk" import mojPagination -%}
 
@@ -9,6 +9,19 @@
 {% set pageTitle = "View bookings - " + applicationName %}
 {% set mainClasses = "app-container govuk-body" %}
 
+{# TODO Move this HTML to the searchByCrnOrNameResult once HTML can be standardised between referrals and bookings #}
+{% set resultsHtml %}
+    {% if (not context.errors.prn) and ((response.data|length > 0) or (not crn)) %}
+        {{ govukTable({
+            captionClasses: "govuk-table__caption--m",
+            head: tableHeadings,
+            rows: response.data
+        }) }}
+
+        {{ mojPagination(pagination) }}
+    {% endif %}
+{% endset %}
+
 {% block beforeContent %}
     {{ breadCrumb('View bookings', []) }}
 {% endblock %}
@@ -24,49 +37,20 @@
     }) }}
 
     <div class="govuk-template govuk-!-padding-8 govuk-!-padding-bottom-static-3 govuk-!-margin-bottom-8">
-        <form action="{{ paths.bookings.search[uiStatus].index() }}" method="get">
-
-            {{ govukInput(
-                {
-                    label: {
-                    classes: 'govuk-label--m',
-                    text: 'Search ' + uiStatus + ' bookings by CRN (case reference number)'
-                },
-                    hint: {
-                    text: 'For example, XD7364CD'
-                },
-                    name: 'crn',
-                    id: 'crn',
-                    value: crn
-                }
-            ) }}
-
-            <div class="govuk-button-group">
-                {{ govukButton({ text: "Search", attributes: { id: 'search-button' }, preventDoubleClick: true}) }}
-
-                <a class="govuk-link" href="{{ paths.bookings.search[uiStatus].index() }}">Clear</a>
-            </div>
-        </form>
+        {{ searchByCrnOrNameForm({ 
+            type: 'bookings',
+            basePath: paths.bookings.search[uiStatus].index(), 
+            uiStatus: uiStatus, 
+            crnOrName: crn
+        })}}
     </div>
 
-    {% if context.errors.crn %}
-        <h2>You have not entered any search terms</h2>
+    {{ searchByCrnOrNameResults({
+        type: 'bookings',
+        errors: context.errors,
+        resultsHtml: resultsHtml,
+        uiStatus: uiStatus,
+        crnOrName: crn
+    })}}
 
-        <p>Enter a CRN. This can be found in nDelius.</p>
-        {% elif (response.data|length > 0) or (not crn) %}
-        {{ govukTable({
-            captionClasses: "govuk-table__caption--m",
-            head: tableHeadings,
-            rows: response.data
-        }) }}
-
-        {{ mojPagination(pagination) }}
-    {% else %}
-        <h2>There are no results for ‘{{ crn }}’ in {{ uiStatus }} bookings.</h2>
-
-        <p>Check the other lists.</p>
-
-        <p>If the booking is missing from every list, <a href="mailto:{{ PhaseBannerUtils.supportEmail }}">contact
-                support</a> for help.</p>
-    {% endif %}
 {% endblock %}