categorias working well

public/components/products-crud.js

@@ -423,7 +423,10 @@ class ProductsCrud extends HTMLElement {
         <div class="field-value">${this.escapeHtml(attributes)}</div>
       </div>
       <div class="field">
-        <button id="saveProduct" style="width:100%;padding:10px;">Guardar cambios</button>
+        <div style="display:flex;gap:8px;align-items:center;">
+          <button id="saveProduct" style="flex:1;padding:10px;">Guardar cambios</button>
+          <span id="saveStatus" style="font-size:12px;color:#2ecc71;"></span>
+        </div>
       </div>
       <div class="field">
         <label>Última actualización</label>
@@ -449,11 +452,13 @@ class ProductsCrud extends HTMLElement {
         if (tag) tag.remove();
         // Actualizar el select para mostrar la categoría removida
         this.updateCategorySelect();
+        // Auto-guardar al quitar categoría
+        this.autoSaveCategories();
       };
     });
   }
 
-  addCategoryToProduct() {
+  async addCategoryToProduct() {
     const select = this.shadowRoot.getElementById("addCategorySelect");
     const container = this.shadowRoot.getElementById("currentCategories");
     const categoryName = select.value;
@@ -472,6 +477,7 @@ class ProductsCrud extends HTMLElement {
       e.stopPropagation();
       tag.remove();
       this.updateCategorySelect();
+      this.autoSaveCategories(); // Auto-guardar al quitar
     };
     
     // Remover el mensaje "Sin categorías" si existe
@@ -481,6 +487,38 @@ class ProductsCrud extends HTMLElement {
     container.appendChild(tag);
     select.value = "";
     this.updateCategorySelect();
+    
+    // Auto-guardar al agregar
+    await this.autoSaveCategories();
+  }
+
+  async autoSaveCategories() {
+    if (this.selectedItems.length !== 1) return;
+    
+    const p = this.selectedItems[0];
+    const categories = this.getCurrentProductCategories();
+    const sellUnitSelect = this.shadowRoot.getElementById("sellUnit");
+    const sell_unit = sellUnitSelect?.value || p.sell_unit || 'kg';
+    
+    try {
+      await api.updateProduct(p.woo_product_id, { sell_unit, categories });
+      
+      // Actualizar localmente
+      p.categories = JSON.stringify(categories.map(name => ({ name })));
+      const idx = this.items.findIndex(i => i.woo_product_id === p.woo_product_id);
+      if (idx >= 0) {
+        this.items[idx].categories = p.categories;
+      }
+      
+      // Mostrar feedback breve
+      const status = this.shadowRoot.getElementById("saveStatus");
+      if (status) {
+        status.textContent = "Guardado";
+        setTimeout(() => { status.textContent = ""; }, 1500);
+      }
+    } catch (e) {
+      console.error("Error auto-saving categories:", e);
+    }
   }
 
   updateCategorySelect() {