Entrar Ainda não tem acesso?
1
resposta

Melhorando a função de editar (dúvidas)

Referente ao curso JavaScript: manipulando objetos

por Lucas Silva Marra
| 169.8k xp | 25 posts

Eu vi que ao tentar editar um item, é possivel editar esse item para um igual a outro da lista. Pensando nisso tentei arrumar esse problema:

function salvarEdicao() {

    const itemEditado = document.querySelector(`[data-value="${itemAEditar}"] input[type="text"]`);
    
    const checarDuplicado = listaDeItens.some(elemento => elemento.valor.toUpperCase() === itemEditado.value.toUpperCase())

        if (checarDuplicado) {
            alert("Item já existe");
        } else {
            listaDeItens[itemAEditar].valor = itemEditado.value;
            itemAEditar = -1;
            itemEditado.setAttribute('disabled', true);
            mostrarItem();
        }
}

Dessa forma, consegui corrigir esse problema mas outro apareceu: Se eu tento apenas sair da edição sem modificar nada, como a checagem é feita antes de tentar salvar o item, ele acusa q o item já existe. Como posso fazer com q a função reconheça q o item n foi modificado e assim me deixar sair/salvar o item n editado?

Eu pensei em criar um botão para sair da edição mas queria ver se existe uma possibilidade mais direta e "esperta".

1 resposta
por Lorena Garcia
| 8499.1k xp | 12427 posts
Alura Scuba Team Suporte Educacional

Oi Lucas, tudo bem?

Você pode adicionar uma verificação para ver se o valor do item editado é o mesmo que o valor original antes de verificar se ele é duplicado. Se o valor não mudou, você pode simplesmente sair da função de edição. Aqui está um exemplo de como você pode fazer isso:

function salvarEdicao() {

    const itemEditado = document.querySelector(`[data-value="${itemAEditar}"] input[type="text"]`);

    // Verifica se o valor do item editado é o mesmo que o valor original
    if (itemEditado.value.toUpperCase() === listaDeItens[itemAEditar].valor.toUpperCase()) {
        itemAEditar = -1;
        itemEditado.setAttribute('disabled', true);
        mostrarItem();
        return;
    }

    const checarDuplicado = listaDeItens.some(elemento => elemento.valor.toUpperCase() === itemEditado.value.toUpperCase())

    if (checarDuplicado) {
        alert("Item já existe");
    } else {
        listaDeItens[itemAEditar].valor = itemEditado.value;
        itemAEditar = -1;
        itemEditado.setAttribute('disabled', true);
        mostrarItem();
    }
}

Neste exemplo, adicionamos uma verificação no início da função salvarEdicao(). Se o valor do item editado for o mesmo que o valor original, nós simplesmente saímos da função de edição e atualizamos a visualização do item.

Lembrando que este é apenas uma ideia de como você pode fazer, você pode fazer modificações para o que achar melhor ou que se encaixa melhor para o que você deseja.

Espero que tenha te ajudado nessa luz.

Um abraço e bons estudos.