[O2B-536] Minor improvements to selection dropdown (#1828)

* [O2B-532] Minor improvements to selection dropdown * Use checkboxes also if selection can be empty * Fix linter * Fix selector
AliceO2Group · Jan 31, 2025 · d333be2 · d333be2
1 parent f3937b5
commit d333be2
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 31 deletions.
diff --git a/lib/public/components/Filters/common/combinationOperatorChoiceComponent.js b/lib/public/components/Filters/common/combinationOperatorChoiceComponent.js
@@ -30,16 +30,23 @@ export const combinationOperatorChoiceComponent = (combinationOperatorModel, con
         '.form-group-header.flex-row',
         // Available options are always an array
         combinationOperatorModel.options.map((option) => h('.form-check.mr2', [
-            h('input.form-check-input', {
-                onclick: () => combinationOperatorModel.select(option),
-                id: `${selectorPrefix}combination-operator-radio-button-${option.value}`,
-                checked: combinationOperatorModel.isSelected(option),
-                type: 'radio',
-                name: selectorPrefix,
-            }),
-            h('label.form-check-label', {
-                for: `${selectorPrefix}combination-operator-radio-button-${option.value}`,
-            }, option.label),
+            h(
+                'input.form-check-input',
+                {
+                    onclick: () => combinationOperatorModel.select(option),
+                    id: `${selectorPrefix}combination-operator-radio-button-${option.value}`,
+                    checked: combinationOperatorModel.isSelected(option),
+                    type: 'radio',
+                    name: selectorPrefix,
+                },
+            ),
+            h(
+                'label.form-check-label',
+                {
+                    for: `${selectorPrefix}combination-operator-radio-button-${option.value}`,
+                },
+                option.label || option.value,
+            ),
         ])),
     );
 };
diff --git a/lib/public/components/Filters/common/filters/ComparisonSelectionModel.js b/lib/public/components/Filters/common/filters/ComparisonSelectionModel.js
@@ -14,11 +14,11 @@
 import { SelectionDropdownModel } from '../../../common/selection/dropdown/SelectionDropdownModel.js';
 
 const numericalComparisonOptions = Object.freeze([
-    { label: '<', value: 'lt' },
-    { label: '<=', value: 'le' },
-    { label: '=', value: 'eq' },
-    { label: '>=', value: 'ge' },
-    { label: '>', value: 'gt' },
+    { value: '<', selector: 'lt' },
+    { value: '<=', selector: 'le' },
+    { value: '=', selector: 'eq' },
+    { value: '>=', selector: 'ge' },
+    { value: '>', selector: 'gt' },
 ]);
 
 /**

diff --git a/lib/public/components/Filters/common/filters/FloatComparisonFilterModel.js b/lib/public/components/Filters/common/filters/FloatComparisonFilterModel.js
@@ -69,7 +69,7 @@ export class FloatComparisonFilterModel extends FilterInputModel {
      */
     get value() {
         return {
-            operator: this._operatorSelectionModel.selectedOptions[0].label,
+            operator: this._operatorSelectionModel.current,
             operand: this._operandInputModel.value,
         };
     }

diff --git a/lib/public/components/common/selection/SelectionModel.js b/lib/public/components/common/selection/SelectionModel.js
@@ -17,6 +17,7 @@ import { Observable, RemoteData } from '/js/src/index.js';
  * @property {number|string} value The id of the object this is used to see if it is checked.
  * @property {Component} [label] The representation of the option (if null, value is used as label)
  * @property {string} [rawLabel] The string only representation of the option, useful if the label is not a string
+ * @property {string} [selector] If the value of the option is not a valid CSS, this is used to define option's id
  */
 
 /**
@@ -286,6 +287,24 @@ export class SelectionModel extends Observable {
         return this.selected[0];
     }
 
+    /**
+     * States if the selection allows for multiple options to be chosen at the same time
+     *
+     * @return {boolean} true if multiple options are allowed
+     */
+    get multiple() {
+        return this._multiple;
+    }
+
+    /**
+     * States if the selection is allowed to be empty
+     *
+     * @return {boolean} true if the selection can be empty
+     */
+    get allowEmpty() {
+        return this._allowEmpty;
+    }
+
     /**
      * Return the list of currently selected options
      *

diff --git a/lib/public/components/common/selection/dropdown/selectionDropdown.js b/lib/public/components/common/selection/dropdown/selectionDropdown.js
@@ -132,21 +132,26 @@ export const selectionDropdown = (selectionDropdownModel, configuration) => {
     const selectorPrefix = cleanPrefix(configuration.selectorPrefix);
 
     if (displayOption === null) {
-        displayOption = (option, checked, onChange, selectorPrefix) => h(
-            'label.dropdown-option.form-check-label.flex-row.g2.ph2.pv1',
-            { key: option.value },
-            [
-                h(
-                    `input#${selectorPrefix}dropdown-option-${option.value}`,
-                    {
-                        type: 'checkbox',
-                        checked,
-                        onchange: (e) => onChange(option, e.target.checked),
-                    },
-                ),
-                option.label || option.value,
-            ],
-        );
+        displayOption = (option, checked, onChange, selectorPrefix) => {
+            const key = option.selector ?? option.value;
+
+            return h(
+                'label.dropdown-option.form-check-label.flex-row.g2.ph2.pv1',
+                { key },
+                [
+                    h(
+                        `input#${selectorPrefix}dropdown-option-${key}`,
+                        {
+                            type: selectionDropdownModel.multiple || selectionDropdownModel.allowEmpty ? 'checkbox' : 'radio',
+                            name: `${selectorPrefix}dropdown-option-${selectionDropdownModel.multiple ? key : 'group'}`,
+                            checked,
+                            onchange: (e) => onChange(option, e.target.checked),
+                        },
+                    ),
+                    option.label || option.value,
+                ],
+            );
+        };
     }
 
     if (displaySelectionItem === null) {