udistrital / sisifo_documentacion

0 stars 0 forks source link

Implementación registro de programa en el microcliente de plan anual de auditoria #187

Open edwargl7 opened 6 days ago

edwargl7 commented 6 days ago

Se requiere realizar la implementación del módulo de registro del plan de auditoría. Separando el paso 1 de información usando formularios dinámicos, que permita registrar la información accediendo desde las acciones de la tabla principal (consulta/creación). Luego mediante otra acción lo dirija a otro componente que cuente con la vista de tabla de actividades y esta incorpore todos las acciones requeridas basado en el mockup. Y que al crear o editar una actividad use otro formulario dinámico.

image image image

Esta solución posiblemente permita alcanzar el objetivo requerido y disminuya la complejidad que se evaluó usando solo formularios dinámicos.

Sub Tareas

Criterios de aceptación

Requerimientos

No aplica

Definition of Ready - DoR

Definition of Done - DoD - Desarrollo

CristianCGutierrezG commented 5 days ago

Descarga y Configuración Inicial:

Ajustes en el Componente de Consulta:

image

Problemas Encontrados:

  1. Inconvenientes de Rutas entre Microclientes:

    • Al intentar realizar la navegación entre rutas entre paginas del mismo servicio, se presenta un problema:image
      • Angular no puede encontrar la ruta que se intenta navegar dentro del módulo de rutas del microfrontend actual. Si la ruta /formularios-dinamicos/view-formulario pertenece a otro microcliente, el enrutamiento directo a esa URL desde el microcliente actual puede no funcionar debido a la separación entre microfrontends.
  2. Redireccionamiento desde el Navegador:

    • Se implementa un redireccionamiento desde el navegador, pasando como prueba el ID del plan de ejemplo para verificar el traspaso de datos. image
    • La redirección se realiza de manera exitosa, se cambio el mock de postman para que solo se muestre la seccion especifica de información.
    • los datos en parámetros de la URL no se pasan correctamente.

image

  1. Llenado del Formulario:
    • Se intenta llenar el formulario con base en el ID recibido usando un mock de prueba; sin embargo, debido a que no se pasa la informacion del ID y a la forma en que está implementado el formulario dinámico, no se pudo realizar de manera directa.
    • Es necesario revisar cómo obtener los datos asociados a un formulario en concreto para mostrarlos en caso de edición.
edwargl7 commented 4 days ago

Se requiere revisar con el equipo SGA o Cumplidos como se puede establecer la comunicación entre microclientes para envíar los IDs requeridos para consultar y llenar los formularios basados en el elemento seleccionado.

CristianCGutierrezG commented 4 days ago

Nueva Ruta para Editar Actividades:

Implementación de Drag and Drop:

https://github.com/user-attachments/assets/b7d59ba4-98e8-48ee-9448-ac79898ea389

edwargl7 commented 3 days ago

Pendiente consulta de vinculación de microcliente de formularios dinámicos y la identificación del método a usar (POST y PUT).

CristianCGutierrezG commented 2 days ago

El inconveniente con la funcionalidad de drag and drop estaba relacionado con los estilos del Material Table, que no permitían que los elementos fueran completamente arrastrables.

image

https://github.com/user-attachments/assets/51c5c642-851b-480b-82f3-c0b542bfc53a

CristianCGutierrezG commented 1 day ago

Estrategias para Compartir Datos entre Microfrontends

Se realiza una investigación para saber que formas existen para convartir datos entre los dos microfronenents

  1. Props:

    • Descripción: Pasar datos al montar microfrontends.
    • Ventajas: Simple de implementar.
    • Limitaciones: Limitado a microfrontends montados en secuencia.
  2. Estado Compartido (BehaviorSubject):

    • Descripción: Usar un servicio reactivo para compartir datos entre microfrontends.
    • Ventajas: Ideal para aplicaciones que necesitan suscripción a cambios globales y reactividad.
    • Limitaciones: Puede volverse complejo con muchos cambios globales.
  3. Paquete npm o Monorepo:

    • Descripción: Crear una biblioteca compartida que contiene el estado o lógica común.
    • Ventajas: Modular, escalable y fácil de mantener.
    • Limitaciones: Requiere configuración adicional y despliegue de bibliotecas compartidas.
  4. Cookies de Sesión:

    • Descripción: Almacenar datos en cookies accesibles entre microfrontends.
    • Ventajas: Fácil de implementar y permite compartir información entre dominios.
    • Limitaciones: Limitado en tamaño y presenta desafíos de seguridad.
  5. localStorage/sessionStorage:

    • Descripción: Almacenar datos en el navegador, accesible entre microfrontends.
    • Ventajas: Persistente, incluso entre recargas o sesiones del navegador.
    • Limitaciones: No es reactivo, por lo que no detecta cambios automáticamente.

Se reliza un implementación de prueba con el paso de datos desde el localStorage

https://github.com/user-attachments/assets/89775e87-b756-4646-bd0d-be5aafeb4404