Se agrega mensaje de error, se ajustan valores null o undefined en vi…

…sta, se agrega estilo a scroll horizontal en tabla

src/app/pages/poi-list-page/poi-list-page.component.css

@@ -1,9 +1,13 @@
 .banner-background {
     height: 300px; /* o la altura que desees */
     width: 100%; /* o el ancho que desees */
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(0, 70, 221, 0.5)),
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(0, 74, 234, 0.5)),
         url("/assets/img/background2.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center; /* centra la imagen en el contenedor */
 }
+
+.scroll {
+    overflow-x: auto;
+}

src/app/pages/poi-list-page/poi-list-page.component.html

@@ -11,15 +11,15 @@ <h1>Puntos de Interés</h1>
 
     <!-- <hr style="border: none; border: 1px solid lightgray;"> -->
 </div>
-<div class="mt-1 m-5">
-    <p>* Lista de sitios dentro de un límite geográfico o cerca de una latitud/longitud específica.</p>
-
+<div class="mt-1 m-5" *ngIf="!showError">
+
     <div class="mt-3" *ngIf="!loading">
+        <p>* Lista de sitios dentro de un límite geográfico o cerca de una latitud/longitud específica.</p>
         <div class="my-flex justify-content-end">
             <input [(ngModel)]="searchTerm" (input)="filterItems()" placeholder="Buscar coincidencias...">
         </div>
 
-        <div class="table-container mt-1">
+        <div class="table-container mt-1 scroll">
             <table>
                 <thead>
                     <tr>
@@ -49,27 +49,27 @@ <h1>Puntos de Interés</h1>
                     <ng-container *ngIf="currentItems.length > 0">
                         <tr *ngFor="let poi of currentItems">
                             <td>
-                                {{poi.ID}}
+                                {{poi?.ID || '-'}}
                             </td>
                             <td>
-                                {{poi.StatusType.Title}}
+                                {{poi?.StatusType?.Title || '-'}}
                             </td>
                             <td>
-                                {{poi.OperatorInfo.Title}}
+                                {{poi?.OperatorInfo?.Title || '-'}}
                             </td>
                             <td>
-                                {{poi.Connections.length}}
+                                {{poi?.Connections?.length || '-'}}
                             </td>
                             <td>
                                 <span>
-                                    Latitud: {{poi.AddressInfo.Latitude}} <br>
+                                    Latitud: {{poi?.AddressInfo?.Latitude || '-'}} <br>
                                 </span>
                                 <span>
-                                    Longitud: {{poi.AddressInfo.Longitude}}
+                                    Longitud: {{poi?.AddressInfo?.Longitude || '-'}}
                                 </span>
                             </td>
                             <td>
-                                {{poi.AddressInfo.Country.Title}}
+                                {{poi?.AddressInfo?.Country?.Title || '-'}}
                             </td>
                         </tr>
                     </ng-container>
@@ -88,18 +88,19 @@ <h5>No se han encontrado puntos de interés, por favor intenta nuevamente.</h5>
         <div class="my-flex justify-content-end">
             <p>Página {{currentPage}} de {{totalPages}}</p>
         </div>
-        <div class="my-flex justify-content-between mt-3"
-            [ngClass]="currentPage !== 1 ? 'justify-content-between' : 'justify-content-end'">
-            <button *ngIf="currentPage !== 1" (click)="previousPage()">
+        <div class="my-flex justify-content-between mt-3">
+            <button [disabled]="currentPage == 1" (click)="previousPage()">
                 {{'< Página anterior '}}
             </button>
-            <button (click)="nextPage()">Página siguiente ></button>
+            <button [disabled]="currentPage == totalPages" (click)="nextPage()">Página siguiente ></button>
         </div>
-
-
     </div>
 
     <app-loading *ngIf="loading"></app-loading>
 
 
+
+</div>
+<div class="my-flex justify-content-center align-items-center text-center" *ngIf="showError">
+    <h5>Ha ocurrido un problema al obtener los puntos de interés, por favor intenta nuevamente.</h5>
 </div>

src/app/pages/poi-list-page/poi-list-page.component.ts

@@ -11,6 +11,7 @@ import { PoiService } from 'src/app/services/poi.service';
 export class PoiListPageComponent implements OnInit {
 
   loading = false;
+  showError = false;
 
   currentPage = 1;
   itemsPerPage = 15;
@@ -43,6 +44,7 @@ export class PoiListPageComponent implements OnInit {
       },
       error: error => {
         console.error(error);
+        this.showError = true;
         this.loading = false;
       }
     });

src/styles.css

@@ -28,7 +28,7 @@ footer {
 }
 
 .table-container {
-    border-radius: 10px;
+    border-radius: 7px;
     overflow: hidden;
     box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
 }
@@ -244,7 +244,7 @@ table tr:hover {
 h1 {
     font-size: 3.5em;
     font-weight: bold;
-    color: black;
+    color: rgb(255, 255, 255);
 }
 
 /* Para títulos medianos, como encabezados de sección */
@@ -340,3 +340,25 @@ input:focus {
 input::placeholder {
     color: #a1a1a1;
 }
+
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+    scrollbar-width: auto;
+    scrollbar-color: #414141 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 16px;
+}
+
+*::-webkit-scrollbar-track {
+    background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: #414141;
+    border-radius: 10px;
+    border: 3px solid #ffffff;
+}