1

I'm working on a search form that has two disperate inputs: there is 1) a search box and some dropdown selects and 2) several buttons with preset filters.

The first (search box and dropdowns) is a component which is a form, with all the search and filter options inside of it.

    <%= c :filter, :search, query_params: @table.query_params %>
      <div class="row">
        <div class="col-xs-12 col-md-3">
          <%= c :table_filter, :select,
            [
              name: :status,
              options: status_select_box(),
              operator: "eq",
              table: @table
            ]
          %>
</div>
  <% end %>

The second, the preset filters, sit above the search box and display a count of how many results they will return @count and when clicked filter based on the params passed to their @path assigns.

On the search page:

   <%= render "_btn.html",
      [
        path: search_path(@conn, :index, %{mode: "eq:filter"}),
        count: @count,
        label: "Filter 1"
      ]
    %>

_btn.html.eex

<%= link to: @path, class: "btn" do %>
  <%=
   #this is pusdo code for the button, there is a bit more logic to
how it is displayed but essentially it just shows a label and the count
   @label @count

    %>
<% end %>

Both of these forms work fine, the issue is that if someone clicks one of the preset filters, the params will not persist if they go and select a dropdown. I'm wondering what the most concise way of ensuring that the query params will persist between the two forms.

vmaroli
  • 613
  • 9
  • 21
tfantina
  • 788
  • 11
  • 37
  • What do dropdowns do? Why do you want to persist them? It looks like they part of the search form which will get rewrite by clicking on preset buttons. Should dropdowns get persisted if I just refresh the page right after selecting an option? – achempion Oct 07 '19 at 19:49
  • Dropdowns are additional filters. Let's say one of the buttons was "hardcover" and another was "softcover". Those are broad presets, but you might want to go more granular after electing "hardcover" say with a "publisher" dropdown. There is an "all" button that gets the index path (no params) effectively clearing all filters, otherwise, everything should persist. – tfantina Oct 07 '19 at 20:41
  • 1
    What I usually do when I have situation like that is make sure that all the dependent partials always use already present query params before adding the ones specific to the partial. Like, for example, the pagination partial may need to apply `search`, `order` or `category_id` query params alongside its specific params like `page`. The simplest way to reach that is to pass a map or keyword of params to reapply to the partial and then you just use something like `posts_path(@conn, :index, Map.merge(@query_params, %{page: @page}))` – NoDisplayName Oct 08 '19 at 08:08
  • If I understand correctly then I believe this is similar to what we ended up doing, see my response to @achempion for more info. – tfantina Oct 21 '19 at 20:24

1 Answers1

1

I can see several solutions for your issue.

The first one is try to approach your issue with Phoenix LiveView. You can re-render the search form after each action to update @path attribute for preset buttons.

The second one is to define your preset buttons within main search form. Then assign attribute name && value to the preset buttons with type as submit. Then on backend you can modify search attributes based on value of preset button you have clicked on (here is related answer how to do that). As you have placed your buttons within main form you can get dropdown values as well.

achempion
  • 794
  • 6
  • 17
  • There were a few issues that further complicated this; but, we ended up solving it with a hidden select box inside the main search form which would update with the params of the specific pre-selected filter. The other pre-selected filters correlated with existing select boxes so those were not causing any problems. – tfantina Oct 21 '19 at 20:24