Dynamic filters: finetune dropdown list

[pjmuller]

Feature

We have a TON of dynamic filters (as we create one per belongs_to nested attribute, imagine the order resource)

Now it is a very long list (50+ filters) would be great to ORGANIZE it more

One idea is to let as inject some html attributes, and then via some custom written JS & CSS (loaded in app/views/avo/partials/_pre_head.html.erb ) make it more user friendly to add

• dividers
• nested menu

class Avo::Resources::Order < Avo::BaseResource
  def fields
    field :status, as: :select, ...
    field :customer, as: :belongs_to
  end

  # html hacky way, 80/20 all the way
  def filters
    dynamic_filter :status
    dynamic_filter :divider, type: :text, label: "----", html: { classes: "disabled section" }
    dynamic_filter :customer_group, label: "Customer ➡️", type: :text, html: { data: {filter_group_heading: "customer" }}
    dynamic_filter :customer_firstname, as: :text, html: {data: {filter_group_child: "customer" }}
  end

  # first class way, much cleaner but requires more effort of AVO
  def filters
    dynamic_filter :status
    divider # like we have in https://docs.avohq.io/3.0/actions.html#divider
    filter_group "Customer ➡️" do
       dynamic_filter :customer_firstname, as: :text
       # ...
    end
  end

end

PS: this is related to: https://github.com/avo-hq/avo/issues/3181

Current workarounds

Write even more hacky CSS/JS that will work on existing rendered DOM

[pjmuller]

@Paul-Bob ping: could you give an estimate how much time either approach would take? We might want to sponsor it

• approach 1: please budget time for both the html attribute, as well as some example JS code (? using hotwire) to remap it to a nested menu
• approach 2: full DSL path

[adrianthedev]

Hey @pjmuller how about having an in-place quick search for the initial iteration? The dropdowns might get fiddly to build and you might need/want customizations to them.

https://github.com/user-attachments/assets/7e338a9f-6539-46a8-b9e2-c48f4d3a35dc