Create Tourn with image & fix + Tournament Service

Author: RubenCata

backend/src/main/java/es/webapp6/padelante/controller/TournamentRestController.java

@@ -144,7 +144,6 @@ public ResponseEntity<Tournament> createTournament(@RequestBody Tournament tourn
 		if (principal != null) {
 			// Data that must be default because tournament could be inconsistent
 			tournament.setOwner(principal.getName());
-			tournament.setNumParticipants(0);
 			tournament.setNumSignedUp(0);
 			tournament.setRounds(0);
 

frontend/src/app/components/createTournament/createTournament.component.html

@@ -33,7 +33,7 @@ <h5 class="upper-text text-center pb-0 fw-bold">Crea un torneo nuevo</h5>
                     <div class="col-12">
                       <label for="tournamentImage" class="form-label">Imagen del torneo</label>
                       <div class="tournament-img">
-                        <input type='file' name='imageField' accept=".jpg, .jpeg, .png" />
+                        <input #file type='file' name='imageField' accept=".jpg, .jpeg, .png" />
                       </div>
                       <div class="invalid-feedback">Introduce una imagen válida.</div>
                     </div>
@@ -111,7 +111,7 @@ <h5 class="upper-text text-center pb-0 fw-bold">Crea un torneo nuevo</h5>
                     </div>
 
                     <div class="col-12 mt-4">
-                      <button class="btn btn-login upper-text w-100" (click)="TournamentCreated($event,tournamentName.value,
+                      <button class="btn btn-login upper-text w-100" (click)="TournamentCreated(tournamentName.value,
                       about.value,ruleset.value,location.value,numParticipants.value,inscriptionDate.value,startDate.value)" type="submit">Crear torneo</button>
                     </div>
 

frontend/src/app/components/createTournament/createTournament.component.ts

@@ -1,6 +1,7 @@
+import { Router } from '@angular/router';
 import { Tournament } from './../../models/tournament.model';
 import { TournamentService } from './../../services/tournament.service';
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 
 import { LoginService } from 'src/app/services/login.service';
 
@@ -10,24 +11,54 @@ import { LoginService } from 'src/app/services/login.service';
 })
 
 export class CreateTournamentComponent {
-  Tournament :Tournament | undefined
-
-  constructor(private service: TournamentService,public loginService: LoginService){}
-
-  TournamentCreated(event:any,tournamentName:string,
-    about:string,ruleset:string,location:string,numParticipants:string,inscriptionDate:string,startDate:string){
-
-
-      this.Tournament={owner:"someone",tournamentName:tournamentName,numParticipants:Number(numParticipants),numSignedUp:0,rounds:0,about:about,
-      ruleset:ruleset,location:location, inscriptionDate:inscriptionDate,startDate:startDate,started:false,image:false}
-
-
-      this.service.createTournament(this.Tournament);
-
-
-
 
+  @ViewChild("file")
+  file: any;
+
+  constructor(private router: Router, private tournamentService: TournamentService,public loginService: LoginService){}
+
+  TournamentCreated(tournamentName:string,about:string,ruleset:string,location:string,numParticipants:string,
+    inscriptionDate:string,startDate:string){
+
+      console.log(numParticipants)
+      var numPart: number = +numParticipants
+      console.log(numPart)
+
+      const tournament: Tournament ={
+        owner:"someone",
+        tournamentName:tournamentName,
+        numParticipants: numPart,
+        numSignedUp:0,
+        rounds:0,
+        about:about,
+        ruleset:ruleset,
+        location:location,
+        inscriptionDate:inscriptionDate,
+        startDate:startDate,
+        started:false,
+        image:false
+      }
+
+      this.tournamentService.createTournament(tournament).subscribe(
+        tournamentCreated => {
+          this.uploadImage(tournamentCreated.id)
+        }
+      );
   }
 
-
+  uploadImage(id: number): void {
+
+    const image = this.file.nativeElement.files[0];
+    if(image){
+      let formData = new FormData();
+      formData.append("imageFile", image);
+      this.tournamentService.setTournamentImage(id, formData).subscribe(
+        _ => this.router.navigate(['']),
+        _error => this.router.navigate([''])
+      );
+    }
+    else {
+      this.router.navigate([''])
+    }
+  }
 }

frontend/src/app/components/tournament/tournament.component.html

@@ -43,7 +43,8 @@ <h3 class="py-1"><em>{{tournament.startDate}}</em></h3>
               <a class="button btn-tournament upper-text my-1" href="#"><i class="ri-heart-3-fill pe-1"></i> Seguir</a>
             </div> -->
 
-            <div *ngIf="this.loginService.isLogged() && !userInTournament && !tournament.started" class="d-flex justify-content-end">
+            <div *ngIf="this.loginService.isLogged() && !userInTournament && !tournament.started &&
+              tournament.numParticipants > tournament.numSignedUp" class="d-flex justify-content-end">
               <a class="d-inline button btn-tournament upper-text my-1" href="#" data-bs-toggle="modal" (click)="getUsersForInscription()"
                 data-bs-target="#staticBackdrop">
                 <i class="ri-edit-fill pe-1"></i> Incribirse

frontend/src/app/components/tournament/tournament.component.ts

@@ -207,17 +207,11 @@ export class TournamentComponent{
       inscriptionDate: newinscriptionDate,
       startDate: newstartDate,
       started: false,
-      //BE CAREFULL WITH THIS BOOLEAN WHEN UPDATED A IMG (NOT DONE YET)
       image: this.tournament.image
     }
 
     this.tournamentService.updateTournament(updatedTournanent).subscribe(
-      response => this.uploadImage(),
-      error => {
-        if (error.status != 400) {
-          console.error('Unexpected Error on deleteUser')
-        }
-      }
+      _ => this.uploadImage()
     );
   }
 
@@ -226,12 +220,7 @@ export class TournamentComponent{
     const image = this.file.nativeElement.files[0];
     if (this.removeImage) {
       this.tournamentService.deleteTournamentImage(this.id).subscribe(
-        _ => this.afterUploadImage(),
-        error => {
-          if (error.status != 400) {
-            console.error('Error deleting user image')
-          }
-        }
+        _ => this.afterUploadImage()
       );
     } else if(image){
       let formData = new FormData();
@@ -240,11 +229,9 @@ export class TournamentComponent{
         _ => {
           this.afterUploadImage()
           this.auxURL = this.auxURL +1
-        },
-        error => alert('Error uploading user image')
+        }
       );
     } else {
-      console.log("Entramos en else")
       this.afterUploadImage();
     }
   }

frontend/src/app/services/tournament.service.ts

@@ -4,8 +4,7 @@ import { Team } from './../models/team.model';
 import { Tournament } from './../models/tournament.model';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { catchError, map, Observable, throwError } from 'rxjs';
-import { Router } from '@angular/router';
+import { map, throwError } from 'rxjs';
 
 const BASE_URL = '/api/tournaments/';
 
@@ -14,7 +13,7 @@ const BASE_URL = '/api/tournaments/';
 })
 export class TournamentService {
 
-  constructor(private http: HttpClient, private router: Router) {
+  constructor(private http: HttpClient) {
   }
 
   getTournament(id: number | string) {
@@ -53,17 +52,17 @@ export class TournamentService {
   }
 
   createTournament(Tournament: Tournament) {
-      return this.http.post(BASE_URL, Tournament, { withCredentials: true }).subscribe((_resp: any) => {
-        console.log("Creation Tournament: Successfully");
-        this.router.navigate(['']);
-      });
-
+    return this.http.post(BASE_URL, Tournament, { withCredentials: true }).pipe(map(
+      response => response as Tournament,
+      error => errorIgnore(error, 403, "createTournament")
+    ));
   }
 
   updateTournament(tournament: Tournament) {
-    return this.http.put(BASE_URL + tournament.id, tournament).pipe(
-			catchError(error => this.handleError(error))
-		);
+    return this.http.put(BASE_URL + tournament.id, tournament).pipe(map(
+      response => response,
+      error => errorIgnore(error, 400, "updateTournament")
+    ));
   }
 
   deleteTeam(idTournament: number | string, idTeam: number | string) {
@@ -82,17 +81,18 @@ export class TournamentService {
   }
 
   setTournamentImage(id:number, formData: FormData) {
-    return this.http.post(BASE_URL +id+ '/image', formData)
-      .pipe(
-        catchError(error => this.handleError(error))
-      );
+    return this.http.post(BASE_URL +id+ '/image', formData).pipe(map(
+      response => response,
+      _error => console.error('Unexpected error in setTournamentImage')
+    ))
   }
 
   deleteTournamentImage(id:number){
     return this.http.delete(BASE_URL +id+ '/image')
-      .pipe(
-        catchError(error => this.handleError(error))
-      );
+      .pipe(map(
+        response => response,
+        error => errorIgnore(error, 400, "deleteTournamentImage")
+      ));
   }
 
   private handleError(error: any) {