Hide the second value of constraints based on which operator is selected.

This commit is contained in:
Jan Böhmer 2022-08-20 00:39:09 +02:00
parent d3a42cd989
commit b11ef1d60d
2 changed files with 29 additions and 4 deletions

View file

@ -0,0 +1,21 @@
import {Controller} from "@hotwired/stimulus";
export default class extends Controller {
static targets = ["operator", "thingsToHide"];
connect() {
this.update();
debugger;
}
/**
* Updates the visibility state of the value2 input, based on the operator selection.
*/
update()
{
for (const thingToHide of this.thingsToHideTargets) {
thingToHide.classList.toggle("d-none", this.operatorTarget.value !== "BETWEEN");
}
}
}

View file

@ -1,9 +1,13 @@
{% block number_constraint_widget %}
<div class="input-group">
{{ form_widget(form.operator, {"attr": {"class": "form-select"}}) }}
<div class="input-group" {{ stimulus_controller('filters/number_constraint') }}>
{{ form_widget(form.operator, {"attr": {
"class": "form-select",
"data-filters--number-constraint-target": "operator",
"data-action": "change->filters--number-constraint#update"
}}) }}
{{ form_widget(form.value1) }}
<span class="input-group-text">AND</span>
{{ form_widget(form.value2) }}
<span class="input-group-text d-none" {{ stimulus_target('filters/number_constraint', 'thingsToHide') }}>AND</span>
{{ form_widget(form.value2, {"attr": {"class": "d-none", "data-filters--number-constraint-target": "thingsToHide"}}) }}
{% if form.vars["text_suffix"] %}
<span class="input-group-text">{{ form.vars["text_suffix"] }}</span>
{% endif %}