Pacientes Repetidos. Explicação do Professor Geovani Granieri há 2 anos. | JavaScript: programando na linguagem da web

Olá Mestres, acompanhei os códigos registrados na dúvida do colega Vinicius Lande de Sale e tentei registrar em meu código essa adaptação. Acho que não deu certo por algum erro. Poderiam me ajudar?

No form.js:

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault();
  var pacientesTabela = document.querySelectorAll('.info-nome');
  var pacientesAtuais = separarNome(pacientesTabela);
  var form = document.querySelector("#form-adiciona");
  var paciente = obtemPacienteDoFormulario(form);
  var erros = validaPaciente(paciente);


function separarNome (pacientesTabela){
  const pacientes = [];
  pacientesTabela.forEach(function (paciente){
    pacientes.push(paciente.textContent);
  });
  return pacientes;
}

function pacientesNaoExistentes (pacientesAtuais, novosPacientes){
  var resultado = [];
  novosPacientes.forEach(function(paciente){
    if(!pacientesAtuais.include(paciente.nome)){
      resultado.push(paciente);
    };
  });
  return resultado;
}

no buscar-paciente.js

  xhr.open("GET", "http://api-pacientes.herokuapp.com/pacientes");

    xhr.addEventListener("load", function(){
      var erroAjax = document.querySelector("#erro-ajax");
      if (xhr.status == 200){
        erroAjax.classList.add("invisivel")
        var resposta = xhr.responseText;
        var pacientes = JSON.parse(resposta);
        var pacientesNaoRepetidos = pacientesNaoExistentes(pacientesAtuais, pacientes);
        pacientesNaoRepetidos.forEach(function(paciente) {
          adicionaPacienteNaTabela(paciente);
        });
        botaoAdicionar.disabled = true;
      }else {
        console.log(xhr.status);
        console.log(xhr.responseText);
        erroAjax.classList.remove("invisivel");
      };

    });

  xhr.send();

});

Olá Evaldo, como você está?

Peço desculpas pela demora em obter um retorno.

Fico feliz em ver que você está utilizando os recursos disponíveis no fórum para solucionar seus problemas. É um ótimo caminho para se desenvolver e aprender. Parabéns pela iniciativa!

Quanto a evitar pacientes duplicados, 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.

Gif com a apresentação da tela do navegador contendo uma tabela e um formulário.

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!

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