2
respostas

Não esta selecionando e nem editando mais

Após editar "const selecionaTarefa", não estou conseguindo mais editar nem selecionar nenhuma das tarefas. Está aparecendo um erro, até mesmo no VS e não consigo encontrar onde pode ser.

const taskinstContainer = document.querySelector('.app__section-task-list');

const formTask = document.querySelector('.app__form-add-task');
const toggleFormTaskBtn = document.querySelector('.app__button--add-task');
const formLabel = document.querySelector('.app__form-label');

const textArea = document.querySelector('.app__form-textarea');

const taskAtiveDescription =document.querySelector('.app__section-active-task-description')
const botaoCancelar = document.querySelector('.app__form-footer__button--cancel');
const btnCancelar = document.querySelector('.app__form-footer__button--cancel');

const localStorageTarefas = localStorage.getItem('tarefas')
let tarefas = localStorageTarefas ? JSON.parse(localStorageTarefas) : [];


const taskIconSvg = `
<svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24"
    fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="12" fill="#FFF" />
    <path
        d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z"
        fill="#01080E" />
</
`
let tarefaSelecionada = null
let itemTarefaSelecionada = null

let tarefaEmEdicao = null
let paragrafoEmEdicao = null

const selecionaTarefa = (tarefa, elemento) => {
    if(tarefa.concluida){
        return
    }
}

    document.querySelectorAll('.app__section-task-list-item-active').forEach(function (button) {
        button.classList.remove('app__section-task-list-item-active')
    })
    
    if (tarefaSelecionada == tarefa) {
        taskAtiveDescription.textContent = null
        itemTarefaSelecionada = null
        tarefaSelecionada = null
        return
    }
    
    tarefaSelecionada = tarefa
    itemTarefaSelecionada = elemento
    taskAtiveDescription.textContent = tarefa.descricao
    elemento.classList.add('app__section-task-list-item-active')
}

const limparForm = () => {
    tarefaEmEdicao = null
    paragrafoEmEdicao = null
    textArea.value = ''
    formTask.classList.add('hidden')
}

const selecionaTarefaParaEditar = (tarefa, elemento) => {
    if(tarefaEmEdicao == tarefa){
        limparForm()
        return
    }

    formLabel.textContent='Editando tarefa';
    tarefaEmEdicao = tarefa;
    paragrafoEmEdicao = elemento;
    textArea.value = tarefa.descricao
    formTask.classList.remove('hidden')
}

function createTask(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item')

    const svgIcon = document.createElement('svg')
    svgIcon.innerHTML = taskIconSvg

    const paragraph = document.createElement('p')
    paragraph.classList.add('app__section-task-list-item-description')

    paragraph.textContent = tarefa.descricao

    const button = document.createElement('button')
2 respostas

//adicionando um botão com logo

    button.classList.add('app_button-edit')
    const editIcon = document.createElement('img')
    editIcon.setAttribute('src', '/imagens/edit.png')

    button.appendChild(editIcon)

    button.addEventListener('click', (event) => {
        event.stopPropagation()
        selecionaTarefaParaEditar(tarefa,paragraph)
    })
    li.onclick = () => {
        selecionaTarefa(tarefa, li)
    }

    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()
        }
       
    })


    if(tarefa.concluida){
        button.setAttribute('disabled', true)
        li.classList.add('.app__section-task-list-item-complete')
    }

    li.appendChild(svgIcon)
    li.appendChild(paragraph)
    li.appendChild(button)

    return li
}

tarefas.forEach(task => {
    const taskItem = createTask(task)
    taskinstContainer.appendChild(taskItem)
})

botaoCancelar.addEventListener('click', () => {
    formTask.classList.toggle('hidden')
})

btnCancelar.addEventListener('click', limparForm)

toggleFormTaskBtn.addEventListener('click', () => {
    formLabel.textContent = 'Adicionando tarefa'
    formTask.classList.toggle('hidden')
})

const updateLocalStorage = () => {
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
}

formTask.addEventListener('submit', (evento) => {
    evento.preventDefault()
    if(tarefaEmEdicao){
        tarefaEmEdicao.descricao = textArea.value
        paragrafoEmEdicao.textContent = textArea.value
    }else {
    const task = {
        descricao: textArea.value,
        concluida: false
    }
    tarefas.push(task)
    const taskItem = createTask(task)
    taskinstContainer.appendChild(taskItem)
    }
    updateLocalStorage();
    limparForm();
})

document.addEventListener('TarefaFinalizada', function (e){
    if(tarefaSelecionada){
        tarefaSelecionada.concluida = true
        itemTarefaSelecionada.classList.add('app__section-task-list-item-complete')
        itemTarefaSelecionada.querySelector('button').setAttribute('disable', true)
        updateLocalStorage()
    }
})

Olá, Nathalia!

Pelo código que você compartilhou, parece que há um erro na função selecionaTarefa. O bloco de código que verifica se a tarefa está concluída e retorna caso seja verdadeiro está fora do escopo da função. Por isso, a função não está fazendo o que você espera.

Para corrigir isso, você precisa mover o bloco de código abaixo do if (tarefa.concluida) { return } para dentro das chaves da função selecionaTarefa. Ficaria assim:

const selecionaTarefa = (tarefa, elemento) => {
    if(tarefa.concluida){
        return
    }

    document.querySelectorAll('.app__section-task-list-item-active').forEach(function (button) {
        button.classList.remove('app__section-task-list-item-active')
    })
    
    if (tarefaSelecionada == tarefa) {
        taskAtiveDescription.textContent = null
        itemTarefaSelecionada = null
        tarefaSelecionada = null
        return
    }
    
    tarefaSelecionada = tarefa
    itemTarefaSelecionada = elemento
    taskAtiveDescription.textContent = tarefa.descricao
    elemento.classList.add('app__section-task-list-item-active')
}

Se houver persistência, por favor, compartilhe o código completo comigo, seja no GitHub ou no Google Drive.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!