Atualização para que possa mandar mesagens do Zap para grupos
This commit is contained in:
@@ -1,8 +1,27 @@
|
||||
<%= form_with model: [:admin, contato], data: { turbo: false }, class: 'space-y-5' do |f| %>
|
||||
<%
|
||||
input = 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors'
|
||||
rotulo = 'block text-sm font-medium text-gray-300 mb-1.5'
|
||||
ajuda = 'text-gray-500 text-xs mt-1.5'
|
||||
toggle = "w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer
|
||||
peer-checked:after:translate-x-full peer-checked:after:border-white
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:border-gray-300 after:border after:rounded-full
|
||||
after:h-5 after:w-5 after:transition-all peer-checked:bg-[#f97316]"
|
||||
%>
|
||||
<%= form_with model: [:admin, contato], data: { turbo: false },
|
||||
class: 'bg-[#1a1a1a] rounded-2xl border border-white/5 p-8 space-y-6' do |f| %>
|
||||
|
||||
<% if contato.errors.any? %>
|
||||
<div class="bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 text-red-300 text-sm">
|
||||
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
|
||||
<p class="text-red-400 text-sm font-medium mb-2">
|
||||
<%= pluralize(contato.errors.count, 'erro', 'erros') %> encontrado<%= contato.errors.count > 1 ? 's' : '' %>:
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<% contato.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
|
||||
<% contato.errors.full_messages.each do |msg| %>
|
||||
<li class="text-red-300 text-sm"><%= msg %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -10,42 +29,46 @@
|
||||
<%# Pessoa x grupo do WhatsApp. O JavaScript no fim troca os blocos; sem JS a
|
||||
página continua utilizável — os dois blocos ficam visíveis e o model limpa
|
||||
o que não pertence ao tipo escolhido. %>
|
||||
<div data-tipo-contato>
|
||||
<%= f.label :tipo, 'Tipo de destinatário', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.select :tipo,
|
||||
[['Pessoa (número ou e-mail)', 'pessoa'], ['Grupo do WhatsApp', 'grupo_whatsapp']], {},
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500',
|
||||
id: 'contato-tipo' %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :nome, class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :nome, required: true,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<p class="text-xs text-gray-500 mt-1">Como aparece nas listas e em <code>{{contato}}</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4" id="bloco-pessoa">
|
||||
<div>
|
||||
<%= f.label :telefone, 'WhatsApp', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :telefone, placeholder: '(11) 92005-1157',
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<p class="text-xs text-gray-500 mt-1">Pode digitar com máscara — é normalizado ao salvar.</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div data-tipo-contato>
|
||||
<%= f.label :tipo, 'Tipo de destinatário', class: rotulo %>
|
||||
<%= f.select :tipo,
|
||||
[['Pessoa (número ou e-mail)', 'pessoa'], ['Grupo do WhatsApp', 'grupo_whatsapp']], {},
|
||||
class: "#{input} cursor-pointer", id: 'contato-tipo' %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :email, 'E-mail', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.email_field :email,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<%= f.label :nome, class: rotulo %>
|
||||
<%= f.text_field :nome, required: true, placeholder: 'Maria Souza', class: input %>
|
||||
<p class="<%= ajuda %>">Como aparece nas listas e em <code class="font-mono text-[#f97316]">{{contato}}</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# ── Pessoa ──────────────────────────────────────────────── %>
|
||||
<div id="bloco-pessoa" class="border-t border-white/5 pt-6">
|
||||
<p class="text-sm font-medium text-gray-300 mb-4">Como falar com esta pessoa</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<%= f.label :telefone, 'WhatsApp', class: rotulo %>
|
||||
<%= f.text_field :telefone, placeholder: '(11) 92005-1157', class: input %>
|
||||
<p class="<%= ajuda %>">Pode digitar com máscara — é normalizado ao salvar.</p>
|
||||
</div>
|
||||
<div>
|
||||
<%= f.label :email, 'E-mail', class: rotulo %>
|
||||
<%= f.email_field :email, placeholder: 'maria@empresa.com', class: input %>
|
||||
<p class="<%= ajuda %>">Sem e-mail, este contato só recebe WhatsApp.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# ── Grupo do WhatsApp ───────────────────────────────────── %>
|
||||
<%# O identificador do grupo é opaco ("120363…@g.us") — digitar na mão é pedir
|
||||
erro. A lista vem da ponte, com o número já conectado. %>
|
||||
<div id="bloco-grupo" data-url="<%= grupos_whatsapp_admin_contatos_path %>">
|
||||
<%= f.label :whatsapp_grupo_jid, 'Grupo do WhatsApp', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<div class="flex gap-2">
|
||||
<select id="grupo-jid" name="contato[whatsapp_grupo_jid]"
|
||||
class="flex-1 bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500">
|
||||
<div id="bloco-grupo" class="border-t border-white/5 pt-6"
|
||||
data-url="<%= grupos_whatsapp_admin_contatos_path %>">
|
||||
<p class="text-sm font-medium text-gray-300 mb-4">Qual grupo do WhatsApp</p>
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<select id="grupo-jid" name="contato[whatsapp_grupo_jid]" class="<%= input %> cursor-pointer flex-1">
|
||||
<% if contato.whatsapp_grupo_jid.present? %>
|
||||
<option value="<%= contato.whatsapp_grupo_jid %>" selected>
|
||||
<%= contato.whatsapp_grupo_nome.presence || contato.whatsapp_grupo_jid %>
|
||||
@@ -55,38 +78,53 @@
|
||||
<% end %>
|
||||
</select>
|
||||
<button type="button" id="btn-carregar-grupos"
|
||||
class="px-4 py-2.5 rounded-xl text-sm whitespace-nowrap bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500">
|
||||
Buscar grupos
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-white/10
|
||||
hover:border-white/20 text-gray-300 hover:text-white rounded-xl
|
||||
transition-colors whitespace-nowrap cursor-pointer disabled:opacity-50">
|
||||
<%= icone :buscar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<span data-btn-texto>Buscar grupos</span>
|
||||
</button>
|
||||
</div>
|
||||
<%= f.hidden_field :whatsapp_grupo_nome, id: 'grupo-nome' %>
|
||||
<p class="text-xs text-gray-500 mt-1" id="grupo-aviso">
|
||||
<p class="<%= ajuda %>" id="grupo-aviso">
|
||||
Só aparecem grupos em que o número conectado já é membro. Grupo com "somente
|
||||
administradores" recusa o envio se o número não for admin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :grupo_contato_id, 'Grupo', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.collection_select :grupo_contato_id, @grupos, :id, :nome, { include_blank: 'Sem grupo (não recebe nada)' },
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<p class="text-xs text-gray-500 mt-1">É o grupo que define quais eventos este contato recebe.</p>
|
||||
<%# ── Assinatura e situação ───────────────────────────────── %>
|
||||
<div class="border-t border-white/5 pt-6 space-y-6">
|
||||
<div>
|
||||
<%= f.label :grupo_contato_id, 'Grupo', class: rotulo %>
|
||||
<%= f.collection_select :grupo_contato_id, @grupos, :id, :nome,
|
||||
{ include_blank: 'Sem grupo (não recebe nada)' }, class: "#{input} cursor-pointer" %>
|
||||
<p class="<%= ajuda %>">É o grupo que define quais eventos este contato recebe.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :observacao, 'Observação', class: rotulo %>
|
||||
<%= f.text_field :observacao, placeholder: 'Opcional', class: input %>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<%= f.label :ativo, 'Contato ativo', class: 'block text-sm font-medium text-gray-300' %>
|
||||
<p class="text-gray-500 text-xs mt-0.5">Contato inativo continua cadastrado, mas não recebe nada</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer ml-4">
|
||||
<%= f.check_box :ativo, class: 'sr-only peer' %>
|
||||
<div class="<%= toggle %>"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :observacao, 'Observação', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :observacao,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm text-gray-300">
|
||||
<%= f.check_box :ativo, class: 'rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
|
||||
Ativo
|
||||
</label>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<%= f.submit 'Salvar', class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
|
||||
<%= link_to 'Cancelar', admin_contatos_path, data: { turbo: false }, class: 'text-gray-400 hover:text-white text-sm' %>
|
||||
<div class="flex items-center justify-between pt-2 border-t border-white/5">
|
||||
<%= link_to 'Cancelar', admin_contatos_path, data: { turbo: false },
|
||||
class: 'px-6 py-3 text-gray-400 hover:text-white border border-white/10
|
||||
hover:border-white/20 rounded-xl transition-colors' %>
|
||||
<%= f.submit contato.new_record? ? 'Criar Contato' : 'Salvar Alterações',
|
||||
class: 'px-8 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
|
||||
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -101,6 +139,10 @@
|
||||
var botao = document.getElementById('btn-carregar-grupos');
|
||||
if (!tipo || !pessoa || !grupo) return;
|
||||
|
||||
// O rótulo do botão vive num <span> próprio: trocar o textContent do botão
|
||||
// inteiro apagaria o ícone junto.
|
||||
var botaoTexto = botao.querySelector('[data-btn-texto]');
|
||||
|
||||
function alternar() {
|
||||
var ehGrupo = tipo.value === 'grupo_whatsapp';
|
||||
pessoa.classList.toggle('hidden', ehGrupo);
|
||||
@@ -109,6 +151,15 @@
|
||||
tipo.addEventListener('change', alternar);
|
||||
alternar();
|
||||
|
||||
// Estado do aviso: erro em vermelho, sucesso em verde, neutro em cinza —
|
||||
// o texto sozinho não dizia se a busca deu certo.
|
||||
function avisar(texto, estado) {
|
||||
aviso.textContent = texto;
|
||||
aviso.className = 'text-xs mt-1.5 ' + (
|
||||
estado === 'erro' ? 'text-red-400' : estado === 'ok' ? 'text-green-400' : 'text-gray-500'
|
||||
);
|
||||
}
|
||||
|
||||
// O nome do grupo é gravado junto com o id: a tela precisa mostrar algo
|
||||
// legível mesmo com a ponte fora do ar (o id sozinho não diz nada).
|
||||
select.addEventListener('change', function () {
|
||||
@@ -118,13 +169,13 @@
|
||||
|
||||
botao.addEventListener('click', function () {
|
||||
botao.disabled = true;
|
||||
botao.textContent = 'Buscando…';
|
||||
botaoTexto.textContent = 'Buscando…';
|
||||
fetch(grupo.dataset.url, { headers: { Accept: 'application/json' } })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (dados) {
|
||||
if (dados.erro) { aviso.textContent = dados.erro; return; }
|
||||
if (dados.erro) { avisar(dados.erro, 'erro'); return; }
|
||||
if (!dados.grupos.length) {
|
||||
aviso.textContent = 'Nenhum grupo encontrado — o número conectado não participa de nenhum.';
|
||||
avisar('Nenhum grupo encontrado — o número conectado não participa de nenhum.', 'erro');
|
||||
return;
|
||||
}
|
||||
select.innerHTML = '<option value="">— escolha —</option>';
|
||||
@@ -138,10 +189,10 @@
|
||||
o.textContent = g.nome + ' (' + g.participantes + ')' + alerta;
|
||||
select.appendChild(o);
|
||||
});
|
||||
aviso.textContent = dados.grupos.length + ' grupo(s) encontrado(s).';
|
||||
avisar(dados.grupos.length + ' grupo(s) encontrado(s) — escolha um acima.', 'ok');
|
||||
})
|
||||
.catch(function () { aviso.textContent = 'Não foi possível falar com a ponte do WhatsApp.'; })
|
||||
.finally(function () { botao.disabled = false; botao.textContent = 'Buscar grupos'; });
|
||||
.catch(function () { avisar('Não foi possível falar com a ponte do WhatsApp.', 'erro'); })
|
||||
.finally(function () { botao.disabled = false; botaoTexto.textContent = 'Buscar grupos'; });
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Editar contato</h1>
|
||||
<%= render "form", contato: @contato %>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Editar: <%= @contato.nome %></h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Atualize os dados deste contato</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', contato: @contato %>
|
||||
</div>
|
||||
|
||||
@@ -1,85 +1,146 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
<%# Header — mesmo padrão de Usuários: título, subtítulo e ação primária %>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Contatos</h1>
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<%= icone :usuarios, espaco: false %> Contatos
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">
|
||||
Quem recebe as mensagens. Quem tem só número recebe só WhatsApp; quem tem só
|
||||
e-mail recebe só e-mail.
|
||||
</p>
|
||||
</div>
|
||||
<%= link_to 'Novo contato', new_admin_contato_path(grupo_id: params[:grupo_id]), data: { turbo: false },
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400' %>
|
||||
<%= link_to new_admin_contato_path(grupo_id: params[:grupo_id]), data: { turbo: false },
|
||||
class: 'inline-flex items-center gap-2 px-5 py-3 bg-[#f97316] hover:bg-orange-500
|
||||
text-white font-semibold rounded-xl transition-colors min-h-[48px] whitespace-nowrap' do %>
|
||||
<%= icone :adicionar, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Novo contato
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<form method="get" action="<%= admin_contatos_path %>" data-turbo="false" class="flex flex-wrap items-center gap-2">
|
||||
<input type="text" name="q" value="<%= params[:q] %>" placeholder="Buscar por nome, número ou e-mail"
|
||||
class="bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500 min-w-[260px]">
|
||||
<select name="grupo_id" class="bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500">
|
||||
<%= render 'shared/flash' %>
|
||||
|
||||
<%# Filtros %>
|
||||
<form method="get" action="<%= admin_contatos_path %>" data-turbo="false"
|
||||
class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 flex flex-wrap items-center gap-3">
|
||||
<div class="relative flex-1 min-w-[240px]">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<%= icone :buscar, cor: 'text-gray-500', tamanho: 'w-4 h-4', espaco: false %>
|
||||
</span>
|
||||
<input type="text" name="q" value="<%= params[:q] %>" placeholder="Buscar por nome, número ou e-mail"
|
||||
class="w-full pl-10 pr-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors text-sm">
|
||||
</div>
|
||||
<select name="grupo_id"
|
||||
class="px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm
|
||||
focus:outline-none focus:border-[#f97316] focus:ring-1 focus:ring-[#f97316]
|
||||
transition-colors cursor-pointer">
|
||||
<option value="">Todos os grupos</option>
|
||||
<% @grupos.each do |grupo| %>
|
||||
<option value="<%= grupo.id %>" <%= 'selected' if params[:grupo_id].to_s == grupo.id.to_s %>><%= grupo.nome %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<button type="submit" class="px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500">Filtrar</button>
|
||||
<button type="submit"
|
||||
class="px-6 py-3 border border-white/10 hover:border-white/20 text-gray-300
|
||||
hover:text-white rounded-xl transition-colors text-sm cursor-pointer">
|
||||
Filtrar
|
||||
</button>
|
||||
<% if params[:q].present? || params[:grupo_id].present? %>
|
||||
<%= link_to 'Limpar', admin_contatos_path, data: { turbo: false },
|
||||
class: 'text-gray-500 hover:text-white text-sm transition-colors' %>
|
||||
<% end %>
|
||||
</form>
|
||||
|
||||
<%# Tabela %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
|
||||
<% if @contatos.empty? %>
|
||||
<p class="px-6 py-10 text-center text-gray-500 text-sm">Nenhum contato encontrado.</p>
|
||||
<% else %>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-white/5 text-gray-400 text-xs uppercase tracking-wider">
|
||||
<tr>
|
||||
<th class="text-left px-6 py-3 font-medium">Nome</th>
|
||||
<th class="text-left px-4 py-3 font-medium">WhatsApp</th>
|
||||
<th class="text-left px-4 py-3 font-medium">E-mail</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Grupo</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Situação</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @contatos.each do |contato| %>
|
||||
<tr class="hover:bg-white/5">
|
||||
<td class="px-6 py-2.5 text-white">
|
||||
<%= contato.nome %>
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span class="ml-1 px-2 py-0.5 rounded-full bg-green-500/15 border border-green-500/30 text-xs text-green-300">grupo</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-gray-300 font-mono text-xs">
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span title="<%= contato.whatsapp_grupo_jid %>"><%= contato.whatsapp_grupo_nome.presence || contato.whatsapp_grupo_jid %></span>
|
||||
<% else %>
|
||||
<%= contato.telefone.presence || '—' %>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-gray-300"><%= contato.email.presence || '—' %></td>
|
||||
<td class="px-4 py-2.5">
|
||||
<% if contato.grupo_contato %>
|
||||
<span class="text-gray-300"><%= contato.grupo_contato.nome %></span>
|
||||
<% else %>
|
||||
<span class="text-amber-400" title="Sem grupo não recebe nada">sem grupo</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="<%= contato.ativo? ? 'text-green-400' : 'text-gray-500' %>">
|
||||
<%= contato.ativo? ? 'Ativo' : 'Inativo' %>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10">
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Nome</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">WhatsApp</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">E-mail</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Grupo</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Situação</th>
|
||||
<th class="px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @contatos.each do |contato| %>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<%# Avatar: inicial para pessoa, ícone para grupo — dá para
|
||||
distinguir os dois tipos sem ler a linha inteira. %>
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 text-sm font-bold
|
||||
<%= contato.grupo_whatsapp? ? 'bg-green-500/15 border border-green-500/30 text-green-300'
|
||||
: 'bg-[#f97316]/20 border border-[#f97316]/30 text-[#f97316]' %>">
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<%= icone :usuarios, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% else %>
|
||||
<%= contato.nome.to_s[0].to_s.upcase %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<span class="text-white font-medium"><%= contato.nome %></span>
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span class="block text-xs text-green-400">grupo do WhatsApp</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span class="text-gray-300 text-sm" title="<%= contato.whatsapp_grupo_jid %>">
|
||||
<%= contato.whatsapp_grupo_nome.presence || contato.whatsapp_grupo_jid %>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-right whitespace-nowrap">
|
||||
<%= link_to 'Editar', edit_admin_contato_path(contato), data: { turbo: false },
|
||||
class: 'text-gray-300 hover:text-orange-400 mr-3' %>
|
||||
<%= button_to 'Excluir', admin_contato_path(contato), method: :delete,
|
||||
form: { data: { turbo_confirm: "Excluir #{contato.nome}?" } },
|
||||
class: 'text-red-400 hover:text-red-300 inline' %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="text-gray-300 text-sm font-mono"><%= contato.telefone.presence || '—' %></span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-300 text-sm"><%= contato.email.presence || '—' %></td>
|
||||
<td class="px-6 py-4">
|
||||
<% if contato.grupo_contato %>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold
|
||||
bg-white/5 border border-white/10 text-gray-300"><%= contato.grupo_contato.nome %></span>
|
||||
<% else %>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold
|
||||
bg-amber-500/15 border border-amber-500/30 text-amber-300"
|
||||
title="Sem grupo não recebe nada">
|
||||
<%= icone :alerta, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %> sem grupo
|
||||
</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4"><%= badge_status_usuario(contato.ativo?) %></td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<%= link_to edit_admin_contato_path(contato), data: { turbo: false },
|
||||
class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
|
||||
title: 'Editar' do %>
|
||||
<%= icone :editar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
<%= button_to admin_contato_path(contato), method: :delete,
|
||||
class: 'p-2 text-gray-600 hover:text-red-400 hover:bg-red-900/20 rounded-lg transition-colors',
|
||||
title: 'Excluir',
|
||||
form: { data: { turbo_confirm: "Excluir #{contato.nome}?" } } do %>
|
||||
<%= icone :excluir, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
<% if @contatos.empty? %>
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-16 text-center text-gray-500">
|
||||
<div class="mb-3"><%= icone :vazio, tamanho: 'w-10 h-10', cor: 'text-gray-600', espaco: false %></div>
|
||||
<p>Nenhum contato encontrado.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Novo contato</h1>
|
||||
<%= render "form", contato: @contato %>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Novo contato</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Cadastre quem vai receber as mensagens</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', contato: @contato %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user