Revisión y aplicación de estilos mejorados MF PT2

[milo19980525]

Se requiere continuar con la corrección y adecuación de los estilos propuestos en ISSUE y generar su apliación en cada uno de los componentes de los MF con los que cuenta SISGPLAN.

Aspectos Técnicos

• Los repositorios de los mid son:

1. planeacion_formulacion_mid
2. planeacion_seguimiento_mid
3. planeacion_evaluacion_mid
4. planeacion_reportes_mid
5. planeacion_arbol_mid

• Los repositorios de los MF son:

1. Root
2. Utilidades(Revisar como mostrar la imagen base de SISGPLAN).
3. Formulacion
4. Seguimiento5. Evaluacion
5. Macroplanes
6. Pendientes
7. Construccion

• Todos los MF ya se encuentran desplegados y cuentan con los DNS: https://udistritaleduco-my.sharepoint.com/:x:/g/personal/computo_udistrital_edu_co/ETUSQ1JOXG5Jnc9uh3iscfABEl-PJYHvXLEBY9yXz3_Axw?e=mNROD2.
• se generó al avance en #1343

Sub Tareas

• [x] Revisar como se utilizan los estilos propuestos en ISSUE.
• [x] Generar un servicio en el módulo Utility para traducir la parte inferior de la tabla y que se pueda consumir de todos los MF.
• [x] Aplicar los estilos revisados en todos los componentes de los MF.
• [x] Revisar la documentación de Angular Material y sugerir que componentes se pueden adoptar en los componentes que no se han intervenido en ISSUE, a menos que sea una mejora estética a lo allí propuesto.
• [x] Corregir los estilos de los MF que actualmente se encuentran generando error (ejemplo: Botones como labels).

Criterios de aceptación

• [x] Se identifican los estilos nuevos y se aplican en el MF.
• [x] Se genera el servicio de traducción en el módulo utility
• [x] Se proponen nuevos estilos.
• [x] Se prueba la funcionalidad del sistema con nuevos estilos.
• [x] Se corrigen los estilos en componentes actuales de los MF.

Requerimientos

• ninguno.

Dependencias

• planeacion_mid
• planes_crud

Definition of Ready - DoR

• [x] Está refinada y estimada en puntos de historia por el equipo.
• [x] Incluye la descripción y criterios de aceptación, con el detalle funcional y especificaciones técnicas, de forma entendible por cualquier miembro del equipo.
• [x] No tiene bloqueos que impidan su ejecución.
• [x] Las dependencias están identificadas y resueltas.
• [x] Puede ser probada dentro del Sprint.

Definition of Done - DoD - Desarrollo

• [x] Desarrollo en local.
• [x] Push en Feature.
• [x] Pruebas locales (funcionales).
• [x] PR a Develop.
• [x] Criterios de aceptación cumplidos.
• [x] Documentación de issue realizada.
• [x] Aprobada por SM/Líder técnico. Se debe probar el correcto funcionamiento de todas las funcionalidades en nueva arquitectura.

[C0C045]

Aplicación de Propuesta de Estilos

Se aplicó la propuesta mencionada en https://github.com/udistrital/planeacion_cliente/issues/1343#issuecomment-2313200120 con éxito, en dónde se obtuvieron los siguientes cambios:

Pruebas Funcionales:

Nota:

He de recalcar que se centro cada input y su etiqueta es 'Período', Sin embargo, se aceptan propuestas para el estilo de los mimos o el llamado de las etiquetas, ya que al ser una nueva propuesta es necesario que sea intuitiva para el usuario.

Por otro lado, se puede notar que el formato de fechas cumple con el establecido en Latinoamérica (DD/MM/YYYY); este cambio fue posible gracias a las dependencias 'date-fns' y '@angular/material-date-fns-adapter' que son mencionadas en la documentación de Angular Material, ya que las dependencias y configuración usadas en el monolito no son compatibles con la nueva arquitectura de Microfrontends.

Idea de Implementación: ¿Es posible obligar al usuario a siempre diligenciar el input con ayuda del calendario? o ¿Es necesario dejar la opción tanto de escribir fechas como de usar el calendario?

Justificación de Idea: Se propone lo anterior, ya que es poco intuitivo tener que dar 'click' al ícono del calendario para usarlo; es de esperarse que con cualquier 'click' en el input este se despliegue.

Commit

construccion_mf: https://github.com/udistrital/planeacion_construccion_mf/commit/55f097c6ba88d472b76a995a4dc30cc0d26e1a13

[C0C045]

Microfrontend Formulacion Estilizado

El microfrontend de Formulación fue estilizado según lo visto en el issue https://github.com/udistrital/sga_documentacion/issues/415#issuecomment-2282312127.

Pruebas Funcionales:

PR

https://github.com/udistrital/planeacion_formulacion_mf/pull/37

[C0C045]

PR Construcción MF

Una vez comprobados y aplicados los cambios comentados en https://github.com/udistrital/planeacion_cliente/issues/1361#issuecomment-2316649275; se realiza el Pull Request pertinente:

construccion_mf: https://github.com/udistrital/planeacion_construccion_mf/pull/30

[C0C045]

Evaluación MF

El microfrontend de evaluación actualmente no tiene componentes compatibles con la nueva propuesta de estilos, sin embargo, sí tenía problemas de carga de imagen (niveles de avance); los cuales se solucionaron en el siguiente Pull Request:

PR

evaluacion_mf: https://github.com/udistrital/planeacion_evaluacion_mf/pull/16

[C0C045]

Microfrontend Macroplanes Estilizado

Además de aplicar los estilos de acciones y estados que ya hemos visto con anterioridad, también se aplicó una nueva propuesta de estilos para la presentación de las vigencias en 'ped/consultar', tal que así:

Nueva propuesta

Antes:

Ahora:

Pruebas Funcionales:

PR:

macroplanes_mf: https://github.com/udistrital/planeacion_macroplanes_mf/pull/15

[C0C045]

Microfrontend Reportes Estilizado

El microfrontend de reportes actualmente no tiene componentes compatibles con la nueva propuesta de estilos, sin embargo, se ajustó la tabla de 'Listado de reportes', ya que los headers no se mostraban.

Prueba funcional:

Por otro lado, el micromid de reportes estaba desactualizado, ya que el endpoint de validación no retornaba lo esperado y marcaba error, sin embargo, se solucionó satisfactoriamente.

Prueba funcional Antes:

Ahora:

PR's

reportes_mid: https://github.com/udistrital/planeacion_reportes_mid/pull/19 reportes_mf: https://github.com/udistrital/planeacion_reportes_mf/pull/11

[C0C045]

Microfrontend Seguimiento Estilizado

El microfrontend de seguimiento actualmente no tiene componentes compatibles con la nueva propuesta de estilos, sin embargo, se ajustó el color del estado de las actividades, ya que no cargaban correctamente.

Prueba Funcional

PR

seguimiento_mf: https://github.com/udistrital/planeacion_seguimiento_mf/pull/35

[C0C045]

Traducción de Paginator Angular Material

Al analizar la propuesta de traducción del paginator para cada una de las tablas de los microfrontends de SISGPLAN, se llega a la conclusión de que esta lógica no esta implementada desde el monolito, es decir, el cambio de idioma desde header, ya que de ser así no solo se habilitaría el cambio de idioma para el Paginator si no para todos los componente de la página, ya que esto es lo que se espera al cambiar de idioma.

Por ende, no tendría sentido aplicar todo un proceso de i18n solo para cambiar al español el Paginator. Entonces, es por esto que es mejor configurar directamente el paginator para que siempre me muestre las etiquetas en español igual que resto de componentes.

Por otro lado, el servicio no puede ser implementado en el módulo de utilidades, ya que sobrescribe clases propias de Angular y el módulo no soporta componentes de Angular; por consiguiente, se implementó el servicio en cada microfrontend que lo necesitará.

Prueba funcional:

PR's

construccion_mf: https://github.com/udistrital/planeacion_construccion_mf/pull/31 formulacion_mf: https://github.com/udistrital/planeacion_formulacion_mf/pull/38 macroplanes_mf: https://github.com/udistrital/planeacion_macroplanes_mf/pull/16 pendientes_mf: https://github.com/udistrital/planeacion_pendientes_mf/pull/22 reportes_mf: https://github.com/udistrital/planeacion_reportes_mf/pull/12 seguimiento_mf: https://github.com/udistrital/planeacion_seguimiento_mf/pull/36