Introduce forms to send reserve reviews

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/app.component.html

@@ -16,6 +16,12 @@
                         Inicio
                     </a>
                 </span>
+                <span routerLink="review">
+                    <a routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="button" mat-button>
+                        <mat-icon>rate_review</mat-icon>
+                        Review
+                    </a>
+                </span>
                 <ng-template [ngIf]="logued">
                     <button mat-button [matMenuTriggerFor]="menu">
                         <mat-icon>account_box</mat-icon>Usuarios <i class="fas fa-caret-down" style="color:black"></i>

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/features/form-commentary/form-commentary.component.css

@@ -84,4 +84,8 @@ ngb-rating {
   top: 4.5vh;
   color: #707070;
   font: Arial
+}
+
+ngb-rating{
+  outline: none;
 }

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/features/form-commentary/form-commentary.component.html

@@ -8,12 +8,7 @@ <h1> Ingresar comentario </h1>
                     <mat-label>Ingrese una reseña</mat-label>
                     <textarea formControlName="commentary" rows="4" cols="50" matInput #commentary placeholder="Ex. En el viaje que tuvimos y la estadia, la pasamos maravilloso..."></textarea>
                     <mat-hint align="end">{{commentary.value.length}}</mat-hint>
-                    <mat-error *ngIf="formGroup.controls.commentary.hasError('required')">
-                        Por favor ingrese una reseña.
-                    </mat-error>
-                    <mat-error *ngIf="formGroup.controls.commentary.hasError('whitespace')">
-                        La reseña ingresada no puede ser vacia.
-                    </mat-error>
+                    <mat-error *ngIf="formGroup.controls.commentary.invalid">{{getErrorMessage()}}</mat-error>
                   </mat-form-field>
             </div>
 

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/features/form-commentary/form-commentary.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { ReviewService } from '../services/review.service';
 import { ReviewModelForRequest } from '../../models/ReviewModelForRequest';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-form-commentary',
@@ -20,7 +21,8 @@ export class FormCommentaryComponent {
 
   private reviewToSend: ReviewModelForRequest;
 
-  constructor(aReviewService: ReviewService, private formBuilder: FormBuilder) {
+  constructor(aReviewService: ReviewService, private formBuilder: FormBuilder,
+              private router: Router) {
     this.reviewService = aReviewService;
     this.formGroup = this.formBuilder.group({
       commentary: new FormControl('', [Validators.required, this.noWhitespaceValidator])
@@ -33,6 +35,15 @@ export class FormCommentaryComponent {
     return isValid ? null : { whitespace: true };
   }
 
+  getErrorMessage(): string {
+    if (this.formGroup.controls.commentary.hasError('required')) {
+      return 'Error. El comentario es requerido.';
+    }
+    return this.formGroup.controls.commentary.hasError('whitespace')
+      ? 'Error. El comentario ingresado no puede ser vacío.'
+      : '';
+  }
+
   formIsValid(): boolean {
     return this.formGroup.valid && (this.currentRate > 0 && this.currentRate < 6);
   }
@@ -43,8 +54,20 @@ export class FormCommentaryComponent {
       this.reviewToSend.IdOfReserveAssociated = this.reserveId;
       this.reviewToSend.Description = this.formGroup.controls.commentary.value;
       this.reviewToSend.Score = this.currentRate;
-      this.reviewService.comment(this.reviewToSend);
+      this.sendComment(this.reviewToSend);
     }
   }
 
+  sendComment(reviewToSend: ReviewModelForRequest): void{
+    this.reviewService.comment(reviewToSend).subscribe(
+      (res) => {
+        alert('Comentario enviado con exito.');
+        this.router.navigate(['/regions']);
+      },
+      (err) => {
+        alert(err.error);
+      }
+    );
+  }
+
 }

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/features/lodging-detail/lodging-detail.component.html

@@ -38,7 +38,7 @@ <h2 class="name">{{lodgingForReserve.name}}</h2>
 <div class="reviews">
     <div class="cardReview" *ngFor="let review of lodgingForReserve.reviewsForLodging">
         <div class="starReview">
-            <span class="starr" *ngFor="let i of starReviewArr(review.Score).fill(1)">
+            <span class="starr" *ngFor="let i of starReviewArr(review.score).fill(1)">
                 <img width="26" src="../../assets/img/star.png" />
             </span>
         </div>

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/features/review/review.component.html

@@ -8,15 +8,7 @@ <h1> Busqueda de reserva para review </h1>
                     <mat-label>Ingrese el ID de la reserva para hacer una review</mat-label>
                     <input [readonly]="isShown" type="text" matInput formControlName="reserveSelected"
                         placeholder="Ex. 15c33977-23a6-42f4-9d1e-4acebf004bdf" required>
-                    <mat-error *ngIf="formGroup.controls.reserveSelected.hasError('required')">
-                        Por favor ingrese un ID de reserva valido.
-                    </mat-error>
-                    <mat-error *ngIf="!reserveExist(formGroup.controls.reserveSelected.value)">
-                        No es un ID de reserva <strong>valido</strong>
-                    </mat-error>
-                    <mat-error *ngIf="formGroup.controls.reserveSelected.hasError('whitespace')">
-                        El ID de la reserva no puede ser vacio.
-                    </mat-error>
+                    <mat-error *ngIf="formGroup.controls.reserveSelected.invalid">{{getErrorMessage()}}</mat-error>
                 </mat-form-field>
             </div>
 

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/features/review/review.component.ts

@@ -6,6 +6,7 @@ import {
   Validators,
   ValidatorFn,
 } from '@angular/forms';
+import { ReserveModelForResponse } from 'src/app/models/ReserveModelForResponse';
 import { TouristSpotModelForLodgingResponseModel } from 'src/app/models/TouristSpotModelForLodgingResponseModel';
 import { ReserveService } from '../services/reserve.service';
 import { TouristSpotService } from '../services/tourist-spot.service';
@@ -20,12 +21,17 @@ export class ReviewComponent implements OnInit {
 
   private reserveService: ReserveService;
 
+  private reserveExist: boolean;
+
+  public reserveObtenied: ReserveModelForResponse;
+
   isShown = false;
 
   constructor(
     aServiceOfReserves: ReserveService,
     private formBuilder: FormBuilder
   ) {
+    this.reserveObtenied = null;
     this.reserveService = aServiceOfReserves;
     this.formGroup = this.formBuilder.group({
       reserveSelected: new FormControl('', [
@@ -37,19 +43,43 @@ export class ReviewComponent implements OnInit {
 
   ngOnInit(): void {}
 
-  reserveExist(reserveId: string): boolean {
-    return this.reserveService.reserveExist(reserveId);
+  openCommentaryForm(): void {
+    this.reserveService
+      .getReserveById(this.formGroup.controls.reserveSelected.value)
+      .subscribe(
+        (res: ReserveModelForResponse) => {
+          this.markShown(res);
+        },
+        (err) => {
+          if (err.status === 400) {
+            alert(
+              'Error. No es un formato valido para los identificiadores, el mismo debe ser formato GUID.'
+            );
+          } else {
+            alert(err.error);
+          }
+        }
+      );
   }
 
+  markShown(reserveModel: ReserveModelForResponse): void {
+    this.isShown = reserveModel !== null;
+  }
+
+  getErrorMessage(): string {
+    if (this.formGroup.controls.reserveSelected.hasError('required')) {
+      return 'Error. El identificador es requerido.';
+    }
+    return this.formGroup.controls.reserveSelected.hasError('whitespace')
+      ? 'Error. El indentificador de reserva ingresado no puede ser vacío.'
+      : '';
+  }
+
+
   noWhitespaceValidator: ValidatorFn = (control: FormControl) => {
     const isWhitespace = (control.value || '').trim().length === 0;
     const isValid = !isWhitespace;
     return isValid ? null : { whitespace: true };
-  };
-
-  openCommentaryForm(): void {
-    if (this.reserveExist(this.formGroup.controls.reserveSelected.value)) {
-      this.isShown = true;
-    }
   }
+
 }

Uru_NaturalBookingFrontend/Uru_NaturalBookingFrontend/src/app/features/services/review.service.ts

@@ -1,17 +1,27 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ReviewModelForResponse } from 'src/app/models/ReviewModelForResponse';
+import { environment } from 'src/environments/environment';
 import { ReviewModelForRequest } from '../../models/ReviewModelForRequest';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ReviewService {
 
-  constructor() { }
+  uri = `${environment.baseUrl}api/reviews`;
 
-  comment(review: ReviewModelForRequest): ReviewModelForResponse {
-    return;
-    // this is a call into the method of webAPI in controller ReviewController POST
-  }
 
+  constructor(private http: HttpClient) { }
+
+  comment(
+    review: ReviewModelForRequest
+  ): Observable<ReviewModelForResponse> {
+    return this.http.post<ReviewModelForResponse>(
+      this.uri,
+      review
+    );
+  }
+
 }