Added the card catalog compoenents

Author: ultramani

backend/gamelink/src/main/java/urjc/gamelink/Configuration/Security/WebSecurityConfig.java

@@ -6,7 +6,6 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
-import org.springframework.http.HttpStatus;
 import org.springframework.security.config.Customizer;
 import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;

backend/gamelink/src/main/java/urjc/gamelink/Controllers/GamelinkWebController.java

@@ -14,10 +14,8 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.io.ClassPathResource;
 import org.springframework.core.io.Resource;
-import org.springframework.core.io.UrlResource;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
-import org.springframework.http.HttpStatus;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;

backend/gamelink/src/main/java/urjc/gamelink/Controllers/SPAController.java

@@ -0,0 +1,12 @@
+package urjc.gamelink.Controllers;
+
+import org.springframework.web.bind.annotation.GetMapping;
+
+public class SPAController {
+    
+    @GetMapping("/**/{path:[^\\.]*}")
+    public String redirect() {
+    return "forward:/";
+    }
+   
+}

frontend/proxy.conf.json

@@ -0,0 +1,8 @@
+{
+    "/api/*": {
+        "target": "https://127.0.0.1:8443/",
+        "secure": false,
+        "logLevel": "debug",
+        "changeOrigin": true
+    }
+}

frontend/src/app/app.module.ts

@@ -16,12 +16,14 @@ import { ShowNewsComponent } from './components/news/showNews.component';
 import { HomeComponent } from './components/home/home.component';
 import { UserProfile } from './components/user/userProfile.component';
 import { VideogameCardComponent } from './components/videogame/videogame-card.component';
+import { VideogameCatalogComponent } from './components/videogame/videogame-catalog.component';
+
 
 
 
 
 @NgModule({
-  declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent],
+  declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent],
   imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule],
   bootstrap: [AppComponent]
 })

frontend/src/app/app.routing.ts

@@ -1,4 +1,6 @@
 import { Routes, RouterModule } from '@angular/router';
+import { VideogameDetailComponent } from './components/videogame/videogame-detail.component';
+import { VideogameCatalogComponent } from './components/videogame/videogame-catalog.component';
 
 import { HomeComponent } from './components/home/home.component';
 
@@ -7,6 +9,7 @@ import { HomeComponent } from './components/home/home.component';
 
 const appRoutes = [
     { path: 'home', component: HomeComponent },
+    { path: 'videogamecatalog', component: VideogameCatalogComponent },
     { path: '', redirectTo: 'home', pathMatch: 'full' }
 
 ]

frontend/src/app/components/videogame/videogame-card.component.html

@@ -1,4 +1,4 @@
-<div  *ngIf="videogame" class="col-lg-4 mb-5">
+<div  class="col-lg-4 mb-5">
     <div class="card h-100 shadow border-0">
 
 
@@ -23,4 +23,5 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+<ng-template #elseBlock><p>Content to render when condition is false</p></ng-template>

frontend/src/app/components/videogame/videogame-card.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Component,Input } from '@angular/core';
+import { Router } from '@angular/router';
 import { Videogame } from 'src/app/models/videogame.model';
 import { VideogameService } from 'src/app/services/videogame.service';
 
@@ -10,17 +10,22 @@ import { VideogameService } from 'src/app/services/videogame.service';
 
 export class VideogameCardComponent{
 
+  @Input() id!:number;
+
   videogame!: Videogame;
 
-  constructor(private router: Router, activatedRoute: ActivatedRoute, public videogameService: VideogameService){
+  constructor(private router: Router, public videogameService: VideogameService){
 
-    const id = activatedRoute.snapshot.params['id'];
-    videogameService.getVideogame(id).subscribe(
-        videogame => this.videogame = videogame,
+
+  }
+  
+    ngOnInit() {
+      this.videogameService.getVideogame(this.id).subscribe(
+        videogame => this.videogame = videogame as Videogame,
         error => console.error(error)
+        
     )
-  }
-
+    }
     gotoVideogame() {
         this.router.navigate(['/videogame/'+this.videogame.id]);
     }

frontend/src/app/components/videogame/videogame-catalog.component.html

@@ -0,0 +1,21 @@
+
+
+<section class="py-5">
+    <div class="container px-5">
+        <h2 class="fw-bolder fs-5 mb-4">Videojuegos</h2>
+        <div id="moreImages" class="row gx-5">
+            <videogame-card  [id]='selectid'></videogame-card>
+        </div>
+        <div class="text-end mb-5 mb-xl-0">
+            <a class="text-decoration-none" href="#!">
+                <!--will show next-->
+                <!-- puts the variable created in execution ?page and associates it with next page which is getNumber + 1 (that is, we add 1)-->
+                <!--in request of we put (page, 3) and page will be equal to 1 for what I just explained above, this is how it is done-->
+                <a id="moreVideogamesButton" class="btn btn-secondary button">
+                    <i class="fa fa-eye"></i> Más contenido
+                </a>
+                <div id="loader"></div>
+            </a>
+        </div>
+    </div>
+</section>

frontend/src/app/components/videogame/videogame-catalog.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { VideogameService } from 'src/app/services/videogame.service';
+
+@Component({
+  selector: 'videogame-catalog',
+  templateUrl: './videogame-catalog.component.html'
+})
+
+export class VideogameCatalogComponent{
+  
+  selectid:number = 29;
+  
+  constructor(private router: Router, activatedRoute: ActivatedRoute, public videogameService: VideogameService){
+
+  }
+
+
+  
+
+}