Merge pull request #8 from gtt-project/feat/inline-time-fields

Place the time fields next to their date fields and snap to the interval

Author: dkastl

app/views/hooks/_issue_datetime_form.html.erb

@@ -1,10 +1,30 @@
 <% if issue && form && RedmineIssueDatetime.enabled_for?(issue.tracker_id) %>
-<div id="issue_datetime_attributes" class="splitcontent">
-  <div class="splitcontentleft">
-    <p><%= form.time_field :start_time, step: RedmineIssueDatetime.time_step_seconds, label: :field_start_time %></p>
+  <%= javascript_include_tag 'issue_datetime', plugin: 'redmine_issue_datetime' %>
+  <%= stylesheet_link_tag 'issue_datetime', plugin: 'redmine_issue_datetime' %>
+  <%#
+    Rendered detached and moved next to the matching date field by
+    issue_datetime.js, because Redmine offers no hook inside the date rows.
+    The visible label is dropped once inline (the neighbouring "Start date"
+    label already names the row), so the field carries its own aria-label.
+  %>
+  <div id="issue-datetime-fields" class="issue-datetime-pending">
+    <p>
+      <%= form.time_field :start_time,
+                          step: RedmineIssueDatetime.time_step_seconds,
+                          label: :field_start_time,
+                          class: 'issue-datetime-time',
+                          aria: {label: l(:field_start_time)},
+                          title: l(:field_start_time),
+                          data: {'issue-datetime-target' => 'start_date_area'} %>
+    </p>
+    <p>
+      <%= form.time_field :due_time,
+                          step: RedmineIssueDatetime.time_step_seconds,
+                          label: :field_due_time,
+                          class: 'issue-datetime-time',
+                          aria: {label: l(:field_due_time)},
+                          title: l(:field_due_time),
+                          data: {'issue-datetime-target' => 'due_date_area'} %>
+    </p>
   </div>
-  <div class="splitcontentright">
-    <p><%= form.time_field :due_time, step: RedmineIssueDatetime.time_step_seconds, label: :field_due_time %></p>
-  </div>
-</div>
 <% end %>

assets/javascripts/issue_datetime.js

@@ -0,0 +1,77 @@
+// Places each time field next to the date field it belongs to, and snaps
+// typed values to the configured interval.
+//
+// Redmine renders no hook between the date inputs and their labels, so the
+// fields are rendered in a detached container and moved here. The targets are
+// Redmine's own wrapper ids (start_date_area / due_date_area). If either is
+// missing, the field is left where it was rendered rather than lost.
+(function () {
+  'use strict';
+
+  // Marks that this script actually loaded. The stylesheet only hides the
+  // detached container when this class is present, so a failed or disabled
+  // script leaves the fields visible where they were rendered instead of
+  // hiding them forever.
+  document.documentElement.classList.add('issue-datetime-js');
+
+  function snapToStep(input) {
+    var step = parseInt(input.getAttribute('step'), 10);
+    if (!step || !input.value) return;
+
+    var parts = input.value.split(':');
+    if (parts.length < 2) return;
+
+    var hours = parseInt(parts[0], 10);
+    var mins = parseInt(parts[1], 10);
+    if (!isFinite(hours) || !isFinite(mins)) return;
+
+    var minutes = hours * 60 + mins;
+    var stepMinutes = step / 60;
+    if (!stepMinutes) return;
+
+    var snapped = Math.round(minutes / stepMinutes) * stepMinutes;
+    // Snapping up from the last slot of the day would roll over to 00:00 the
+    // next day, which the date field cannot express; clamp instead.
+    if (snapped > 23 * 60 + 59) {
+      snapped = Math.floor((23 * 60 + 59) / stepMinutes) * stepMinutes;
+    }
+    var hh = String(Math.floor(snapped / 60)).padStart(2, '0');
+    var mm = String(snapped % 60).padStart(2, '0');
+    var value = hh + ':' + mm;
+    if (value !== input.value) input.value = value;
+  }
+
+  function relocate(container) {
+    var fields = container.querySelectorAll('[data-issue-datetime-target]');
+    Array.prototype.forEach.call(fields, function (field) {
+      var target = document.getElementById(field.dataset.issueDatetimeTarget);
+      if (!target) return;
+
+      var wrapper = document.createElement('span');
+      wrapper.className = 'issue-datetime-inline';
+      wrapper.appendChild(field);
+      target.appendChild(wrapper);
+    });
+    // Whatever could not be relocated stays visible in place.
+    if (!container.querySelector('[data-issue-datetime-target]')) {
+      container.parentNode.removeChild(container);
+    } else {
+      container.classList.remove('issue-datetime-pending');
+    }
+  }
+
+  function init() {
+    var container = document.getElementById('issue-datetime-fields');
+    if (container) relocate(container);
+
+    document.querySelectorAll('input.issue-datetime-time').forEach(function (input) {
+      input.addEventListener('change', function () { snapToStep(input); });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

assets/stylesheets/issue_datetime.css

@@ -0,0 +1,17 @@
+/* Hide the detached fields until issue_datetime.js has placed them, so they do
+   not flash at the bottom of the form on load. Scoped to the class that script
+   sets on load: if the script is missing or disabled, the fields stay visible
+   and usable in their rendered position rather than hidden for good. */
+.issue-datetime-js #issue-datetime-fields.issue-datetime-pending {
+  display: none;
+}
+
+/* Inline next to the date input it belongs to. */
+.issue-datetime-inline {
+  margin-left: 0.4em;
+  white-space: nowrap;
+}
+
+.issue-datetime-inline input[type="time"] {
+  width: auto;
+}

lib/redmine_issue_datetime.rb

@@ -57,7 +57,7 @@ def self.combine(date, input, previous)
     match = submitted && TIME_OF_DAY.match(submitted)
     hour, minute =
       if match
-        [match[1].to_i, match[2].to_i]
+        snap_to_step((match[1].to_i * 60) + match[2].to_i).divmod(60)
       elsif previous
         prev = previous.in_time_zone(reference_zone)
         [prev.hour, prev.min]
@@ -66,4 +66,18 @@ def self.combine(date, input, previous)
 
     reference_zone.local(date.year, date.month, date.day, hour, minute)
   end
+
+  # Rounds minutes-since-midnight to the nearest configured interval, so a
+  # value typed past the widget (or sent to the API) still lands on the grid
+  # the scheduler and the picker use. Clamped so rounding up from the last
+  # slot cannot roll over into the next day, which the date field could not
+  # express.
+  def self.snap_to_step(minutes)
+    step = time_step_minutes
+    return minutes if step <= 1
+
+    snapped = (minutes.to_f / step).round * step
+    last = ((23 * 60) + 59) / step * step
+    snapped > last ? last : snapped
+  end
 end

test/unit/issue_datetime_sync_test.rb

@@ -95,6 +95,41 @@ def setup
     assert_equal Time.utc(2026, 8, 3, 9, 15), @issue.reload.issue_datetime.starts_at
   end
 
+  test 'times are snapped to the configured interval' do
+    @issue.start_date = Date.new(2026, 8, 3)
+    @issue.start_time = '09:07'
+    assert @issue.save
+
+    assert_equal Time.utc(2026, 8, 3, 9, 0), @issue.reload.issue_datetime.starts_at
+  end
+
+  test 'snapping rounds to the nearest slot, not down' do
+    @issue.start_date = Date.new(2026, 8, 3)
+    @issue.start_time = '09:23'
+    assert @issue.save
+
+    assert_equal Time.utc(2026, 8, 3, 9, 30), @issue.reload.issue_datetime.starts_at
+  end
+
+  test 'snapping near midnight clamps instead of rolling into the next day' do
+    @issue.start_date = Date.new(2026, 8, 3)
+    @issue.start_time = '23:58'
+    assert @issue.save
+
+    record = @issue.reload.issue_datetime
+    assert_equal Time.utc(2026, 8, 3, 23, 45), record.starts_at
+    assert_equal Date.new(2026, 8, 3), @issue.start_date
+  end
+
+  test 'a coarser configured step snaps accordingly' do
+    enable_issue_datetime(@issue.tracker_id, step: '60')
+    @issue.start_date = Date.new(2026, 8, 3)
+    @issue.start_time = '09:40'
+    assert @issue.save
+
+    assert_equal Time.utc(2026, 8, 3, 10, 0), @issue.reload.issue_datetime.starts_at
+  end
+
   test 'due time before start time on the same date blocks the save' do
     @issue.start_date = Date.new(2026, 8, 3)
     @issue.due_date = Date.new(2026, 8, 3)