Creación microcliente gestión contractual y órdenes de compras y servicios - Parte 3

edwargl7 commented 5 months ago

Se requiere continuar con la construcción del microcliente de gestión contractual y órdenes de compras y servicios continuando con los pasos 5 hasta el paso 8 incluyendo modal al guardar. Contemplando la posibilidad de unificar paso 6 y 7.

Material de apoyo

Paso 5
Paso 6
Paso 7
Paso 8
Modal Revisar para el modal SweetAlert2

Especificaciones técnicas

Repositorio de este microcliente gestion_contractual_compras_contrato_mf
Se requiere crear el cliente empleando single-spa.
El API debe cumplir con los lineamientos establecidos para la creación de nuevos clientes definidos por la OATI.
Adicionar el consumo de este microcliente al Microcliente root de ARGO v2 gestion_contractual_compras_root_mf
Maquetar los pasos 5 al 8 del formulario del mockup.
No se debe consumir ningún endpoint de microservicios, solo realizar la maquetación.
Material de apoyo Charla progreso microclientes Sísifo
Se puede usar los Steppers de Angular Material Stepper

Sub Tareas

[x] Implementación de los pasos del 5 al 8 del formulario de registro de contrato.
[x] Documentación del README siguiendo los lineamientos Contenido README

Criterios de aceptación

[x] Cumplimiento de lineamientos de etiquetado de commits y gitflow.
[x] Consumo de este microcliente desde el microcliente root.
[x] Documentación del README siguiendo los lineamientos.

Requerimientos

No aplica

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).
[ ] PR a Develop.
[ ] Criterios de aceptación cumplidos.
[ ] Documentación de issue realizada.
[ ] Aprobada por SM/Líder técnico.

Lau2ri commented 5 months ago

Se añadieron los siguientes 3 pasos del formulario en la barra, se consideró oportuno juntar el paso 6 y 7 en uno solo llamado "Objeto, Justificación y Condiciones de Contrato" debido que al ser elementos relacionados y ser principalmente cuadros de texto quedarían bien juntos en un sólo paso.

Captura de pantalla 2024-06-17 200035

Por temas de estilos se decidió que el texto quedara debajo del número del paso en vez de a su derecha, debido a que había un conflicto visual entre el texto y las líneas grises que los unen, haciendo que quedara estéticamente raro.

Adicionalmente, se investigó sobre los bugs presentados anteriormente con el selector de fecha y con los campos añadidos de supervisor, pero por el momento no se ha podido arreglar del todo, así que queda pendiente.

Lau2ri commented 5 months ago

Por temas de comodidad y de buenas prácticas se optó por segmentar el formulario creando un componente por cada paso del mismo, así cada uno de estos tiene su propio archivo TS y manejar la lógica en un futuro será mucho más organizado y sencillo, ya que como se venía trabajando en un solo componente, los archivos HTML y TS ya se estaban volviendo inmanejables y desordenados, con esta organización el componente principal quedó mucho más limpio.

Al hacer esta segmentación ya se revisó que todo el formulario funcionara como lo venía haciendo, sin que existan conflictos o problemas.

Se procederá a completar los componentes de los pasos 5, 6 y 7 cómo se solicita.

edwargl7 commented 5 months ago

Muy buen enfoque optado y buena práctica que permite una mejor legibilidad del código y mantenibilidad. Además, va a permitir una integración con los microservicios de una forma más ordenada y clara.

Por parte de @cjgonzalezp se avanzó y presentó al usuario la unificación del paso 6, 7 y 8, la cual fue aprobada. Se presentará posteriormente al equipo de desarrollo y se planteará el ajuste requerido.

edwargl7 commented 5 months ago

Posiblemente los errores mencionados en la Issue #38, podrían solucionarse aplicando los estilos, dado que se incluye el core de Angular Material con el que se observa correcciones de algunos comportamientos que posiblemente pueda agrupar los presentados.

:bug: se observa que al seleccionar la fecha en el primer paso se queda congelado y es necesario refrescar la página.
:bug: al agregar un supervisor, no se genera completamente la tarjeta adicional para agregar los datos del segundo supervisor y bloquea la funcionalidad de los demás elementos del formulario.

Por lo que se comparte la información dada a las demás Issues de ARGO y SÍSIFO.

Información importante para el manejo de estilos en microclientes según lo conversado con varios líderes y desarrolladores que han guiado este proceso en la OATI, adicional de la revisión de varios microclientes :test_tube:.

1. Definición estilos :memo:

En resumen, cada microcliente parcel complementa y maneja estilos para angular material y los que sean pertinentes agregando el siguiente script en la ruta src/assets/styles/\<nombre-archivo>.scss

@use '@angular/material' as mat;

@include mat.core();

$md-primary: (
  50 : var(--md-primary-50),
  100 : var(--md-primary-100),
  200 : var(--md-primary-200),
  300 : var(--md-primary-300),
  400 : var(--md-primary-400),
  500 : var(--md-primary-500),
  600 : var(--md-primary-600),
  700 : var(--md-primary-700),
  800 : var(--md-primary-800),
  900 : var(--md-primary-900),
  A100 : var(--md-primary-A100),
  A200 : var(--md-primary-A200),
  A400 : var(--md-primary-A400),
  A700 : var(--md-primary-A700),
  contrast: (50 : var(--md-primary-contrast-50),
    100 : var(--md-primary-contrast-100),
    200 : var(--md-primary-contrast-200),
    300 : var(--md-primary-contrast-300),
    400 : var(--md-primary-contrast-400),
    500 : var(--md-primary-contrast-500),
    600 : var(--md-primary-contrast-600),
    700 : var(--md-primary-contrast-700),
    800 : var(--md-primary-contrast-800),
    900 : var(--md-primary-contrast-900),
    A100 : var(--md-primary-contrast-A100),
    A200 : var(--md-primary-contrast-A200),
    A400 : var(--md-primary-contrast-A400),
    A700 : var(--md-primary-contrast-A700),
  )
);

$md-accent: (
  50 : var(--md-accent-50),
  100 : var(--md-accent-100),
  200 : var(--md-accent-200),
  300 : var(--md-accent-300),
  400 : var(--md-accent-400),
  500 : var(--md-accent-500),
  600 : var(--md-accent-600),
  700 : var(--md-accent-700),
  800 : var(--md-accent-800),
  900 : var(--md-accent-900),
  A100 : var(--md-accent-A100),
  A200 : var(--md-accent-A200),
  A400 : var(--md-accent-A400),
  A700 : var(--md-accent-A700),
  contrast: (50 : var(--md-accent-contrast-50),
    100 : var(--md-accent-contrast-100),
    200 : var(--md-accent-contrast-200),
    300 : var(--md-accent-contrast-300),
    400 : var(--md-accent-contrast-400),
    500 : var(--md-accent-contrast-500),
    600 : var(--md-accent-contrast-600),
    700 : var(--md-accent-contrast-700),
    800 : var(--md-accent-contrast-800),
    900 : var(--md-accent-contrast-900),
    A100 : var(--md-accent-contrast-A100),
    A200 : var(--md-accent-contrast-A200),
    A400 : var(--md-accent-contrast-A400),
    A700 : var(--md-accent-contrast-A700),
  )
);

$md-warning: (
  50 : var(--md-warning-50),
  100 : var(--md-warning-100),
  200 : var(--md-warning-200),
  300 : var(--md-warning-300),
  400 : var(--md-warning-400),
  500 : var(--md-warning-500),
  600 : var(--md-warning-600),
  700 : var(--md-warning-700),
  800 : var(--md-warning-800),
  900 : var(--md-warning-900),
  A100 : var(--md-warning-A100),
  A200 : var(--md-warning-A200),
  A400 : var(--md-warning-A400),
  A700 : var(--md-warning-A700),
  contrast: (50 : var(--md-warning-contrast-50),
    100 : var(--md-warning-contrast-100),
    200 : var(--md-warning-contrast-200),
    300 : var(--md-warning-contrast-300),
    400 : var(--md-warning-contrast-400),
    500 : var(--md-warning-contrast-500),
    600 : var(--md-warning-contrast-600),
    700 : var(--md-warning-contrast-700),
    800 : var(--md-warning-contrast-800),
    900 : var(--md-warning-contrast-900),
    A100 : var(--md-warning-contrast-A100),
    A200 : var(--md-warning-contrast-A200),
    A400 : var(--md-warning-contrast-A400),
    A700 : var(--md-warning-contrast-A700),
  )
);

$light-theme: mat.define-light-theme((color: (primary: mat.define-palette($md-primary, 500),
        accent: mat.define-palette($md-accent, 500),
        warn: mat.define-palette($md-warning, 500),
      ),
      typography: mat.define-typography-config($font-family: 'Open Sans',
      ),
      desity: 0,
    ));

@include mat.all-component-themes($light-theme);

Donde,

/* Importación de Angular Material */
@use '@angular/material' as mat;

Permite usar las funciones del módulo de Angular Material y mixins en el archivo de estilos.

/* Inclusión del Núcleo de Angular Material */
@include mat.core();

Este mixin incluye los estilos básicos necesarios para Angular Material. Debe incluirse al menos una vez en su aplicación para que los componentes de Angular Material se rendericen correctamente.

/* Definición de Paletas de Colores */

/* Paleta primaria */
$md-primary: (...}

/* Paleta acento*/
$md-accent: (...}

/* Paleta Advertencia */
$md-warning: (...}

Se definen las paletas de colores primary, warning y accent, para cada tonalidad del color, desde 50 hasta A700 basado en los estilos proporcionados en assets . Las variantes de contraste (contrast) también se definen para asegurar que el texto sobre el color primario sea legible.

/* Definición del tema claro */
$light-theme: mat.define-light-theme(
...
);

/* Asignación colores a Angular Material */
@include mat.all-component-themes($light-theme);

Finalmente, se aplica el tema definido a todos los componentes de Angular Material. Este mixin asegura que todos los componentes utilicen los colores, tipografía y densidad definidos en light-theme.

Material adicional :book:

lineamientos Estilos de Angular Material
Theming Angular Material

2. Uso de estilos :pushpin:

Para poder usar los estilos se debe en cada microcliente referenciar los estilos en el script angular.json en:

...,
"styles": [
  "src/assets/styles/<nombre-archivo>.scss",
  ...
],
...

Nota :warning: :rotating_light:

Según la información recopilada con otros equipos de desarrollo de la OATI, se busca usar principalmente iconos y estilos de angular.

Lau2ri commented 5 months ago

Se completa la maquetación de la parte 5 del formulario, además de ya dejar en la barra de pasos la unificación de los paso 6, 7 y 8 presentados anteriormente para que queden juntos en un solo paso del formulario.

Vista inicial: Captura de pantalla 2024-06-19 230751

Realizando un filtro: Captura de pantalla 2024-06-19 230821

Vista inicial: Captura de pantalla 2024-06-19 230852

Con el checkbox marcado (se añade el input de Resolución justo a la derecha del checkbox) Captura de pantalla 2024-06-19 230906

Cabe mencionar que ya se han sincronizado los cambios a los estilos que se han ido realizando en el Issue #46 y se está empezando a ver más parecido al diseño original además de ir solucionando algunos bugs.

Duda💡

Respecto a la tabla de disponibilidad presupuestal me surgió la duda de si debían listarse todos los CDPs actuales y por medio de los filtros de Vigencia, Número de CDP y Valor Acumulado realizar un filtro, o si la tabla debe mostrarse vacía en un principio y mostrar sólo el CDP llamado por medio de los filtros.

En las imágenes mostradas anteriormente se muestra como se vería el primer caso (mostrando datos de prueba quemados).

edwargl7 commented 5 months ago

Se realiza la revisión junto con @cjgonzalezp y el equipo de desarrollo, y se requiere posterior agregar más pasos y se remueve las observaciones y Especificaciones técnicas. Mientras se refina los pasos adicionales requeridos el alcance para este sprint en el último paso es el siguiente.

Lau2ri commented 5 months ago

Se termina el paso 6 con la unificación y los ajustes mencionados:

Y se realiza el modal correspondiente a guardar la información:

## Duda 💡 Busqué en el repositorio de Assets de la Universidad para ver si encontraba la imagen del check verde para el Modal, pero no la encontré, no tengo claro si es una imagen estándar o si debo crearla por mi parte, así que por el momento solo puse un icon para mostrar como quedaría la maquetación.

Lau2ri commented 5 months ago

Se corrigió el modal del último paso haciéndolo con Sweetalert2 como se había pedido:

Debido a que no encontré una forma de poner otro botón con el Icono de descarga dentro del modal, se optó por dejar el botón solo en la página del formulario mientras tanto.

Además se hizo el ajuste solicitado del README en dónde se añade la versión de Node js utilizada: ![image](https://github.com/udistrital/argo_documentacion/assets/133523053/bfd493ad-e436-48a5-8a01-fb917c9a8ec8)

edwargl7 commented 5 months ago

Se realizan unos posibles ajustes para agregar el botón de Descargar.

Swal.fire({
      html: `
      <h3 style="margin-bottom: 5px;">SE REGISTRÓ EXITOSAMENTE EL CONTRATO</h3>
      <p style="margin: 5px 0;">CONSECUTIVO DE ELABORACIÓN: ###</p>
      <p style="margin: 5px 0;">VIGENCIA 2024</p>
    `,
      icon: "success",
      showCancelButton: true,
      confirmButtonText: `<span style="display: flex; align-items: center; justify-content: center;"><mat-icon class="material-icons" style="margin-right: 3px">system_update_alt</mat-icon> Descargar</span>`,
      confirmButtonColor: 'rgb(100, 21, 21)',
      cancelButtonText: "OK"
    });

Para la prueba se agregaron los estilos en el mismo ts, pero se recomienda aplicarlos en el script de estilos del propio componente.

Muy buen trabajo, pendiente el Pull Request a develop.

edwargl7 commented 5 months ago

Se ajusta el color del botón OK.

Por favor revisar el código adjunto y ajustarlo según el requerimiento, conservando el mensaje de Descargar en el mismo para un mejor entendimiento.

Lau2ri commented 5 months ago

Se realizan los ajustes correspondientes del botón de "Descargar" y se realiza el Pull Request a develop.

edwargl7 commented 5 months ago

Se realiza la revisión de los últimos cambios comentados y se completa el PR. Buen trabajo.

udistrital / argo_documentacion