menus

2026-01-12 22:42:41 -05:00
parent 5cca545806
commit 01c30ca594
12 changed files with 1397 additions and 106 deletions
@@ -114,6 +114,9 @@ class SimpleWhatsAppManager {
            case 'templates':
                this.loadTemplates();
                break;
+            case 'menus':
+                this.loadMenus();
+                break;
            case 'logs':
                this.loadLogs();
                break;
@@ -794,6 +797,26 @@ class SimpleWhatsAppManager {
        }
    }

+    async loadMenus() {
+        this.log('Cargando menús');
+
+        try {
+            const response = await this.apiCall('get_menus.php');
+
+            if (response && response.success) {
+                this.updateMenusList(response.data || []);
+            } else if (response && Array.isArray(response)) {
+                // Retrocompatibilidad
+                this.updateMenusList(response);
+            } else {
+                this.showError('Error cargando menús');
+            }
+
+        } catch (error) {
+            this.showError('Error cargando menús: ' + error.message);
+        }
+    }
+
    updateTemplatesList(templates) {
        const container = document.getElementById('templates-table');
        if (!container) return;
@@ -828,6 +851,47 @@ class SimpleWhatsAppManager {
        container.innerHTML = html;
    }

+    updateMenusList(menus) {
+        const container = document.getElementById('menus-table');
+        if (!container) return;
+
+        if (menus.length === 0) {
+            container.innerHTML = '<tr><td colspan="7" class="text-center text-muted">No hay menús configurados</td></tr>';
+            return;
+        }
+
+        let html = '';
+
+        menus.forEach(menu => {
+            const createdDate = new Date(menu.created_at || Date.now());
+            const formatDate = createdDate.toLocaleDateString() + ' ' + createdDate.toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' });
+
+            html += `
+                <tr>
+                    <td><strong>${menu.name || menu.menu_name}</strong></td>
+                    <td><code>${menu.menu_key || menu.trigger}</code></td>
+                    <td>${this.truncateText(menu.description || '', 50)}</td>
+                    <td><span class="badge bg-${menu.status === 'active' ? 'success' : 'secondary'}">${menu.status || 'active'}</span></td>
+                    <td>${menu.options_count || 0} opciones</td>
+                    <td>${formatDate}</td>
+                    <td>
+                        <button class="btn btn-sm btn-outline-primary me-1" onclick="editMenu(${menu.id})" title="Editar">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="btn btn-sm btn-outline-info me-1" onclick="viewMenuOptions(${menu.id})" title="Ver opciones">
+                            <i class="fas fa-list"></i>
+                        </button>
+                        <button class="btn btn-sm btn-outline-danger" onclick="deleteMenu(${menu.id})" title="Eliminar">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </td>
+                </tr>
+            `;
+        });
+
+        container.innerHTML = html;
+    }
+
    async saveTemplate() {
        this.log('Guardando plantilla');

@@ -874,6 +938,106 @@ class SimpleWhatsAppManager {
        }
    }

+    async saveMenu() {
+        this.log('Guardando menú');
+
+        try {
+            const menuData = {
+                name: document.getElementById('menu-name')?.value || '',
+                menu_key: document.getElementById('menu-key')?.value || '',
+                description: document.getElementById('menu-description')?.value || '',
+                welcome_message: document.getElementById('menu-welcome-message')?.value || '',
+                status: document.getElementById('menu-status')?.value || 'active'
+            };
+
+            // Validar campos requeridos
+            if (!menuData.name || !menuData.menu_key) {
+                this.showError('Nombre del menú y clave del menú son requeridos');
+                return;
+            }
+
+            // Obtener opciones del menú
+            const optionsContainer = document.getElementById('menu-options-container');
+            const options = [];
+            
+            if (optionsContainer) {
+                const optionItems = optionsContainer.querySelectorAll('.menu-option-item');
+                optionItems.forEach((item, index) => {
+                    const optionKey = item.querySelector('.option-key')?.value || '';
+                    const optionText = item.querySelector('.option-text')?.value || '';
+                    const optionAction = item.querySelector('.option-action')?.value || 'message';
+                    const optionValue = item.querySelector('.option-value')?.value || '';
+                    
+                    if (optionKey && optionText) {
+                        options.push({
+                            key: optionKey,
+                            text: optionText,
+                            action: optionAction,
+                            value: optionValue,
+                            order_index: index + 1
+                        });
+                    }
+                });
+            }
+
+            menuData.options = options;
+
+            this.log(`Datos del menú a guardar: ${JSON.stringify(menuData)}`);
+
+            const response = await this.apiCall('save_menu.php', {
+                method: 'POST',
+                body: menuData
+            });
+
+            if (response && response.success) {
+                this.showSuccess('Menú guardado correctamente');
+
+                // Cerrar modal
+                const modal = document.getElementById('createMenuModal');
+                if (modal) {
+                    const bsModal = bootstrap.Modal.getInstance(modal);
+                    if (bsModal) bsModal.hide();
+                }
+
+                // Limpiar formulario
+                const form = document.getElementById('menu-form');
+                if (form) form.reset();
+                
+                // Limpiar opciones
+                const optionsContainer = document.getElementById('menu-options-container');
+                if (optionsContainer) optionsContainer.innerHTML = '';
+
+                // Recargar menús
+                this.loadMenus();
+            } else {
+                this.showError(`Error guardando menú: ${response?.error || 'Error desconocido'}`);
+            }
+
+        } catch (error) {
+            this.showError('Error guardando menú: ' + error.message);
+        }
+    }
+
+    async deleteMenuAction(menuId) {
+        this.log(`Eliminando menú ID: ${menuId}`);
+
+        try {
+            const response = await this.apiCall('delete_menu.php', {
+                method: 'POST',
+                body: { menu_id: menuId }
+            });
+
+            if (response && response.success) {
+                this.showSuccess('Menú eliminado correctamente');
+                this.loadMenus(); // Recargar la lista de menús
+            } else {
+                this.showError(`Error eliminando menú: ${response?.error || 'Error desconocido'}`);
+            }
+        } catch (error) {
+            this.showError('Error eliminando menú: ' + error.message);
+        }
+    }
+
    async sendMessage() {
        this.log('Enviando mensaje');

@@ -1406,15 +1570,109 @@ window.deleteTemplate = function (templateId) {
    }
 };

-// Hacer que app.saveTemplate() funcione
+// Hacer que app.saveTemplate() y app.saveMenu() funcionen
 window.app = {
    saveTemplate: function () {
        if (window.whatsappManager) {
            window.whatsappManager.saveTemplate();
        }
+    },
+    saveMenu: function () {
+        if (window.whatsappManager) {
+            window.whatsappManager.saveMenu();
+        }
    }
 };

+// Funciones globales para gestión de menús
+window.editMenu = function (menuId) {
+    console.log('Editando menú:', menuId);
+    // TODO: Implementar edición de menús
+    alert(`Editar menú ${menuId} - Función en desarrollo`);
+};
+
+window.deleteMenu = function (menuId) {
+    console.log('Eliminando menú:', menuId);
+    if (confirm(`¿Está seguro que desea eliminar el menú ${menuId}?`)) {
+        if (window.whatsappManager) {
+            window.whatsappManager.deleteMenuAction(menuId);
+        }
+    }
+};
+
+window.viewMenuOptions = function (menuId) {
+    console.log('Viendo opciones del menú:', menuId);
+    // TODO: Implementar visualización de opciones del menú
+    alert(`Ver opciones del menú ${menuId} - Función en desarrollo`);
+};
+
+// Función para agregar nueva opción al menú
+window.addMenuOption = function () {
+    const container = document.getElementById('menu-options-container');
+    if (!container) return;
+    
+    const optionIndex = container.children.length + 1;
+    
+    const optionHtml = `
+        <div class="menu-option-item border rounded p-3 mb-2">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <h6 class="mb-0">Opción ${optionIndex}</h6>
+                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeMenuOption(this)">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
+            <div class="row">
+                <div class="col-md-3">
+                    <label class="form-label">Clave</label>
+                    <input type="text" class="form-control option-key" placeholder="ej: 1" required>
+                </div>
+                <div class="col-md-4">
+                    <label class="form-label">Texto</label>
+                    <input type="text" class="form-control option-text" placeholder="ej: Información" required>
+                </div>
+                <div class="col-md-3">
+                    <label class="form-label">Acción</label>
+                    <select class="form-select option-action">
+                        <option value="message">Enviar mensaje</option>
+                        <option value="submenu">Submenú</option>
+                        <option value="template">Plantilla</option>
+                        <option value="function">Función personalizada</option>
+                    </select>
+                </div>
+                <div class="col-md-2">
+                    <label class="form-label">Valor</label>
+                    <input type="text" class="form-control option-value" placeholder="Contenido">
+                </div>
+            </div>
+        </div>
+    `;
+    
+    container.insertAdjacentHTML('beforeend', optionHtml);
+};
+
+// Función para remover opción del menú
+window.removeMenuOption = function (button) {
+    const optionItem = button.closest('.menu-option-item');
+    if (optionItem) {
+        optionItem.remove();
+        updateOptionNumbers();
+    }
+};
+
+// Función para actualizar numeración de opciones
+function updateOptionNumbers() {
+    const container = document.getElementById('menu-options-container');
+    if (!container) return;
+    
+    const options = container.querySelectorAll('.menu-option-item');
+    options.forEach((option, index) => {
+        const header = option.querySelector('h6');
+        if (header) {
+            header.textContent = `Opción ${index + 1}`;
+        }
+    });
+}
+
 // Funciones para el formulario de mensajes
 window.toggleRecipientType = function () {
    const recipientType = document.getElementById('recipient-type').value;