477381 search design (#354)

* Removed past validation on microchip + neutering * Patch bump * Intial * Dog-only search * Removed debug * Version bump * Fixed test --------- Co-authored-by: work <[email protected]>
DEFRA · Nov 21, 2024 · efa22c5 · efa22c5
1 parent 4c72728
commit efa22c5
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 59 deletions.
diff --git a/app/views/cdo/search/basic.njk b/app/views/cdo/search/basic.njk
@@ -27,13 +27,13 @@
         <legend class="govuk-fieldset__legend govuk-visually-hidden">Dog records - Search</legend>
           {{ govukInput(model.searchTerms) }}
 
-          {{ govukRadios(model.searchType) }}
-
           {% if model.searchTerms.value %}
           {{ govukCheckboxes(model.fuzzy) }}
           {% endif %}
       </fieldset>
 
+      <input type="hidden" name="searchType" id="searchType" value="dog" />
+
       {{ govukButton({
         text: "Search",
         value: "primary"

diff --git a/app/views/cdo/search/dog-results.njk b/app/views/cdo/search/dog-results.njk
@@ -1,59 +1,64 @@
 {% from "components/statusTag/macro.njk" import statusTag %}
 
     <div class="govuk-summary-card">
-      <div class="govuk-summary-card__title-wrapper govuk-!-padding-top-2 govuk-!-padding-bottom-1">
-        <h2 class="govuk-summary-card__title defra-summary-header">
+      <div class="govuk-summary-card__title-wrapper govuk-!-padding-top-1 govuk-!-padding-bottom-1">
+        <h2 class="govuk-summary-card__title">
             <a class="govuk-link govuk-link--no-visited-state" href="/cdo/view/dog-details/{{ result.dogIndex }}{{ model.srcHashParam }}">
                     {{ result.dogIndex }}
             </a>
         </h2>
-        <ul class="govuk-summary-card__actions govuk-!-font-weight-regular">
-            <li class="govuk-summary-card__action">
-              {{ statusTag(result.dogStatus, result.dogSubStatus, 'govuk-!-font-size-16') }}
-            </li>
-        </ul>
       </div>
-      <div class="govuk-summary-card__content govuk-!-padding-top-1 govuk-!-padding-bottom-0">
-        <table class="govuk-table govuk-!-margin-bottom-3">
-          <caption class="govuk-table__caption govuk-!-font-weight-regular govuk-!-font-size-16">
-          </caption>
-          <thead class="govuk-table__head govuk-!-font-size-16">
-            <tr class="govuk-table__row">
-              <th scope="col" class="govuk-table__header govuk-!-width-one-quarter">
-                    Dog name
-              </th>
-              <th scope="col" class="govuk-table__header">
-                    Owner name
-              </th>
-              <th scope="col" class="govuk-table__header govuk-!-width-one-quarter">
-                    Microchip number
-              </th>
-            </tr>
-          </thead>
-
-          <tbody class="govuk-table__body">
-            <tr class="govuk-table__row govuk-!-font-size-16 govuk-!-margin-bottom-0">
-              <td class="govuk-!-padding-top-2 govuk-!-padding-bottom-0 defra-results">
-                  {{ result.dogName }}
-                  {% if result.dogNameNotEntered %}
-                  <span class="defra-secondary-text">Not entered</span>
-                  {% endif %}
-              </td>
-              <td class="govuk-!-padding-top-2 govuk-!-padding-bottom-0 defra-results">
-                <a class="govuk-link govuk-link--no-visited-state" href="/cdo/view/owner-details/{{ result.personReference }}{{ model.srcHashParam }}">
-                      {{ result.firstName }} {{ result.lastName }}
-                </a>
-              </td>
-              <td class="govuk-!-padding-top-2 govuk-!-padding-bottom-0 defra-results">
-                      {{ result.microchipNumber }}
-                      {% if result.microchipNumberNotEntered %}
-                      <span class="defra-secondary-text">Not entered</span>
-                      {% endif %}
-                      <br/>
-                      {{ result.microchipNumber2 }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+
+      <div class="govuk-summary-card__content">
+        <dl class="govuk-summary-list govuk-!-font-size-16">
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Status
+            </dt>
+            <dd class="govuk-summary-list__value">
+              {{ statusTag(result.dogStatus, result.dogSubStatus, 'govuk-!-font-size-16') }}
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">Dog</dt>
+            {% if result.dogNameNotEntered %}
+            <dd class="govuk-summary-list__value defra-secondary-text">Not entered</dd>
+            {% else %}
+            <dd class="govuk-summary-list__value">{{ result.dogName }}</dd>
+            {% endif %}
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">Owner</dt>
+            <dd class="govuk-summary-list__value">
+              <a class="govuk-link govuk-link--no-visited-state" href="/cdo/view/owner-details/{{ result.personReference }}{{ model.srcHashParam }}">
+                    {{ result.firstName }} {{ result.lastName }}
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Address
+            </dt>
+            <dd class="govuk-summary-list__value">
+              {% if result.address %} {{ result.address }} {% endif %}
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Microchip number
+            </dt>
+            {% if result.microchipNumberNotEntered %}
+            <dd class="govuk-summary-list__value defra-secondary-text">Not entered</dd>
+            {% else %}
+            <dd class="govuk-summary-list__value">
+            {{ result.microchipNumber }}
+              {% if result.microchipNumber2 %}
+              <br/>
+              {{ result.microchipNumber2 }}
+              {% endif %}
+              {% endif %}
+            </dd>
+          </div>
+        </dl>
       </div>
     </div>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aphw-ddi-portal",
-  "version": "0.96.52",
+  "version": "0.97.1",
   "description": "Web frontend for managing the dogs index",
   "homepage": "https://github.com/DEFRA/aphw-ddi-portal",
   "main": "app/index.js",

diff --git a/test/integration/narrow/routes/cdo/search-basic.test.js b/test/integration/narrow/routes/cdo/search-basic.test.js
@@ -64,12 +64,7 @@ describe('SearchBasic test', () => {
       {
         results: [
           {
-            address: {
-              town: 'LONDON',
-              postcode: 'W1K 7EB',
-              address_line_1: '47 PARK STREET',
-              address_line_2: null
-            },
+            address: '47 PARK STREET, LONDON, W1K 7EB',
             dogName: '',
             dogIndex: 'ED300242',
             lastName: 'Ralph',
@@ -95,9 +90,11 @@ describe('SearchBasic test', () => {
     const { document } = new JSDOM(response.payload).window
 
     expect(response.statusCode).toBe(200)
-    const [dogNameResult, ownerNameResult, microchipNumberResult] = document.querySelectorAll('.defra-results')
+    const [statusResult, dogNameResult, ownerNameResult, ownerAddressResult, microchipNumberResult] = document.querySelectorAll('.govuk-summary-list__value')
+    expect(statusResult.textContent.trim()).toBe('Applying for exemption')
     expect(dogNameResult.textContent.trim()).toBe('Not entered')
     expect(ownerNameResult.textContent.trim()).toBe('Wreck it Ralph')
+    expect(ownerAddressResult.textContent.trim()).toBe('47 PARK STREET, LONDON, W1K 7EB')
     expect(microchipNumberResult.textContent.trim()).toBe('Not entered')
     expect(document.querySelector('.govuk-tag').textContent.trim()).toBe('Applying for exemption')
   })