Notifications Module

Este módulo implementa un sistema de notificaciones en Angular, que incluye funcionalidades para manejar, visualizar y actualizar notificaciones en una aplicación web.

Archivos Principales

notifications.service.ts

Este servicio es responsable de manejar la lógica de negocio relacionada con las notificaciones, incluyendo la comunicación con el backend para realizar operaciones CRUD.

Funcionalidades:

• Obtener todas las notificaciones: Recupera una lista de notificaciones desde el servidor y las almacena localmente utilizando un BehaviorSubject.
• Crear una notificación: Envía una nueva notificación al servidor y actualiza la lista local.
• Actualizar una notificación: Modifica una notificación existente en el sistema local.
• Eliminar una notificación: Elimina una notificación de la lista local.
• Marcar todas las notificaciones como leídas: Actualiza el estado de todas las notificaciones a "leído".
• Agregar notificaciones en tiempo real: Añade nuevas notificaciones directamente al cliente.

Dependencias principales:

• HttpClient para las operaciones HTTP.
• BehaviorSubject para manejar el estado local de las notificaciones.
• RxJS operadores como map, switchMap, y tap para manejar flujos reactivos.

notifications.component.ts

Este componente es la interfaz de usuario para mostrar y gestionar las notificaciones.

Funcionalidades:

• Mostrar notificaciones: Utiliza Angular Material y Angular CDK para mostrar las notificaciones en un panel flotante.
• Marcar como leída/no leída: Permite alternar el estado de lectura de una notificación.
• Eliminar notificaciones: Proporciona una opción para eliminar notificaciones específicas.
• Expandir/colapsar notificaciones: Permite al usuario ver más detalles de una notificación expandiéndola.
• Panel interactivo: Implementa un panel flotante usando Angular CDK Overlay para manejar la experiencia de usuario.

Ciclo de vida:

• En el método ngOnInit, se suscribe al flujo de notificaciones desde el servicio y actualiza la interfaz en tiempo real.
• En el método ngOnDestroy, se limpia cualquier recurso, como suscripciones o referencias al overlay.

Métodos destacados:

• openPanel: Abre el panel de notificaciones.
• closePanel: Cierra el panel de notificaciones.
• toggleRead: Alterna el estado de lectura de una notificación específica.
• markAllAsRead: Marca todas las notificaciones como leídas.
• delete: Elimina una notificación específica.
• trackByFn: Optimiza el rendimiento de las listas al utilizar un identificador único para cada notificación.

Dependencias principales:

• Angular CDK (Overlay, Portal) para manejar el panel flotante.
• Angular Material (Botones, Iconos, Tooltips) para estilos y componentes UI.
• NotificationsService para manejar la lógica de las notificaciones.

Notificaciones (Tipos)

El módulo utiliza un tipo personalizado llamado Notification, que incluye propiedades como:

• id: Identificador único.
• message: Mensaje de la notificación.
• read: Estado de lectura (true o false).
• expanded: Indica si la notificación está expandida para mostrar más detalles.

Requisitos

Este módulo requiere:

• Angular 15+.
• Angular Material.
• Angular CDK.
• Backend con un endpoint expuesto en api/common/notifications.