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 = `
`;
}
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: 2000 });
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 = `Cargando...
`;
return;
}
if (!this.items.length) {
list.innerHTML = `No se encontraron aliases
`;
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 = `
"${item.alias}"
→ ${productName} ${boost ? `(boost: ${boost})` : ""}
`;
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 = `Seleccioná un alias o creá uno nuevo
`;
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 =>
``
).join("");
form.innerHTML = `
${!isCreate ? `` : ""}
`;
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);