Skip to content

Commit

Permalink
change emails and telephones from contato to receive N tuples
Browse files Browse the repository at this point in the history
  • Loading branch information
@alvescamila87
alvescamila87 committed Jul 8, 2024
1 parent a237ae5 commit 6f6006b
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 19 deletions.
38 changes: 31 additions & 7 deletions src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,11 +140,17 @@ <h4>Cadastrar contato</h4>
<label for="nome-contato">Nome completo:</label>
<input type="text" name="nome-contato" id="nome-contato" placeholder="Informe o nome completo do contato" required><br><br>

<label for="email-contato">E-mail:</label>
<input type="text" name="email-contato" id="email-contato" placeholder="[email protected]" required><br><br>
<div class="form-group-contato" id="divEmailsContato">
<label for="email_contato-add">E-mail:</label>
<input type="email" class="emailInputContato" name="email_contato-add" placeholder="[email protected]" required>
<button type="button" onclick="adicionarCampoEmailContato()">Adicionar campo de e-mail</button>
</div>
<div class="form-group-contato" id="divTelefonesContato">
<label for="telefone_contato-add">Telefone:</label>
<input type="tel" class="telefoneInputContato" name="telefone_contato-add" placeholder="(00) 0000-0000" required>
<button type="button" onclick="adicionarCampoTelefoneContato()">Adicionar campo de telefone</button>
</div>

<label for="telefone-contato">Telefone:</label>
<input type="text" name="telefone-contato" id="telefone-contato" placeholder="(00) 0000-00000" required><br><br>
<button type="button" onclick="salvarContato()">Salvar contato</button>
</form>
</div>
Expand All @@ -159,9 +165,27 @@ <h4>Cadastrar contato</h4>
<h4>Detalhes do contato</h4>
<p><strong>ID Contato:</strong> <span id="detalhes-id-contato"></span></p>
<p><strong>Nome completo:</strong> <span id="detalhes-nome-contato"></span></p>
<p><strong>E-mail:</strong> <span id="detalhes-email-contato"></span></p>
<p><strong>Telefone:</strong> <span id="detalhes-telefone-contato"></span></p>
</div>
</div>
<table class="contato-table">
<thead>
<tr>
<th>E-mails do contato</th>
</tr>
</thead>
<tbody id="detalhes-emails-contato">
<!-- E-mails do contato serão listados aqui -->
</tbody>
</table>
<table class="contato-table">
<thead>
<tr>
<th>Telefones do contato</th>
</tr>
</thead>
<tbody id="detalhes-telefones-contato">
<!-- Telefones do contato serão listados aqui -->
</tbody>
</table>
</div>
</section>

Expand Down
98 changes: 86 additions & 12 deletions src/main/resources/static/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = `
<label for="email_contato-add">E-mail:</label>
<input type="email" class="emailInputContato" name="email_contato-add" placeholder="[email protected]" required>
<button type="button" onclick="adicionarCampoEmailContato()">Adicionar campo de e-mail</button>
`;

// Limpar campos de telefone
const divTelefonesContato = document.getElementById('divTelefonesContato');
divTelefonesContato.innerHTML = `
<label for="telefone_contato-add">Telefone:</label>
<input type="tel" class="telefoneInputContato" name="telefone_contato-add" placeholder="(00) 0000-0000" required>
<button type="button" onclick="adicionarCampoTelefoneContato()">Adicionar campo de telefone</button>
`;

console.log("DEPOIS - Chamou abrirModalContato para o cliente ID:", cliente);
}

function adicionarCampoEmailContato() {
const divEmailsContato = document.getElementById('divEmailsContato');
const novoCampoEmail = document.createElement('div');
novoCampoEmail.innerHTML = `
<input type="email" class="emailInputContato" name="email_contato-add" placeholder="[email protected]" required>
<button type="button" onclick="removerCampoEmailContato(this)">Remover</button>
`;
divEmailsContato.insertBefore(novoCampoEmail, divEmailsContato.lastElementChild);
}

function adicionarCampoTelefoneContato() {
const divTelefonesContato = document.getElementById('divTelefonesContato');
const novoCampoTelefone = document.createElement('div');
novoCampoTelefone.innerHTML = `
<input type="tel" class="telefoneInputContato" name="telefone_contato-add" placeholder="(00) 0000-0000" required>
<button type="button" onclick="removerCampoTelefoneContato(this)">Remover</button>
`;
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');
Expand Down Expand Up @@ -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 => {
Expand All @@ -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";
Expand Down

0 comments on commit 6f6006b

Please sign in to comment.