I have an index page where I have to filter Invoices by due_date to prepare them for mass edition. The idea is to keep the submit button disabled until a start_date and end_date have been selected.
I have the following simple_form working with flatpickrJS and I have added data-targets to it's input fields:
<div class="col-md-6 my-2">
<%= simple_form_for :date_params, { url: admin_invoices_batch_edit_index_path, method: :get } do |f| %>
<%= f.input :start_date, as: :string, placeholder: "Start date for filter",
input_html: { data:{ controller: "flatpickr", target: "required",
attributes:{ enableTime: false, enableSeconds: false } } }
%>
<%= f.input :end_date, as: :string, placeholder: "End date for filter", input_html: { data:{ controller: "flatpickr", target: "required",
attributes:{ enableTime: false, enableSeconds: false } }
}
%>
<%= f.button :submit, "Filtrar por fecha" %>
<% end %>
</div>
I also have this other simple_form to select a due_date to which all Invoices will be updated, and I need to keep this form's submit button disabled until all required targets have been selected (that is until a start and end date has been selected in the first form).
<div class="col-md-6 my-2" data-controller="activable">
<%= simple_form_for :due_date, { url: admin_invoices_batch_edit_index_path } do |f| %>
<%= f.input :due_date, as: :string, placeholder: "Nueva fecha de recibo",
input_html: { data:{ controller: "flatpickr",
attributes:{ enableTime: false, enableSeconds: false } } }
%>
<% if params[:date_params].present? %>
<%= hidden_field_tag :start_date, params[:date_params][:start_date] %>
<%= hidden_field_tag :end_date, params[:date_params][:end_date] %>
<% end %>
<%= f.button :submit, "Update Invoices", id: "deactivable-submit", disabled: true %>
<% end %>
</div>
This is my Stimulus controller but I don't know how to check that all requiredTargets have been selected so the disabled button gets enabled.
import { Controller } from 'stimulus';
export default class extends Controller {
static targets = ['deactivable required']
initialize() {
}
connect() {
this.requiredTargets.forEach((element) => {
element.config.onChange.push(function() { } ); })
// check that all required targets have been selected?
}
toggle(){
this.deactivableTargets.toggleAttribute("disabled");
}
}