Main Page arreglada y aparentemente funcional

angular/RestClient/src/app/app.config.ts

-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-
+import { FormsModule } from '@angular/forms';
+import { CommonEngine } from '@angular/ssr';
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideClientHydration(),
-    provideHttpClient(withFetch()), provideAnimationsAsync(),
+    provideHttpClient(withFetch()),
+    provideAnimationsAsync(),
   ],
 };

angular/RestClient/src/app/app.routes.ts

 import { Routes } from '@angular/router';
-import { HotelListComponent } from './hotel-list/hotel-list.component';
+import { MainPageComponent } from './main-page/main-page.component'; // Asegúrate de que la ruta al componente principal sea correcta
 
 export const routes: Routes = [
   {
-    path: 'hotels',
-    component: HotelListComponent,
+    path: '', // Ruta principal
+    component: MainPageComponent, // Componente de la página principal
   },
   {
-    path: '**',
-    redirectTo: 'hotels',
+    path: '**', // Redirección para rutas no encontradas
+    redirectTo: '', // Redirige a la página principal
     pathMatch: 'full',
   },
 ];

angular/RestClient/src/app/main-page/main-page.component.css

+/* main-page.component.css */
+h1 {
+  font-size: 24px;
+}
+
+label {
+  margin-right: 10px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin: 5px 0;
+}

angular/RestClient/src/app/main-page/main-page.component.html

+<div>
+  <h1>Listado de Usuarios</h1>
+  
+  <label for="filter">Filtrar por estado:</label>
+  <select id="filter" [(ngModel)]="selectedStatus" (change)="filterUsers()">
+    <option value="all">Todos</option>
+    <option value="NO_BOOKINGS">Sin reservas</option>
+    <option value="WITH_ACTIVE_BOOKINGS">Con reservas activas</option>
+    <option value="WITH_INACTIVE_BOOKING">Con reservas inactivas</option>
+  </select>
+
+  <ul>
+    <li *ngFor="let user of filteredUsers">
+      {{ user.name }} - {{ user.email }} - {{ user.status }}
+    </li>
+  </ul>
+</div>

angular/RestClient/src/app/main-page/main-page.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MainPageComponent } from './main-page.component';
+
+describe('MainPageComponent', () => {
+  let component: MainPageComponent;
+  let fixture: ComponentFixture<MainPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MainPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MainPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/RestClient/src/app/main-page/main-page.component.ts

+// main-page.component.ts
+import { Component, OnInit } from '@angular/core';
+import { ClienteApiRestService } from '../shared/cliente-api-rest.service';
+import { User } from '../../types';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import users from '../../mocks/users.json';
+@Component({
+  standalone: true,
+  imports: [FormsModule, CommonModule],
+  selector: 'app-main-page',
+  templateUrl: './main-page.component.html',
+  styleUrls: ['./main-page.component.css']
+})
+export class MainPageComponent implements OnInit {
+  users: User[] = [];
+  filteredUsers: User[] = [];
+  selectedStatus: string = 'all';
+
+  constructor(private ClienteApiRestService: ClienteApiRestService) {}
+
+  ngOnInit(): void {
+    this.users = (users as unknown as User[]);
+    this.ClienteApiRestService.getAllUsers().subscribe((data: User[]) => {
+      this.users = data;
+      this.filteredUsers = data; // Inicialmente, muestra todos los usuarios
+    });
+  }
+
+  filterUsers(): void {
+    if (this.selectedStatus === 'all') {
+      this.filteredUsers = this.users;
+    } else {
+      this.filteredUsers = this.users.filter(user => user.status === this.selectedStatus);
+    }
+  }
+}

angular/RestClient/src/app/shared/cliente-api-rest.service.ts

@@ -3,6 +3,8 @@ import { Injectable } from '@angular/core';
 
 import hotels from '../../mocks/hotels.json';
 import { Hotel } from '../../types';
+import { Observable } from 'rxjs';
+import { User } from '../../types';
 
 @Injectable({
   providedIn: 'root',
@@ -10,6 +12,7 @@ import { Hotel } from '../../types';
 export class ClienteApiRestService {
   private static readonly BASE_URI = 'http://localhost:8080';
   private static readonly HOTEL_URI = `${ClienteApiRestService.BASE_URI}/hotels`;
+  private static readonly USER_URI = `${ClienteApiRestService.BASE_URI}/users`;
   constructor(private http: HttpClient) {}
 
   getAllHotels() {
@@ -45,4 +48,9 @@ export class ClienteApiRestService {
       }
     );
   }
+
+  getAllUsers(): Observable<User[]> {
+    return this.http.get<User[]>('http://localhost:8080/users', { observe: 'body' });
+  }
+  
 }

angular/package-lock.json

+{
+  "name": "angular",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}