[O2B-1140] Fix time range input when granularity is minutes (#1454)

Author: martinboulais

lib/public/components/common/form/inputs/DateTimeInputComponent.js

@@ -174,15 +174,15 @@ export class DateTimeInputComponent extends StatefulComponent {
 
         const minDateDayAfter = new Date(min + MILLISECONDS_IN_ONE_DAY);
 
-        const minDateAndTime = formatTimestampForDateTimeInput(min);
+        const minDateAndTime = formatTimestampForDateTimeInput(min, this._seconds);
         const ret = {};
 
         if (raw.date !== null && raw.date === minDateAndTime.date) {
             ret.time = minDateAndTime.time;
         }
 
         if (raw.time !== null && raw.time < minDateAndTime.time) {
-            ret.date = formatTimestampForDateTimeInput(minDateDayAfter.getTime()).date;
+            ret.date = formatTimestampForDateTimeInput(minDateDayAfter.getTime(), this._seconds).date;
         } else {
             ret.date = minDateAndTime.date;
         }
@@ -204,14 +204,14 @@ export class DateTimeInputComponent extends StatefulComponent {
 
         const maxDateDayBefore = new Date(max - MILLISECONDS_IN_ONE_DAY);
 
-        const maxDateAndTime = formatTimestampForDateTimeInput(max);
+        const maxDateAndTime = formatTimestampForDateTimeInput(max, this._seconds);
         const ret = {};
 
         if (raw.date !== null && raw.date === maxDateAndTime.date) {
             ret.time = maxDateAndTime.time;
         }
         if (raw.time !== null && raw.time > maxDateAndTime.time) {
-            ret.date = formatTimestampForDateTimeInput(maxDateDayBefore.getTime()).date;
+            ret.date = formatTimestampForDateTimeInput(maxDateDayBefore.getTime(), this._seconds).date;
         } else {
             ret.date = maxDateAndTime.date;
         }

lib/public/components/common/form/inputs/DateTimeInputModel.js

@@ -35,10 +35,15 @@ import { Observable } from '/js/src/index.js';
 export class DateTimeInputModel extends Observable {
     /**
      * Constructor
+     * @param {object} [configuration] the model configuration
+     * @param {boolean} [configuration.seconds=false] states if the date time input granularity is seconds (else, it is minutes)
      */
-    constructor() {
+    constructor(configuration) {
         super();
 
+        const { seconds } = configuration || {};
+        this._seconds = seconds;
+
         /**
          * @type {DateTimeInputRawData}
          * @private
@@ -61,7 +66,7 @@ export class DateTimeInputModel extends Observable {
     update(raw) {
         this._raw = raw;
         try {
-            this._value = raw.date && raw.time ? extractTimestampFromDateTimeInput(raw) : null;
+            this._value = raw.date && raw.time ? extractTimestampFromDateTimeInput(raw, { seconds: this._seconds }) : null;
         } catch (_) {
             this._value = null;
         }
@@ -111,7 +116,7 @@ export class DateTimeInputModel extends Observable {
 
         this._value = value;
         this._raw = value !== null
-            ? formatTimestampForDateTimeInput(value)
+            ? formatTimestampForDateTimeInput(value, this._seconds)
             : { date: '', time: '' };
 
         !silent && this.notify();

lib/public/utilities/formatting/dateTimeInputFormatters.mjs

@@ -15,10 +15,10 @@
  * Returns the given date formatted in two parts, YYYY-MM-DD and HH:MM to fill in HTML date and time inputs (in the user's timezone)
  *
  * @param {number} timestamp the timestamp (ms) to format
- *
+ * @param {boolean} enableSeconds states if the time input granularity is seconds (else, it is minutes)
  * @return {DateTimeInputRawData} the date expression to use as HTML input values
  */
-export const formatTimestampForDateTimeInput = (timestamp) => {
+export const formatTimestampForDateTimeInput = (timestamp, enableSeconds) => {
     const date = new Date(timestamp);
 
     /**
@@ -35,8 +35,11 @@ export const formatTimestampForDateTimeInput = (timestamp) => {
 
     const hours = pad(date.getHours());
     const minutes = pad(date.getMinutes());
-    const seconds = pad(date.getSeconds());
-    const timeExpression = `${hours}:${minutes}:${seconds}`;
+    let timeExpression = `${hours}:${minutes}`;
+    if (enableSeconds) {
+        const seconds = pad(date.getSeconds());
+        timeExpression = `${timeExpression}:${seconds}`;
+    }
 
     return { date: dateExpression, time: timeExpression };
 };

test/public/eosReport/shift-leader-creation.test.js

@@ -83,10 +83,10 @@ module.exports = () => {
         const { formatTimestampForDateTimeInput } = await import('../../../lib/public/utilities/formatting/dateTimeInputFormatters.mjs');
 
         const magnet1Timestamp = currentShift.start + 3600 * 4 * 1000;
-        const { date: magnet1Date, time: magnet1Time } = formatTimestampForDateTimeInput(magnet1Timestamp);
+        const { date: magnet1Date, time: magnet1Time } = formatTimestampForDateTimeInput(magnet1Timestamp, true);
 
         const magnet2Timestamp = currentShift.start + 3600 * 2 * 1000;
-        const { date: magnet2Date, time: magnet2Time } = formatTimestampForDateTimeInput(magnet2Timestamp);
+        const { date: magnet2Date, time: magnet2Time } = formatTimestampForDateTimeInput(magnet2Timestamp, true);
 
         const magnetEnd = formatShiftDate(currentShift.end, { time: true });