ux improved
This commit is contained in:
Lucas Tettamanti
278
public/components/aliases-crud.js
Normal file
278
public/components/aliases-crud.js
Normal file
@@ -0,0 +1,278 @@
|
||||
import { api } from "../lib/api.js";
|
||||
|
||||
class AliasesCrud extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.items = [];
|
||||
this.products = [];
|
||||
this.selected = null;
|
||||
this.loading = false;
|
||||
this.searchQuery = "";
|
||||
this.editMode = null; // 'create' | 'edit' | null
|
||||
|
||||
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 400px; 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; }
|
||||
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-alias { font-weight:600; color:#e7eef7; margin-bottom:4px; font-size:15px; }
|
||||
.item-product { font-size:12px; color:#8aa0b5; }
|
||||
.item-boost { color:#2ecc71; font-size:11px; }
|
||||
|
||||
.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; }
|
||||
|
||||
.actions { display:flex; gap:8px; margin-top:16px; }
|
||||
.loading { text-align:center; padding:40px; color:#8aa0b5; }
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="panel-title">Equivalencias (Aliases)</div>
|
||||
<div class="toolbar">
|
||||
<input type="text" id="search" placeholder="Buscar alias..." style="flex:1" />
|
||||
<button id="newBtn">+ Nuevo</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">Seleccioná un alias o creá uno nuevo</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 load() {
|
||||
this.loading = true;
|
||||
this.renderList();
|
||||
|
||||
try {
|
||||
const data = await api.aliases({ q: this.searchQuery, limit: 500 });
|
||||
this.items = data.items || [];
|
||||
this.loading = false;
|
||||
this.renderList();
|
||||
} catch (e) {
|
||||
console.error("Error loading aliases:", e);
|
||||
this.items = [];
|
||||
this.loading = false;
|
||||
this.renderList();
|
||||
}
|
||||
}
|
||||
|
||||
async loadProducts() {
|
||||
try {
|
||||
const data = await api.products({ limit: 500 });
|
||||
this.products = data.items || [];
|
||||
} catch (e) {
|
||||
console.error("Error loading products:", e);
|
||||
this.products = [];
|
||||
}
|
||||
}
|
||||
|
||||
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 aliases</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = "";
|
||||
for (const item of this.items) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "item" + (this.selected?.alias === item.alias ? " active" : "");
|
||||
|
||||
const product = this.products.find(p => p.woo_product_id === item.woo_product_id);
|
||||
const productName = product?.name || `ID: ${item.woo_product_id || "—"}`;
|
||||
const boost = item.boost ? `+${item.boost}` : "";
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="item-alias">"${item.alias}"</div>
|
||||
<div class="item-product">→ ${productName} ${boost ? `<span class="item-boost">(boost: ${boost})</span>` : ""}</div>
|
||||
`;
|
||||
|
||||
el.onclick = () => {
|
||||
this.selected = item;
|
||||
this.editMode = "edit";
|
||||
this.renderList();
|
||||
this.renderForm();
|
||||
};
|
||||
|
||||
list.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
showCreateForm() {
|
||||
this.selected = null;
|
||||
this.editMode = "create";
|
||||
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">Seleccioná un alias o creá uno nuevo</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const isCreate = this.editMode === "create";
|
||||
title.textContent = isCreate ? "Nuevo Alias" : "Editar Alias";
|
||||
|
||||
const alias = this.selected?.alias || "";
|
||||
const wooProductId = this.selected?.woo_product_id || "";
|
||||
const boost = this.selected?.boost || 0;
|
||||
const categoryHint = this.selected?.category_hint || "";
|
||||
|
||||
const productOptions = this.products.map(p =>
|
||||
`<option value="${p.woo_product_id}" ${p.woo_product_id === wooProductId ? "selected" : ""}>${p.name}</option>`
|
||||
).join("");
|
||||
|
||||
form.innerHTML = `
|
||||
<div class="field">
|
||||
<label>Alias (lo que dice el usuario)</label>
|
||||
<input type="text" id="aliasInput" value="${alias}" ${isCreate ? "" : "disabled"} placeholder="ej: chimi, vacio, bife" />
|
||||
<div class="field-hint">Sin tildes, en minusculas. Ej: "chimi" mapea a "Chimichurri"</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Producto destino</label>
|
||||
<select id="productInput">
|
||||
<option value="">— Seleccionar producto —</option>
|
||||
${productOptions}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Boost (puntuacion extra)</label>
|
||||
<input type="number" id="boostInput" value="${boost}" min="0" max="10" step="0.1" />
|
||||
<div class="field-hint">Valor entre 0 y 10. Mayor boost = mayor prioridad en resultados</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Categoria hint (opcional)</label>
|
||||
<input type="text" id="categoryInput" value="${categoryHint}" placeholder="ej: carnes, bebidas" />
|
||||
</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>
|
||||
`;
|
||||
|
||||
this.shadowRoot.getElementById("saveBtn").onclick = () => this.save();
|
||||
this.shadowRoot.getElementById("cancelBtn").onclick = () => this.cancel();
|
||||
if (!isCreate) {
|
||||
this.shadowRoot.getElementById("deleteBtn").onclick = () => this.delete();
|
||||
}
|
||||
}
|
||||
|
||||
async save() {
|
||||
const aliasInput = this.shadowRoot.getElementById("aliasInput").value.trim().toLowerCase();
|
||||
const productInput = this.shadowRoot.getElementById("productInput").value;
|
||||
const boostInput = parseFloat(this.shadowRoot.getElementById("boostInput").value) || 0;
|
||||
const categoryInput = this.shadowRoot.getElementById("categoryInput").value.trim();
|
||||
|
||||
if (!aliasInput) {
|
||||
alert("El alias es requerido");
|
||||
return;
|
||||
}
|
||||
if (!productInput) {
|
||||
alert("Seleccioná un producto");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
alias: aliasInput,
|
||||
woo_product_id: parseInt(productInput, 10),
|
||||
boost: boostInput,
|
||||
category_hint: categoryInput || null,
|
||||
};
|
||||
|
||||
try {
|
||||
if (this.editMode === "create") {
|
||||
await api.createAlias(data);
|
||||
} else {
|
||||
await api.updateAlias(this.selected.alias, data);
|
||||
}
|
||||
this.editMode = null;
|
||||
this.selected = null;
|
||||
await this.load();
|
||||
this.renderForm();
|
||||
} catch (e) {
|
||||
console.error("Error saving alias:", e);
|
||||
alert("Error guardando: " + (e.message || e));
|
||||
}
|
||||
}
|
||||
|
||||
async delete() {
|
||||
if (!this.selected?.alias) return;
|
||||
if (!confirm(`¿Eliminar el alias "${this.selected.alias}"?`)) return;
|
||||
|
||||
try {
|
||||
await api.deleteAlias(this.selected.alias);
|
||||
this.editMode = null;
|
||||
this.selected = null;
|
||||
await this.load();
|
||||
this.renderForm();
|
||||
} catch (e) {
|
||||
console.error("Error deleting alias:", e);
|
||||
alert("Error eliminando: " + (e.message || e));
|
||||
}
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.editMode = null;
|
||||
this.selected = null;
|
||||
this.renderList();
|
||||
this.renderForm();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("aliases-crud", AliasesCrud);
|
||||
Reference in New Issue
Block a user