Merge pull request #60 from UdL-EPS-SoftArch/fix-general-errors-and-r…

…efactor

Fix general errors and refactor

src/app/apartment/apartment-create/apartment-create.component.html

@@ -30,11 +30,10 @@ <h1 class="mb-4">Create Apartment</h1>
             <label for="description" class="form-label">Description</label>
             <textarea class="form-control" id="description" rows="3" required [(ngModel)]="apartment.description" name="description" style="resize: vertical; min-height: 100px; max-height: 300px;"></textarea>
         </div>
-        <!-- <app-room-list [apartment]="apartment" [maxRooms]="5"></app-room-list>
-    <div class="mb-3">
-      <a href="/room/create"><button type="button" class="btn btn-secondary">Add Room</button></a>
-    </div> -->
-
+        <!--<app-room-list [apartment]="apartment" [maxRooms]="5"></app-room-list>-->
+        <div class="mb-3">
+          <a href="/room/create"><button type="button" class="btn btn-secondary">Add Room</button></a>
+        </div>
         <button type="submit" class="btn btn-primary mt-3">Submit</button>
     </form>
 </div>

src/app/apartment/apartment-create/apartment-create.component.ts

@@ -8,12 +8,12 @@ import { ErrorMessageService } from '../../error-handler/error-message.service';
 import { CommonModule } from '@angular/common';
 import { ApartmentService } from '../apartment.service';
 import { ApartmentDetails } from '../apartment-details';
-/*import { RoomListComponent } from '../../room/room-list/room-list.component';*/
+import { RoomListComponent } from '../../room/room-list/room-list.component';
 
 @Component({
   selector: 'app-apartment-create',
   standalone: true,
-  imports: [FormsModule, CommonModule, /*RoomListComponent*/],
+  imports: [FormsModule, CommonModule, RoomListComponent],
   templateUrl: './apartment-create.component.html',
   styleUrls: ['./apartment-create.component.css']
 })

src/app/apartment/apartment-list/apartment-list.component.html

@@ -2,7 +2,7 @@
     <h2> My apartments</h2>
 
     <div *ngIf="apartments.length === 0" class="no-apartments">
-        <p>No hay apartamentos disponibles.</p>
+        <p>There are no apartments</p>
     </div>
 
     <div *ngIf="apartments.length > 0" class="table-responsive">
@@ -23,7 +23,7 @@ <h2> My apartments</h2>
             </thead>
             <tbody>
                 <tr *ngFor="let apartment of apartments">
-                    <td>{{ apartment.getIdFromLinks() }}</td>
+                  <td><a [routerLink]="['/apartment', apartment.getIdFromLinks()]">{{ apartment.getIdFromLinks() }}</a></td>
                     <td>{{ apartment.name }}</td>
                     <td>{{ apartment.address }}, {{ apartment.city }}, {{ apartment.country }}</td>
                     <td>{{ apartment.floor }}</td>
@@ -32,14 +32,20 @@ <h2> My apartments</h2>
                     <td>{{ apartment.description || 'N/A' }}</td>
                     <td>{{ apartment.note || 'N/A' }}</td>
                     <td>
-                        <button class="deleteButton" (click)="deleteApartment(apartment.getIdFromLinks())"><span class = "deleteSpan">Delete</span></button>
+                        <button class="btn btn-danger mt-3" [routerLink]="['/apartment/', apartment.getIdFromLinks(), 'delete']">
+                          <span>Delete</span>
+                        </button>
                     </td>
                     <td>
-                        <button class="updateButton" (click)="updateApartment(apartment.getIdFromLinks())"><span class = "updateSpan">Edit</span></button>
+                        <button class="btn btn-primary mt-3" [routerLink]="['/apartment/', apartment.getIdFromLinks(), 'update']">
+                          <span>Edit</span>
+                        </button>
                     </td>
                 </tr>
             </tbody>
         </table>
-        <button class="createButton" (click)="createApartment()"><span class="createSpan">Create</span></button>
+        <button class="btn btn-success mt-3" [routerLink]="['/apartment/create']">
+          <span>Create</span>
+        </button>
     </div>
 </div>

src/app/apartment/apartment-list/apartment-list.component.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ApartmentListComponent } from './apartment-list.component';
 
 describe('ApartmentListComponent', () => {

src/app/apartment/apartment-list/apartment-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Apartment } from '../apartment';
 import { ApartmentService } from '../apartment.service';
-import { Router } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { User } from '../../login-basic/user';
 import { AuthenticationBasicService } from '../../login-basic/authentication-basic.service';
@@ -10,13 +10,13 @@ import { ErrorMessageService } from '../../error-handler/error-message.service';
 @Component({
   selector: 'app-apartment-list',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './apartment-list.component.html',
   styleUrls: ['./apartment-list.component.css']
 })
 export class ApartmentListComponent implements OnInit {
 
-  public apartments: Apartment[] = []; // Almacena la lista de apartamentos
+  public apartments: Apartment[] = [];
   public currentUser: User = new User();
   public isShowed: boolean = false;
 
@@ -38,20 +38,17 @@ export class ApartmentListComponent implements OnInit {
     }
 
     if (this.currentUser) {
-      // Llama al servicio para obtener los apartamentos del usuario actual
       this.apartmentService.findByOwner(this.currentUser).subscribe({
 
         next: (resourceCollection) => {
-
-          this.apartments = resourceCollection.resources || []; // Asegúrate de asignar un arreglo
+          this.apartments = resourceCollection.resources || [];
         },
-        error: (err) => {
-          console.error('Error fetching apartments:', err);
+        error: () => {
           this.errorMessageService.showErrorMessage('Failed to load apartments');
         },
       });
     } else {
-      console.log('User not authenticated');
+      this.errorMessageService.showErrorMessage('Failed to load apartments');
     }
   }
 
@@ -63,25 +60,4 @@ export class ApartmentListComponent implements OnInit {
     this.errorMessageService.showErrorMessage('You are not an owner');
     this.router.navigate(['/apartments']);
   }
-
-  deleteApartment(apartmentId: string): void {
-    if (apartmentId) {
-      console.log('Apartment ID:', apartmentId);
-      this.router.navigate([`/apartment/${apartmentId}/delete`]);
-    } else {
-      console.error('Invalid apartment ID');
-    }
-  }
-
-  updateApartment(apartmentId:  string): void {
-    if (apartmentId) {
-      console.log('Apartment ID:', apartmentId);
-      this.router.navigate([`/apartment/${apartmentId}/update`]);
-    } else {
-      console.error('Invalid apartment ID');
-    }
-  }
-  createApartment(): void {
-    this.router.navigate(['/apartment/create']);
-  }
 }

src/app/navbar/navbar.component.html

@@ -7,31 +7,21 @@
 
     <div class="collapse navbar-collapse" id="navbarContent" [ngbCollapse]="isCollapsed">
         <ul class="navbar-nav">
-          
+
             <li class="nav-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }">
                 <a class="nav-link" [routerLink]="['/about']">About</a>
             </li>
-          
+
             <!--LIST ADVERTISEMENTS-->
             <li class="nav-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }">
-              <a class="nav-link" [routerLink]="['/advertisements']">Advertisements List</a>
-            </li>
-
-            <!--LIST APARTMENT-->
-            <li class="nav-item" *ngIf="isRole('owner')" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }">
-                <a class="nav-link" [routerLink]="['/apartments']">Apartments list</a>
+              <a class="nav-link" [routerLink]="['/advertisements']">Advertisements</a>
             </li>
 
-            <!--CREATE APARTMENT-->
-            <li class="nav-item" *ngIf="isRole('owner')" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }">
-                <a class="nav-link" [routerLink]="['/apartment/create']">Create apartment</a>
-            </li>
-            <!--LIST ROOM-->
+            <!--LIST APARTMENTS-->
             <li class="nav-item" *ngIf="isRole('owner')" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }">
-                <a class="nav-link" [routerLink]="['/rooms']">Rooms list</a>
+                <a class="nav-link" [routerLink]="['/apartments']">Apartments</a>
             </li>
 
-
             <li class="nav-item" *ngIf="isRole('user')" ngbDropdown>
                 <a class="nav-link dropdown-toggle" id="playerDropdown" role="button" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Users</a>
                 <div class="dropdown-menu" aria-labelledby="playDropdown" ngbDropdownMenu>
@@ -41,4 +31,4 @@
         </ul>
         <ul class="navbar-nav ms-auto me-3" app-login-navbar></ul>
     </div>
-</nav>
+</nav>

src/app/room/room-list/room-list.component.html

@@ -23,14 +23,16 @@ <h4 class="mb-1">List of Rooms</h4>
                     <td>{{ room.hasDesk }}</td>
                     <td>{{ room.isOccupied }}</td>
                     <td>{{ room.surface}}</td>
-                    <td><button class="deleteButton" (click)="deleteRoom(room.getRoomIdFromLinks())"><span class="deleteSpan">Delete</span></button></td>
-                    <td><button class="updateButton" (click)="updateRoom(room.getRoomIdFromLinks())"><span class="updateSpan">Edit</span></button></td>
+                    <td><button class="btn btn-danger mt-3" (click)="deleteRoom(room.getRoomIdFromLinks())"><span class="deleteSpan">Delete</span></button></td>
+                    <td><button class="btn btn-secondary" (click)="updateRoom(room.getRoomIdFromLinks())"><span class="updateSpan">Edit</span></button></td>
 
                 </tr>
             </tbody>
         </table>
     </div>
-    <button class="createButton" (click)="createRoom()"><span class="createSpan">Create</span></button>
+    <button class="btn btn-primary mt-3 mb-3" (click)="createRoom()">
+      <span>Create</span>
+    </button>
     <div *ngIf="rooms.length === 0" class="alert alert-info" role="alert">
         No rooms available for this apartment.
     </div>

src/app/room/room-list/room-list.component.ts

@@ -42,8 +42,6 @@ export class RoomListComponent implements OnInit {
     }
     if (this.currentUser) {
       this.getAparments();
-    } else {
-      console.log('User not authenticated');
     }
   }
 
@@ -64,8 +62,7 @@ export class RoomListComponent implements OnInit {
           this.loadRoomsForApartments();
         }
       },
-      error: (err) => {
-        console.error('Error fetching apartments:', err);
+      error: () => {
         this.errorMessageService.showErrorMessage('Failed to load apartments');
       }
     });
@@ -83,8 +80,7 @@ export class RoomListComponent implements OnInit {
         this.rooms = roomsArray.flat();
         console.log(this.rooms);
       },
-      error: (err) => {
-        console.error('Error fetching rooms:', err);
+      error: () => {
         this.errorMessageService.showErrorMessage('Failed to load rooms');
       }
     });

src/styles.css

@@ -23,95 +23,9 @@
     }
 }
 
+/* Buttons sytles */
 
-/*Create button style*/
-
-.createButton {
-    border: 0;
-    background-image: linear-gradient( 150deg, #9500, #008000, #ADFF2F);
-    border-radius: 8px;
-    color: #008000;
-    display: flex;
-    font-size: 16px;
-    padding: 4px;
-    cursor: pointer;
-    transition: .3s;
-}
-
-.createButton .createSpan {
-    background-color: #fff;
-    padding: 3px 16px;
-    border-radius: 6px;
-    transition: .3s;
-}
-
-.createButton:hover .createSpan {
-    background: none;
-    color: #fff;
-}
-
-.createButton:active {
-    transform: scale(0, 4)
-}
-
-
-/*Delete button style*/
-
-.deleteButton {
-    border: 0;
-    background-image: linear-gradient( 150deg, #9500, #B22222, #FF8C00);
-    border-radius: 8px;
-    color: #B22222;
-    display: flex;
-    font-size: 16px;
-    padding: 4px;
-    cursor: pointer;
-    transition: .3s;
-}
-
-.deleteButton .deleteSpan {
-    background-color: #fff;
-    padding: 3px 16px;
-    border-radius: 6px;
-    transition: .3s;
-}
-
-.deleteButton:hover .deleteSpan {
-    background: none;
-    color: #fff;
-}
-
-.deleteButton:active {
-    transform: scale(0, 4)
-}
-
-
-/*update button style*/
-
-.updateButton {
-    border: 0;
-    background-image: linear-gradient( 150deg, #9500, #8B4513, #D2B48C);
-    border-radius: 8px;
-    color: #8B4513;
-    display: flex;
-    font-size: 16px;
-    padding: 4px;
-    cursor: pointer;
-    transition: .3s;
-}
-
-.updateButton .updateSpan {
-    background-color: #fff;
-    padding: 3px 16px;
-    border-radius: 6px;
-    transition: .3s;
-}
-
-.updateButton:hover .updateSpan {
-    background: none;
-    color: #fff;
-}
-
-.updateButton:active {
-    transform: scale(0, 4)
+.btn-secondary {
+    background-color: rgb(203, 203, 21);
+    border-color: #dff062;
 }