56 lines
4.2 KiB
Markdown
56 lines
4.2 KiB
Markdown
desarrollado los módulos completos para Info Hub y Workflows de Aprobación, unificando la lógica a través de un servicio reactivo para que la información fluya dinámicamente.
|
|
|
|
La aplicación compila al 100% sin advertencias y mantiene el estándar de alta gama (Executive Suite UI) con tarjetas interactivas, animaciones suaves y gráficas vectoriales.
|
|
|
|
Aquí tienes el detalle técnico de la implementación de nivel arquitectónico:
|
|
|
|
1. Estado Compartido y Lógica Reactiva (Signals)
|
|
Para comunicar ambos módulos sin acoplar los componentes creados, implementé un servicio core centralizado en
|
|
|
|
content.service.ts
|
|
. Este servicio actúa como la base de datos simulada en memoria y utiliza Angular Signals (signal y computed de lectura optimizada) para sincronizar en tiempo real el catálogo de comunicados y la cola de revisión:
|
|
|
|
Mantiene los comunicados ya aprobados y listos para publicarse.
|
|
Controla la cola de pendientes con niveles incrementales de validación (approvalLevel).
|
|
Provee métodos para reaccionar a likes, comentarios y compartidos en redes sociales.
|
|
2. Módulo Info Hub (CMS & Integración Social)
|
|
Construí el componente en
|
|
|
|
info-hub.component.ts
|
|
con las siguientes características premium:
|
|
|
|
Feed de Noticias: Muestra tarjetas elegantes de comunicados de forma cronológica (título, cuerpo, etiquetas de categoría y targets de redes).
|
|
Sección de Comentarios: Desplegable interactivo por artículo para leer aportes y agregar nuevos en tiempo real.
|
|
Módulo de Redes Sociales: Widgets estilo "Executive Suite" que muestran el alcance simulado en LinkedIn, X y la Intranet.
|
|
Analíticas: Un gráfico de líneas SVG fluido y responsivo que proyecta el alcance de contenido en las últimas semanas (sin requerir librerías pesadas externas).
|
|
Modal de Compartido (Glassmorphism): Al hacer clic en "Compartir", se despliega una interfaz translúcida que permite seleccionar las redes objetivo (LinkedIn, X, Intranet) y simular el incremento del alcance orgánico.
|
|
3. Módulo Workflows (Formulario & Motor de Aprobación BPM)
|
|
Creé el componente en
|
|
|
|
workflows.component.ts
|
|
enfocado en la administración de publicaciones:
|
|
|
|
Formulario de Redacción: Permite escribir nuevos anuncios, asignarlos a categorías (Tecnología, RR.HH., Operaciones, Seguridad) y marcar los canales objetivo donde se desea propagar.
|
|
Cola de Aprobaciones Jerárquicas: Lista de forma interactiva las propuestas en curso.
|
|
Nivel 1 (Amarillo): Revisión Técnica.
|
|
Nivel 2 (Púrpura): Autorización de Recursos Humanos.
|
|
Si se rechaza, se elimina de la cola. Si se aprueba en el Nivel 2, el artículo se publica automáticamente en el Info Hub, desapareciendo de la cola del motor BPM y actualizando la lista global al instante.
|
|
Historial Rápido: Una sección lateral para auditar los últimos artículos aprobados con un enlace rápido para ir a visualizarlos en el portal general.
|
|
4. Rutas y Cableado de Navegación
|
|
Registré las dos nuevas rutas lazy-loaded (info-hub y workflows) en
|
|
|
|
app.routes.ts
|
|
, protegiéndolas bajo el guardia de seguridad Active Directory (authGuard).
|
|
Modifiqué el archivo
|
|
|
|
dashboard.component.ts
|
|
(las tarjetas del menú inicial) para sustituir las pestañas locales anteriores por navegación de rutas reales a través de this.router.navigate(...).
|
|
Al hacer clic en la tarjeta de Info Hub, te redirige a /info-hub.
|
|
Al hacer clic en la tarjeta de Workflows, te redirige a /workflows.
|
|
Cómo probar el flujo completo:
|
|
Ve al panel de inicio de la Intranet y haz clic en la tarjeta de Workflows.
|
|
Escribe una nueva propuesta (ej: "Plan de Capacitación Angular 18"), selecciona canales de redes y haz clic en "Enviar a Flujo de Aprobación".
|
|
En la lista de aprobaciones a la derecha, verás tu post en amarillo (Nivel 1). Haz clic en "Avanzar a Nivel 2". El post cambiará de color a púrpura (Nivel 2).
|
|
Vuelve a hacer clic en "Aprobar y Publicar". El post se eliminará de la cola BPM y se posteará de forma automatizada.
|
|
Haz clic en el enlace "Ver en Info Hub" de abajo o haz clic en el logo de la Intranet arriba (que te llevará de vuelta al Dashboard) e ingresa al Info Hub.
|
|
¡Verás tu nuevo post listo en el feed general! Puedes darle a ❤️, abrir los comentarios para escribir tu opinión, o presionar el botón 🔗 para simular compartirlo en LinkedIn o X. |