diff --git a/lib/public/components/Filters/common/combinationOperatorChoiceComponent.js b/lib/public/components/Filters/common/combinationOperatorChoiceComponent.js index 6a69a8a5f1..f856882d46 100644 --- 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 index 198a4a3a43..d3028f7177 100644 --- 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 index 70a911913f..7ef1d8457d 100644 --- 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 index b703206e72..89cae0dd78 100644 --- 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 index c3db98eacf..a3e07de2a4 100644 --- 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) {