[O2B-532] Minor improvements to selection dropdown

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' },
 ]);
 
 /**

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
  */
 
 /**
@@ -277,6 +278,15 @@ 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;
+    }
+
     /**
      * Return the list of currently selected options
      *

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 selector = option.selector ?? option.value;
+
+            return h(
+                'label.dropdown-option.form-check-label.flex-row.g2.ph2.pv1',
+                { key: selector },
+                [
+                    h(
+                        `input#${selectorPrefix}dropdown-option-${selector}`,
+                        {
+                            type: selectionDropdownModel.multiple ? 'checkbox' : 'radio',
+                            name: `${selectorPrefix}dropdown-option-${selectionDropdownModel.multiple ? selector : 'group'}`,
+                            checked,
+                            onchange: (e) => onChange(option, e.target.checked),
+                        },
+                    ),
+                    option.label || option.value,
+                ],
+            );
+        };
     }
 
     if (displaySelectionItem === null) {