link_to with filter param

[lpe]

On my dashboard, I would like to set up direct links to the Index / Accounts view with filters enabled (e.g. status = "check" or "block ", or due_date <= today ). I thought of creating filters but how to call them dynamically in a link_to? Thank you.

[adrianthedev]

So the easiest way to do that is to go to an Index page, set the filters how you want them, and then grab the link from the URL bar.
That link will always take you to the same state of the filters as long as you don't change anything to that filter (like the options).

I'll explain a bit about how they work.
You first configure a filer using the query and options methods. You add it to a resource and then you get to use it.
When you use it (let's say you're toggling an option to true), that filter class and that value, get added to a hash alongside with all other fields you have on your resource. Then they get base64 encoded and added to the filters URL param. The controller then fetches that filters param on the server, decodes it, and then applies the filter query method to the actual query being made with your resources.

If you're curious on seeing some code, check these files:

• https://github.com/avo-hq/avo/blob/main/app/javascript/js/controllers/filter_controller.js
• https://github.com/avo-hq/avo/blob/main/app/controllers/avo/base_controller.rb#L62
• https://github.com/avo-hq/avo/blob/main/app/controllers/avo/base_controller.rb#L334

They are Avo's first iteration of filters, and we're working on the next improved iteration with dynamic filters.

Demo below:
https://share.cleanshot.com/M86c3MGl

[adrianthedev]

Example of the path I was telling you about:
https://main.avodemo.com/avo/resources/users?page=1&filters=eyJVc2VyTmFtZXNGaWx0ZXIiOiIxIn0%3D

[lpe]

Thx for your reply. I tried this but sometimes the link change.
Ex (multipleselect filter with 2 values checked) : <%= link_to "Customers to be checked", resources_accounts_path(filters: "eyJBY2NvdW50U3RhdHVzRmlsdGVyIjpbIkJsb2NrZWQiLCJBcHByb3ZhbCJdfQ%3D%3D"), class: 'text-blue-500' %>
becomes in the browser : accounts?filters=eyJBY2NvdW50U3RhdHVzRmlsdGVyIjpbIkJsb2NrZWQiLCJBcHByb3ZhbCJdfQ%253D%253D
I am going to try to undertsand why regarding your informations base64 encoding).

[adrianthedev]

That's because eyJBY2NvdW50U3RhdHVzRmlsdGVyIjpbIkJsb2NrZWQiLCJBcHByb3ZhbCJdfQ%3D%3D is url-encoded. The actual value is eyJBY2NvdW50U3RhdHVzRmlsdGVyIjpbIkJsb2NrZWQiLCJBcHByb3ZhbCJdfQ== (notice the double equals at the end). So the %3D%3D part is encoded again as %253D%253D, thus breaking the filters.
If you manually decode the string (turn the %3D%3D to ==) it will work as expected.

<%= link_to "Customers to be checked", resources_accounts_path(filters: "eyJBY2NvdW50U3RhdHVzRmlsdGVyIjpbIkJsb2NrZWQiLCJBcHByb3ZhbCJdfQ=="), class: 'text-blue-500' %>

[niclas]

We have added

  def filter_path(filter, value)
    b64 = Base64.urlsafe_encode64(JSON({filter.to_s => value}), padding: false)
    avo.send :"resources_#{route_key}_path", filters: b64
  end

(inside a more general ResourceExtensions concern)
and use it like this:

link_to(m.owner.name, r.filter_path(OwnerFilter, m.owner.id))

(This is of course only handle single filter links at the moment...)

[adrianthedev]

That's perfect!

In case anyone is wondering about how that ResourceExtension might work, here's an article showing how to extend the ApplicationController. The principle is the same.

We're upgrading the filter experience in Avo 3. We might not use the same base 64 encoding pattern. I'm regretting that design choice.

https://share.cleanshot.com/M86c3MGl

Thanks for sharing Niclas!