[Dúvida] Duplicação de dados na tabela

Olá Daniel, tudo bem com você?

Peço desculpas pela demora em lhe responder.

Para adicionarmos a lógica para evitar duplicação dos dados precisaremos de verificar se já existe um paciente com o mesmo nome na tabela. Se já existir, podemos exibir uma mensagem de erro na tela e caso o dado seja único, iremos adicioná-lo à tabela.

Vamos à prática:

Modificaremos a função adicionaPacienteNaTabela presente no arquivo forms.js. Onde, usando o método querySelector selecionamos a tabela por sua tag e usando o método querySelectorAll iremos obter uma lista dos elementos de cada linha dentro da tabela. Em seguida, basta verificar se cada novo paciente já existe na tabela antes de adicioná-lo**, verificando se o nome já está presente em um das células com a classe info-nome da tabela. Conforme apresentado no trecho do código abaixo.

var tabela = document.querySelector('table');
    var pacientesExistentes = tabela.querySelectorAll('.info-nome');
    var pacienteJaExiste = Array.from(pacientesExistentes).some(function (elemento) {
        return elemento.textContent === paciente.nome;
    });

No código acima estamos usando método some que retorna true se pelo menos um elemento no array satisfaz a condição passada, ou seja, retorna true se o paciente que vamos adicionar já está na tabela. Em seguida, caso o paciente não exista na tabela, basta adicioná-lo a ela. Usando o código abaixo.

    // se o paciente não existe na tabela, adicione-o
    if (!pacienteJaExiste) {
        var pacienteTr = montaTr(paciente);
        tabela.querySelector("#tabela-pacientes").appendChild(pacienteTr);
    } else {
        mostraMensagemDeDuplicacao('Paciente já existe. Confira novamente.');
    }

Código completo da função adicionaPacienteNaTabela

function adicionaPacienteNaTabela(paciente) {
    // verifica se o paciente já existe na tabela
    var tabela = document.querySelector('table');
    var pacientesExistentes = tabela.querySelectorAll('.info-nome');
    var pacienteJaExiste = Array.from(pacientesExistentes).some(function (elemento) {
        return elemento.textContent === paciente.nome;
    });

    // se o paciente não existe na tabela, adicione-o
    if (!pacienteJaExiste) {
        var pacienteTr = montaTr(paciente);
        tabela.querySelector("#tabela-pacientes").appendChild(pacienteTr);
    } else {
        mostraMensagemDeDuplicacao('Paciente já existe. Confira novamente.');
    }
}

Para que o usuário receba um alerta visual informando que ocorreu a tentativa de adição de um paciente repetido, podemos criar um alerta que mostra a mensagem: "Paciente já existe. Confira novamente.". Para isso, no arquivo form.js adicione a seguinte função.:

function mostraMensagemDeDuplicacao(mensagem) {
    const flashMessage = document.createElement('div');
    flashMessage.textContent = mensagem;
    flashMessage.style.position = 'fixed';
    flashMessage.style.top = '0';
    flashMessage.style.width = '100%';
    flashMessage.style.padding = '1rem';
    flashMessage.style.textAlign = 'center';
    flashMessage.style.backgroundColor = '#f44336';
    flashMessage.style.color = '#fff';
    flashMessage.style.fontWeight = 'bold';
    document.body.appendChild(flashMessage);

    setTimeout(function () {
        flashMessage.parentNode.removeChild(flashMessage);
    }, 3000);
}

A função acima é responsável por criar um alerta através de uma div e adicionar as propriedades de estilos CSS a ela e além disso, mostrará a mensagem de paciente repetido por 3 segundos na tela.

Após as mudanças realizadas, salve os arquivos. Abra o arquivo index.html no navegador e realize o carregamento dos pacientes e a tentativa de adição de um paciente repetido.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!