Ajustar y modularizar tablas en el mf revision_cumplido_prov

JuanCamiloMartinezLopez commented 2 months ago

Se requiere realizar el ajuste de las tablas y su modularización en un componente para tablas

Sub Tareas

[x] Crear el componente en general-components
[x] Agregar de forma dinámica la paginación y demás características.
[x] Permitir que sea dinámico.
[x] Ajustar el estilo de la tabla.

Criterios de aceptación

[x] Componente funcionando.
[x] Issue documentado.

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

[ ] Desarrollo en local.
[ ] Push en Feature.
[ ] Pruebas locales (funcionales).
[ ] PR a Develop.
[ ] Criterios de aceptación cumplidos.
[ ] Documentación de issue realizada.
[ ] Aprobada por SM/Líder técnico.

faidercamilo26 commented 2 months ago

Se ha creado un componente general para la visualización de tablas

Con el objetivo de unificar el estilo de todas las tablas del programa y reducir la duplicación de código, se ha desarrollado un componente reutilizable en Angular Material. Este componente se encarga de pintar cualquier tabla, aplicando un estilo uniforme y facilitando la integración de funcionalidades como paginación, ordenamiento y acciones específicas por fila.

Funcionamiento del componente

El componente TablaComponent recibe los siguientes parámetros:

@Input() displayedColumns: Un array que define las columnas a mostrar en la tabla. Cada columna contiene el nombre a mostrar en el encabezado (header) y un identificador (def).
@Input() data: Un array de objetos que representan los datos a visualizar en la tabla.
@Output() actionClicked: Un evento que se emite cuando se hace clic en un botón de acción en una fila.

La tabla permite:

Mostrar las columnas configuradas a través de displayedColumns, incluyendo tanto columnas de datos como de acciones.
Mostrar las fechas en formato dd/MM/yyyy si la columna contiene datos de tipo fecha.
Acciones en cada fila, habilitando botones dinámicos definidos en la propiedad acciones de cada elemento.

El componente cuenta con las funcionalidades de:

Paginación: Utilizando MatPaginator de Angular Material, visible solo si hay más de 10 elementos.
Ordenamiento: A través de MatSort en todas las columnas configuradas.

Ejemplo de uso

En el archivo HTML de un componente, puedes integrar el componente de la siguiente manera:

<app-tabla
  [displayedColumns]="misColumnas"
  [data]="misDatos"
  (actionClicked)="miMetodo($event)">
</app-tabla>

El componente TablaComponent se encarga de gestionar todo el layout y estilo de la tabla, aplicando consistencia a través del uso de MatTable, MatSort y MatPaginator.

Con esta implementación, se optimiza el código y se garantiza que todas las tablas del sistema mantengan una apariencia y comportamiento homogéneo.

Se realiza el cambio en todas las tablas y se prueba el flujo para verificar que los datos se esten pintando correctamente en la tabla y que las funcionalidades de los botones sigan funcionando normalmente.