usite-sas-bic/bot_palmas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add error handling and empty state to chat conversation list

Browse Source 
- loadConvs: try/catch shows error message instead of silent empty list
- loadConvs: shows "Sin conversaciones aún" when array is empty
- loadConvs: checks r.ok before parsing JSON to catch 4xx/5xx
- loadMessages: shows loading indicator and catches network/parse errors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-27 19:31:31 -05:00
co-authored by Claude Sonnet 4.6
parent 639c3e7938
commit 446cf640e8
1 changed files with 50 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/DashboardController.php
+50 -23
View File
@@ -1920,28 +1920,43 @@ let activePhone = '';
// ─── Load conversations ──────────────────────────────────────────────────────
async function loadConvs() {
const r = await fetch('/admin/chat/conversations');
const data = await r.json();
const list = document.getElementById('convList');
list.innerHTML = data.conversations.map(c => {
const time = formatTime(c.last_time);
const avatar = (c.contact_name || c.phone).charAt(0).toUpperCase();
const unread = c.unread_count > 0 ? \`<div class="conv-unread">\${c.unread_count}</div>\` : '';
const active = c.phone === activePhone ? ' active' : '';
const company = c.company_name ? \`<span class="conv-company">\${esc(c.company_name)}</span>\` : '';
return \`<div class="conv-item\${active}" onclick="selectConv('\${c.phone}','\${esc(c.contact_name||c.phone)}','\${esc(c.company_name||'')}')">
<div class="conv-avatar">\${avatar}</div>
<div class="conv-info">
<div class="conv-name">\${esc(c.contact_name || 'Desconocido')} \${company}</div>
<div class="conv-phone">\${c.phone}</div>
<div class="conv-last">\${esc(c.last_message || '')}</div>
</div>
<div class="conv-meta">
<div class="conv-time">\${time}</div>
\${unread}
</div>
</div>\`;
}).join('');
try {
const r = await fetch('/admin/chat/conversations');
if (!r.ok) {
list.innerHTML = \`<div style="padding:16px;color:#e53e3e;font-size:13px">Error \${r.status} al cargar conversaciones</div>\`;
return;
}
const data = await r.json();
const convs = data.conversations || [];
if (convs.length === 0) {
list.innerHTML = '<div style="padding:24px 16px;text-align:center;color:#a0a8b8;font-size:13px">Sin conversaciones aún</div>';
return;
}
list.innerHTML = convs.map(c => {
const time = formatTime(c.last_time);
const name = c.contact_name || c.phone || '';
const avatar = name.charAt(0).toUpperCase() || '?';
const unread = c.unread_count > 0 ? \`<div class="conv-unread">\${c.unread_count}</div>\` : '';
const active = c.phone === activePhone ? ' active' : '';
const company = c.company_name ? \`<span class="conv-company">\${esc(c.company_name)}</span>\` : '';
return \`<div class="conv-item\${active}" onclick="selectConv('\${esc(c.phone)}','\${esc(c.contact_name||c.phone)}','\${esc(c.company_name||'')}')">
<div class="conv-avatar">\${avatar}</div>
<div class="conv-info">
<div class="conv-name">\${esc(name || 'Desconocido')} \${company}</div>
<div class="conv-phone">\${esc(c.phone)}</div>
<div class="conv-last">\${esc(c.last_message || '')}</div>
</div>
<div class="conv-meta">
<div class="conv-time">\${time}</div>
\${unread}
</div>
</div>\`;
}).join('');
} catch (e) {
console.error('loadConvs error:', e);
list.innerHTML = '<div style="padding:16px;color:#e53e3e;font-size:13px">Error al cargar conversaciones. Revisa la consola.</div>';
}
}
// ─── Select conversation ─────────────────────────────────────────────────────
@@ -1973,9 +1988,21 @@ function closeMobileChat() {
// ─── Load messages ───────────────────────────────────────────────────────────
async function loadMessages(phone) {
const r = await fetch('/admin/chat/messages?phone=' + encodeURIComponent(phone));
const data = await r.json();
const msgsDiv = document.getElementById('chatMessages');
msgsDiv.innerHTML = '<div style="text-align:center;padding:20px;color:#a0a8b8">Cargando...</div>';
let data;
try {
const r = await fetch('/admin/chat/messages?phone=' + encodeURIComponent(phone));
if (!r.ok) {
msgsDiv.innerHTML = \`<div style="text-align:center;padding:20px;color:#e53e3e">Error \${r.status}</div>\`;
return;
}
data = await r.json();
} catch (e) {
console.error('loadMessages error:', e);
msgsDiv.innerHTML = '<div style="text-align:center;padding:20px;color:#e53e3e">Error de conexión</div>';
return;
}
if (!data.messages || data.messages.length === 0) {
msgsDiv.innerHTML = '<div style="text-align:center;padding:20px;color:#a0a8b8">No hay mensajes</div>';
return;