Skip to content

Commit

Permalink
Rename datetime fields to match legacy form
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@mtaylorgds
mtaylorgds committed Feb 16, 2024
1 parent 3a7f3af commit 5c28af1
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 112 deletions.
14 changes: 7 additions & 7 deletions app/assets/javascripts/modules/downtime_message.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -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
Expand Down
48 changes: 48 additions & 0 deletions app/views/downtimes/_datetime_fields.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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?
%>
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<%= 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 %>
</div>
<div class="govuk-grid-column-one-half">
<%= 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 %>
</div>
</div>
</div>
</div>
114 changes: 58 additions & 56 deletions app/views/downtimes/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,65 @@

<%= render :partial => 'shared/legacy_error_summary', locals: { object: @downtime} %>

<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<%= 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 %>
</div>
<div class="govuk-grid-column-one-half">
<%= 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 %>
</div>
</div>
</div>
</div>
<%= 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,
},
} %>

<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<%= 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 %>
</div>
<div class="govuk-grid-column-one-half">
<%= 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 %>
</div>
</div>
</div>
</div>
<%= 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,
},
} %>

<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
Expand Down
Loading

0 comments on commit 5c28af1

Please sign in to comment.