Paginadores Tablas y esquinas redondeadas

2025-05-02 12:53:46 -04:00 · 2025-05-02 12:53:46 -04:00 · b8e07bf300
commit b8e07bf300
parent bc5edfed0e
7 changed files with 139 additions and 9 deletions
--- a/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
+++ b/src/app/pages/actualizacion-pd/actualizacion-pd.component.html
@ -25,7 +25,12 @@
 <div class="font-bold my-2 tituloTabla">Título de la tabla:</div>
  <p-table class="mi-tabla-redondeada"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="bg-blue-400 font-bold text-white">Empresa</th>
--- a/src/app/pages/ajuste-pd/ajuste-pd.component.html
+++ b/src/app/pages/ajuste-pd/ajuste-pd.component.html
@ -25,7 +25,12 @@
 <!-- <div class="font-bold text-black-alpha-90 my-2">Título de la tabla:</div> -->
  <p-table class="mi-tabla-redondeada"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
          <tr>
            <th colspan="10" style="background-color: #F8F9FA;border: none;"></th>
--- a/src/app/pages/concesiones/concesiones.component.html
+++ b/src/app/pages/concesiones/concesiones.component.html
@ -3,7 +3,12 @@
  <div class="font-bold my-2 tituloTabla">Cronogramas cargados:</div>
  <p-table
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="tablaAzul font-bold">Empresa</th>
@ -95,7 +100,12 @@
 <div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
 <p-table sortField="price" [sortOrder]="-1"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th pSortableColumn="empresa" class="tablaAzul font-bold">
--- a/src/app/pages/concesiones/concesiones.component.ts
+++ b/src/app/pages/concesiones/concesiones.component.ts
@ -60,6 +60,86 @@ export class ConcesionesComponent {
      fechaIngreso: '2022-04-29',
      semaforo: 'green'
    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Ingresado',
+      analista: '',
+      fechaIngreso: '2025-04-29',
+      semaforo: 'green'
+    },
+    {
+      empresa: 'Fmpresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'En revisión',
+      analista: 'Gabriel Torres',
+      fechaIngreso: '2024-04-29',
+      semaforo: 'yellow'
+    },
+    {
+      empresa: 'Gmpresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Rechazado',
+      analista: 'Jorge Muñoz',
+      fechaIngreso: '2023-04-29',
+      semaforo: 'red'
+    },
+    {
+      empresa: 'Hmpresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Aprobado',
+      analista: 'Jarolt Matamoros',
+      fechaIngreso: '2022-04-29',
+      semaforo: 'green'
+    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Ingresado',
+      analista: '',
+      fechaIngreso: '2025-04-29',
+      semaforo: 'green'
+    },
+    {
+      empresa: 'Fmpresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'En revisión',
+      analista: 'Gabriel Torres',
+      fechaIngreso: '2024-04-29',
+      semaforo: 'yellow'
+    },
+    {
+      empresa: 'Gmpresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Rechazado',
+      analista: 'Jorge Muñoz',
+      fechaIngreso: '2023-04-29',
+      semaforo: 'red'
+    },
+    {
+      empresa: 'Hmpresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Aprobado',
+      analista: 'Jarolt Matamoros',
+      fechaIngreso: '2022-04-29',
+      semaforo: 'green'
+    },
  ];

 }
--- a/src/app/pages/resumen/resumen.component.html
+++ b/src/app/pages/resumen/resumen.component.html
@ -8,7 +8,12 @@
 <div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
  <p-table class="mi-tabla-redondeada"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="bg-green-400 text-white font-bold">Empresa</th>
@ -35,7 +40,12 @@
 <div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
  <p-table class="mi-tabla-redondeada"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="surface-400 text-white font-bold">Empresa</th>
--- a/src/app/pages/unidad-informacion/unidad-informacion.component.html
+++ b/src/app/pages/unidad-informacion/unidad-informacion.component.html
@ -3,7 +3,12 @@
 <div class="font-bold tituloTabla my-2">Cronogramas solicitados y pendientes de carga:</div>
  <p-table class="mi-tabla-redondeada"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="bg-blue-400 text-white font-bold">Empresa</th>
@ -29,7 +34,12 @@
 <div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
  <p-table class="mi-tabla-redondeada"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="bg-green-400 text-white font-bold">Empresa</th>
@ -53,7 +63,12 @@
 <div class="font-bold tituloTabla my-2">Cronogramas rechazados:</div>
  <p-table class="mi-tabla-redondeada"
    [value]="products" stripedRows
-    showGridlines>
+    showGridlines
+    [paginator]="true"
+    [rows]="5"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
+    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="surface-400 text-white font-bold">Empresa</th>
--- a/src/styles.scss
+++ b/src/styles.scss
@ -65,3 +65,8 @@
    --p-datatable-row-striped-background: #BCDAEF;
    background: var(--p-datatable-row-striped-background);
  }
+
+  /* Para redondear esquinas de tablas */
+  .p-datatable-table-container{
+    border-radius: var(--p-content-border-radius) !important;
+  }