Entrar Ainda não tem acesso?
1
resposta

Aplicação não desseleciona a tarefa concluída

Referente ao curso JavaScript na Web: armazenando dados no navegador, no capítulo Removendo tarefas e atividade Concluindo as tarefas

por Vitor da Costa Domith
| 115.8k xp | 5 posts

Estava com dúvida nessa questão, principalmente por conta da seguinte que é implementado a função de remoção de tarefas. Algo que ocorreu no teste foi:

  1. A tarefa foi concluída e se manteve selecionada, porém ao clicar nela não era possível desselecioná-la.
  2. Cliquei no botão para deletar, mesmo editando outra tarefa, porém a que estava selecionada era a que já tinha concluída.
  3. A tarefa que foi deletada foi a concluída e não a que eu queria deletar.

O que alterei foi, dentro da função CreateTask(), na parte do SvgIcon.addEvetnListener, acrescentei 3 linhas de código que removem a classe que dá o visual de selecionado ao li, remove a tarefaSleecionada da memória e o texto da descrição da tarefa selecionada:

// Código omitido

svgIcon.addEventListener("click", (event) => {
    if (tarefa == tarefaSelecionada) {
      event.stopPropagation();
      button.setAttribute("disabled", true);
      li.classList.add("app__section-task-list-item-complete");
      tarefaSelecionada.concluida = true;
      updateLocalStorage();
      
      // Lógica para desseleção automática da tarefa quando concluída, para evitar erros
      li.classList.remove("app__section-task-list-item-active")  
      tarefaSelecionada = null
      taskActiveDescription.textContent = null
    }

// Código omitido
1 resposta
por Renan Cezar Wuicik
| 2955.4k xp | 6074 posts
Instrutor Suporte Educacional Start By Alura

Olá Vitor! Tudo ok contigo?

Sua abordagem para desselecionar automaticamente a tarefa quando ela é concluída é válida e efetiva. No entanto, é importante salientar que essa não é a única maneira de lidar com essa situação.

A lógica que você implementou dentro do svgIcon.addEventListener faz com que, ao concluir uma tarefa, ela seja automaticamente desselecionada. Isso é feito removendo a classe CSS que dá a aparência de "selecionado" ao item da lista (li), removendo a tarefaSelecionada da memória e limpando o texto da descrição da tarefa selecionada.

svgIcon.addEventListener("click", (event) => {
    if (tarefa == tarefaSelecionada) {
      event.stopPropagation();
      button.setAttribute("disabled", true);
      li.classList.add("app__section-task-list-item-complete");
      tarefaSelecionada.concluida = true;
      updateLocalStorage();
      
      // Lógica para desseleção automática da tarefa quando concluída, para evitar erros
      li.classList.remove("app__section-task-list-item-active")  
      tarefaSelecionada = null
      taskActiveDescription.textContent = null
    }

Essa abordagem resolve o problema que você estava enfrentando, onde a tarefa concluída permanecia selecionada e era deletada mesmo quando você estava tentando deletar outra tarefa.

Uma alternativa a essa abordagem seria modificar a lógica de exclusão de tarefas para verificar se a tarefa que está sendo excluída é a mesma que a tarefa atualmente selecionada. Se for, então a tarefa selecionada poderia ser alterada para null antes de a tarefa ser excluída.

Era isso. Espero ter ajudado!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓