josedario87
b6dc08e599
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
- Crear composable useNotifications con gestión por localStorage - Almacenamiento separado por usuario usando UID de Authentik - Auto-limpieza de notificaciones mayores a 30 días - Sincronización automática entre pestañas - Filtrado por tipo, búsqueda y gestión completa - Crear wrapper useToast para guardar toasts automáticamente - Intercepta todos los toasts de la aplicación - Guarda historial sin afectar funcionalidad existente - Implementar endpoints de API para notificaciones del backend - POST /api/notifications/send para enviar notificaciones - GET /api/notifications/list para obtener pendientes - Actualizar página de notificaciones con funcionalidad real - Búsqueda y filtros por tipo (info, warning, success, error) - Eliminar individual o todas las notificaciones - Marcar como leídas individual o todas - Badges de origen (toast, backend, manual) - Estados vacíos con mensajes informativos - Actualizar badge del sidebar con contador dinámico - Muestra número real de notificaciones no leídas - Se oculta cuando no hay notificaciones - Inicializar sistema en app.vue - Auto-inicialización al montar la app - Limpieza automática de notificaciones antiguas
81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
/**
|
|
* Wrapper del composable useToast de Nuxt UI que intercepta
|
|
* automáticamente los toasts para guardarlos en el historial
|
|
* de notificaciones del usuario actual.
|
|
*/
|
|
|
|
interface ToastOptions {
|
|
title: string
|
|
description?: string
|
|
color?: 'success' | 'error' | 'info' | 'warning' | 'neutral' | string
|
|
icon?: string
|
|
actions?: Array<{ label: string; onClick: () => void }>
|
|
[key: string]: any
|
|
}
|
|
|
|
/**
|
|
* Mapea los colores de toast a tipos de notificación
|
|
*/
|
|
function mapColorToType(color?: string): 'info' | 'warning' | 'success' | 'error' {
|
|
if (!color) return 'info'
|
|
|
|
switch (color) {
|
|
case 'success':
|
|
case 'green':
|
|
return 'success'
|
|
case 'error':
|
|
case 'red':
|
|
return 'error'
|
|
case 'warning':
|
|
case 'yellow':
|
|
case 'orange':
|
|
return 'warning'
|
|
case 'info':
|
|
case 'blue':
|
|
case 'neutral':
|
|
default:
|
|
return 'info'
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Hook para usar toasts con guardado automático en historial
|
|
*/
|
|
export function useToast() {
|
|
// Obtener el toast original de Nuxt UI desde el auto-import
|
|
const nuxtToast = (globalThis as any).useToast?.() || { add: () => {} }
|
|
|
|
const { addNotification } = useNotifications()
|
|
|
|
/**
|
|
* Agrega un toast y lo guarda en el historial
|
|
*/
|
|
function add(options: ToastOptions) {
|
|
// Llamar al toast original de Nuxt UI
|
|
nuxtToast.add(options)
|
|
|
|
// Guardar en el historial de notificaciones
|
|
try {
|
|
addNotification({
|
|
type: mapColorToType(options.color),
|
|
title: options.title,
|
|
message: options.description || '',
|
|
origin: 'toast',
|
|
metadata: {
|
|
icon: options.icon,
|
|
color: options.color,
|
|
hasActions: !!options.actions?.length
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.error('Error al guardar notificación en historial:', error)
|
|
}
|
|
}
|
|
|
|
return {
|
|
add,
|
|
// Exponer otros métodos del toast original si existen
|
|
...nuxtToast
|
|
}
|
|
}
|