From 738584514d07ac6805825af5ca98f16a3e0f6abf Mon Sep 17 00:00:00 2001 From: josedario87 Date: Tue, 2 Dec 2025 20:33:48 -0600 Subject: [PATCH] Webhooks: Completar integracion backend-frontend - Inicializar webhookDispatcher en plugin de servidor - Conectar pagina de webhooks con API - Agregar selector de instancias en formulario - Corregir bug en toast de handleSaved --- app/components/webhooks/WebhookFormModal.vue | 13 +- app/pages/webhooks/index.vue | 151 ++++++++++++++++--- server/plugins/baileys.ts | 9 +- 3 files changed, 151 insertions(+), 22 deletions(-) diff --git a/app/components/webhooks/WebhookFormModal.vue b/app/components/webhooks/WebhookFormModal.vue index f388854..14ddc18 100644 --- a/app/components/webhooks/WebhookFormModal.vue +++ b/app/components/webhooks/WebhookFormModal.vue @@ -93,9 +93,15 @@ interface Webhook { instanceId?: string } +interface Instance { + id: string + name: string +} + interface Props { open: boolean webhook?: Webhook | null + instances?: Instance[] } const props = defineProps() @@ -129,8 +135,11 @@ const availableEvents = [ { value: 'instance.qr', label: 'QR disponible' } ] -// TODO: Cargar instancias reales -const instanceOptions = ref([]) +// Instance options for selector +const instanceOptions = computed(() => [ + { label: 'Todas las instancias', value: null }, + ...(props.instances || []).map(i => ({ label: i.name, value: i.id })) +]) const isValid = computed(() => { return form.value.name.trim() && form.value.url.trim() && form.value.events.length > 0 diff --git a/app/pages/webhooks/index.vue b/app/pages/webhooks/index.vue index 44a1459..35e7b39 100644 --- a/app/pages/webhooks/index.vue +++ b/app/pages/webhooks/index.vue @@ -8,27 +8,34 @@ Nuevo Webhook - -
+ +
+
+ + +
+
-
- - +
@@ -55,32 +63,139 @@ definePageMeta({ icon: 'i-lucide-webhook' }) -const showCreateModal = ref(false) -const editingWebhook = ref(null) +const toast = useToast() -// TODO: Conectar con API real +const showModal = ref(false) +const editingWebhook = ref(null) +const loading = ref(true) const webhooks = ref([]) +const instances = ref([]) + +// Fetch webhooks +const fetchWebhooks = async () => { + try { + webhooks.value = await $fetch('/api/webhooks') + } catch (error) { + console.error('Error fetching webhooks:', error) + toast.add({ + title: 'Error', + description: 'No se pudieron cargar los webhooks', + color: 'red' + }) + } +} + +// Fetch instances for the form +const fetchInstances = async () => { + try { + instances.value = await $fetch('/api/instances') + } catch (error) { + console.error('Error fetching instances:', error) + } +} + +// Initial load +onMounted(async () => { + loading.value = true + await Promise.all([fetchWebhooks(), fetchInstances()]) + loading.value = false +}) + +const openCreateModal = () => { + editingWebhook.value = null + showModal.value = true +} const handleEdit = (webhook: any) => { editingWebhook.value = webhook - showCreateModal.value = true + showModal.value = true } const handleDelete = async (webhookId: string) => { - console.log('Deleting webhook', webhookId) + if (!confirm('¿Estás seguro de eliminar este webhook?')) return + + try { + await $fetch(`/api/webhooks/${webhookId}`, { method: 'DELETE' }) + webhooks.value = webhooks.value.filter(w => w.id !== webhookId) + toast.add({ + title: 'Webhook eliminado', + color: 'green' + }) + } catch (error) { + console.error('Error deleting webhook:', error) + toast.add({ + title: 'Error', + description: 'No se pudo eliminar el webhook', + color: 'red' + }) + } } const handleTest = async (webhookId: string) => { - console.log('Testing webhook', webhookId) + try { + const result = await $fetch<{ success: boolean; status?: number; error?: string }>( + `/api/webhooks/${webhookId}/test`, + { method: 'POST' } + ) + + if (result.success) { + toast.add({ + title: 'Test exitoso', + description: `El webhook respondio con status ${result.status}`, + color: 'green' + }) + } else { + toast.add({ + title: 'Test fallido', + description: result.error || 'El webhook no respondio correctamente', + color: 'red' + }) + } + } catch (error) { + console.error('Error testing webhook:', error) + toast.add({ + title: 'Error', + description: 'No se pudo probar el webhook', + color: 'red' + }) + } } const handleToggle = async (webhookId: string, active: boolean) => { - console.log('Toggle webhook', webhookId, active) + try { + await $fetch(`/api/webhooks/${webhookId}`, { + method: 'PUT', + body: { isActive: active } + }) + + // Update local state + const webhook = webhooks.value.find(w => w.id === webhookId) + if (webhook) { + webhook.isActive = active + } + + toast.add({ + title: active ? 'Webhook activado' : 'Webhook desactivado', + color: 'green' + }) + } catch (error) { + console.error('Error toggling webhook:', error) + toast.add({ + title: 'Error', + description: 'No se pudo cambiar el estado del webhook', + color: 'red' + }) + } } -const handleSaved = (webhook: any) => { - showCreateModal.value = false +const handleSaved = async () => { + const isEdit = !!editingWebhook.value + showModal.value = false editingWebhook.value = null - // TODO: Refresh list + await fetchWebhooks() + toast.add({ + title: isEdit ? 'Webhook actualizado' : 'Webhook creado', + color: 'green' + }) } diff --git a/server/plugins/baileys.ts b/server/plugins/baileys.ts index c2e881b..30f6298 100644 --- a/server/plugins/baileys.ts +++ b/server/plugins/baileys.ts @@ -1,7 +1,8 @@ /** - * Nitro plugin to initialize Baileys manager on server start + * Nitro plugin to initialize Baileys manager and Webhook dispatcher on server start */ import { baileysManager } from '../services/baileys/manager' +import { webhookDispatcher } from '../services/webhooks/dispatcher' export default defineNitroPlugin(async () => { console.log('[Plugin] Initializing Baileys Manager...') @@ -12,7 +13,11 @@ export default defineNitroPlugin(async () => { try { await baileysManager.initialize() console.log('[Plugin] Baileys Manager initialized successfully') + + // Initialize webhook dispatcher after baileys manager + await webhookDispatcher.initialize() + console.log('[Plugin] Webhook Dispatcher initialized successfully') } catch (error) { - console.error('[Plugin] Failed to initialize Baileys Manager:', error) + console.error('[Plugin] Failed to initialize:', error) } })