Entrar Ainda não tem acesso?
3
respostas

[Não Respondida] Bug de adicionar novos pacientes e pesquisar pacientes diferentes e sempre aparece o novo paciente cadastrado

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Implementando a lógica de filtragem

por Icaro Henrique de Oliveira Werly
| 163k xp | 17 posts
Analista de Suporte Computacional

HTML:

<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--Gerado dinamicamente com JavaScript-->
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="./assets/css/reset.css">
        <link rel="stylesheet" type="text/css" href="./assets/css/index.css">

    </head>

    <body>

        <header>

            <div class="container">
                <h1 class="titleHeader">Aparecida Nutrição</h1>
            </div>

        </header>

        <main>

            <section class="container">

                <h2>Meus pacientes</h2>

                <div class="filtra-pacientes">

                    <label for="filtrar-tabela">Filtrar pacientes:</label>
                    <input type="text" name="filtro" class="campo-pesquisa" id="filtrar-tabela" placeholder="Digite o nome do paciente">

                </div>


                <table>

                    <thead>

                        <tr>

                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>

                        </tr>

                    </thead>

                    <tbody id="tabela-pacientes">

                        <tr class="paciente">

                            <td class="info-nome">Paulo</td>
                            <td class="info-peso">100</td>
                            <td class="info-altura">2.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>

                        </tr>

                        <tr class="paciente">

                            <td class="info-nome">João</td>
                            <td class="info-peso">80</td>
                            <td class="info-altura">1.72</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>

                        </tr>

                        <tr class="paciente">

                            <td class="info-nome">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">1.64</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>

                        </tr>

                        <tr class="paciente">

                            <td class="info-nome">Douglas</td>
                            <td class="info-peso">85</td>
                            <td class="info-altura">1.73</td>
                            <td class="info-gordura">24</td>
                            <td class="info-imc">0</td>

                        </tr>

                        <tr class="paciente">

                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>

                        </tr>

                    </tbody>

                </table>

            </section>


        </main>

        <!-- Formulário de Adição de Clientes -->
        <section class="container">

            <h2 id="titulo-form">Adicionar novo paciente</h2>
            <ul id="mensagens-erro">

            </ul>

            <form id="adiciona-form">

                <div class="grupo">

                    <label for="nome">Nome:</label>
                    <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">

                </div>

                <div class="grupo">

                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">

                </div>

                <div class="grupo">

                    <label for="altura">Altura:</label>
                    <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">

                </div>

                <div class="grupo">

                    <label for="gordura">% de Gordura:</label>
                    <input id="gordura" type="text" name="gordura" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">

                </div>

                <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>

            </form>

        </section>

        <script src="./assets/js/imcCalc.js"></script>
        <script src="./assets/js/form.js"></script>
        <script src="./assets/js/removePatient.js"></script>
        <script src="./assets/js/filter.js"></script>


    </body>

</html>

JS

var inputField = document.querySelector("#filtrar-tabela");

inputField.addEventListener("input", function() {

    console.log(this.value);

    var pacientes = document.querySelectorAll(".paciente");


    // Verifica se tem algo digitado
    if(this.value.length > 0) {

        for(var i = 0; i < pacientes.length; i++) {

            var paciente = pacientes[i];
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;
            // Criando expressões regulares
            var expressao = new RegExp(this.value, "i");

            if(!expressao.test(nome)) {

                paciente.classList.add("invisible");

            } else {

                paciente.classList.remove("invisible");

            }

        }

    } else {

        for(var i = 0; i < pacientes.length; i++) {

            var paciente = pacientes[i];

            paciente.classList.remove("invisible");

        }

    }

    console.log(pacientes);

})

Se puderem me ajudar

3 respostas
por Icaro Henrique de Oliveira Werly
| 163k xp | 17 posts
Analista de Suporte Computacional

O código do form.js

// Pegando botão Adicionar Paciente
var buttonAddPaciente = document.querySelector('#adicionar-paciente');

// Adicionando evento de clique
buttonAddPaciente.addEventListener("click", (event) => {

    // Previne o comportamento padrão dos elementos do browser
    event.preventDefault();

    // Pegando a tabela
    var tbody = document.querySelector("#tabela-pacientes");

    var form = document.querySelector('#adiciona-form');

    // Extrai informações do paciente do form
    var paciente = getDataPacientForm(form);

    // Cria uma tr e a td
    var pacienteTr = makeTr(paciente);

    var erros = validationPacient(paciente);

    if(erros.length > 0) {
        printErrorMessage(erros);

        return;
    }

    tbody.appendChild(pacienteTr);

    // Limpando os campos após o click no botão
    form.reset();

    var mensagemErroUl = document.querySelector("#mensagens-erro");

    // Após os erros serem concluidos
    clearErrorMessages(mensagemErroUl);
});

function getDataPacientForm(form) {

    // Criando um objeto Paciente
    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: imcCalc(form.peso.value, form.altura.value)
    }
    return paciente;
}

function makeTr(paciente) {
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("pacientes");

    var nomeTd =  makeTd(paciente.nome, "info-nome");
    var pesoTd = makeTd(paciente.peso, "info-peso");
    var alturaTd = makeTd(paciente.altura, "info-altura");
    var gorduraTd = makeTd(paciente.gordura, "info-gordura");
    var imcTd = makeTd(paciente.imc, "info-imc");

    pacienteTr.appendChild(nomeTd);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);
    pacienteTr.appendChild(imcTd);

    return pacienteTr;
}

function makeTd(dado, classe) {
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}

function validationPacient(paciente) {
    // Arrays de erros
    var erros = [];

    if(paciente.nome.length == 0) {
        erros.push("O nome não pode estar em branco!");
    }

    if(!validateWheight(paciente.peso)) {
        erros.push("Peso inválido!");
    }

    if(!validateHeigth(paciente.altura)) {
        erros.push("Altura invalida!");
    }

    if(paciente.gordura.length == 0) {
        erros.push("Gordura não pode estar em branco!");
    } 

    if(paciente.gordura < 0) {
        erros.push("Gordura não pode ser negativa!");
    }

    if(paciente.peso == 0) {
        erros.push("O Peso não pode estar em branco!");
    }

    if(paciente.altura == 0) {
        erros.push("A altura não pode estar em branco!");
    }
    return erros;
}

function clearErrorMessages(element) {
    element.innerHTML = "";
}

// Exibe mensagem de erros em uma lista
function printErrorMessage(erros) {
    var ul = document.querySelector("#mensagens-erro");

    // limpa as mensagens de erro
    clearErrorMessages(ul);

    erros.forEach(function(erro) {
        var li = document.createElement("li");
        li.textContent = erro;

        if(!erros.length == 0) {
            li.classList.add("erro-li");
        }
        ul.appendChild(li);
    });
}
por Icaro Henrique de Oliveira Werly
| 163k xp | 17 posts
Analista de Suporte Computacional

Código de remover pacientes

var pacientes = document.querySelectorAll("tr");


var patientsTable = document.querySelector("#tabela-pacientes");

/* console.log(document.querySelector('h1').tagName); */

// bubling
patientsTable.addEventListener("dblclick", function(event) {

    var alvoDoEvento = event.target;
    var paiDoAlvo = alvoDoEvento.parentNode; // <tr></tr> => paciente que queremos remover

    paiDoAlvo.classList.add("fadeOut");

    // sintaxe: setTimeout(function() { oque eu quero executar }, time in miliseconds)

    setTimeout(() => {

        paiDoAlvo.remove();

    }, 500);
});
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Icaro, tudo bem? Olhando os códigos é bem complicado achar o problema, posso deixar passar algum detalhe facilmente, sendo assim, vou lhe pedir um favor.

Consegue compartilhar o projeto completo comigo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.