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

7
public/app.js
View File

@@ -11,5 +11,12 @@ import "./components/quantities-crud.js";
import "./components/orders-crud.js";
import "./components/test-panel.js";
import { connectSSE } from "./lib/sse.js";
import { initRouter } from "./lib/router.js";
connectSSE();
// Inicializar router después de que los componentes estén registrados
// Usa setTimeout para asegurar que el DOM esté listo
setTimeout(() => {
initRouter();
}, 0);

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");

120
public/lib/router.js Normal file
View File

@@ -0,0 +1,120 @@
import { emit } from "./bus.js";
// Mapeo de rutas a vistas
const ROUTES = [
{ pattern: /^\/$/, view: "chat", params: [] },
{ pattern: /^\/chat$/, view: "chat", params: [] },
{ pattern: /^\/conversaciones$/, view: "conversations", params: [] },
{ pattern: /^\/usuarios$/, view: "users", params: [] },
{ pattern: /^\/usuarios\/([^/]+)$/, view: "users", params: ["id"] },
{ pattern: /^\/productos$/, view: "products", params: [] },
{ pattern: /^\/productos\/([^/]+)$/, view: "products", params: ["id"] },
{ pattern: /^\/equivalencias$/, view: "aliases", params: [] },
{ pattern: /^\/crosssell$/, view: "crosssell", params: [] },
{ pattern: /^\/crosssell\/([^/]+)$/, view: "crosssell", params: ["id"] },
{ pattern: /^\/cantidades$/, view: "quantities", params: [] },
{ pattern: /^\/pedidos$/, view: "orders", params: [] },
{ pattern: /^\/pedidos\/([^/]+)$/, view: "orders", params: ["id"] },
{ pattern: /^\/test$/, view: "test", params: [] },
];
// Mapeo de vistas a rutas base (para navegación sin parámetros)
const VIEW_TO_PATH = {
chat: "/chat",
conversations: "/conversaciones",
users: "/usuarios",
products: "/productos",
aliases: "/equivalencias",
crosssell: "/crosssell",
quantities: "/cantidades",
orders: "/pedidos",
test: "/test",
};
/**
* Parsea el pathname y devuelve { view, params }
*/
export function parseRoute(pathname) {
const path = pathname || "/";
for (const route of ROUTES) {
const match = path.match(route.pattern);
if (match) {
const params = {};
route.params.forEach((name, i) => {
params[name] = match[i + 1];
});
return { view: route.view, params };
}
}
// Fallback a chat si no matchea ninguna ruta
return { view: "chat", params: {} };
}
/**
* Obtiene la ruta actual del browser
*/
export function getCurrentRoute() {
return parseRoute(window.location.pathname);
}
/**
* Navega a una nueva ruta sin recargar la página
*/
export function navigate(path, { replace = false } = {}) {
if (replace) {
history.replaceState(null, "", path);
} else {
history.pushState(null, "", path);
}
const route = parseRoute(path);
emit("router:change", route);
}
/**
* Navega a una vista (sin parámetros)
*/
export function navigateToView(view) {
const path = VIEW_TO_PATH[view] || "/";
navigate(path);
}
/**
* Navega a una vista con un ID específico
*/
export function navigateToItem(view, id) {
const basePath = VIEW_TO_PATH[view];
if (!basePath) return;
const path = id ? `${basePath}/${encodeURIComponent(id)}` : basePath;
navigate(path);
}
/**
* Inicializa el router - debe llamarse después de que los componentes estén listos
*/
export function initRouter() {
// Escuchar popstate (botón atrás/adelante del browser)
window.addEventListener("popstate", () => {
const route = getCurrentRoute();
emit("router:change", route);
});
// Emitir la ruta inicial
const route = getCurrentRoute();
emit("router:change", route);
return route;
}
export const router = {
parseRoute,
getCurrentRoute,
navigate,
navigateToView,
navigateToItem,
initRouter,
VIEW_TO_PATH,
};