Introdução
Ter filtros em um sistema é essencial para que o usuário consiga localizar as informações que ele deseja.
Eu fiz um post falando sobre filtros a um tempo atrás, caso queira pode ver aqui.
Porém neste outro, implementei os filtros utilizando as funções de filtro do Javascript.
E neste caso, vou fazer a implementação dos filtros buscando os dados em uma API.
A API que vou fazer a busca é a API Rest Fake implementada no projeto ToDo List.
Caso você queira fazer o filtro em muitos dados, é ideal buscar esses dados já filtrados na API, filtrar na tela muitos registros, pode não ficar tão performático com o Javascript.
Este post é uma continuidade da implementação do projeto ToDo List com VueJS, caso você queira pegar o código atual do projeto, pegue aqui.
Formulário de filtro
Primeiramente vou implementar o formulário para filtrar os dados. No arquivo List.vue, abaixo da primeira div de container, vou colocar este formulário:
<b-form inline class="mb-2">
<b-form-input
v-model="filter.subject"
id="subject"
placeholder="Ex: lavar carro"
class="mr-2"
autocomplete="off"
></b-form-input>
<b-form-select
v-model="filter.status"
:options="optionsList"
class="mr-2"
></b-form-select>
<b-button
variant="outline-secondary"
class="mr-2"
>Buscar</b-button>
</b-form>
O formulário tem dois campos, um para buscar por texto, que vai buscar o título da tarefa, e o outro é um select para buscar o status da tarefa.
No formulário está sendo utilizado as variáveis para obter os valores digitados e também para carregar a lista com os status, vou declarar essas variáveis dentro do data.
data() {
return {
tasks: [],
taskSelected: [],
status: Status,
filter: {
subject: null,
status: null
},
optionsList: [
{ value: null, text: "Selecione algum status" },
{ value: Status.OPEN, text: "Aberto" },
{ value: Status.FINISHED, text: "Concluído" },
{ value: Status.ARCHIVED, text: "Arquivado" }
]
};
},
A variável optionsList é similar ao que está no Form.vue, a diferença é o primeiro objeto, que tem o value como null, isso para quando carregar o filtro na tela, aparecer a mensagem “Selecione algum status” para o usuário.
Função de filtro
Agora com o formulário na tela, vou implementar a função que vai filtrar os dados.
No botão do formulário, vou colocar um método de clique:
<b-button
variant="outline-secondary"
@click="filterTasks"
class="mr-2"
>Buscar</b-button>
E nos methods do componente, vou criar essa função:
async filterTasks() {
let filter = { ... this.filter };
filter = this.clean(filter);
this.tasks = await TasksModel.params(filter).get();
},
clean(obj) {
for(var propName in obj) {
if(obj[propName] === null || obj[propName] === undefined) {
delete obj[propName];
}
}
return obj;
},
Repare que criei duas funções, a função clean é necessária porque ela vai percorrer todas as chaves da variável this.filter e vai remover todas as chaves que não tem nenhum valor, ou seja, que o usuário não preencheu nos filtros.
Isso para que a requisição que for enviada para a API Rest Fake, mande somente os dados que são necessários no filtro.
Com isso o sistema já estará fazendo a busca com os filtros corretamente.
A busca por texto, só está fazendo a busca por ocorrências exatas, isso porque a forma que foi implementado a API Rest Fake só permite esse tipo de busca.
E sem problemas nesse caso ter esse comportamento, visto que a API Rest é somente para testes, o mais importante é o comportamento do frontend.
Limpar filtro
Depois que um filtro é preenchido, é importante criar alguma forma para o usuário limpar o filtro e consiga “resetar” essa busca.
Para isso vou criar um novo botão, ao lado do botão de busca, que será o limpar filtro, e nele vou colocar um evento de clique, para chamar o método de limpar.
<b-button
variant="outline-secondary"
@click="clearFilter"
class="mr-2"
>Limpar filtro</b-button>
E no method vou criar essa função:
async clearFilter() {
this.filter = {
subject: null,
status: null
};
this.tasks = await TasksModel.params({
status: [
this.status.OPEN,
this.status.FINISHED,
]
}).get();
}
A função de limpar, basicamente volta os valores originais da variável this.filter e refaz a busca dos dados, para que mostre as tarefas abertas e concluídas.
Vídeo
Código fonte
O código fonte está no meu CodeSandbox, neste link.
Para ver outros canais onde o posto conteúdo sobre VueJS, veja os Links do Programando Soluções.
Conclusão
Os filtros podem ajudar o usuário a buscar os dados dentro do sistema, e eles são essenciais para o uso.
Caso precise buscar em muitos registros, recomendo fazer o filtro diretamente na API, para evitar processar muitos dados no Javascript.