252 lines
9.9 KiB
JavaScript
252 lines
9.9 KiB
JavaScript
import { api } from "../lib/api.js";
|
|
import { emit, on } from "../lib/bus.js";
|
|
import { modal } from "../lib/modal.js";
|
|
|
|
class ConversationList extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.conversations = [];
|
|
this.selected = null;
|
|
this.tab = "chats"; // chats | users
|
|
this.users = [];
|
|
this.selectedUser = null;
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display:block; padding:12px; }
|
|
.box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; margin-bottom:10px; }
|
|
.row { display:flex; gap:8px; align-items:center; }
|
|
input,select,button { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px; font-size:13px; }
|
|
button { cursor:pointer; }
|
|
button.ghost { background:transparent; }
|
|
button:disabled { opacity:.6; cursor:not-allowed; }
|
|
.tabs { display:flex; gap:8px; margin-bottom:10px; }
|
|
.tab { flex:1; text-align:center; padding:8px; border-radius:8px; border:1px solid #253245; cursor:pointer; color:#8aa0b5; background:#121823; }
|
|
.tab.active { border-color:#1f6feb; color:#e7eef7; background:#0f1520; }
|
|
.list { display:flex; flex-direction:column; gap:8px; }
|
|
.item { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; cursor:pointer; }
|
|
.item:hover { border-color:#2b3b52; }
|
|
.item.active { border-color:#1f6feb; }
|
|
.title { font-weight:800; }
|
|
.muted { color:#8aa0b5; font-size:12px; }
|
|
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
|
|
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; background:#1d2a3a; border:1px solid #243247; font-size:12px; color:#8aa0b5; }
|
|
.dot { width:8px; height:8px; border-radius:50%; }
|
|
.ok{ background:#2ecc71 } .warn{ background:#f1c40f } .err{ background:#e74c3c }
|
|
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }
|
|
</style>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active" id="tabChats">Chats</div>
|
|
<div class="tab" id="tabUsers">Usuarios</div>
|
|
</div>
|
|
|
|
<div class="box" id="filtersBox">
|
|
<div class="row">
|
|
<input id="q" style="flex:1" placeholder="Buscar chat_id / teléfono…" />
|
|
</div>
|
|
<div class="box" id="userActions" style="display:none; margin-top:8px">
|
|
<div class="actions" style="justify-content:flex-start">
|
|
<button class="ghost" id="uaSelect">Chat</button>
|
|
<button class="ghost" id="uaDeleteConv">Borrar Chat</button>
|
|
<button id="uaDeleteUser">Borrar User</button>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top:8px">
|
|
<select id="status" style="flex:1">
|
|
<option value="">Status: all</option>
|
|
<option value="ok">ok</option>
|
|
<option value="warn">warn</option>
|
|
<option value="error">error</option>
|
|
</select>
|
|
<select id="state" style="flex:1">
|
|
<option value="">State: all</option>
|
|
<option>IDLE</option><option>BROWSING</option><option>BUILDING_ORDER</option><option>WAITING_ADDRESS</option><option>WAITING_PAYMENT</option><option>COMPLETED</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list" id="list"></div>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.shadowRoot.getElementById("tabChats").onclick = () => this.setTab("chats");
|
|
this.shadowRoot.getElementById("tabUsers").onclick = () => this.setTab("users");
|
|
|
|
this.shadowRoot.getElementById("q").oninput = () => {
|
|
clearTimeout(this._t);
|
|
this._t = setTimeout(() => this.refresh(), 250);
|
|
};
|
|
this.shadowRoot.getElementById("status").onchange = () => this.refresh();
|
|
this.shadowRoot.getElementById("state").onchange = () => this.refresh();
|
|
|
|
// acciones del usuario seleccionado (solo en tab Users)
|
|
this.shadowRoot.getElementById("uaSelect").onclick = () => {
|
|
if (!this.selectedUser) return;
|
|
emit("ui:selectedChat", { chat_id: this.selectedUser.chat_id });
|
|
this.setTab("chats");
|
|
};
|
|
this.shadowRoot.getElementById("uaDeleteConv").onclick = async () => {
|
|
if (!this.selectedUser) return;
|
|
const chat_id = this.selectedUser.chat_id;
|
|
const confirmed = await modal.confirm(`¿Borrar conversación completa de ${chat_id}?`);
|
|
if (!confirmed) return;
|
|
await api.deleteConversation(chat_id);
|
|
this.selectedUser = null;
|
|
await this.refreshUsers();
|
|
};
|
|
this.shadowRoot.getElementById("uaDeleteUser").onclick = async () => {
|
|
if (!this.selectedUser) return;
|
|
const chat_id = this.selectedUser.chat_id;
|
|
const confirmed = await modal.confirm(`¿Borrar usuario ${chat_id}, sus conversaciones y el customer en Woo?`);
|
|
if (!confirmed) return;
|
|
await api.deleteUser(chat_id, { deleteWoo: true });
|
|
this.selectedUser = null;
|
|
await this.refreshUsers();
|
|
};
|
|
|
|
this._unsub1 = on("conversation:upsert", (conv) => {
|
|
if (this.tab !== "chats") return;
|
|
const idx = this.conversations.findIndex(x => x.chat_id === conv.chat_id);
|
|
if (idx >= 0) this.conversations[idx] = conv;
|
|
else this.conversations.unshift(conv);
|
|
this.render();
|
|
});
|
|
|
|
this.refresh();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._unsub1?.();
|
|
}
|
|
|
|
dot(status) {
|
|
const cls = status === "ok" ? "ok" : (status === "warn" ? "warn" : "err");
|
|
return `<span class="dot ${cls}"></span>`;
|
|
}
|
|
|
|
async refresh() {
|
|
try {
|
|
if (this.tab === "users") return await this.refreshUsers();
|
|
const q = this.shadowRoot.getElementById("q").value || "";
|
|
const status = this.shadowRoot.getElementById("status").value || "";
|
|
const state = this.shadowRoot.getElementById("state").value || "";
|
|
const data = await api.conversations({ q, status, state });
|
|
this.conversations = data.items || [];
|
|
this.render();
|
|
} catch (e) {
|
|
console.warn("[conversation-list] refresh failed", e);
|
|
}
|
|
}
|
|
|
|
async refreshUsers() {
|
|
try {
|
|
const q = this.shadowRoot.getElementById("q").value || "";
|
|
const data = await api.users({ q, limit: 200 });
|
|
this.users = data.items || [];
|
|
this.render();
|
|
} catch (e) {
|
|
console.warn("[conversation-list] refreshUsers failed", e);
|
|
}
|
|
}
|
|
|
|
setTab(tab) {
|
|
this.tab = tab;
|
|
this.shadowRoot.getElementById("tabChats").classList.toggle("active", tab === "chats");
|
|
this.shadowRoot.getElementById("tabUsers").classList.toggle("active", tab === "users");
|
|
// en users mantenemos el buscador; ocultamos filtros avanzados (status/state)
|
|
this.shadowRoot.getElementById("filtersBox").style.display = "block";
|
|
const adv = this.shadowRoot.getElementById("status")?.closest(".row");
|
|
if (adv) adv.style.display = tab === "chats" ? "flex" : "none";
|
|
const qEl = this.shadowRoot.getElementById("q");
|
|
qEl.placeholder = tab === "users" ? "Buscar usuario (chat_id / pushName)…" : "Buscar chat_id / teléfono…";
|
|
// acciones visibles solo en users (si no hay selección, quedan disabled)
|
|
this.renderSelectedUserActions();
|
|
this.refresh();
|
|
}
|
|
|
|
renderSelectedUserActions() {
|
|
const box = this.shadowRoot.getElementById("userActions");
|
|
const inUsers = this.tab === "users";
|
|
box.style.display = inUsers ? "block" : "none";
|
|
|
|
const hasSel = Boolean(this.selectedUser);
|
|
const b1 = this.shadowRoot.getElementById("uaSelect");
|
|
const b2 = this.shadowRoot.getElementById("uaDeleteConv");
|
|
const b3 = this.shadowRoot.getElementById("uaDeleteUser");
|
|
if (b1) b1.disabled = !hasSel;
|
|
if (b2) b2.disabled = !hasSel;
|
|
if (b3) b3.disabled = !hasSel;
|
|
}
|
|
|
|
render() {
|
|
const list = this.shadowRoot.getElementById("list");
|
|
list.innerHTML = "";
|
|
|
|
if (this.tab === "users") {
|
|
// panel de acciones
|
|
this.renderSelectedUserActions();
|
|
|
|
for (const u of this.users) {
|
|
const el = document.createElement("div");
|
|
el.className = "item" + (this.selectedUser?.chat_id === u.chat_id ? " active" : "");
|
|
const name = u.push_name || u.chat_id.replace(/@.+$/, "");
|
|
el.innerHTML = `
|
|
<div class="row">
|
|
<div style="flex:1">
|
|
<div class="title">${name}</div>
|
|
<div class="muted">${u.chat_id}</div>
|
|
<div class="muted">woo_customer_id: ${u.external_customer_id || "—"}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
el.onclick = () => {
|
|
this.selectedUser = u;
|
|
this.render();
|
|
};
|
|
list.appendChild(el);
|
|
}
|
|
return;
|
|
}
|
|
|
|
for (const c of this.conversations) {
|
|
const el = document.createElement("div");
|
|
el.className = "item" + (c.chat_id === this.selected ? " active" : "");
|
|
el.innerHTML = `
|
|
<div class="row">
|
|
${this.dot(c.status)}
|
|
<div style="flex:1">
|
|
<div class="title">${c.from}</div>
|
|
<div class="muted">${c.chat_id}</div>
|
|
</div>
|
|
<button class="ghost" data-del="1">Borrar</button>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">state: ${c.state}</span>
|
|
<span class="chip">intent: ${c.intent}</span>
|
|
<span class="chip">last: ${new Date(c.last_activity).toLocaleTimeString()}</span>
|
|
</div>
|
|
`;
|
|
el.onclick = async (e) => {
|
|
if (e?.target?.dataset?.del) {
|
|
e.stopPropagation();
|
|
const confirmed = await modal.confirm(`¿Borrar conversación completa de ${c.chat_id}?`);
|
|
if (!confirmed) return;
|
|
await api.deleteConversation(c.chat_id);
|
|
if (this.selected === c.chat_id) this.selected = null;
|
|
await this.refresh();
|
|
return;
|
|
}
|
|
this.selected = c.chat_id;
|
|
this.render();
|
|
emit("ui:selectedChat", { chat_id: c.chat_id });
|
|
};
|
|
list.appendChild(el);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("conversation-list", ConversationList);
|