tiago/Condominio_SeConectai
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Substitui botoes de texto por icones na tela de Cadastro

Browse Source
This commit is contained in:
Tiago
2026-10-09 16:10:22 -03:00
parent 9ec2de5459
commit b4ab4642de
3 changed files with 52 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/webapp/cliente/condominios.html
+1 -1
View File
@@ -1 +1 @@
<!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Cadastro</title><link rel="stylesheet" href="/css/app.css"><script src="/js/auth.js"></script><script src="/js/util.js"></script><script src="/js/api.js"></script><script src="/js/layout.js"></script></head><body><main><div class="topbar"><h1>Cadastro</h1></div><section class="panel"><div class="section-head"><h2>Condominios</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaCadastro('cond')" aria-label="Buscar condominios" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button><button class="btn" type="button" onclick="abrirNovoCondominio()">Novo</button></div></div><div id="cond-search" class="search-strip hidden"><input id="cond-search-input" placeholder="Buscar por nome, CNPJ ou endereco"></div><div class="table-wrap"><table><thead><tr><th>ID</th><th>Nome</th><th>CNPJ</th><th>Endereco</th><th></th></tr></thead><tbody id="rows"></tbody></table></div></section><section id="funcionarios-panel" class="panel hidden"><div class="section-head"><h2>Funcionarios</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaCadastro('func')" aria-label="Buscar funcionarios" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button><button class="btn" type="button" onclick="abrirNovoFuncionario()">Novo</button></div></div><div id="func-search" class="search-strip hidden"><input id="func-search-input" placeholder="Buscar por nome, e-mail, telefone ou cargo"></div><div class="table-wrap"><table><thead><tr><th>Nome</th><th>E-mail</th><th>Telefone</th><th>Cargo</th><th>Status</th><th>Condominios</th><th>Opcoes</th></tr></thead><tbody id="func-rows"></tbody></table></div></section><section id="extras-panel" class="panel hidden"><div class="section-head"><h2>Extra</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaCadastro('extra')" aria-label="Buscar extras" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button><button class="btn" type="button" onclick="abrirNovoExtra()">Novo</button></div></div><div id="extra-search" class="search-strip hidden"><input id="extra-search-input" placeholder="Buscar por nome, e-mail ou WhatsApp"></div><div class="table-wrap"><table><thead><tr><th>Nome</th><th>E-mail</th><th>WhatsApp</th><th>Status</th><th>Opcoes</th></tr></thead><tbody id="extra-rows"></tbody></table></div></section><div id="cond-modal" class="modal hidden"><div class="modal-backdrop" onclick="fecharModalCondominios()"></div><section class="modal-panel"><div class="modal-head"><h2 id="cond-modal-title">Condominios</h2><button class="btn secondary" type="button" onclick="fecharModalCondominios()">Fechar</button></div><div id="cond-modal-body"></div></section></div></main><script>Layout.mount('empresa','condominios');</script><script src="/cliente/condominios.js"></script></body></html>
<!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Cadastro</title><link rel="stylesheet" href="/css/app.css"><script src="/js/auth.js"></script><script src="/js/util.js"></script><script src="/js/api.js"></script><script src="/js/layout.js"></script></head><body><main><div class="topbar"><h1>Cadastro</h1></div><section class="panel"><div class="section-head"><h2>Condomínios</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaCadastro('cond')" aria-label="Buscar condomínios" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button><button class="header-add-btn" type="button" onclick="abrirNovoCondominio()" title="Novo condomínio" aria-label="Novo condomínio"><svg viewBox="0 0 24 24" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></button></div></div><div id="cond-search" class="search-strip hidden"><input id="cond-search-input" placeholder="Buscar por nome, CNPJ ou endereço"></div><div class="table-wrap"><table><thead><tr><th>ID</th><th>Nome</th><th>CNPJ</th><th>Endereço</th><th style="text-align:right">Ações</th></tr></thead><tbody id="rows"></tbody></table></div></section><section id="funcionarios-panel" class="panel hidden"><div class="section-head"><h2>Funcionários</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaCadastro('func')" aria-label="Buscar funcionários" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button><button class="header-add-btn" type="button" onclick="abrirNovoFuncionario()" title="Novo funcionário" aria-label="Novo funcionário"><svg viewBox="0 0 24 24" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></button></div></div><div id="func-search" class="search-strip hidden"><input id="func-search-input" placeholder="Buscar por nome, e-mail, telefone ou cargo"></div><div class="table-wrap"><table><thead><tr><th>Nome</th><th>E-mail</th><th>Telefone</th><th>Cargo</th><th>Status</th><th>Condomínios</th><th>Ações</th></tr></thead><tbody id="func-rows"></tbody></table></div></section><section id="extras-panel" class="panel hidden"><div class="section-head"><h2>Extra</h2><div class="section-actions"><button class="search-icon-btn" type="button" onclick="alternarBuscaCadastro('extra')" aria-label="Buscar extras" title="Buscar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg></button><button class="header-add-btn" type="button" onclick="abrirNovoExtra()" title="Novo destinatário extra" aria-label="Novo destinatário extra"><svg viewBox="0 0 24 24" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></button></div></div><div id="extra-search" class="search-strip hidden"><input id="extra-search-input" placeholder="Buscar por nome, e-mail ou WhatsApp"></div><div class="table-wrap"><table><thead><tr><th>Nome</th><th>E-mail</th><th>WhatsApp</th><th>Status</th><th>Ações</th></tr></thead><tbody id="extra-rows"></tbody></table></div></section><div id="cond-modal" class="modal hidden"><div class="modal-backdrop" onclick="fecharModalCondominios()"></div><section class="modal-panel"><div class="modal-head"><h2 id="cond-modal-title">Condominios</h2><button class="btn secondary" type="button" onclick="fecharModalCondominios()">Fechar</button></div><div id="cond-modal-body"></div></section></div></main><script>Layout.mount('empresa','condominios');</script><script src="/cliente/condominios.js"></script></body></html>
src/main/webapp/cliente/condominios.js
+12 -5
View File
@@ -7,10 +7,17 @@ function contem(item,q,campos){return !q||campos.some(c=>String(item[c]??'').toL
function abrirModal(titulo,html){modalTitle.textContent=titulo;modalBody.innerHTML=html;modal.classList.remove('hidden')}
function formActions(label){return '<div class="row"><button class="btn">'+label+'</button><button class="btn secondary" type="button" onclick="fecharModalCondominios()">Cancelar</button></div>'}
const Icons = {
eye: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>',
building: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18"></path><path d="M5 21V7l8-4v18"></path><path d="M19 21V11l-6-4"></path><line x1="9" y1="9" x2="9" y2="9.01"></line><line x1="9" y1="13" x2="9" y2="13.01"></line><line x1="9" y1="17" x2="9" y2="17.01"></line></svg>',
edit: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>',
trash: '<svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>'
};
function renderCondominios(){
const q=termo('#cond-search-input');
const lista=condominios.filter(c=>contem(c,q,['id','nome','cnpj','endereco']));
rows.innerHTML=lista.map(c=>`<tr><td>${c.id}</td><td>${esc(c.nome)}</td><td>${esc(c.cnpj||'')}</td><td>${esc(c.endereco||'')}</td><td><a class="btn secondary" href="/cliente/condominio-detalhe.html?id=${c.id}">Abrir</a></td></tr>`).join('')||'<tr><td colspan="5">Nenhum condominio encontrado.</td></tr>';
rows.innerHTML=lista.map(c=>`<tr><td>${c.id}</td><td>${esc(c.nome)}</td><td>${esc(c.cnpj||'')}</td><td>${esc(c.endereco||'')}</td><td style="text-align:right"><div class="table-actions"><a class="table-icon-btn" href="/cliente/condominio-detalhe.html?id=${c.id}" title="Abrir condomínio" aria-label="Abrir condomínio">${Icons.eye}</a></div></td></tr>`).join('')||'<tr><td colspan="5">Nenhum condominio encontrado.</td></tr>';
}
async function load(){
@@ -56,8 +63,8 @@ function renderFuncionarios(){
const q=termo('#func-search-input');
const lista=funcionarios.filter(f=>contem(f,q,['nome','email','telefone','cargo','status']));
funcRows.innerHTML=lista.map(f=>{
const acao=f.cargo==='admin_empresa'?'<span class="muted">Acesso total</span>':'<button class="btn secondary" type="button" onclick="abrirModalCondominios('+f.id+')">Condominios</button>';
const opcoes=f.cargo==='admin_empresa'?'<span class="muted">-</span>':'<button class="btn secondary" type="button" onclick="abrirEditarFuncionario('+f.id+')">Editar</button> <button class="btn danger" type="button" onclick="abrirExcluirFuncionario('+f.id+')">Excluir</button>';
const acao=f.cargo==='admin_empresa'?'<span class="muted">Acesso total</span>':`<div class="table-actions start"><button class="table-icon-btn" type="button" onclick="abrirModalCondominios(${f.id})" title="Vincular condomínios" aria-label="Vincular condomínios">${Icons.building}</button></div>`;
const opcoes=f.cargo==='admin_empresa'?'<span class="muted">-</span>':`<div class="table-actions start"><button class="table-icon-btn" type="button" onclick="abrirEditarFuncionario(${f.id})" title="Editar funcionário" aria-label="Editar funcionário">${Icons.edit}</button><button class="table-icon-btn danger" type="button" onclick="abrirExcluirFuncionario(${f.id})" title="Excluir funcionário" aria-label="Excluir funcionário">${Icons.trash}</button></div>`;
return '<tr><td>'+esc(f.nome)+'</td><td>'+esc(f.email)+'</td><td>'+esc(f.telefone||'')+'</td><td>'+esc(f.cargo||'')+'</td><td>'+Util.badge(f.status)+'</td><td>'+acao+'</td><td>'+opcoes+'</td></tr>';
}).join('')||'<tr><td colspan="7">Nenhum funcionario encontrado.</td></tr>';
}
@@ -101,7 +108,7 @@ window.desvincularFuncionarioCondominio=async (funcId,condId)=>{try{await Api.re
function renderExtras(){
const q=termo('#extra-search-input');
const lista=extras.filter(x=>contem(x,q,['nome','email','telefone','status']));
extraRows.innerHTML=lista.map(x=>'<tr><td>'+esc(x.nome)+'</td><td>'+esc(x.email||'')+'</td><td>'+esc(x.telefone||'')+'</td><td>'+Util.badge(x.status)+'</td><td><button class="btn secondary" type="button" onclick="abrirEditarExtra('+x.id+')">Editar</button> <button class="btn danger" type="button" onclick="excluirExtra('+x.id+')">Excluir</button></td></tr>').join('')||'<tr><td colspan="5">Nenhum destinatario extra encontrado.</td></tr>';
extraRows.innerHTML=lista.map(x=>'<tr><td>'+esc(x.nome)+'</td><td>'+esc(x.email||'')+'</td><td>'+esc(x.telefone||'')+'</td><td>'+Util.badge(x.status)+'</td><td><div class="table-actions start"><button class="table-icon-btn" type="button" onclick="abrirEditarExtra('+x.id+')" title="Editar extra" aria-label="Editar extra">'+Icons.edit+'</button><button class="table-icon-btn danger" type="button" onclick="excluirExtra('+x.id+')" title="Excluir extra" aria-label="Excluir extra">'+Icons.trash+'</button></div></td></tr>').join('')||'<tr><td colspan="5">Nenhum destinatario extra encontrado.</td></tr>';
}
async function loadExtras(){
@@ -129,7 +136,7 @@ window.abrirNovoExtra=()=>{
function extraPorId(id){return extras.find(x=>Number(x.id)===Number(id))}
window.abrirEditarExtra=id=>{const x=extraPorId(id);if(!x)return;abrirModal('Editar extra','<form id="extra-edit-form" class="grid cols"><div class="field"><label>Nome</label><input name="nome" required value="'+esc(x.nome||'')+'"></div><div class="field"><label>E-mail</label><input name="email" type="email" value="'+esc(x.email||'')+'"></div><div class="field"><label>WhatsApp</label><input name="telefone" value="'+esc(x.telefone||'')+'"></div><div class="field"><label>Status</label><select name="status"><option value="ativo" '+(x.status==='ativo'?'selected':'')+'>Ativo</option><option value="inativo" '+(x.status==='inativo'?'selected':'')+'>Inativo</option></select></div>'+formActions('Salvar')+'</form>');document.querySelector('#extra-edit-form').onsubmit=async e=>{e.preventDefault();try{await Api.put('/api/extras/'+id,Util.formData(e.target));Util.toast('Extra atualizado');fecharModalCondominios();loadExtras()}catch(err){Util.toast(err.message,true)}}};
window.excluirExtra=async id=>{try{await Api.request('/api/extras/'+id,{method:'DELETE'});Util.toast('Extra excluido');loadExtras()}catch(err){Util.toast(err.message,true)}};
window.excluirExtra=async id=>{if(!await Util.confirm('Tem certeza que deseja excluir este destinatário extra?','Excluir extra'))return;try{await Api.request('/api/extras/'+id,{method:'DELETE'});Util.toast('Extra excluido');loadExtras()}catch(err){Util.toast(err.message,true)}};
window.alternarBuscaCadastro=tipo=>{
const strip=document.querySelector(`#${tipo}-search`),input=document.querySelector(`#${tipo}-search-input`);
src/main/webapp/css/app.css
+39
View File
@@ -493,6 +493,11 @@ td .btn,
gap: 8px;
}
.table-actions.start {
justify-content: flex-start;
}
a.table-icon-btn,
.table-icon-btn {
width: 36px;
height: 36px;
@@ -505,9 +510,11 @@ td .btn,
place-items: center;
padding: 0;
box-shadow: none;
text-decoration: none;
transition: all .16s ease;
}
a.table-icon-btn:hover,
.table-icon-btn:hover {
background: var(--bg-soft);
color: var(--brand);
@@ -515,6 +522,38 @@ td .btn,
transform: translateY(-1px);
}
.header-add-btn {
width: 36px;
height: 36px;
min-width: 36px;
border: 1px solid var(--brand);
border-radius: var(--radius-sm);
background: var(--brand);
color: #fff;
cursor: pointer;
display: inline-grid;
place-items: center;
padding: 0;
box-shadow: none;
transition: all .16s ease;
}
.header-add-btn:hover {
background: var(--brand-strong);
border-color: var(--brand-strong);
transform: translateY(-1px);
}
.header-add-btn svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.table-icon-btn.send {
color: var(--brand);
}