Desarrollo interfaz del microcliente de gestión de usuarios y roles - Vista de consulta de usuarios

edwargl7 commented 4 months ago

Se requiere realizar el desarrollo de la vista de consulta de usuarios registrados en el microcliente de gestión de usuarios y roles basado en el [mockup]().

Sub Tareas

[x] Realizar el desarrollo de la interfaz gráfica basado en el mockup.

Criterios de aceptación

[x] Creación de la rama con el desarrollo indicado.

Especificaciones técnicas

Repositorio de este microcliente auditoria_plan_mejoramiento_usuario_mf
Se requiere seguir implementado el cliente empleando single-spa.
El API debe cumplir con los lineamientos establecidos para la creación de nuevos clientes definidos por la OATI.
Maquetar el registro de usuario del mockup.
No se debe consumir ningún endpoint de microservicios, solo realizar la maquetación.

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

CristianCGutierrezG commented 4 months ago

Se inicia el desarrollo de la vista de consulta de usuarios en una nueva rama, utilizando como base el desarrollo de la issue https://github.com/udistrital/sisifo_documentacion/issues/24 y los mockups propuestos.

CristianCGutierrezG commented 4 months ago

Se progresa con el desarrollo del maquetado, incorporando datos aleatorios para observar el comportamiento tanto de la tabla como del formulario de búsqueda.

Se presentan dificultades al entender como funcionan los estilos predeterminados de Angular Material y como cambiarlos.

edwargl7 commented 4 months ago

Buen trabajo, 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.

CristianCGutierrezG commented 4 months ago

Se ha agregado el script que maneja los estilos de Angular Material y la paleta de colores:

Esto ha provocado un cambio en el comportamiento de los formularios, los cuales ahora funcionan correctamente y se visualizan adecuadamente:

Además, durante el proceso de maquetado de la tabla para mostrar la información de los usuarios, surgieron algunas observaciones:

Cambiar los estilos de los elementos mat-table es complicado debido a cómo la librería estructura dichos estilos, lo que dificulta especificar el tamaño de las filas.
Según la documentación de Angular Material, actualmente no existe una forma de filtrar los elementos de la tabla.
Hubo problemas para agregar otras filas (como las que se requieren para el filtrado) justo después del header de la tabla. Se plantea la opción de colocarlas como footer, una alternativa con la que cuenta la librería.

CristianCGutierrezG commented 4 months ago

Se ha agregado los elementos de filtrado en la parte inferior de la tabla como footer, siendo la opción viable por el momento

Además, se ha implementado la funcionalidad en los selectores de filtrado de Roles y Estado para ver su funcionamiento.

edwargl7 commented 3 months ago

Se realiza la revisión del código, luego trabajaremos con peer code review entre integrantes del equipo.

:wrench: Tratar de no definir estilos en el HTML, agregarlos al estilo del componentes como los demás estilos creados. mat-card [style.width.%]="100" Se resuelve el PR. Buen trabajo.

udistrital / sisifo_documentacion