[O2B-643] Run duration accept format HH:MM:SS

lib/public/components/Filters/RunsFilter/durationFilter.js

@@ -11,26 +11,64 @@
  * or submit itself to any jurisdiction.
  */
 
-import { amountFilter } from '../common/filters/amountFilter.js';
+import { h } from '/js/src/index.js';
+import { comparisonOperatorFilter } from '../common/filters/comparisonOperatorFilter.js';
 
 /**
  * Returns the run duration filter component
  *
- * @param {RunsOverviewModel} runModel the runs model object
- *
- * @return {vnode} the duration filter
+ * @param {DurationInputModel} durationFilterModel the duration input model
+ * @param {NumericComparisonOperatorSelectionModel} operatorSelectionModel the comparison operator selection model
+ * @return {Component} the duration filter
  */
-export const durationFilter = (runModel) => amountFilter(
-    runModel.runDurationFilter,
-    (filter) => {
-        runModel.runDurationFilter = filter;
-    },
-    {
-        operatorAttributes: {
-            id: 'duration-operator',
+export const durationFilter = (durationFilterModel, operatorSelectionModel) => {
+    const { hours, minutes, seconds, secondsMin, minutesMin } = durationFilterModel.raw;
+
+    const hoursInput = h('input.flex-grow', {
+        id: 'hours-input',
+        type: 'number',
+        min: 0,
+        value: hours,
+        oninput: (e) => {
+            const { value } = e.target;
+            durationFilterModel.update({ hours: value.length === 0 ? null : Number(value) });
+        },
+    });
+    const minutesInput = h('input.flex-grow', {
+        id: 'minutes-input',
+        type: 'number',
+        min: minutesMin,
+        max: 60,
+        value: minutes,
+        oninput: (e) => {
+            const { value } = e.target;
+            durationFilterModel.update({ minutes: value.length === 0 ? null : Number(value) });
         },
-        limitAttributes: {
-            id: 'duration-limit',
+    }, 'm');
+    const secondsInput = h('input.flex-grow', {
+        id: 'seconds-input',
+        type: 'number',
+        min: secondsMin,
+        max: 60,
+        value: seconds,
+        oninput: (e) => {
+            const { value } = e.target;
+            durationFilterModel.update({ seconds: value.length === 0 ? null : Number(value) });
         },
-    },
-);
+    }, 's');
+
+    const inputs = h('.flex-row.w-40', [
+        hoursInput,
+        minutesInput,
+        secondsInput,
+        h('.flex-row.items-center.p2', [
+            h('label', { for: 'hours-input' }, 'h'),
+            ':',
+            h('label', { for: 'minutes-input' }, 'm'),
+            ':',
+            h('label', { for: 'seconds-input' }, 's'),
+        ]),
+    ]);
+
+    return comparisonOperatorFilter(inputs, operatorSelectionModel);
+};

lib/public/components/Filters/common/filters/NumericComparisonOperatorSelectionModel.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { SelectionDropdownModel } from '../../../common/selection/dropdown/SelectionDropdownModel.js';
+
+/**
+ * Model storing state of a selection of predfined numerical comparison operators
+ */
+export class NumericComparisonOperatorSelectionModel extends SelectionDropdownModel {
+    /**
+     * Constructor
+     * @param {string} [defaultOperator = '='] one of ['<', '<=', '=', '>=', '>'] operators
+     */
+    constructor(defaultOperator = '=') {
+        super({
+            availableOptions: ['<', '<=', '=', '>=', '>'].map((op) => ({ value: op })),
+            multiple: false,
+            allowEmpty: false,
+            defaultSelection: [{ value: defaultOperator }],
+        });
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    get selected() {
+        return super.selected[0];
+    }
+}

lib/public/components/Filters/common/filters/NumericFilterModel.js

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { NumericComparisonOperatorSelectionModel } from './NumericComparisonOperatorSelectionModel.js';
+import { Observable } from '/js/src/index.js';
+
+/**
+ * Model storing state of a expected value of something with respect of comprison operator
+ */
+export class NumericFilterModel extends Observable {
+    /**
+     * Constructor
+     * @param {object} configuration configration
+     * @param {number} [configration.minValue] minimal value allowed in model
+     * @param {number} [configration.maxValue] maximum value allowed in model
+     * @param {number} [configration.defaultOperator] defaultOperator one of ['<', '<=', '=', '>=', '>'] operators
+     */
+    constructor({ min, max, defaultOperator }) {
+        super();
+
+        this._minValue = min;
+        this._maxValue = max;
+
+        this._operatorSelectionModel = new NumericComparisonOperatorSelectionModel(defaultOperator);
+        this._operatorSelectionModel.observe(() => {
+            if (this._value !== null) {
+                this.notify();
+            }
+        });
+
+        this._value = null;
+    }
+
+    /**
+     * Get minimum allowed value
+     */
+    get minValue() {
+        return this._minValue;
+    }
+
+    /**
+     * Get maximum allowed value
+     */
+    get maxValue() {
+        return this._maxValue;
+    }
+
+    /**
+     * Reset to default
+     * @return {void}
+     */
+    reset() {
+        this._value = null;
+        this._operatorSelectionModel.reset();
+    }
+
+    /**
+     * Get value - operand to comparison
+     */
+    get value() {
+        return this._value;
+    }
+
+    /**
+     * Set current value of operand
+     * @param {number} value value
+     */
+    set value(value) {
+        this._value = value;
+        this.notify();
+    }
+
+    /**
+     * Get operator selection model
+     */
+    get operatorSelectionModel() {
+        return this._operatorSelectionModel;
+    }
+}

lib/public/components/Filters/common/filters/amountFilter.js

@@ -14,60 +14,36 @@
 import { comparisonOperatorFilter } from './comparisonOperatorFilter.js';
 import { h } from '/js/src/index.js';
 
-/**
- * @callback filterChangeHandler
- * @param {{operator: string, limit: (number|number)}|null} newFilter the new filter value
- */
-
 /**
  * Returns a component which provide an amount filter, allowing to choose a limit and the comparison operator to apply
  *
- * @param {{operator: string, limit: (number|null)}|null} currentValue the operator to use to compare the limit to the actual
- *     values
- * @param {filterChangeHandler} onChange callback called any time the operator OR the limit changes
- * @param {{operatorAttributes: (object|undefined), limitAttributes: (object|undefined)}} options eventual options to configure the filter: use
- *     `operatorAttributes` to define the attributes of the operator selection component and `limitAttributes` to define the attributes of the
- *     limit input component
+ * @param {NumericFilterModel} numericFilterModel filter model
+ * @param {{operatorAttributes: (object|undefined), operandAttributes: (object|undefined)}} options eventual options to configure the filter: use
+ *     `operatorAttributes` to define the attributes of the operator selection component and `operandAttributes` to define the attributes of the
+ *     operand input component
  *
- * @return {vnode} the component
+ * @return {Component} the filter component
  */
-export const amountFilter = (currentValue, onChange, options) => {
-    const { operator, limit } = currentValue || { operator: '=', limit: null };
-    const { operatorAttributes = {}, limitAttributes = {} } = options;
-
-    // eslint-disable-next-line require-jsdoc
-    const updateFilter = ({ newOperator, newLimit }) => {
-        onChange({
-            operator: newOperator || operator,
-            limit: newLimit !== undefined ? newLimit : limit,
-        });
-    };
+export const amountFilter = (numericFilterModel, options) => {
+    const { operatorSelectionModel } = numericFilterModel;
 
     return comparisonOperatorFilter(
         h('input.flex-grow', {
             type: 'number',
-            min: 0,
-            value: limit,
+            min: numericFilterModel.minValue,
+            max: numericFilterModel.maxValue,
+            value: numericFilterModel.value,
             oninput: (e) => {
-                let newLimit;
-
-                if (e.target.value === '') {
-                    newLimit = null;
+                const { value } = e.target;
+                if (value === '') {
+                    numericFilterModel.value = null;
                 } else {
-                    const value = parseInt(e.target.value, 10);
-                    if (!isNaN(value)) {
-                        newLimit = value;
-                    }
-                }
-
-                if (newLimit !== undefined && newLimit !== limit) {
-                    updateFilter({ newLimit });
+                    numericFilterModel.value = Number(value);
                 }
             },
-            ...limitAttributes,
+            ...options.operandAttributes,
         }, ''),
-        operator,
-        (newOperator) => updateFilter({ newOperator }),
-        operatorAttributes,
+        operatorSelectionModel,
+        options.operatorAttributes,
     );
 };