From e4a3ced6cbf1ecd01fbdd2719b5d9cfe7a3d8cd8 Mon Sep 17 00:00:00 2001 From: Iqbal AHmed Date: Wed, 17 Jan 2024 17:13:22 +0000 Subject: [PATCH] PP-12055 Update validation styling for transactions search filter - Use design system guidelines for validation styling. - When searching for transactions and the end date < start date: - Display an error summary - Display an error message around the `end date` field. - Highlight the `end date` field. - The code to carry out the validation was done previously. - This PR is to only update the design / styling. --- .secrets.baseline | 10 +- .../sass/components/transaction-filter.scss | 28 ++- app/views/transactions/filter.njk | 191 +++++++++++------- app/views/transactions/index.njk | 24 ++- .../transactions/transaction-search.cy.js | 5 +- 5 files changed, 162 insertions(+), 96 deletions(-) diff --git a/.secrets.baseline b/.secrets.baseline index 74be8e87d9..59c01439b9 100644 --- a/.secrets.baseline +++ b/.secrets.baseline @@ -297,28 +297,28 @@ "filename": "app/views/transactions/index.njk", "hashed_secret": "c12ec67dcf1e1939e1039d414d56a59c2c49cc87", "is_verified": false, - "line_number": 21 + "line_number": 23 }, { "type": "Base64 High Entropy String", "filename": "app/views/transactions/index.njk", "hashed_secret": "e0eb70ddc8098d113dc566a9dc85c0e6a44de8d8", "is_verified": false, - "line_number": 22 + "line_number": 24 }, { "type": "Base64 High Entropy String", "filename": "app/views/transactions/index.njk", "hashed_secret": "6ee3b2a2f5eaeadb06c1dda26270cd1032420e79", "is_verified": false, - "line_number": 23 + "line_number": 25 }, { "type": "Base64 High Entropy String", "filename": "app/views/transactions/index.njk", "hashed_secret": "2568e4443a80c3aaed753e6eecfa9dc742187ad9", "is_verified": false, - "line_number": 24 + "line_number": 26 } ], "test/cypress/integration/all-service-transactions/all-service-transactions.cy.js": [ @@ -903,5 +903,5 @@ } ] }, - "generated_at": "2023-11-27T13:23:06Z" + "generated_at": "2024-01-17T17:13:09Z" } diff --git a/app/assets/sass/components/transaction-filter.scss b/app/assets/sass/components/transaction-filter.scss index 3c99faa21c..806be2a0ac 100644 --- a/app/assets/sass/components/transaction-filter.scss +++ b/app/assets/sass/components/transaction-filter.scss @@ -19,29 +19,44 @@ width: 50%; } - .govuk-form-group { + &__input-container { float: left; width: 50%; box-sizing: border-box; - &:first-of-type { + + &--date-input, + .govuk-form-group--error &--date-input { padding-right: govuk-spacing(1); + margin-bottom: govuk-spacing(2); } - &:last-of-type { - padding-left: govuk-spacing(1); + &--time-input, + .govuk-form-group--error &--time-input { + padding-right: govuk-spacing(1); } } } + + .datetime-filter-from { padding-right: govuk-spacing(3); } .datetime-filter-to { position: relative; - padding-left: govuk-spacing(3); + // padding-left: govuk-spacing(3); + + @include govuk-media-query(tablet) { + padding-left: govuk-spacing(3); + } + + &__container { + width: auto; + padding: 0; + } } .datetime-separator { @@ -51,9 +66,8 @@ @include govuk-media-query(tablet) { @include govuk-font($size: 14); position: absolute; - top: 50%; left: -8px; - transform: translateY(-50%); + margin-top: govuk-spacing(7); } } diff --git a/app/views/transactions/filter.njk b/app/views/transactions/filter.njk index 51470b2e5a..9b8e3086df 100644 --- a/app/views/transactions/filter.njk +++ b/app/views/transactions/filter.njk @@ -28,7 +28,7 @@ }) }} -
+
{{ govukInput({ id: 'email', @@ -54,7 +54,7 @@ }}
- {{ + {{ govukInput({ id: 'cardholderName', name: 'cardholderName', @@ -65,9 +65,9 @@ text: 'Name on card', classes: 'govuk-label--s govuk-!-font-size-16 govuk-!-margin-bottom-0' }, - hint: { - text: 'Enter full or partial name', - classes: 'govuk-!-font-size-14' + hint: { + text: 'Enter full or partial name', + classes: 'govuk-!-font-size-14' } }) }} @@ -153,81 +153,116 @@
-
- - Date range - -
- - From this date and time - - {{ - govukInput({ - id: 'fromDate', - name: 'fromDate', - value: filters.fromDate, - classes: 'date-picker start govuk-!-font-size-16', - label: { - text: 'Start date', - classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' - }, - attributes: { - autocomplete: 'off' - } - }) - }} - {{ - govukInput({ - id: 'fromTime', - name: 'fromTime', - value: filters.fromTime, - classes: 'time-picker start govuk-!-font-size-16', - label: { - text: 'Start time', - classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' - }, - attributes: { - autocomplete: 'off' - } - }) - }} -
-
- - to this date and time +
+
+ + Date range - {{ - govukInput({ - id: 'toDate', - name: 'toDate', - value: filters.toDate, - classes: 'date-picker end govuk-!-font-size-16', - label: { - text: 'End date', - classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' - }, - attributes: { - autocomplete: 'off' - } - }) - }} - {{ - govukInput({ - id: 'toTime', - name: 'toTime', - value: filters.toTime, - classes: 'time-picker end govuk-!-font-size-16', - label: { - text: 'End time', - classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' - }, - attributes: { - autocomplete: 'off' - } - }) - }} +
+ + From this date and time + + {{ + govukInput({ + id: 'fromDate', + name: 'fromDate', + value: filters.fromDate, + classes: 'date-picker start govuk-!-font-size-16', + label: { + text: 'Start date', + classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' + }, + attributes: { + autocomplete: 'off' + }, + formGroup: { + classes: 'datetime-filter__input-container datetime-filter__input-container--date-input' + } + }) + }} + {{ + govukInput({ + id: 'fromTime', + name: 'fromTime', + value: filters.fromTime, + classes: 'time-picker start govuk-!-font-size-16', + label: { + text: 'Start time', + classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' + }, + attributes: { + autocomplete: 'off' + }, + formGroup: { + classes: 'datetime-filter__input-container datetime-filter__input-container--time-input' + } + }) + }} +
+
+
+ + to this date and time + + +
+ {% if isInvalidDateRange %} +

+ Error: End date must be after start date +

+ {% endif %} + + {% set cssClassesForToDateInput = 'date-picker end govuk-!-font-size-16 ' %} + {% set cssClassesForToDateFormGroup = 'datetime-filter__input-container datetime-filter__input-container--date-input filter-date-input' %} + + {% if isInvalidDateRange %} + {% set cssClassesForToDateInput = cssClassesForToDateInput + ' govuk-input--error govuk-!-margin-bottom-0 govuk-!-padding-right-1' %} + {% set cssClassesForToDateFormGroup = cssClassesForToDateFormGroup + ' govuk-!-margin-bottom-0' %} + {% endif %} + + {{ + govukInput({ + id: 'toDate', + name: 'toDate', + value: filters.toDate, + classes: cssClassesForToDateInput, + label: { + text: 'End date', + classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' + }, + attributes: { + autocomplete: 'off', + 'data-cy': 'to-date-field' + }, + formGroup: { + classes: cssClassesForToDateFormGroup + } + }) + }} + + {{ + govukInput({ + id: 'toTime', + name: 'toTime', + value: filters.toTime, + classes: 'time-picker end govuk-!-font-size-16', + label: { + text: 'End time', + classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2' + }, + attributes: { + autocomplete: 'off' + }, + formGroup: { + classes: 'datetime-filter__input-container datetime-filter__input-container--time-input' + } + }) + }} +
+
+
-
+
{% if filters.metadataValue or filters.agreementId %} diff --git a/app/views/transactions/index.njk b/app/views/transactions/index.njk index 2345c43a72..cbebfff256 100644 --- a/app/views/transactions/index.njk +++ b/app/views/transactions/index.njk @@ -1,4 +1,6 @@ {% from "../macro/breadcrumbs.njk" import breadcrumbs %} +{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %} + {% extends "../layout.njk" %} {% block pageTitle %} @@ -42,6 +44,22 @@ {% block mainContent %}
+ + {% if (isInvalidDateRange) %} + {{ govukErrorSummary({ + titleText: "There is a problem", + attributes: { + 'data-cy': 'error-summary' + }, + errorList: [ + { + text: "End date must be after start date", + href: "#toDate" + } + ] + }) }} + {% endif %} +

{% if allServiceTransactions %} Transactions for all services @@ -66,17 +84,13 @@ {% include "transactions/display-size.njk" %}

- {% if (isInvalidDateRange) %} -

End date must be after start date

-

The from date entered is {{fromDateParam}} and the to date entered is {{toDateParam}}

- {% else %} {% if totalOverLimit %} Over {{maxLimitFormatted}} transactions {% else %} {{totalFormatted}} transactions {% endif %} {{ filtersDescription | safe }} - {% endif %} +

{% if allServiceTransactions or permissions.transactions_download_read %} diff --git a/test/cypress/integration/transactions/transaction-search.cy.js b/test/cypress/integration/transactions/transaction-search.cy.js index b58532c195..d8cad273e2 100644 --- a/test/cypress/integration/transactions/transaction-search.cy.js +++ b/test/cypress/integration/transactions/transaction-search.cy.js @@ -377,7 +377,10 @@ describe('Transactions List', () => { cy.get('#transactions-list tbody').should('not.exist') - cy.get('h3').contains('End date must be after start date' ) + cy.get('[data-cy=error-summary]').contains('End date must be after start date') + cy.get('[data-cy=from-date-error-message]').contains('End date must be after start date') + cy.get('[data-cy=from-date-error-message]').parent().should('have.class', 'govuk-form-group--error') + cy.get('[data-cy=to-date-field]').should('have.class', 'govuk-input--error') }) }) describe('Transactions are displayed correctly', () => {