Skip to content

Commit 36679bd

Browse files
ultramaniultramani
committed
Pagination added
1 parent a5cf6e1 commit 36679bd

File tree

7 files changed

+177
-22
lines changed

7 files changed

+177
-22
lines changed

‎frontend/src/app/app.routing.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { HomeComponent } from './components/home/home.component';
1010
const appRoutes = [
1111
{ path: 'home', component: HomeComponent },
1212
{ path: 'videogamecatalog', component: VideogameCatalogComponent },
13+
{ path: 'videogame/:id', component: VideogameDetailComponent },
1314
{ path: '', redirectTo: 'home', pathMatch: 'full' }
1415

1516
]

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@ <h2 class="fw-bolder fs-5 mb-4">Videojuegos</h2>
66
<videogame-card class="col-lg-4 mb-5" *ngFor="let videogame of videogames;let i = index" [videogame]="videogame"></videogame-card>
77
</div>
88
<div class="text-end mb-5 mb-xl-0">
9-
<a class="text-decoration-none" href="#!">
10-
<!--will show next-->
11-
<!-- puts the variable created in execution ?page and associates it with next page which is getNumber + 1 (that is, we add 1)-->
12-
<!--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-->
13-
<a id="moreVideogamesButton" class="btn btn-secondary button">
14-
<i class="fa fa-eye"></i> Más contenido
15-
</a>
9+
<a class="text-decoration-none">
10+
<button class="btn btn-secondary button" (click)="nextpage()" >
11+
<i class="fa fa-eye"></i> Pagina siguiente
12+
</button>
13+
<div id="loader"></div>
14+
</a>
15+
</div>
16+
<div *ngIf="page > 0" class="text-end mb-5 mb-xl-0">
17+
<a class="text-decoration-none">
18+
<button class="btn btn-secondary button" (click)="prevpage()" >
19+
<i class="fa fa-eye"></i> Pagina anterior
20+
</button>
1621
<div id="loader"></div>
1722
</a>
1823
</div>

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

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Content } from '@angular/compiler/src/render3/r3_ast';
12
import { Component } from '@angular/core';
2-
import { Router,ActivatedRoute } from '@angular/router';
3-
import { Videogame } from 'src/app/models/videogame.model';
3+
import { Router } from '@angular/router';
4+
import { Videogame,VideogamePage } from 'src/app/models/videogame.model';
45
import { VideogameService } from 'src/app/services/videogame.service';
56

67
@Component({
@@ -12,19 +13,43 @@ export class VideogameCatalogComponent{
1213

1314
ids!:number[];
1415
videogames!:Videogame[];
16+
videogamepage!: VideogamePage;
17+
page:number = 0;
1518
ready:boolean = false;
16-
constructor(private router: Router, activatedRoute: ActivatedRoute, public videogameService: VideogameService){
17-
19+
constructor(private router: Router, public videogameService: VideogameService){
20+
videogameService.getVideogamesPage(this.page).subscribe(
21+
data => {var x = data['content'] ;console.log(x);this.videogames= x as Videogame[];} ,
22+
error => console.error(error)
23+
)
1824
}
1925

2026
ngOnInit(){
21-
this.videogameService.getVideogames().subscribe(
22-
videogames => this.videogames = videogames as Videogame[],
23-
error => console.error(error)
24-
)
2527
this.ready = true;
2628
}
29+
30+
nextpage(){
31+
this.changepage(1)
32+
this.videogameService.getVideogamesPage(this.page).subscribe(
33+
data => {var x = data['content'] ;console.log(x);this.videogames = x as Videogame[];} ,
34+
error => console.error(error)
35+
)
36+
}
37+
38+
prevpage(){
39+
this.changepage(-1)
40+
this.videogameService.getVideogamesPage(this.page).subscribe(
41+
data => {var x = data['content'] ;console.log(x);this.videogames = x as Videogame[];} ,
42+
error => console.error(error)
43+
)
44+
}
2745

46+
changepage(num:number){
47+
if (num == -1){
48+
this.page -= 1;
49+
}else{
50+
this.page += 1;
51+
}
52+
}
2853

2954

3055
}

‎frontend/src/app/components/videogame/videogame-detail.component.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
2+
<main class="flex-shrink-0">
3+
4+
<header class="bg-dark py-5" style="background-color: #454546 !important;">
5+
<div class="container px-5">
6+
<div class="row gx-5 align-items-center justify-content-center">
7+
<div class="col-xl-4 col-xxl-5 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5"
8+
[src]="videogameImage()" alt="..." /></div>
9+
<div class="col-lg-6 col-xl-5 col-xxl-4">
10+
<div class="my-5 text-center text-xl-start">
11+
<h1 class="display-5 fw-bolder text-white mb-2">{{videogame.title}}</h1>
12+
<p class="lead fw-normal text-white-50 mb-4" style="color: aliceblue !important;">{{videogame.shortDescription}}</p>
13+
</div>
14+
</div>
15+
<div class="col-xl-3 col-xxl-3 d-none d-xl-block text-center">
16+
<p class="lead fw-normal text-white-50 mb-4"
17+
style="color: aliceblue !important; font-size: 2em !important;"> Precio: {{videogame.price}}€</p>
18+
<!--Button to pay-->
19+
<a class="btn btn-primary btn-lg px-4 me-sm-3" id="payButton" href="/showVideogameUser/{{videogame.id}}">
20+
Comprar ya
21+
<span style="color: grey;">{{videogame.price}}€</span>
22+
</a>
23+
</div>
24+
</div>
25+
</div>
26+
</header>
27+
28+
29+
30+
<section class="pt-0 MoreInfo">
31+
<div class="container-fluid px-5 my-5">
32+
<div class="row justify-content-center" style=" background-color: rgb(27, 31, 31); margin-bottom: 2%;">
33+
<div class="col-5 text-center" >
34+
<p class="lead fw-normal text-white-50 mb-4"
35+
style="color: aliceblue !important; font-size: 2em !important; margin-top: 5%;"> Admin Actions :
36+
<button class="btn btn-primary btn-lg px-4 me-sm-3" (click)="removeVideogame()" style="margin-top: auto;">Eliminar </button>
37+
<button class="btn btn-outline-light btn-lg px-4" (click)="editVideogame()" style="margin-top: auto;">Editar</button>
38+
</p>
39+
40+
</div>
41+
</div>
42+
</div>
43+
</section>
44+
45+
46+
47+
<!-- MoreInfo-->
48+
<section class="pt-0 MoreInfo"
49+
style="margin-left: 10%; margin-right: 10%; background-color: #FFFFFF !important;">
50+
<div class="container px-5 my-5">
51+
<div class="row gx-5 justify-content-center">
52+
<div class="col-auto">
53+
<h1 style="padding-bottom: 10px;">Descripción el producto</h1>
54+
<p class="">
55+
{{videogame.description}}
56+
</p>
57+
<h2 class="tab1">Historia</h2>
58+
<p class="tab1">
59+
{{videogame.history}}
60+
</p>
61+
</div>
62+
</div>
63+
<!--Requsisitos-->
64+
<div class="row gx-5 justify-content-center" style="margin-top: 5%;">
65+
<div class="col-auto">
66+
<h1 style="padding-bottom: 10px;">Requisitos Recomendados</h1>
67+
<ul>
68+
<li><strong>Procesador o CPU:</strong> {{videogame.cpuR}}</li>
69+
<li><strong>Memoria RAM:</strong> {{videogame.ramR}}</li>
70+
<li><strong>Sistema operativo:</strong> {{videogame.ssooR}}</li>
71+
<li><strong>Tarjeta gráfica:</strong> {{videogame.gpuR}}
72+
</li>
73+
<li><strong>Espacio disponible en disco:</strong> {{videogame.storageR}}</li>
74+
</ul>
75+
</div>
76+
77+
<div class="col-auto">
78+
<h1 style="padding-bottom: 10px;">Requisitos Minimos</h1>
79+
<ul>
80+
<li><strong>Procesador o CPU:</strong> {{videogame.cpuM}}</li>
81+
<li><strong>Memoria RAM:</strong> {{videogame.ramM}}</li>
82+
<li><strong>Sistema operativo:</strong> {{videogame.ssooM}}</li>
83+
<li><strong>Tarjeta gráfica:</strong> {{videogame.gpuM}}
84+
</li>
85+
<li><strong>Espacio disponible en disco:</strong> {{videogame.storageM}}</li>
86+
</ul>
87+
</div>
88+
</div>
89+
</div>
90+
</section>
91+
<!--Noticias Relacionadas-->
92+
<section class="pt-0 MoreInfo"
93+
style="margin-left: 10%; margin-right: 10%; background-color: inherit !important; text-align: center;">
94+
<h1 style="padding-bottom: 10px;">Noticias destacadas sobre este Titulo.</h1>
95+
<div class="container px-5 my-5" style="margin-bottom: 0px !important ;">
96+
<div class="row gx-5 justify-content-center">
97+
98+
<!-- {{>newsTemplate}} FALTA AÑADIR -->
99+
100+
</div>
101+
</div>
102+
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-center">
103+
<p><a class="btn btn-primary btn-lg px-4 me-sm-3" href="">Cargar Más</a></p>
104+
</div>
105+
</section>
106+
</main>

‎frontend/src/app/components/videogame/videogame-detail.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ export class VideogameDetailComponent{
2020
error => console.error(error)
2121
)
2222
}
23-
23+
//Forbidden error falta ser admin
2424
removeVideogame() {
2525
const okResponse = window.confirm('Do you want to remove this videogame?');
2626
if (okResponse) {
2727
this.videogameService.deleteVideogame(this.videogame).subscribe(
28-
_ => this.router.navigate(['/videogame']), //Cambiar a el catalogo de videojuegos
28+
_ => this.router.navigate(['/videogame/']), //Cambiar a el catalogo de videojuegos
2929
error => console.error(error)
3030
);
3131
}
3232
}
33-
33+
//Forbidden error falta ser admin
3434
editVideogame() {
3535
this.router.navigate(['/videogame/edit', this.videogame.id]);
3636
}

‎frontend/src/app/models/videogame.model.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
import { LastValueFromConfig } from "rxjs/internal/lastValueFrom";
2+
3+
export interface VideogamePage {
4+
5+
content: Videogame[];
6+
empty: boolean;
7+
first: boolean;
8+
last: boolean;
9+
number: number;
10+
numberOfElements: number;
11+
size: number;
12+
pageable: any[];
13+
sort: boolean [];
14+
}
15+
116
export interface Videogame {
217
id?: number;
318
imageVg: boolean;

‎frontend/src/app/services/videogame.service.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Injectable } from "@angular/core";
22
import { HttpClient } from "@angular/common/http";
33

4-
import { Videogame } from "../models/videogame.model";
4+
import { Videogame,VideogamePage } from "../models/videogame.model";
55
import { Observable,throwError } from "rxjs";
66
import { catchError } from 'rxjs/operators';
77

@@ -14,11 +14,14 @@ export class VideogameService {
1414
constructor(private httpClient: HttpClient) {}
1515

1616
getVideogames(): Observable<Videogame[]> {
17-
return this.httpClient.get(URL).pipe() as Observable<Videogame[]>
17+
var videogame = this.httpClient.get(URL).pipe() as Observable<Videogame[]>
18+
return videogame
1819
}
1920

20-
findVideogamePage() {
21-
return this.httpClient.get(URL + "pages")
21+
getVideogamesPage(page: number): Observable<VideogamePage>{
22+
23+
var videogames= this.httpClient.get(URL + "pages?page=" + page).pipe() as Observable<VideogamePage>
24+
return videogames
2225
}
2326

2427
getVideogame(id: number | string ): Observable<any> {

0 commit comments

Comments
 (0)