diff --git a/angular/RestClient/src/app/core/features/user/main-page/main-page.component.ts b/angular/RestClient/src/app/core/features/user/main-page/main-page.component.ts
index e609b7e568a909e2d6f7efd995ddccb57472cb76..468ec54164998e93265193162e34e7526131036d 100644
--- a/angular/RestClient/src/app/core/features/user/main-page/main-page.component.ts
+++ b/angular/RestClient/src/app/core/features/user/main-page/main-page.component.ts
@@ -1,11 +1,11 @@
-// main-page.component.ts
import { Component, OnInit } from '@angular/core';
import { User, UserStateFilter } from '../../../../../types';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
-import users from '../../../../../mocks/users.json';
import { RouterModule } from '@angular/router';
import { UserClientService } from '../../../../shared/user-client.service';
+import mockUsers from '../../../../../mocks/users.json'; // Renombrado para claridad
+
@Component({
standalone: true,
imports: [FormsModule, CommonModule, RouterModule],
@@ -21,16 +21,24 @@ export class MainPageComponent implements OnInit {
constructor(private userClient: UserClientService) {}
ngOnInit(): void {
- this.users = users as unknown as User[];
- this.userClient.getAllUsers().subscribe((data: User[]) => {
- this.users = data;
- this.filteredUsers = data; // Inicialmente, muestra todos los usuarios
+ // Validar que el mock sea del tipo correcto
+ const isValidMock = Array.isArray(mockUsers) && mockUsers.every(user => 'id' in user && 'name' in user && 'status' in user);
+ this.users = isValidMock ? (mockUsers as User[]) : [];
+ this.filteredUsers = [...this.users];
+
+ // Sobrescribir con datos reales si están disponibles
+ this.userClient.getAllUsers().subscribe({
+ next: (data: User[]) => {
+ this.users = data;
+ this.filteredUsers = [...data];
+ },
+ error: (err) => console.error('Error al cargar usuarios:', err),
});
}
filterUsers(): void {
if (this.selectedStatus === 'All') {
- this.filteredUsers = this.users;
+ this.filteredUsers = [...this.users];
} else {
this.filteredUsers = this.users.filter(
(user) => user.status === this.selectedStatus
@@ -38,7 +46,7 @@ export class MainPageComponent implements OnInit {
}
}
- getState(user: User) {
+ getState(user: User): string {
switch (user.status) {
case 'NO_BOOKINGS':
return 'SIN RESERVAS';
@@ -46,6 +54,8 @@ export class MainPageComponent implements OnInit {
return 'CON RESERVAS ACTIVAS';
case 'WITH_INACTIVE_BOOKINGS':
return 'CON RESERVAS INACTIVAS';
+ default:
+ return 'ESTADO DESCONOCIDO';
}
}
}
diff --git a/angular/RestClient/src/app/core/features/user/user-form/user-form.component.css b/angular/RestClient/src/app/core/features/user/user-form/user-form.component.css
index 66cd83381d454b5030a7dcd2b8805c7913762519..1eef9bba18e0bd279742ea1d297e8ab49da1c394 100644
--- a/angular/RestClient/src/app/core/features/user/user-form/user-form.component.css
+++ b/angular/RestClient/src/app/core/features/user/user-form/user-form.component.css
@@ -1,68 +1,81 @@
.form-container {
- width: 100%;
- max-width: 500px;
- margin: 0 auto;
- padding: 20px;
- background: #f9f9f9;
- border: 1px solid #ddd;
- border-radius: 8px;
- }
-
- h2 {
- text-align: center;
- margin-bottom: 20px;
- }
-
- .form-group {
- margin-bottom: 15px;
- }
-
- label {
- display: block;
- font-weight: bold;
- margin-bottom: 5px;
- }
-
- input {
- width: 100%;
- padding: 10px;
- font-size: 16px;
- border: 1px solid #ccc;
- border-radius: 4px;
- box-sizing: border-box;
- }
-
- input[readonly] {
- background-color: #f5f5f5;
- cursor: not-allowed;
- }
-
- .button-group {
- display: flex;
- gap: 10px;
- justify-content: center;
- }
-
- button {
- padding: 10px 20px;
- font-size: 16px;
- border-radius: 4px;
- border: none;
- cursor: pointer;
- }
-
- .btn-primary {
- background-color: #007bff;
- color: #fff;
- }
-
- .btn-secondary {
- background-color: #6c757d;
- color: #fff;
- }
-
- .btn-success {
- background-color: #28a745;
- color: #fff;
- }
-
\ No newline at end of file
+ max-width: 400px;
+ margin: 50px auto;
+ background: #f8f9fa;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ font-family: Arial, sans-serif;
+}
+
+h2 {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #333;
+}
+
+.form-group {
+ margin-bottom: 15px;
+}
+
+label {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 5px;
+ color: #555;
+}
+
+input {
+ width: 100%;
+ padding: 10px;
+ font-size: 14px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ background: #fff;
+}
+
+input[readonly] {
+ background: #f3f3f3;
+}
+
+.button-group {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+}
+
+.btn {
+ padding: 10px 20px;
+ font-size: 14px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.btn-primary {
+ background-color: #007bff;
+ color: white;
+}
+
+.btn-primary:hover {
+ background-color: #0056b3;
+}
+
+.btn-secondary {
+ background-color: #6c757d;
+ color: white;
+}
+
+.btn-secondary:hover {
+ background-color: #5a6268;
+}
+
+.btn-success {
+ background-color: #28a745;
+ color: white;
+}
+
+.btn-success:hover {
+ background-color: #218838;
+}
diff --git a/angular/RestClient/src/app/core/features/user/user-form/user-form.component.html b/angular/RestClient/src/app/core/features/user/user-form/user-form.component.html
index 0a6e33f1c926c2b4ac4bac13c6128a03335863b0..92bcb7c97d45e220d97213eb0379111b70d550d3 100644
--- a/angular/RestClient/src/app/core/features/user/user-form/user-form.component.html
+++ b/angular/RestClient/src/app/core/features/user/user-form/user-form.component.html
@@ -1,79 +1,82 @@
<div class="form-container">
- <h2>Perfil de Usuario</h2>
- <form [formGroup]="userForm">
- <div class="form-group">
- <label for="name">Nombre:</label>
- <input
- id="name"
- type="text"
- class="form-control"
- formControlName="name"
- [readonly]="!isEditing"
- />
- </div>
-
- <div class="form-group">
- <label for="email">Email:</label>
- <input
- id="email"
- type="email"
- class="form-control"
- formControlName="email"
- [readonly]="!isEditing"
- />
- </div>
-
- <div class="form-group" *ngIf="isEditing">
- <label for="currentPassword">Contraseña actual:</label>
- <input
- id="currentPassword"
- type="password"
- class="form-control"
- formControlName="currentPassword"
- placeholder="Introduce tu contraseña actual"
- />
- </div>
-
- <div class="form-group" *ngIf="isEditing">
- <label for="newPassword">Nueva contraseña:</label>
- <input
- id="newPassword"
- type="password"
- class="form-control"
- formControlName="newPassword"
- placeholder="Introduce tu nueva contraseña"
- />
- </div>
-
- <div class="button-group">
- <button
- *ngIf="!isEditing"
- type="button"
- class="btn btn-primary"
- (click)="toggleEdit()"
- >
- Editar
- </button>
-
- <button
- *ngIf="isEditing"
- type="button"
- class="btn btn-secondary"
- (click)="cancelEdit()"
- >
- Cancelar
- </button>
-
- <button
- *ngIf="isEditing"
- type="submit"
- class="btn btn-success"
- (click)="saveChanges()"
- [disabled]="!userForm.valid"
- >
- Guardar
- </button>
- </div>
- </form>
- </div>
-
\ No newline at end of file
+ <h2>Perfil de Usuario</h2>
+ <form [formGroup]="userForm" (ngSubmit)="saveChanges()">
+ <!-- Campo Nombre -->
+ <div class="form-group">
+ <label for="name">Nombre:</label>
+ <input
+ id="name"
+ type="text"
+ class="form-control"
+ formControlName="name"
+ [readonly]="!isEditing"
+ />
+ </div>
+
+ <!-- Campo Email -->
+ <div class="form-group">
+ <label for="email">Email:</label>
+ <input
+ id="email"
+ type="email"
+ class="form-control"
+ formControlName="email"
+ [readonly]="!isEditing"
+ />
+ </div>
+
+ <!-- Campo Contraseña Actual (solo en edición) -->
+ <div class="form-group" *ngIf="isEditing">
+ <label for="currentPassword">Contraseña actual:</label>
+ <input
+ id="currentPassword"
+ type="password"
+ class="form-control"
+ formControlName="currentPassword"
+ placeholder="Introduce tu contraseña actual"
+ />
+ </div>
+
+ <!-- Campo Nueva Contraseña (solo en edición) -->
+ <div class="form-group" *ngIf="isEditing">
+ <label for="newPassword">Nueva contraseña:</label>
+ <input
+ id="newPassword"
+ type="password"
+ class="form-control"
+ formControlName="newPassword"
+ placeholder="Introduce tu nueva contraseña"
+ />
+ </div>
+
+ <!-- Grupo de Botones -->
+ <div class="button-group">
+ <button
+ *ngIf="!isEditing"
+ type="button"
+ class="btn btn-primary"
+ (click)="toggleEdit()"
+ >
+ Editar
+ </button>
+
+ <button
+ *ngIf="isEditing"
+ type="button"
+ class="btn btn-secondary"
+ (click)="cancelEdit()"
+ >
+ Cancelar
+ </button>
+
+ <button
+ *ngIf="isEditing"
+ type="submit"
+ class="btn btn-success"
+ [disabled]="!userForm.valid"
+ >
+ Guardar
+ </button>
+ </div>
+ </form>
+</div>
diff --git a/angular/RestClient/src/app/core/features/user/user-form/user-form.component.ts b/angular/RestClient/src/app/core/features/user/user-form/user-form.component.ts
index 238d811d7fcb62bd47af2dabdeec720cb597fbc5..9627686755f1d00d3886e3a15385f42b662370f0 100644
--- a/angular/RestClient/src/app/core/features/user/user-form/user-form.component.ts
+++ b/angular/RestClient/src/app/core/features/user/user-form/user-form.component.ts
@@ -1,11 +1,13 @@
import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { UserClientService } from '../../../../shared/user-client.service';
@Component({
+ standalone: true,
selector: 'app-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.css'],
+ imports: [ReactiveFormsModule, FormsModule],
})
export class UserFormComponent implements OnInit {
userForm!: FormGroup;
@@ -15,7 +17,7 @@ export class UserFormComponent implements OnInit {
ngOnInit(): void {
this.initializeForm();
- this.loadUserData();
+ // this.loadUserData();
}
private initializeForm(): void {
diff --git a/angular/RestClient/src/mocks/users.json b/angular/RestClient/src/mocks/users.json
new file mode 100644
index 0000000000000000000000000000000000000000..79c155fa54e09974615ea2fab044e4b19e31f161
--- /dev/null
+++ b/angular/RestClient/src/mocks/users.json
@@ -0,0 +1,14 @@
+[
+ {
+ "id": 1,
+ "name": "John Doe",
+ "email": "jon@com",
+ "status": "NO_BOOKINGS"
+ },
+ {
+ "id": 2,
+ "name": "Jane Smith",
+ "status": "WITH_ACTIVE_BOOKINGS"
+ }
+ ]
+
\ No newline at end of file