FIX: DateTimeInputRange should show correct intervals with @relativeD…

…ate param (discourse#22331)
marstall · Jun 29, 2023 · 60273e4 · 60273e4
1 parent a7421d3
commit 60273e4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/app/assets/javascripts/discourse/app/components/time-input.js b/app/assets/javascripts/discourse/app/components/time-input.js
@@ -89,20 +89,19 @@ export default Component.extend({
     // theres 1440 minutes in a day
     // and 1440 / 15 = 96
     let i = 0;
-    while (i < 96) {
+    let option = start;
+    options.push(option);
+    while (i < 95) {
       // while diff with minimumTime is less than one hour
       // use 15 minutes steps and then 30 minutes
-      const minutes = this.minimumTime ? (i <= 4 ? 15 : 30) : 15;
-      const option = start + i * minutes;
-
+      const minutes = this.minimumTime ? (i <= 3 ? 15 : 30) : 15;
+      option = option + minutes;
       // when start is higher than 0 we will reach 1440 minutes
-      // before the 96 iterations
+      // before the 95 iterations
       if (option > 1440) {
         break;
       }
-
       options.push(option);
-
       i++;
     }
 
@@ -112,15 +111,15 @@ export default Component.extend({
 
     options = options.sort((a, b) => a - b);
 
-    return options.map((option) => {
-      let name = convertMinutesToString(option);
+    return options.map((opt) => {
+      let name = convertMinutesToString(opt);
       let label;
 
       if (this.date && this.relativeDate) {
         const diff = this.date
           .clone()
           .startOf("day")
-          .add(option, "minutes")
+          .add(opt, "minutes")
           .diff(this.relativeDate, "minutes");
 
         if (diff < 1440) {
@@ -131,7 +130,7 @@ export default Component.extend({
       }
 
       return {
-        id: option,
+        id: opt,
         name,
         label,
         title: name,

diff --git a/app/assets/javascripts/discourse/tests/integration/components/date-time-input-range-test.js b/app/assets/javascripts/discourse/tests/integration/components/date-time-input-range-test.js
@@ -50,11 +50,25 @@ module("Integration | Component | date-time-input-range", function (hooks) {
     await fillIn(toDateInput(), "2019-01-30");
     await toTimeSelectKit.expand();
     rows = toTimeSelectKit.rows();
-
     assert.equal(rows[0].dataset.name, "00:00");
     assert.equal(rows[rows.length - 1].dataset.name, "23:45");
   });
 
+  test("setting relativeDate results in correct intervals (4x 15m then 30m)", async function (assert) {
+    this.setProperties({ state: { from: DEFAULT_DATE_TIME, to: null } });
+
+    await render(
+      hbs`<DateTimeInputRange @from={{this.state.from}} @to={{this.state.to}} @relativeDate={{this.state.from}} @onChange={{action (mut this.state)}} />`
+    );
+
+    await fillIn(toDateInput(), "2019-01-29");
+    const toTimeSelectKit = selectKit(".to .d-time-input .select-kit");
+    await toTimeSelectKit.expand();
+    let rows = toTimeSelectKit.rows();
+    assert.equal(rows[4].dataset.name, "15:45");
+    assert.equal(rows[5].dataset.name, "16:15");
+  });
+
   test("timezone support", async function (assert) {
     this.setProperties({
       state: {