Pular para o conteúdo

Programando Soluções

Como fazer os filtros para as tarefas – ToDo List parte 5

  • por
filtros

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.

Referências

https://bootstrap-vue.org/

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok