Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complex filtering UI #5

Open
edisonywh opened this issue Mar 26, 2021 · 2 comments · Fixed by #10
Open

Complex filtering UI #5

edisonywh opened this issue Mar 26, 2021 · 2 comments · Fixed by #10
Labels
enhancement New feature or request

Comments

@edisonywh
Copy link
Owner

Would be nice to support a more complex filtering system with a nice UI. For example, given an index/1 that looks like:

index do
  field :name, :string, search: true
  field :age, :integer, search: true
  field :verified, :boolean, search: true
end

We know the type of the field, so we should be able to render the corresponding form fields for them (text_input for :string, number_input for :age, checkbox for :boolean). Then on field submission we can package it into a nice query params and have UserLive.Index (Backoffice.Resources) handle the query params, before passing it off to Resolvers.

e.g:

`?name=search&age=>18&verified=true&page=1" then perhaps convert it to something more structured for resolvers to work with?

Then the resolvers receives them in page_otps and can decide what to do with these fields.

@edisonywh edisonywh added the enhancement New feature or request label Mar 26, 2021
edisonywh added a commit that referenced this issue Mar 28, 2021
With this commit, Ecto resolver can now understand complex filtering
like this:

> /admin/users?inserted_at[from]=2020-12-30&inserted_at[to]=2020-12-31
> /admin/users?id=[gte]60
> /admin/users?order_by=[desc]id

But this is only the first step, the next step is to build a UI to go
along with it.

This commit also breaks the current search field, which previously searches across
multiple fields as specified by users, whereas the new filtering engine expects search per
field.

Partially fixes #5
@edisonywh
Copy link
Owner Author

I have a draft for the filtering engine behind the scene, but I'm pretty clueless about what the UI should be, so if anyone has any example of a good filtering UI, feel free to share them!

@edisonywh
Copy link
Owner Author

edisonywh commented Mar 28, 2021

image

Right now I have a UI that looks like this.

I like the way the filters are displayed (and deleteable), but the form field for adding filters needs some work. Right now we rely on user knowing filter API like status=[not]active or that you can filter between date with something like inserted_at[from]=2020-01-20&inserted_at[to]=2020-01-22, but ideally this should be all presented in the UI.

One idea is that we can maybe derive the type from the new DSL at some point, so for example:

index do
  field :age, :integer
  field :verified, :boolean
end

Then we know to render number_input for age, checkbox for verified etc.

P.S: credit where credit is due, the idea for the UI was inspired by this Dribbble post

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant