From f91a453291902178545d1bf434a6f47f54abb7c6 Mon Sep 17 00:00:00 2001
From: Hugo <hugo.cubino@estudiantes.uva.es>
Date: Mon, 28 Oct 2024 16:20:19 +0100
Subject: [PATCH] Main Page arreglada y aparentemente funcional
---
angular/RestClient/src/app/app.config.ts | 12 +++---
angular/RestClient/src/app/app.routes.ts | 10 ++---
.../src/app/main-page/main-page.component.css | 17 +++++++++
.../app/main-page/main-page.component.html | 17 +++++++++
.../app/main-page/main-page.component.spec.ts | 22 +++++++++++
.../src/app/main-page/main-page.component.ts | 37 +++++++++++++++++++
.../app/shared/cliente-api-rest.service.ts | 8 ++++
angular/package-lock.json | 6 +++
8 files changed, 117 insertions(+), 12 deletions(-)
create mode 100644 angular/RestClient/src/app/main-page/main-page.component.css
create mode 100644 angular/RestClient/src/app/main-page/main-page.component.html
create mode 100644 angular/RestClient/src/app/main-page/main-page.component.spec.ts
create mode 100644 angular/RestClient/src/app/main-page/main-page.component.ts
create mode 100644 angular/package-lock.json
diff --git a/angular/RestClient/src/app/app.config.ts b/angular/RestClient/src/app/app.config.ts
index 4f22ef9..491a97d 100644
--- a/angular/RestClient/src/app/app.config.ts
+++ b/angular/RestClient/src/app/app.config.ts
@@ -1,16 +1,14 @@
-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(),
],
};
diff --git a/angular/RestClient/src/app/app.routes.ts b/angular/RestClient/src/app/app.routes.ts
index 1a20159..449996b 100644
--- a/angular/RestClient/src/app/app.routes.ts
+++ b/angular/RestClient/src/app/app.routes.ts
@@ -1,14 +1,14 @@
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',
},
];
diff --git a/angular/RestClient/src/app/main-page/main-page.component.css b/angular/RestClient/src/app/main-page/main-page.component.css
new file mode 100644
index 0000000..5306306
--- /dev/null
+++ b/angular/RestClient/src/app/main-page/main-page.component.css
@@ -0,0 +1,17 @@
+/* main-page.component.css */
+h1 {
+ font-size: 24px;
+}
+
+label {
+ margin-right: 10px;
+}
+
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+li {
+ margin: 5px 0;
+}
diff --git a/angular/RestClient/src/app/main-page/main-page.component.html b/angular/RestClient/src/app/main-page/main-page.component.html
new file mode 100644
index 0000000..18087fa
--- /dev/null
+++ b/angular/RestClient/src/app/main-page/main-page.component.html
@@ -0,0 +1,17 @@
+<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>
diff --git a/angular/RestClient/src/app/main-page/main-page.component.spec.ts b/angular/RestClient/src/app/main-page/main-page.component.spec.ts
new file mode 100644
index 0000000..40d589a
--- /dev/null
+++ b/angular/RestClient/src/app/main-page/main-page.component.spec.ts
@@ -0,0 +1,22 @@
+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();
+ });
+});
diff --git a/angular/RestClient/src/app/main-page/main-page.component.ts b/angular/RestClient/src/app/main-page/main-page.component.ts
new file mode 100644
index 0000000..1e34339
--- /dev/null
+++ b/angular/RestClient/src/app/main-page/main-page.component.ts
@@ -0,0 +1,37 @@
+// 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);
+ }
+ }
+}
diff --git a/angular/RestClient/src/app/shared/cliente-api-rest.service.ts b/angular/RestClient/src/app/shared/cliente-api-rest.service.ts
index 1def3e1..d44aaa9 100644
--- a/angular/RestClient/src/app/shared/cliente-api-rest.service.ts
+++ b/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' });
+ }
+
}
diff --git a/angular/package-lock.json b/angular/package-lock.json
new file mode 100644
index 0000000..2e8ea37
--- /dev/null
+++ b/angular/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "angular",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}
--
GitLab