Filtros no Ruby On Rails com ransack e select2

Aprenda a criar filtros (e buscas) otimizados com as gems Ransack e Select2 no Ruby on Rails de uma forma fácil, ágil, e direto ao ponto!

Você pode consultar a documentação das gems nos links abaixo:

Sem mais enrolação, bora lá!

 

 

Criação do Projeto

 

Dependências:

  • Ruby
  • Rails
  • Algum banco de dados (SQLite, PostgreSQL ou MySQL)

 

 

Passo a passo

 

Preparando o Projeto

 

1 – Gere um projeto com o seguinte comando:

2 – Entre no projeto criado:

3 – Rode o seguinte Scaffold no terminal:

4 – Rode as migrations:

 

 

Buscando com o Ransack

 

1 – Coloque no seu Gemfile:

2 – Execute o bundle no seu projeto:

3 – Cole no seu config/routes.rb o seguinte código:

4 – Rode o projeto:

5 – Acessando o localhost:3000, seu projeto deve parecer com a seguinte tela:

6 – Clique em New Person e adicione alguns registros de teste:


7 – Após inserir esses registros, seu localhost:3000 deve parecer com a seguinte tela:




Agora vamos adicionar o Ransack \o/

 

1 –  Em seu controller people_controller.rb, substitua o método Index pelo seguinte código:

2 –  Em sua view people/index.html.erb, cole o seguinte código acima do <table>:

3 – Sua view deve ficar da seguinte forma:

4 – É isso!!! Ao abrir o projeto no navegador, o campo de pesquisa estará filtrando os objetos da tabela Person do banco de dados.

 

Facilitando com o Select2

 

1 – Quando você tem poucos records, fica confortável a busca nesse modo. Mas quando se tem um banco de dados muito populado, precisamos otimizar esse buscador. Para isso, o select2 consegue nos servir muito bem!!

2 – Para começar, cole o seguinte código no seu Gemfile:

3 – Rode o bundle, executando o seguinte código no terminal:

4 – Dará o seguinte erro:


5 – Rode o seguinte comando:

6 – E rode o bundle novamente com:

7 – Execute o projeto novamente!!

8 – Substitua o código do app/assets/javascripts/application.js pelo seguinte:

9 – Agora substitua o código do app/assets/stylesheets/application.css pelo seguinte:

10 – Na sua view people/index.html.erb, modifique o collection_select, deixando-o como no código abaixo:

11 – Pronto!!! Agora você tem um buscador altamente eficiente, interativo e funcional para pequenas, médias e grandes aplicações!! \o/




Conclusão


Criar filtros/buscadores é visto como uma tarefa complexa, podendo trazer bugs e te fazer perder algumas horinhas. O Ransack veio para desmistificar isso e ainda conseguimos potencializá-lo com o Select2.

Se você curtiu o artigo deixe um comentário abaixo para nos incentivar,
Obrigado o/

 



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/




Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!


O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

 

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
 📱  • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

 

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

 

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
E
stamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

5 9 votes
Article Rating
julho 1, 2020
Subscribe
Notify of
guest
6 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Amanda Leal
Amanda Leal
3 meses atrás

Parabéns pelo artigo. Conteúdo muito bom e transmitido de forma clara. Continue aassim 😀

Juliano
Juliano
3 meses atrás

Muito 10

Giovani Carvalho
Giovani Carvalho
3 meses atrás

Fiquei com uma dúvida. Esse Person.all aqui não daria uma sobrecarga na memória caso tenha 1 milhão de pessoas?

<%= search_form_for @q do |f| %>
 <%= f.label :name %>
 <%= f.collection_select :name_eq, Person.all, :name, :name, {include_blank: ‘Selecione um nome’} %>
 <%= f.submit %>
<% end %>

Last edited 3 meses atrás by Giovani
Ronald Lacerda
Ronald Lacerda
3 meses atrás

Deu até vontade de aprender Ruby! =)

Fabián Jair Torres Maldonado

Este sitio es lo máximo, los sigo desde México. Saludos, muy buen artículo

Leonardo Scorza
2 meses atrás

Muito obrigado por estar com a gente Fabián 🙂

Feito com s2 por OneBitCode
6
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: