Entrar Ainda não tem acesso?
2
respostas

Só consigo fazer o filtro aparecer se eu colocar um espaço no fim da descrição

Referente ao curso Vue3: composition API e Vuex, no capítulo Reatividade e atividade Reagindo a mudanças

por Nathalia Fernandes Rebouças
| 141.9k xp | 36 posts

TAREFAS.VUE

<template>

      <div class="column is-three-quarter conteudo">

        <FormularioVue @aoSalvarTarefa="salvarTarefa"/>

        <div class="lista">
          <div class="field">
            <p class="control has-icons-left ">
              <input class="input" type="text" placeholder="Digite a sua pesquisa" v-model="filtro"/>
              <span class="icon is-small is-left">
                <i class="fas fa-search"></i>
              </span>
            </p>
          </div>

          <Tarefa v-for="tarefa in tarefas" :key="tarefa.id" :tarefa="tarefa" @aoClicar="selecionarTarefa"/>

          <Box v-if="listaEstaVazia()">
            Você não está produtivo hoje :(
          </Box>


          <div class="modal" :class="{'is-active': tarefaSelecionada}" v-if="tarefaSelecionada">
            <div class="modal-background"></div>
            <div class="modal-card">
              <header class="modal-card-head">
                <p class="modal-card-title">Editar Tarefa </p>
                <button class="delete" aria-label="close" @click="fechar()"></button>
              </header>
              <section class="modal-card-body">
                <div class="field">
                  <label for="descricaoDaTarefa" class="label">Descrição da Tarefa</label>
                  <input type="text" class="input" id="descricaoDaTarefa" v-model="tarefaSelecionada.descricao" >
                </div>              
              </section>
              <footer class="modal-card-foot">
                <button class="button is-success" @click="editaTarefa">Salvar</button>
                <button class="button" @click="fechar()">Cancelar</button>
              </footer>
            </div>
          </div>
        </div>

      </div>

</template>

<script lang="ts">
import {computed, defineComponent, ref, watchEffect } from 'vue';
import FormularioVue from '../components/Formulario.vue';
import Tarefa from '../components/Tarefa.vue';
import Box from '../components/Box.vue';
import ITarefa from '../interfaces/ITarefa';
import { useStore } from '@/store';
import {ALTERAR_TAREFA, CADASTRAR_TAREFA, OBTER_PROJETOS } from '@/store/tipo-acoes'
// import { notificacaoMixin } from '@/mixins/notificar';
import { TipoNotificacao } from '@/interfaces/INotificacao';
import useNotificador from '@/hooks/notificador';
import { OBTER_TAREFAS } from '@/store/tipo-acoes';

export default defineComponent({
  name: 'Tarefas',
  components: {
    FormularioVue,
    Tarefa,
    Box
  },
  //estado do componente que retorna um objeto
  data () {
    return{
      modoEscuroAtivo: false,
      tarefaSelecionada: null as ITarefa | null
    }
  },
  // mixins: [notificacaoMixin],
  methods:{
    salvarTarefa (tarefa: ITarefa){
      this.notificar('Tarefa Finalizada','Tarefa completada com sucesso', TipoNotificacao.SUCESSO)
      this.store.dispatch(CADASTRAR_TAREFA, tarefa);

    },
    trocarTema(modoEscuroAtivo: boolean){
      this.modoEscuroAtivo = modoEscuroAtivo;
    },
    listaEstaVazia(): boolean{
      return this.store.state.tarefa.tarefas.length == 0
    },
    selecionarTarefa(tarefa:ITarefa){
      this.tarefaSelecionada = tarefa;
    },
    fechar(){
      this.tarefaSelecionada = null;
    },
    editaTarefa(){
      this.store.dispatch(ALTERAR_TAREFA, this.tarefaSelecionada);
      this.fechar()

    }
  },

  setup (){
    const store = useStore();
    store.dispatch(OBTER_TAREFAS);
    store.dispatch(OBTER_PROJETOS);
    const {notificar} = useNotificador();

    const filtro = ref("");

    watchEffect(() => {
      store.dispatch(OBTER_TAREFAS, filtro.value);
    })

    return{
      tarefas: computed(() => store.state.tarefa.tarefas),
      notificar,
      store,
      filtro,
    }
  }
});
</script>
2 respostas
por Nathalia Fernandes Rebouças
| 141.9k xp | 36 posts

STORE/MODULOS/TAREFAS/INDEX.TS

import http from "@/http";
import IProjeto from "@/interfaces/IProjeto";
import ITarefa from "@/interfaces/ITarefa";
import { Estado } from "@/store";
import { OBTER_TAREFAS, CADASTRAR_TAREFA, REMOVER_TAREFA, ALTERAR_TAREFA } from "@/store/tipo-acoes";
import { ADICIONA_TAREFA, EXCLUI_TAREFA, DEFINIR_TAREFAS, ALTERA_TAREFA } from "@/store/tipo-mutacoes";
import { Module } from "vuex";

export interface EstadoTarefa {
    tarefas: ITarefa[]
}

export const tarefa: Module<EstadoTarefa,Estado> = {
    state: {
        tarefas: [],
    },    
    mutations: {
        [ADICIONA_TAREFA](state, tarefa:ITarefa){
            state.tarefas.push(tarefa)
        },
        [EXCLUI_TAREFA](state, id: string){
            state.tarefas = state.tarefas.filter(tar => tar.id != id);
        },
        [DEFINIR_TAREFAS](state, tarefas: ITarefa[]){
            state.tarefas = tarefas
        },
        [ALTERA_TAREFA](state, tarefa:ITarefa){
            const index = state.tarefas.findIndex(tar => tar.id == tarefa.id)
            state.tarefas[index] = tarefa
        },
    },
    actions: {
        [OBTER_TAREFAS]({ commit }, filtro: string){
            let url = 'tarefas';

            if(filtro){
                url += '?descricao=' + filtro
            }

            http.get(url).then(resposta => commit(DEFINIR_TAREFAS, resposta.data));
        },
        [CADASTRAR_TAREFA]({commit}, tarefa: IProjeto){
            return http.post('tarefas', tarefa).then(resposta => commit(ADICIONA_TAREFA, resposta.data))
        },
        [REMOVER_TAREFA]({commit}, id:string){
            return http.delete(`tarefas/${id}`)
            .then(()=> commit(EXCLUI_TAREFA, id))
        },
        [ALTERAR_TAREFA]({commit}, tarefa:ITarefa){
            return http.put(`tarefas/${tarefa.id}`, tarefa)
            .then(() => commit(ALTERA_TAREFA, tarefa))
        }
    }
}
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Olá Nathalia, tudo bem?

Uma sugestão é testar o método trim() para remover os espaços em branco no início e no fim do valor digitado no input de pesquisa. Dessa forma, o filtro irá funcionar corretamente, mesmo que não haja espaços em branco no fim da descrição.

Note que adicionamos o .trim ao final do v-model. Isso irá garantir que os espaços em branco no início e no fim do valor digitado serão removidos.

Fico à disposição.

Desejo um bom dia e bons estudos.