Crear vista para la reversión de cumplidos proveedores aprobados.

[JuanCamiloMartinezLopez]

Se requiere realizar la vista para la reversión de cumplidos proveedores aprobados por el ordenador según el mockup

Sub Tareas

• [x] Desarrollar vista base según el mockup.

Criterios de aceptación

• [x] Vista creada.
• [x] issue documentada.

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]

:triangular_flag_on_post: Vista reversion cumplidos :triangular_flag_on_post:

Se crea la vista correspondiente para que un ordenador pueda revertir un cumplido si este cumple con los requisitos correspondientes, por el momento no esta implementada toda la parte de funcionalidad, solo esta la vista.

Vista Cuando no hay cumplidos que se puedan revertir por parte del ordenador

Se diseña esta vista siguiendo el mockup, sin embargo, la propuesta esque esta vista se elimine, que cuando no hayan cumplidos que se puedan revertir se cargue la tabla de la siguiente vista vacia y el ordenador puede dirigirse al inicio desde el menu de la izquierda.

Vista Cuando si hay cumplidos que se puedan revertir por parte del ordenador

https://github.com/user-attachments/assets/1cb2deae-57e5-4da3-b91b-742a0b9be5b2

En esta vista se maneja la paginazion, la ordenacion ya sea de mayor a menor o menor a mayor en todos los campos de la tabla , se realiza la tabla de manera responsiva para que sirva para distintas pantallas.

Se crea el componente tabla.component para que sea transversal a todo el programa para crear tablas, este debe reciir los siguientes datos:

• Un array de las columnas de la tabla, este array es de objetos que contienen un def, que es el nombre del container de la columna de la tabla y header que es el string del encabezado de la tabla.

displayedColumns = [
    {def:'NumeroContrato', header:'Numero Contrato' },
    {def:'Vigencia', header: 'Vigencia'},
    {def:'Rp', header: 'Rp'},
    {def:'VigenciaRp', header: 'Vigencia Rp'},
    {def:'FechaAprobacion', header: 'Fecha Aprobacion'},
    {def:'NombreProveedor', header: 'Nombre Proveedor'},
    {def:'Dependencia', header: 'Dependencia'},
    {def:'Acciones', header: 'Acciones'},
  ];

• Data: se debe enviar la data que se va a pintar en la tabla.

Descripción del Componente

Este componente utiliza una tabla de Angular Material (<mat-table>) para mostrar datos de manera organizada, con funcionalidades de paginación, ordenación y acciones específicas. La tabla es completamente responsiva, con un soporte flexible para diferentes tipos de columnas, incluidas columnas de fechas y acciones.

Estructura del Componente

El código utiliza un ciclo *ngFor para generar dinámicamente las columnas en base a un arreglo displayedColumns. Cada columna tiene un comportamiento personalizado basado en su tipo:

• Columnas de datos generales: Se muestran directamente dentro de la celda de la tabla.
• Columnas de tipo fecha: Se aplica el pipe date para formatear la fecha en el formato dd/MM/yyyy.
• Columnas de acciones: Se generan iconos a partir de un array de acciones, que se dividen y muestran dentro de botones interactivos.

Detalles Técnicos

• Se aplica el módulo de ordenación (matSort) para permitir que el usuario pueda ordenar los datos según las diferentes columnas.
• La cabecera de la tabla es generada de manera dinámica con el ciclo *ngFor, que recorre el array displayedColumns y crea las definiciones (matColumnDef) necesarias.
• La paginación se implementa usando el componente <mat-paginator>, con opciones para mostrar entre 10, 15 o 20 elementos por página.

Funcionamiento del Componente

1. Generación dinámica de columnas: El array displayedColumns contiene objetos que definen cada columna de la tabla. Por cada columna, se verifica su tipo:

   • Si la columna no es de fecha ni de acciones, simplemente se muestra el valor correspondiente del objeto element.
   • Si es una columna de fecha (verificada con column.def.toLowerCase().includes('fecha')), se formatea utilizando el pipe de fecha.
   • Para columnas de acciones, se muestran iconos en botones a través del atributo mat-icon.

2. Ordenación: La tabla utiliza matSort, lo que permite ordenar las columnas haciendo clic en los encabezados.

3. Acciones: En las columnas de acciones, se generan botones con iconos interactivos. Los iconos se generan dinámicamente a partir de los valores que están separados por comas dentro del array element[column.def].

4. Paginación: La paginación está habilitada mediante el uso de <mat-paginator>, que permite al usuario cambiar entre diferentes tamaños de página y navegar a través de las páginas de la tabla.

[JuanCamiloMartinezLopez]

@faidercamilo26 Buen trabajo.