478 lines
17 KiB
JavaScript
478 lines
17 KiB
JavaScript
import { api } from "../lib/api.js";
|
||
|
||
class RecommendationsCrud extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
this.attachShadow({ mode: "open" });
|
||
this.items = [];
|
||
this.selected = null;
|
||
this.loading = false;
|
||
this.searchQuery = "";
|
||
this.editMode = null; // 'create' | 'edit' | null
|
||
|
||
// Cache de productos para el selector
|
||
this.allProducts = [];
|
||
this.productsLoaded = false;
|
||
|
||
// Productos seleccionados en el formulario
|
||
this.selectedTriggerProducts = [];
|
||
this.selectedRecommendedProducts = [];
|
||
|
||
this.shadowRoot.innerHTML = `
|
||
<style>
|
||
:host { display:block; height:100%; padding:16px; overflow:hidden; }
|
||
* { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
|
||
.container { display:grid; grid-template-columns:1fr 500px; gap:16px; height:100%; }
|
||
.panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; }
|
||
.panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
|
||
|
||
.toolbar { display:flex; gap:8px; margin-bottom:12px; }
|
||
input, select, textarea { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; width:100%; }
|
||
input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; }
|
||
textarea { min-height:60px; resize:vertical; font-size:13px; }
|
||
button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; }
|
||
button:hover { background:#1a5fd0; }
|
||
button:disabled { opacity:.5; cursor:not-allowed; }
|
||
button.secondary { background:#253245; }
|
||
button.secondary:hover { background:#2d3e52; }
|
||
button.danger { background:#e74c3c; }
|
||
button.danger:hover { background:#c0392b; }
|
||
|
||
.list { flex:1; overflow-y:auto; }
|
||
.item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; }
|
||
.item:hover { border-color:#1f6feb; }
|
||
.item.active { border-color:#1f6feb; background:#111b2a; }
|
||
.item-key { font-weight:600; color:#e7eef7; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
|
||
.item-trigger { font-size:12px; color:#8aa0b5; margin-bottom:4px; }
|
||
.item-queries { font-size:11px; color:#2ecc71; }
|
||
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; }
|
||
.badge.active { background:#0f2a1a; color:#2ecc71; }
|
||
.badge.inactive { background:#241214; color:#e74c3c; }
|
||
.badge.priority { background:#253245; color:#8aa0b5; }
|
||
|
||
.form { flex:1; overflow-y:auto; }
|
||
.form-empty { color:#8aa0b5; text-align:center; padding:40px; }
|
||
.field { margin-bottom:16px; }
|
||
.field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
|
||
.field-hint { font-size:11px; color:#8aa0b5; margin-top:4px; }
|
||
.field-row { display:flex; gap:12px; }
|
||
.field-row .field { flex:1; }
|
||
|
||
.actions { display:flex; gap:8px; margin-top:16px; }
|
||
.loading { text-align:center; padding:40px; color:#8aa0b5; }
|
||
|
||
.toggle { display:flex; align-items:center; gap:8px; cursor:pointer; }
|
||
.toggle input { width:auto; }
|
||
|
||
/* Product selector styles */
|
||
.product-selector { position:relative; }
|
||
.product-search { margin-bottom:8px; }
|
||
.product-dropdown {
|
||
position:absolute; top:100%; left:0; right:0; z-index:100;
|
||
background:#0f1520; border:1px solid #253245; border-radius:8px;
|
||
max-height:200px; overflow-y:auto; display:none;
|
||
}
|
||
.product-dropdown.open { display:block; }
|
||
.product-option {
|
||
padding:8px 12px; cursor:pointer; font-size:13px; color:#e7eef7;
|
||
display:flex; justify-content:space-between; align-items:center;
|
||
}
|
||
.product-option:hover { background:#1a2535; }
|
||
.product-option.selected { background:#1a3a5c; }
|
||
.product-option .price { font-size:11px; color:#8aa0b5; }
|
||
|
||
.selected-products { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; min-height:30px; }
|
||
.product-chip {
|
||
display:inline-flex; align-items:center; gap:4px;
|
||
background:#253245; color:#e7eef7; padding:4px 8px 4px 12px;
|
||
border-radius:999px; font-size:12px;
|
||
}
|
||
.product-chip .remove {
|
||
cursor:pointer; width:16px; height:16px; border-radius:50%;
|
||
background:#e74c3c; color:#fff; font-size:10px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.product-chip .remove:hover { background:#c0392b; }
|
||
|
||
.empty-hint { color:#8aa0b5; font-size:12px; font-style:italic; }
|
||
</style>
|
||
|
||
<div class="container">
|
||
<div class="panel">
|
||
<div class="panel-title">Reglas de Recomendacion</div>
|
||
<div class="toolbar">
|
||
<input type="text" id="search" placeholder="Buscar regla..." style="flex:1" />
|
||
<button id="newBtn">+ Nueva</button>
|
||
</div>
|
||
<div class="list" id="list">
|
||
<div class="loading">Cargando...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-title" id="formTitle">Detalle</div>
|
||
<div class="form" id="form">
|
||
<div class="form-empty">Selecciona una regla o crea una nueva</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.shadowRoot.getElementById("search").oninput = (e) => {
|
||
this.searchQuery = e.target.value;
|
||
clearTimeout(this._searchTimer);
|
||
this._searchTimer = setTimeout(() => this.load(), 300);
|
||
};
|
||
|
||
this.shadowRoot.getElementById("newBtn").onclick = () => this.showCreateForm();
|
||
|
||
this.load();
|
||
this.loadProducts();
|
||
}
|
||
|
||
async loadProducts() {
|
||
if (this.productsLoaded) return;
|
||
try {
|
||
const data = await api.products({ limit: 2000 });
|
||
this.allProducts = (data.items || []).filter(p => p.stock_status === "instock");
|
||
this.productsLoaded = true;
|
||
} catch (e) {
|
||
console.error("Error loading products:", e);
|
||
this.allProducts = [];
|
||
}
|
||
}
|
||
|
||
async load() {
|
||
this.loading = true;
|
||
this.renderList();
|
||
|
||
try {
|
||
const data = await api.recommendations({ q: this.searchQuery, limit: 200 });
|
||
this.items = data.items || [];
|
||
this.loading = false;
|
||
this.renderList();
|
||
} catch (e) {
|
||
console.error("Error loading recommendations:", e);
|
||
this.items = [];
|
||
this.loading = false;
|
||
this.renderList();
|
||
}
|
||
}
|
||
|
||
getProductName(id) {
|
||
const p = this.allProducts.find(x => x.woo_product_id === id);
|
||
return p?.name || `Producto #${id}`;
|
||
}
|
||
|
||
renderList() {
|
||
const list = this.shadowRoot.getElementById("list");
|
||
|
||
if (this.loading) {
|
||
list.innerHTML = `<div class="loading">Cargando...</div>`;
|
||
return;
|
||
}
|
||
|
||
if (!this.items.length) {
|
||
list.innerHTML = `<div class="loading">No se encontraron reglas</div>`;
|
||
return;
|
||
}
|
||
|
||
list.innerHTML = "";
|
||
for (const item of this.items) {
|
||
const el = document.createElement("div");
|
||
el.className = "item" + (this.selected?.id === item.id ? " active" : "");
|
||
|
||
// Mostrar productos trigger
|
||
const triggerIds = item.trigger_product_ids || [];
|
||
const triggerNames = triggerIds.slice(0, 3).map(id => this.getProductName(id)).join(", ");
|
||
const triggerMore = triggerIds.length > 3 ? ` (+${triggerIds.length - 3})` : "";
|
||
|
||
// Mostrar productos recomendados
|
||
const recoIds = item.recommended_product_ids || [];
|
||
const recoNames = recoIds.slice(0, 3).map(id => this.getProductName(id)).join(", ");
|
||
const recoMore = recoIds.length > 3 ? ` (+${recoIds.length - 3})` : "";
|
||
|
||
el.innerHTML = `
|
||
<div class="item-key">
|
||
${item.rule_key}
|
||
<span class="badge ${item.active ? "active" : "inactive"}">${item.active ? "Activa" : "Inactiva"}</span>
|
||
<span class="badge priority">P: ${item.priority}</span>
|
||
</div>
|
||
<div class="item-trigger">Cuando piden: ${triggerNames || "—"}${triggerMore}</div>
|
||
<div class="item-queries">→ Recomendar: ${recoNames || "—"}${recoMore}</div>
|
||
`;
|
||
|
||
el.onclick = () => {
|
||
this.selected = item;
|
||
this.editMode = "edit";
|
||
this.selectedTriggerProducts = [...(item.trigger_product_ids || [])];
|
||
this.selectedRecommendedProducts = [...(item.recommended_product_ids || [])];
|
||
this.renderList();
|
||
this.renderForm();
|
||
};
|
||
|
||
list.appendChild(el);
|
||
}
|
||
}
|
||
|
||
showCreateForm() {
|
||
this.selected = null;
|
||
this.editMode = "create";
|
||
this.selectedTriggerProducts = [];
|
||
this.selectedRecommendedProducts = [];
|
||
this.renderList();
|
||
this.renderForm();
|
||
}
|
||
|
||
renderForm() {
|
||
const form = this.shadowRoot.getElementById("form");
|
||
const title = this.shadowRoot.getElementById("formTitle");
|
||
|
||
if (!this.editMode) {
|
||
title.textContent = "Detalle";
|
||
form.innerHTML = `<div class="form-empty">Selecciona una regla o crea una nueva</div>`;
|
||
return;
|
||
}
|
||
|
||
const isCreate = this.editMode === "create";
|
||
title.textContent = isCreate ? "Nueva Regla" : "Editar Regla";
|
||
|
||
const rule_key = this.selected?.rule_key || "";
|
||
const active = this.selected?.active !== false;
|
||
const priority = this.selected?.priority || 100;
|
||
|
||
form.innerHTML = `
|
||
<div class="field">
|
||
<label>Nombre de la regla</label>
|
||
<input type="text" id="ruleKeyInput" value="${rule_key}" ${isCreate ? "" : "disabled"} placeholder="ej: asado_recos, vinos_con_carne" />
|
||
<div class="field-hint">Identificador unico, sin espacios</div>
|
||
</div>
|
||
|
||
<div class="field-row">
|
||
<div class="field">
|
||
<label>Prioridad</label>
|
||
<input type="number" id="priorityInput" value="${priority}" min="1" max="1000" />
|
||
</div>
|
||
<div class="field">
|
||
<label>Estado</label>
|
||
<label class="toggle">
|
||
<input type="checkbox" id="activeInput" ${active ? "checked" : ""} />
|
||
<span>Activa</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Cuando el cliente pide...</label>
|
||
<div class="product-selector" id="triggerSelector">
|
||
<input type="text" class="product-search" id="triggerSearch" placeholder="Buscar producto..." />
|
||
<div class="product-dropdown" id="triggerDropdown"></div>
|
||
<div class="selected-products" id="triggerSelected"></div>
|
||
</div>
|
||
<div class="field-hint">Productos que activan esta recomendacion</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Recomendar estos productos...</label>
|
||
<div class="product-selector" id="recoSelector">
|
||
<input type="text" class="product-search" id="recoSearch" placeholder="Buscar producto..." />
|
||
<div class="product-dropdown" id="recoDropdown"></div>
|
||
<div class="selected-products" id="recoSelected"></div>
|
||
</div>
|
||
<div class="field-hint">Productos a sugerir al cliente</div>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button id="saveBtn">${isCreate ? "Crear" : "Guardar"}</button>
|
||
${!isCreate ? `<button id="deleteBtn" class="danger">Eliminar</button>` : ""}
|
||
<button id="cancelBtn" class="secondary">Cancelar</button>
|
||
</div>
|
||
`;
|
||
|
||
// Setup event handlers
|
||
this.shadowRoot.getElementById("saveBtn").onclick = () => this.save();
|
||
this.shadowRoot.getElementById("cancelBtn").onclick = () => this.cancel();
|
||
if (!isCreate) {
|
||
this.shadowRoot.getElementById("deleteBtn").onclick = () => this.delete();
|
||
}
|
||
|
||
// Setup product selectors
|
||
this.setupProductSelector("trigger", this.selectedTriggerProducts);
|
||
this.setupProductSelector("reco", this.selectedRecommendedProducts);
|
||
}
|
||
|
||
setupProductSelector(type, selectedIds) {
|
||
const searchInput = this.shadowRoot.getElementById(`${type}Search`);
|
||
const dropdown = this.shadowRoot.getElementById(`${type}Dropdown`);
|
||
const selectedContainer = this.shadowRoot.getElementById(`${type}Selected`);
|
||
|
||
const renderSelected = () => {
|
||
const ids = type === "trigger" ? this.selectedTriggerProducts : this.selectedRecommendedProducts;
|
||
if (!ids.length) {
|
||
selectedContainer.innerHTML = `<span class="empty-hint">Ningun producto seleccionado</span>`;
|
||
return;
|
||
}
|
||
selectedContainer.innerHTML = ids.map(id => {
|
||
const name = this.getProductName(id);
|
||
return `<span class="product-chip" data-id="${id}">${name}<span class="remove">×</span></span>`;
|
||
}).join("");
|
||
|
||
selectedContainer.querySelectorAll(".remove").forEach(btn => {
|
||
btn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
const id = parseInt(btn.parentElement.dataset.id, 10);
|
||
if (type === "trigger") {
|
||
this.selectedTriggerProducts = this.selectedTriggerProducts.filter(x => x !== id);
|
||
} else {
|
||
this.selectedRecommendedProducts = this.selectedRecommendedProducts.filter(x => x !== id);
|
||
}
|
||
renderSelected();
|
||
renderDropdown(searchInput.value);
|
||
};
|
||
});
|
||
};
|
||
|
||
const renderDropdown = (query) => {
|
||
const q = (query || "").toLowerCase().trim();
|
||
const selectedSet = new Set(type === "trigger" ? this.selectedTriggerProducts : this.selectedRecommendedProducts);
|
||
|
||
let filtered = this.allProducts;
|
||
if (q) {
|
||
filtered = filtered.filter(p => p.name.toLowerCase().includes(q));
|
||
}
|
||
filtered = filtered.slice(0, 50); // Limit for performance
|
||
|
||
if (!q && !filtered.length) {
|
||
dropdown.classList.remove("open");
|
||
return;
|
||
}
|
||
|
||
dropdown.innerHTML = filtered.map(p => {
|
||
const isSelected = selectedSet.has(p.woo_product_id);
|
||
return `
|
||
<div class="product-option ${isSelected ? "selected" : ""}" data-id="${p.woo_product_id}">
|
||
<span>${p.name}</span>
|
||
<span class="price">$${p.price || 0}</span>
|
||
</div>
|
||
`;
|
||
}).join("");
|
||
|
||
dropdown.querySelectorAll(".product-option").forEach(opt => {
|
||
opt.onclick = () => {
|
||
const id = parseInt(opt.dataset.id, 10);
|
||
if (type === "trigger") {
|
||
if (!this.selectedTriggerProducts.includes(id)) {
|
||
this.selectedTriggerProducts.push(id);
|
||
}
|
||
} else {
|
||
if (!this.selectedRecommendedProducts.includes(id)) {
|
||
this.selectedRecommendedProducts.push(id);
|
||
}
|
||
}
|
||
searchInput.value = "";
|
||
dropdown.classList.remove("open");
|
||
renderSelected();
|
||
};
|
||
});
|
||
|
||
dropdown.classList.add("open");
|
||
};
|
||
|
||
searchInput.oninput = () => {
|
||
clearTimeout(this[`_${type}Timer`]);
|
||
this[`_${type}Timer`] = setTimeout(() => renderDropdown(searchInput.value), 150);
|
||
};
|
||
|
||
searchInput.onfocus = () => {
|
||
if (searchInput.value || this.allProducts.length) {
|
||
renderDropdown(searchInput.value);
|
||
}
|
||
};
|
||
|
||
// Close dropdown on outside click
|
||
document.addEventListener("click", (e) => {
|
||
if (!this.shadowRoot.getElementById(`${type}Selector`)?.contains(e.target)) {
|
||
dropdown.classList.remove("open");
|
||
}
|
||
});
|
||
|
||
renderSelected();
|
||
}
|
||
|
||
async save() {
|
||
const ruleKey = this.shadowRoot.getElementById("ruleKeyInput").value.trim().toLowerCase().replace(/\s+/g, "_");
|
||
const priority = parseInt(this.shadowRoot.getElementById("priorityInput").value, 10) || 100;
|
||
const active = this.shadowRoot.getElementById("activeInput").checked;
|
||
|
||
if (!ruleKey) {
|
||
alert("El nombre de la regla es requerido");
|
||
return;
|
||
}
|
||
|
||
if (!this.selectedTriggerProducts.length) {
|
||
alert("Selecciona al menos un producto trigger");
|
||
return;
|
||
}
|
||
|
||
if (!this.selectedRecommendedProducts.length) {
|
||
alert("Selecciona al menos un producto para recomendar");
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
rule_key: ruleKey,
|
||
trigger: {}, // Legacy field, keep empty
|
||
queries: [], // Legacy field, keep empty
|
||
ask_slots: [],
|
||
active,
|
||
priority,
|
||
trigger_product_ids: this.selectedTriggerProducts,
|
||
recommended_product_ids: this.selectedRecommendedProducts,
|
||
};
|
||
|
||
try {
|
||
if (this.editMode === "create") {
|
||
await api.createRecommendation(data);
|
||
} else {
|
||
await api.updateRecommendation(this.selected.id, data);
|
||
}
|
||
this.editMode = null;
|
||
this.selected = null;
|
||
await this.load();
|
||
this.renderForm();
|
||
} catch (e) {
|
||
console.error("Error saving recommendation:", e);
|
||
alert("Error guardando: " + (e.message || e));
|
||
}
|
||
}
|
||
|
||
async delete() {
|
||
if (!this.selected?.id) return;
|
||
if (!confirm(`¿Eliminar la regla "${this.selected.rule_key}"?`)) return;
|
||
|
||
try {
|
||
await api.deleteRecommendation(this.selected.id);
|
||
this.editMode = null;
|
||
this.selected = null;
|
||
await this.load();
|
||
this.renderForm();
|
||
} catch (e) {
|
||
console.error("Error deleting recommendation:", e);
|
||
alert("Error eliminando: " + (e.message || e));
|
||
}
|
||
}
|
||
|
||
cancel() {
|
||
this.editMode = null;
|
||
this.selected = null;
|
||
this.selectedTriggerProducts = [];
|
||
this.selectedRecommendedProducts = [];
|
||
this.renderList();
|
||
this.renderForm();
|
||
}
|
||
}
|
||
|
||
customElements.define("recommendations-crud", RecommendationsCrud);
|