lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

routes updated

Browse Source
This commit is contained in:
Lucas Tettamanti
2026-01-18 20:28:27 -03:00
parent 9754347a36
commit b91ece867b
8 changed files with 372 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/components/ops-shell.js
View File

@@ -1,10 +1,12 @@
import { on } from "../lib/bus.js";
import { emit, on } from "../lib/bus.js";
import { navigateToView, navigateToItem } from "../lib/router.js";
class OpsShell extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this._currentView = "chat";
this._currentParams = {};
this.shadowRoot.innerHTML = `
<style>
@@ -14,7 +16,7 @@ class OpsShell extends HTMLElement {
header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header h1 { font-size:14px; margin:0; color:var(--muted); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.nav { display:flex; gap:4px; margin-left:24px; flex-wrap:wrap; }
.nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; }
.nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; text-decoration:none; }
.nav-btn:hover { border-color:var(--blue); color:var(--text); }
.nav-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.spacer { flex:1; }
@@ -38,15 +40,15 @@ class OpsShell extends HTMLElement {
<header>
<h1>Bot Ops Console</h1>
<nav class="nav">
<button class="nav-btn active" data-view="chat">Chat</button>
<button class="nav-btn" data-view="conversations">Conversaciones</button>
<button class="nav-btn" data-view="users">Usuarios</button>
<button class="nav-btn" data-view="products">Productos</button>
<button class="nav-btn" data-view="aliases">Equivalencias</button>
<button class="nav-btn" data-view="crosssell">Cross-sell</button>
<button class="nav-btn" data-view="quantities">Cantidades</button>
<button class="nav-btn" data-view="orders">Pedidos</button>
<button class="nav-btn" data-view="test">Test</button>
<a class="nav-btn active" href="/chat" data-view="chat">Chat</a>
<a class="nav-btn" href="/conversaciones" data-view="conversations">Conversaciones</a>
<a class="nav-btn" href="/usuarios" data-view="users">Usuarios</a>
<a class="nav-btn" href="/productos" data-view="products">Productos</a>
<a class="nav-btn" href="/equivalencias" data-view="aliases">Equivalencias</a>
<a class="nav-btn" href="/crosssell" data-view="crosssell">Cross-sell</a>
<a class="nav-btn" href="/cantidades" data-view="quantities">Cantidades</a>
<a class="nav-btn" href="/pedidos" data-view="orders">Pedidos</a>
<a class="nav-btn" href="/test" data-view="test">Test</a>
</nav>
<div class="spacer"></div>
<div class="status" id="sseStatus">SSE: connecting…</div>
@@ -119,23 +121,34 @@ class OpsShell extends HTMLElement {
// Listen for view switch requests from other components
this._unsubSwitch = on("ui:switchView", ({ view }) => {
if (view) this.setView(view);
if (view) this.setView(view, {}, { updateUrl: true });
});
// Navigation
// Listen for router changes (popstate, initial load)
this._unsubRouter = on("router:change", ({ view, params }) => {
this.setView(view, params, { updateUrl: false });
});
// Navigation - intercept clicks on nav links
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
for (const btn of navBtns) {
btn.onclick = () => this.setView(btn.dataset.view);
btn.onclick = (e) => {
e.preventDefault();
const view = btn.dataset.view;
this.setView(view, {}, { updateUrl: true });
};
}
}
disconnectedCallback() {
this._unsub?.();
this._unsubSwitch?.();
this._unsubRouter?.();
}
setView(viewName) {
setView(viewName, params = {}, { updateUrl = true } = {}) {
this._currentView = viewName;
this._currentParams = params;
// Update nav buttons
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
@@ -149,6 +162,18 @@ class OpsShell extends HTMLElement {
const isActive = view.id === `view${viewName.charAt(0).toUpperCase() + viewName.slice(1)}`;
view.classList.toggle("active", isActive);
}
// Update URL if requested
if (updateUrl) {
if (params.id) {
navigateToItem(viewName, params.id);
} else {
navigateToView(viewName);
}
}
// Emit event for components that need to know about route params
emit("router:viewChanged", { view: viewName, params });
}
}

44
public/components/orders-crud.js
View File

@@ -1,4 +1,6 @@
import { api } from "../lib/api.js";
import { on } from "../lib/bus.js";
import { navigateToItem } from "../lib/router.js";
function formatDate(dateStr) {
if (!dateStr) return "—";
@@ -237,9 +239,21 @@ class OrdersCrud extends HTMLElement {
connectedCallback() {
this.shadowRoot.getElementById("btnRefresh").onclick = () => this.loadOrders();
// Escuchar cambios de ruta para deep-linking
this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
if (view === "orders" && params.id) {
this.selectOrderById(params.id);
}
});
this.loadOrders();
}
disconnectedCallback() {
this._unsubRouter?.();
}
async loadOrders() {
const container = this.shadowRoot.getElementById("ordersTable");
container.innerHTML = `<div class="empty">Cargando pedidos...</div>`;
@@ -248,6 +262,15 @@ class OrdersCrud extends HTMLElement {
const result = await api.listRecentOrders({ limit: 50 });
this.orders = result.items || [];
this.renderTable();
// Si hay un pedido pendiente de selección (deep-link), seleccionarlo
if (this._pendingOrderId) {
const order = this.orders.find(o => o.id === this._pendingOrderId);
if (order) {
this.selectOrder(order, { updateUrl: false });
}
this._pendingOrderId = null;
}
} catch (e) {
console.error("[orders-crud] Error loading orders:", e);
container.innerHTML = `<div class="empty">Error cargando pedidos: ${e.message}</div>`;
@@ -319,10 +342,29 @@ class OrdersCrud extends HTMLElement {
});
}
selectOrder(order) {
selectOrder(order, { updateUrl = true } = {}) {
this.selectedOrder = order;
this.renderTable();
this.renderDetail();
// Actualizar URL
if (updateUrl && order) {
navigateToItem("orders", order.id);
}
}
selectOrderById(orderId) {
const id = parseInt(orderId);
if (!id) return;
// Si ya tenemos los pedidos cargados, buscar y seleccionar
const order = this.orders.find(o => o.id === id);
if (order) {
this.selectOrder(order, { updateUrl: false });
} else {
// Guardar el ID pendiente para seleccionar después de cargar
this._pendingOrderId = id;
}
}
renderDetail() {

48
public/components/products-crud.js
View File

@@ -1,4 +1,6 @@
import { api } from "../lib/api.js";
import { on } from "../lib/bus.js";
import { navigateToItem } from "../lib/router.js";
class ProductsCrud extends HTMLElement {
constructor() {
@@ -112,9 +114,20 @@ class ProductsCrud extends HTMLElement {
this.updateStatStyles();
};
// Escuchar cambios de ruta para deep-linking
this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
if (view === "products" && params.id) {
this.selectProductById(params.id);
}
});
this.load();
}
disconnectedCallback() {
this._unsubRouter?.();
}
updateStatStyles() {
const statTotal = this.shadowRoot.getElementById("statTotal");
const statStock = this.shadowRoot.getElementById("statStock");
@@ -132,6 +145,17 @@ class ProductsCrud extends HTMLElement {
this.loading = false;
this.renderList();
this.renderStats();
// Si hay un producto pendiente de selección (deep-link), seleccionarlo
if (this._pendingProductId) {
const product = this.items.find(p => p.woo_product_id === this._pendingProductId);
if (product) {
this.selectedItems = [product];
this.renderList();
this.renderDetail();
}
this._pendingProductId = null;
}
} catch (e) {
console.error("Error loading products:", e);
this.items = [];
@@ -270,6 +294,8 @@ class ProductsCrud extends HTMLElement {
handleItemClick(e, item, index) {
console.log("[products-crud] handleItemClick", { shift: e.shiftKey, ctrl: e.ctrlKey, index, item: item?.name });
let updateUrl = false;
if (e.shiftKey && this.lastClickedIndex >= 0) {
// Shift+Click: seleccionar rango
const start = Math.min(this.lastClickedIndex, index);
@@ -292,6 +318,7 @@ class ProductsCrud extends HTMLElement {
} else {
// Click normal: selección única
this.selectedItems = [item];
updateUrl = true;
}
console.log("[products-crud] after click, selectedItems:", this.selectedItems.length, this.selectedItems.map(s => s.name));
@@ -309,6 +336,27 @@ class ProductsCrud extends HTMLElement {
// Scroll detail panel to top
const detail = this.shadowRoot.getElementById("detail");
if (detail) detail.scrollTop = 0;
// Actualizar URL solo en selección única
if (updateUrl && this.selectedItems.length === 1) {
navigateToItem("products", item.woo_product_id);
}
}
selectProductById(productId) {
const id = parseInt(productId);
if (!id) return;
// Buscar en los items cargados
const product = this.items.find(p => p.woo_product_id === id);
if (product) {
this.selectedItems = [product];
this.renderList();
this.renderDetail();
} else {
// Guardar el ID pendiente para seleccionar después de cargar
this._pendingProductId = id;
}
}
escapeHtml(str) {

43
public/components/recommendations-crud.js
View File

@@ -1,4 +1,6 @@
import { api } from "../lib/api.js";
import { on } from "../lib/bus.js";
import { navigateToItem } from "../lib/router.js";
class RecommendationsCrud extends HTMLElement {
static get observedAttributes() {
@@ -183,10 +185,21 @@ class RecommendationsCrud extends HTMLElement {
this.shadowRoot.getElementById("newBtn").onclick = () => this.showCreateForm();
// Escuchar cambios de ruta para deep-linking
this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
if (view === "crosssell" && params.id) {
this.selectItemById(params.id);
}
});
this.load();
this.loadProducts();
}
disconnectedCallback() {
this._unsubRouter?.();
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "rule-type" && oldValue !== newValue) {
this.filterRuleType = newValue;
@@ -223,6 +236,15 @@ class RecommendationsCrud extends HTMLElement {
this.items = items;
this.loading = false;
this.renderList();
// Si hay un item pendiente de selección (deep-link), seleccionarlo
if (this._pendingItemId) {
const item = this.items.find(i => i.id === this._pendingItemId);
if (item) {
this.selectItem(item, { updateUrl: false });
}
this._pendingItemId = null;
}
} catch (e) {
console.error("Error loading recommendations:", e);
this.items = [];
@@ -302,7 +324,7 @@ class RecommendationsCrud extends HTMLElement {
}
}
async selectItem(item) {
async selectItem(item, { updateUrl = true } = {}) {
// Cargar detalles incluyendo items
try {
const detail = await api.getRecommendation(item.id);
@@ -320,6 +342,25 @@ class RecommendationsCrud extends HTMLElement {
this.renderList();
this.renderForm();
// Actualizar URL
if (updateUrl && this.selected) {
navigateToItem("crosssell", this.selected.id);
}
}
selectItemById(ruleId) {
const id = parseInt(ruleId);
if (!id) return;
// Buscar en los items cargados
const item = this.items.find(i => i.id === id);
if (item) {
this.selectItem(item, { updateUrl: false });
} else {
// Guardar el ID pendiente para seleccionar después de cargar
this._pendingItemId = id;
}
}
showCreateForm() {

54
public/components/users-crud.js
View File

@@ -1,5 +1,6 @@
import { api } from "../lib/api.js";
import { emit } from "../lib/bus.js";
import { emit, on } from "../lib/bus.js";
import { navigateToItem } from "../lib/router.js";
class UsersCrud extends HTMLElement {
constructor() {
@@ -108,9 +109,20 @@ class UsersCrud extends HTMLElement {
this.updateStatStyles();
};
// Escuchar cambios de ruta para deep-linking
this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
if (view === "users" && params.id) {
this.selectUserById(params.id);
}
});
this.load();
}
disconnectedCallback() {
this._unsubRouter?.();
}
updateStatStyles() {
const statTotal = this.shadowRoot.getElementById("statTotal");
const statWoo = this.shadowRoot.getElementById("statWoo");
@@ -128,6 +140,15 @@ class UsersCrud extends HTMLElement {
this.loading = false;
this.renderList();
this.renderStats();
// Si hay un usuario pendiente de selección (deep-link), seleccionarlo
if (this._pendingUserId) {
const user = this.items.find(u => u.chat_id === this._pendingUserId);
if (user) {
this.selectUser(user, { updateUrl: false });
}
this._pendingUserId = null;
}
} catch (e) {
console.error("Error loading users:", e);
this.items = [];
@@ -178,15 +199,40 @@ class UsersCrud extends HTMLElement {
`;
el.onclick = () => {
this.selected = item;
this.renderList();
this.renderDetail();
this.selectUser(item);
};
list.appendChild(el);
}
}
selectUser(user, { updateUrl = true } = {}) {
this.selected = user;
this.renderList();
this.renderDetail();
// Actualizar URL (usar chat_id codificado)
if (updateUrl && user) {
navigateToItem("users", user.chat_id);
}
}
selectUserById(chatId) {
if (!chatId) return;
// Decodificar el chat_id de la URL
const decodedId = decodeURIComponent(chatId);
// Buscar en los items cargados
const user = this.items.find(u => u.chat_id === decodedId);
if (user) {
this.selectUser(user, { updateUrl: false });
} else {
// Guardar el ID pendiente para seleccionar después de cargar
this._pendingUserId = decodedId;
}
}
renderDetail() {
const detail = this.shadowRoot.getElementById("detail");
const title = this.shadowRoot.getElementById("detailTitle");