Блог

Я создал эти выпадающие фильтры для поиска. Теперь я должен показывать/скрывать каждый фильтр, используя второй раскрывающийся список «Добавить фильтр» с флажками.

Идея заключается в том, что, например, когда subscription_payment_type_eq флажок установлен, соответствующий фильтр (с тем же именем) отображается и скрывается, когда флажок не установлен.

 <%= search_form_for @search, url: admin_users_path, html: {class: "form-inline"} do |f| %>

  <div class="form-group hidden">
    <%= f.select :subscription_payment_type_eq, payment_types_selector_for_filter,  { include_blank: "Payment type..."}, class: "form-control gray" %>
  </div>
  <div class="form-group hidden">
    <%= f.select :address_province_eq, user_provinces_selector_for_filter, { include_blank: "Province..."}, class: "form-control gray" %>
  </div>
  <div class="form-group hidden">
    <%= f.select :subscription_status_eq, subscription_status_selector_for_filter, { include_blank: "Subscription status..."}, class: "form-control gray" %>
  </div>


  <%= f.submit "Filter", class: "btn btn-primary" %>
  <%= link_to "Remove filters", admin_users_path, class: 'btn btn-default' %>
<% end %>
 

Мы используем Стимулы.контроллеры js в нашем приложении с основными функциями скрытия/отображения.

Я пытался работать с тегами и метками флажков, но я даже не уверен, как привязать флажок к определенному f.select фильтру, чтобы начать возиться с контроллерами стимулов.

     <div class="btn-group">
      <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Add filter <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li class="m-1">
          <label>
            <%= check_box_tag 'subscription_payment_type_eq' %>
            Payment type
          </label>
        </li>
        <li class="m-1">
          <%= label_tag do %>
            <%= check_box_tag 'address_province_eq' %>
            Province
          <% end %>

        </li>
        <li class="m-1">
          <%= check_box_tag 'subscription_status_eq' %>
          <label>Subscription status</label>
        </li>
      </ul>
</div>
 

Любая помощь будет признательна.