Merge branch 'main_page' into 'develop'

Main page

See merge request !6

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

+/* Fondo oscuro de la aplicación para un aspecto futurista */
+body {
+  background-color: #121212;
+  color: #e0e0e0;
+  font-family: 'Roboto', sans-serif;
+}
+
+/* Contenedor principal con esquinas redondeadas y sombra sutil */
+.user-container {
+  max-width: 600px;
+  margin: 30px auto;
+  padding: 25px;
+  background-color: #1f1f1f;
+  border-radius: 12px;
+  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
+}
+
+/* Título centralizado y con un estilo moderno */
+h1 {
+  text-align: center;
+  font-size: 2em;
+  margin-bottom: 25px;
+  color: #ffffff;
+  letter-spacing: 1px;
+}
+
+/* Contenedor de filtro centrado y limpio */
+.filter-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+label {
+  font-weight: 600;
+  margin-right: 10px;
+  color: #a1a1a1;
+}
+
+/* Select estilizado con borde suave y sombras */
+select {
+  padding: 10px;
+  font-size: 1em;
+  border: none;
+  outline: none;
+  background-color: #292929;
+  color: #e0e0e0;
+  border-radius: 6px;
+  box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.5);
+  transition: all 0.3s ease;
+}
+
+select:hover {
+  background-color: #3a3a3a;
+}
+
+/* Lista de usuarios sin puntos y con bordes modernos */
+.user-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Elementos de la lista con espaciado y efecto hover futurista */
+.user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  margin-bottom: 8px;
+  background-color: #2c2c2c;
+  border-radius: 8px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  cursor: pointer;
+}
+
+.user-item:hover {
+  background-color: #333333;
+  transform: translateY(-2px);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Estilos de usuario con tipografía clara y futurista */
+.user-name {
+  flex: 1;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.user-email {
+  flex: 2;
+  color: #b0b0b0;
+  font-style: italic;
+  text-align: left;
+  padding-left: 15px;
+}
+
+.user-status {
+  flex: 1;
+  font-weight: 500;
+  color: #76c7c0;
+  text-transform: uppercase;
+  text-align: right;
+}

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

+<div class="user-container">
+  <h1>Listado de Usuarios</h1>
+
+  <div class="filter-container">
+    <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>
+  </div>
+
+  <ul class="user-list">
+    <li *ngFor="let user of filteredUsers" class="user-item">
+      <span class="user-name">{{ user.name }}</span>
+      <span class="user-email">{{ user.email }}</span>
+      <span class="user-status">{{ user.status }}</span>
+    </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": {}
+}