From 6f6006b6c5f0047b70ce0103ee2828cb84a827cb Mon Sep 17 00:00:00 2001 From: Camila Date: Mon, 8 Jul 2024 15:22:41 -0300 Subject: [PATCH] change emails and telephones from contato to receive N tuples --- src/main/resources/static/index.html | 38 ++++++++-- src/main/resources/static/js/script.js | 98 ++++++++++++++++++++++---- 2 files changed, 117 insertions(+), 19 deletions(-) diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html index add30c2..6d0164b 100644 --- a/src/main/resources/static/index.html +++ b/src/main/resources/static/index.html @@ -140,11 +140,17 @@

Cadastrar contato



- -

+
+ + + +
+
+ + + +
- -

@@ -159,9 +165,27 @@

Cadastrar contato

Detalhes do contato

ID Contato:

Nome completo:

-

E-mail:

-

Telefone:

- + + + + + + + + + + +
E-mails do contato
+ + + + + + + + + +
Telefones do contato
diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js index 456ea45..cea11f0 100644 --- a/src/main/resources/static/js/script.js +++ b/src/main/resources/static/js/script.js @@ -597,20 +597,31 @@ function salvarContato(cliente) { // Coletar dados do formulário const nomeContato = document.getElementById('nome-contato').value.trim(); - const emailContato = document.getElementById('email-contato').value.trim(); - const telefoneContato = document.getElementById('telefone-contato').value.trim(); + const emailInputs = document.querySelectorAll('.emailInputContato'); + const telefoneInputs = document.querySelectorAll('.telefoneInputContato'); - // Validar se todos os campos obrigatórios estão preenchidos - if (!nomeContato || !emailContato || !telefoneContato) { - alert("Todos os campos são obrigatórios e devem ser preenchidos."); + const emailsArray = Array.from(emailInputs).map(emailInput => emailInput.value.trim()); + if (emailsArray.some(email => email === '')) { + alert("Favor preencher todos os campos de e-mail."); + return; + } + + const telefonesArray = Array.from(telefoneInputs).map(telefoneInput => telefoneInput.value.trim()); + if (telefonesArray.some(telefone => telefone === '')) { + alert("Favor preencher todos os campos de telefone."); + return; + } + + if (!nomeContato || emailsArray.length === 0 || telefonesArray.length === 0) { + alert("Todos os campos são obrigatórios e devem conter valores válidos."); return; } // Construir objeto do novo contato const novoContato = { nomeCompleto: nomeContato, - emails: [{ email: emailContato }], - telefones: [{ telefone: telefoneContato }] + emails: emailsArray.map(email => ({ email: email })), + telefones: telefonesArray.map(telefone => ({ telefone: telefone })) }; // Enviar solicitação POST para a API @@ -655,12 +666,57 @@ function abrirModalContato(cliente) { // Limpar os campos do formulário de adicionar contato document.getElementById('nome-contato').value = ''; - document.getElementById('email-contato').value = ''; - document.getElementById('telefone-contato').value = ''; + + // Limpar campos de e-mail + const divEmailsContato = document.getElementById('divEmailsContato'); + divEmailsContato.innerHTML = ` + + + + `; + + // Limpar campos de telefone + const divTelefonesContato = document.getElementById('divTelefonesContato'); + divTelefonesContato.innerHTML = ` + + + + `; console.log("DEPOIS - Chamou abrirModalContato para o cliente ID:", cliente); } +function adicionarCampoEmailContato() { + const divEmailsContato = document.getElementById('divEmailsContato'); + const novoCampoEmail = document.createElement('div'); + novoCampoEmail.innerHTML = ` + + + `; + divEmailsContato.insertBefore(novoCampoEmail, divEmailsContato.lastElementChild); +} + +function adicionarCampoTelefoneContato() { + const divTelefonesContato = document.getElementById('divTelefonesContato'); + const novoCampoTelefone = document.createElement('div'); + novoCampoTelefone.innerHTML = ` + + + `; + divTelefonesContato.insertBefore(novoCampoTelefone, divTelefonesContato.lastElementChild); +} + +function removerCampoEmailContato(button) { + const campoParaRemover = button.parentNode; + campoParaRemover.remove(); +} + +function removerCampoTelefoneContato(button) { + const campoParaRemover = button.parentNode; + campoParaRemover.remove(); +} + + /** Adicionar os contatos à lista de detalhes de cliente */ function adicionarContatoNaTabela(idCliente, contato) { const tabelaContatos = document.getElementById('form-cliente-contatos'); @@ -723,7 +779,11 @@ function detalhesContato(idCliente, idContato) { console.log("Cliente: " + idCliente +" Contato: " + idContato); const modalDetalhesContato = document.getElementById('form-cliente-modal-contato-detalhes'); - + + // Limpar tabelas antes de preencher novos dados + document.getElementById('detalhes-emails-contato').innerHTML = ''; + document.getElementById('detalhes-telefones-contato').innerHTML = ''; + // Fazer requisição para obter os detalhes do contato fetch(`${urlAPIClientes}/${idCliente}/contatos/${idContato}`) .then(response => { @@ -736,8 +796,22 @@ function detalhesContato(idCliente, idContato) { // Preencher os dados na modal document.getElementById('detalhes-id-contato').textContent = data.idContato; document.getElementById('detalhes-nome-contato').textContent = data.nomeCompleto; - document.getElementById('detalhes-email-contato').textContent = data.email; - document.getElementById('detalhes-telefone-contato').textContent = data.telefone; + + // Preencher os e-mails do contato + const tabelaEmails = document.getElementById('detalhes-emails-contato'); + data.emails.forEach(email => { + const linha = tabelaEmails.insertRow(); + const celulaEmail = linha.insertCell(); + celulaEmail.textContent = email.email; + }); + + // Preencher os telefones do contato + const tabelaTelefones = document.getElementById('detalhes-telefones-contato'); + data.telefones.forEach(telefone => { + const linha = tabelaTelefones.insertRow(); + const celulaTelefone = linha.insertCell(); + celulaTelefone.textContent = telefone.telefone; + }); // Exibir a modal modalDetalhesContato.style.display = "block";