From 3a7f3af9d5e22f2aba0a1ef8f86d8d3092f05940 Mon Sep 17 00:00:00 2001 From: Mark Taylor <138604938+mtaylorgds@users.noreply.github.com> Date: Fri, 16 Feb 2024 08:32:24 +0000 Subject: [PATCH 1/2] Rename error summary to legacy error summary Error summaries for pages transitioned to the GOV.UK Design System will be different to the old style ones. Rename the error summary shared partial in preparation for creating a new one for use by transitioned views. --- app/views/artefacts/new.html.erb | 2 +- app/views/downtimes/_form.html.erb | 2 +- app/views/legacy_downtimes/_form.html.erb | 2 +- app/views/licences/new.html.erb | 2 +- app/views/local_transactions/new.html.erb | 2 +- .../{_error_summary.html.erb => _legacy_error_summary.html.erb} | 0 6 files changed, 5 insertions(+), 5 deletions(-) rename app/views/shared/{_error_summary.html.erb => _legacy_error_summary.html.erb} (100%) diff --git a/app/views/artefacts/new.html.erb b/app/views/artefacts/new.html.erb index 20a1491e9..be7bda516 100644 --- a/app/views/artefacts/new.html.erb +++ b/app/views/artefacts/new.html.erb @@ -5,7 +5,7 @@

<%= yield :page_title %>

-<%= render :partial => 'shared/error_summary', locals: { object: @artefact} %> +<%= render :partial => 'shared/legacy_error_summary', locals: { object: @artefact} %>
diff --git a/app/views/downtimes/_form.html.erb b/app/views/downtimes/_form.html.erb index 952a5375b..c3a9b06dd 100644 --- a/app/views/downtimes/_form.html.erb +++ b/app/views/downtimes/_form.html.erb @@ -1,6 +1,6 @@ <%= f.hidden_field :artefact_id %> -<%= render :partial => 'shared/error_summary', locals: { object: @downtime} %> +<%= render :partial => 'shared/legacy_error_summary', locals: { object: @downtime} %>
diff --git a/app/views/legacy_downtimes/_form.html.erb b/app/views/legacy_downtimes/_form.html.erb index b64bfc91d..5dce34884 100644 --- a/app/views/legacy_downtimes/_form.html.erb +++ b/app/views/legacy_downtimes/_form.html.erb @@ -1,6 +1,6 @@ <%= f.hidden_field :artefact_id %> -<%= render :partial => 'shared/error_summary', locals: { object: @downtime} %> +<%= render :partial => 'shared/legacy_error_summary', locals: { object: @downtime} %>
diff --git a/app/views/licences/new.html.erb b/app/views/licences/new.html.erb index 0dfb86fb8..f75f713e4 100644 --- a/app/views/licences/new.html.erb +++ b/app/views/licences/new.html.erb @@ -8,7 +8,7 @@ We need a bit more information to create your licence.

-<%= render :partial => 'shared/error_summary', locals: { object: @publication } %> +<%= render :partial => 'shared/legacy_error_summary', locals: { object: @publication } %> <%= form_for(@publication, :url => editions_path, :as => :edition, :html => { :id => 'edition-form' } ) do |f| %> <%= form_group(f, :licence_identifier) do %> diff --git a/app/views/local_transactions/new.html.erb b/app/views/local_transactions/new.html.erb index f03c6045a..1d72c712b 100644 --- a/app/views/local_transactions/new.html.erb +++ b/app/views/local_transactions/new.html.erb @@ -7,7 +7,7 @@ We need a bit more information to create your local transaction.

-<%= render :partial => 'shared/error_summary', locals: { object: @publication} %> +<%= render :partial => 'shared/legacy_error_summary', locals: { object: @publication} %> <%= form_for(@publication, as: :edition, url: editions_path, html: { id: 'edition-form', novalidate: 'novalidate' } ) do |f| %>
diff --git a/app/views/shared/_error_summary.html.erb b/app/views/shared/_legacy_error_summary.html.erb similarity index 100% rename from app/views/shared/_error_summary.html.erb rename to app/views/shared/_legacy_error_summary.html.erb From 5c28af1b7145a63c3e1ae9f341cfd1f1a08326c1 Mon Sep 17 00:00:00 2001 From: Mark Taylor <138604938+mtaylorgds@users.noreply.github.com> Date: Fri, 16 Feb 2024 16:19:45 +0000 Subject: [PATCH 2/2] Rename datetime fields to match legacy form There is some code in `ApplicationController#squash_multiparameter_datetime_attributes` that combines the date time form parameters used by the legacy view into a single parameter for use within the controller. To make use of this code without having to modify it, change the field names on the new form to match those of the old. --- .../javascripts/modules/downtime_message.js | 14 +-- app/views/downtimes/_datetime_fields.html.erb | 48 ++++++++ app/views/downtimes/_form.html.erb | 114 +++++++++--------- .../javascripts/spec/downtime_message.spec.js | 94 +++++++-------- 4 files changed, 158 insertions(+), 112 deletions(-) create mode 100644 app/views/downtimes/_datetime_fields.html.erb diff --git a/app/assets/javascripts/modules/downtime_message.js b/app/assets/javascripts/modules/downtime_message.js index 45e914c2d..bb64ec441 100644 --- a/app/assets/javascripts/modules/downtime_message.js +++ b/app/assets/javascripts/modules/downtime_message.js @@ -14,8 +14,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; form.addEventListener('change', updateMessage) function updateMessage () { - const fromDate = getDate('from') - const toDate = getDate('to') + const fromDate = getDate('start') + const toDate = getDate('end') let message = '' if (isValidSchedule(fromDate, toDate)) { @@ -25,11 +25,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } function getDate (selector) { - const day = form.elements[`${selector}-date[day]`].value - const month = form.elements[`${selector}-date[month]`].value - const year = form.elements[`${selector}-date[year]`].value - const hours = form.elements[`${selector}-time[hour]`].value - const minutes = form.elements[`${selector}-time[minute]`].value + const day = form.elements[`downtime[${selector}_time(3i)]`].value + const month = form.elements[`downtime[${selector}_time(2i)]`].value + const year = form.elements[`downtime[${selector}_time(1i)]`].value + const hours = form.elements[`downtime[${selector}_time(4i)]`].value + const minutes = form.elements[`downtime[${selector}_time(5i)]`].value // The Date class treats 1 as February, but in the UI we expect 1 to be January const zeroIndexedMonth = parseInt(month) - 1 diff --git a/app/views/downtimes/_datetime_fields.html.erb b/app/views/downtimes/_datetime_fields.html.erb new file mode 100644 index 000000000..2861a4975 --- /dev/null +++ b/app/views/downtimes/_datetime_fields.html.erb @@ -0,0 +1,48 @@ +<% + date_legend_text ||= nil + time_legend_text ||= nil + + year ||= nil + month ||= nil + day ||= nil + date_input_items = [] + date_input_items << day if day + date_input_items << month if month + date_input_items << year if year + date_input_items = nil unless date_input_items.any? + + hour ||= nil + minute ||= nil + time_input_items = [] + time_input_items << hour if hour + time_input_items << minute if minute + time_input_items = nil unless time_input_items.any? +%> +
+
+
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: date_legend_text, + heading_size: "m" + } do %> + <%= render "govuk_publishing_components/components/date_input", { + hint: "For example, 01 08 2022", + items: date_input_items, + } %> + <% end %> +
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: time_legend_text, + heading_size: "m" + } do %> + <%= render "time_input", { + hint: "For example, 9:30 or 19:30", + items: time_input_items, + } %> + <% end %> +
+
+
+
diff --git a/app/views/downtimes/_form.html.erb b/app/views/downtimes/_form.html.erb index c3a9b06dd..9170aca2a 100644 --- a/app/views/downtimes/_form.html.erb +++ b/app/views/downtimes/_form.html.erb @@ -2,63 +2,65 @@ <%= render :partial => 'shared/legacy_error_summary', locals: { object: @downtime} %> -
-
-
-
- <%= render "govuk_publishing_components/components/fieldset", { - legend_text: "From date", - heading_size: "m" - } do %> - <%= render "govuk_publishing_components/components/date_input", { - hint: "For example, 01 08 2022", - name: "from-date" - } %> - <% end %> -
-
- <%= render "govuk_publishing_components/components/fieldset", { - legend_text: "From time", - heading_size: "m" - } do %> - <%= render "time_input", { - hint: "For example, 9:30 or 19:30", - name: "from-time" - } %> - <% end %> -
-
-
-
+<%= render partial: "downtimes/datetime_fields", locals: { + date_legend_text: "From date", + time_legend_text: "From time", + year: { + name: "downtime[start_time(1i)]", + label: "Year", + width: 4, + }, + month: { + name: "downtime[start_time(2i)]", + label: "Month", + width: 2, + }, + day: { + name: "downtime[start_time(3i)]", + label: "Day", + width: 2, + }, + hour: { + name: "downtime[start_time(4i)]", + label: "Hour", + width: 2, + }, + minute: { + name: "downtime[start_time(5i)]", + label: "Minute", + width: 2, + }, +} %> -
-
-
-
- <%= render "govuk_publishing_components/components/fieldset", { - legend_text: "To date", - heading_size: "m" - } do %> - <%= render "govuk_publishing_components/components/date_input", { - hint: "For example, 01 08 2022", - name: "to-date" - } %> - <% end %> -
-
- <%= render "govuk_publishing_components/components/fieldset", { - legend_text: "To time", - heading_size: "m" - } do %> - <%= render "time_input", { - hint: "For example, 9:30 or 19:30", - name: "to-time" - } %> - <% end %> -
-
-
-
+<%= render partial: "downtimes/datetime_fields", locals: { + date_legend_text: "To date", + time_legend_text: "To time", + year: { + name: "downtime[end_time(1i)]", + label: "Year", + width: 4, + }, + month: { + name: "downtime[end_time(2i)]", + label: "Month", + width: 2, + }, + day: { + name: "downtime[end_time(3i)]", + label: "Day", + width: 2, + }, + hour: { + name: "downtime[end_time(4i)]", + label: "Hour", + width: 2, + }, + minute: { + name: "downtime[end_time(5i)]", + label: "Minute", + width: 2, + }, +} %>
diff --git a/spec/javascripts/spec/downtime_message.spec.js b/spec/javascripts/spec/downtime_message.spec.js index cfc4908e9..d18f0ed4c 100644 --- a/spec/javascripts/spec/downtime_message.spec.js +++ b/spec/javascripts/spec/downtime_message.spec.js @@ -6,10 +6,11 @@ describe('A downtime message module', function () { let downtimeMessage, form const formHtml = `
+ action="/editions/65ba0644e07788001e4e1c37/downtime" accept-charset="UTF-8" method="post"> +
@@ -20,35 +21,32 @@ describe('A downtime message module', function () {
From date
-
+
For example, 01 08 2022
-
+
- + + id="input-964dcb74" inputmode="numeric" + name="downtime[start_time(3i)]" spellcheck="false" type="text">
- + + id="input-a83e46f1" inputmode="numeric" + name="downtime[start_time(2i)]" spellcheck="false" type="text">
- + + id="input-137e90ce" inputmode="numeric" + name="downtime[start_time(1i)]" spellcheck="false" type="text">
@@ -61,26 +59,24 @@ describe('A downtime message module', function () {
From time
-
+
For example, 9:30 or 19:30
-
+
- + + id="input-20da3b15" inputmode="numeric" + name="downtime[start_time(4i)]" spellcheck="false" type="text">
- + + id="input-8b734c60" inputmode="numeric" + name="downtime[start_time(5i)]" spellcheck="false" type="text">
@@ -99,31 +95,31 @@ describe('A downtime message module', function () {
To date
-
+
For example, 01 08 2022
-
+
- +
- +
- +
@@ -137,23 +133,23 @@ describe('A downtime message module', function () {
To time
-
+
For example, 9:30 or 19:30
-
+
- +
- +
@@ -288,19 +284,19 @@ describe('A downtime message module', function () { } function enterFromDate (dateObj) { - enterDate('from', dateObj) + enterDate('start', dateObj) } function enterToDate (dateObj) { - enterDate('to', dateObj) + enterDate('end', dateObj) } function enterDate (selector, dateObj) { - const day = form.elements[`${selector}-date[day]`] - const month = form.elements[`${selector}-date[month]`] - const year = form.elements[`${selector}-date[year]`] - const hour = form.elements[`${selector}-time[hour]`] - const minute = form.elements[`${selector}-time[minute]`] + const day = form.elements[`downtime[${selector}_time(3i)]`] + const month = form.elements[`downtime[${selector}_time(2i)]`] + const year = form.elements[`downtime[${selector}_time(1i)]`] + const hour = form.elements[`downtime[${selector}_time(4i)]`] + const minute = form.elements[`downtime[${selector}_time(5i)]`] dateObj = dateObj || {}