Merge pull request #45 from UdL-EPS-SoftArch/as-user-cancel-visit

As user cancel visit

src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { ApartmentUpdateComponent } from './apartment/apartment-update/apartment
 import { ApartmentDeleteComponent } from './apartment/apartment-delete/apartment-delete.component';
 import { VisitStatusComponent } from './visit/visit-status/visit-status.component';
 import { RoomListComponent } from './room/room-list/room-list.component';
+import {VisitCancelComponent} from './visit/visit-cancel/visit-cancel.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -33,6 +34,7 @@ const routes: Routes = [
   { path: 'apartment/:id/update', component: ApartmentUpdateComponent},
   { path: 'apartment/:id/delete', component: ApartmentDeleteComponent},
   { path: 'visit/:id/status', component: VisitStatusComponent},
+  { path: 'visit/:id/cancel', component:VisitCancelComponent},
   { path: 'rooms', component: RoomListComponent},
   { path: '404', component: NotFoundComponent},
   { path: '', redirectTo: 'about', pathMatch: 'full'}

src/app/visit/visit-cancel/visit-cancel.component.html

@@ -0,0 +1,16 @@
+@if (errorFetchMsg){
+<div class="alert alert-danger" role="alert">
+  {{ errorFetchMsg }}
+</div>
+}
+@else {
+
+<app-visit-status></app-visit-status>
+@if(visit.status !== "CANCELLED"){
+<div class="d-flex justify-content-center">
+  <button type="button" (click)="onCancel()" class="btn btn-danger mt-3" style="border-radius: 50px; padding: 10px 20px;">
+    Cancel
+  </button>
+</div>
+}
+}

src/app/visit/visit-cancel/visit-cancel.component.spec.ts

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

src/app/visit/visit-cancel/visit-cancel.component.ts

@@ -0,0 +1,89 @@
+import { Component, OnInit} from '@angular/core';
+import {Visit} from '../visit';
+import {User} from '../../login-basic/user';
+import {ActivatedRoute, Router} from '@angular/router';
+import {VisitService} from '../visit.service';
+import {ErrorMessageService} from '../../error-handler/error-message.service';
+import {AuthenticationBasicService} from '../../login-basic/authentication-basic.service';
+import {catchError, of} from 'rxjs';
+import {VisitStatusComponent} from '../visit-status/visit-status.component';
+
+@Component({
+  selector: 'app-visit-cancel',
+  standalone: true,
+  imports: [
+    VisitStatusComponent ],
+  templateUrl: './visit-cancel.component.html',
+  styleUrl: './visit-cancel.component.css'
+})
+export class VisitCancelComponent implements OnInit{
+  public visit: Visit = new Visit()
+  public user: User = new User();
+  public visitId: string = '';
+  public errorFetchMsg: string = '';
+  public isAuthorized: boolean = false;
+
+
+
+  constructor(
+    private router: Router,
+    private visitService: VisitService = new VisitService(),
+    private activatedRoute: ActivatedRoute,
+    private errorMessageService: ErrorMessageService,
+    private authenticationService: AuthenticationBasicService
+  ) {}
+
+
+  ngOnInit(): void {
+    this.visit = new Visit()
+
+    this.visitId = this.activatedRoute.snapshot.paramMap.get('id') || '';
+    this.user = this.authenticationService.getCurrentUser();
+    this.isAuthorized = this.isAuthorised();
+
+
+    if (!this.isAuthorized) {
+      this.onUnauthorised();
+      return;
+    }
+
+
+    this.visitService
+      .getResource(this.visitId)
+      .pipe(
+        catchError((error) => {
+          this.errorFetchMsg = error.message;
+          return of(null);
+        })
+      )
+      .subscribe((_visit) => {
+        if (_visit) {
+          this.visit = _visit;
+          this.visit.id = this.visit.getIdFromLinks();
+
+        }
+      });
+
+  }
+
+  private isAuthorised(): boolean {
+    return this.user.getRoles().includes('user');
+  }
+
+  onUnauthorised(): void {
+    this.errorMessageService.showErrorMessage('You are not authorized');
+    this.router.navigate(['/about']);
+  }
+
+  onCancel(): void{
+    if (!this.isAuthorized) {
+      this.onUnauthorised();
+      return;
+    }
+    this.visit.status = "CANCELLED"
+    this.visitService.updateResource(this.visit)
+      .subscribe(() => {
+        window.location.reload();
+      })
+  }
+}

src/app/visit/visit-status/visit-status.component.css

@@ -57,7 +57,7 @@ h1 {
   margin-right: 8px;
 }
 
-/* Colores según el estado */
+/* Colores según el estado */
 .status.pending::before {
   background-color: #f1c40f; /* Amarillo */
 }
@@ -66,6 +66,10 @@ h1 {
   background-color: #e74c3c; /* Rojo */
 }
 
+.status.cancelled::before {
+  background-color: #e74c3c; /* Rojo */
+}
+
 .status.accepted::before {
   background-color: #2ecc71; /* Verde */
 }