Paginación aplicada al home

Author: JLRR2019

backend/gamelink/src/main/resources/application.properties

@@ -10,7 +10,7 @@ spring.mustache.suffix=.html
 
 spring.datasource.url=jdbc:postgresql://localhost:5432/gamelink
 spring.datasource.username=postgres
-spring.datasource.password=password
+spring.datasource.password=Juanluis-123
 spring.jpa.hibernate.ddl-auto=create-drop
 
 logging.level.org.springframework.security=DEBUG

backend/gamelink/target/classes/application.properties

@@ -10,7 +10,7 @@ spring.mustache.suffix=.html
 
 spring.datasource.url=jdbc:postgresql://localhost:5432/gamelink
 spring.datasource.username=postgres
-spring.datasource.password=password
+spring.datasource.password=Juanluis-123
 spring.jpa.hibernate.ddl-auto=create-drop
 
 logging.level.org.springframework.security=DEBUG

frontend/package-lock.json

@@ -26,7 +26,7 @@ import { CarouselComponent } from './components/carousel/carousel.component';
 
 
 @NgModule({
-  declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent, CarouselComponent],
+  declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent, VideogameCatalogComponent, CarouselComponent],
   imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule, NgbModule],
   bootstrap: [AppComponent]
 })

frontend/src/app/app.module.ts

@@ -51,6 +51,22 @@ <h1 class="display-5 fw-bolder text-white mb-2">Tienda y noticiero de videojuego
                     <div id="moreImages" class="row gx-5 justify-content-center">
                         <newsTemplate class="col-lg-4 mb-5" *ngFor="let ng of news" [news]="ng"></newsTemplate>
                     </div>
+                    <div class="text-end mb-5 mb-xl-0">
+                      <a class="text-decoration-none">
+                          <button class="btn btn-secondary button" (click)="nextpage()" >
+                              <i class="fa fa-eye"></i> Pagina siguiente
+                          </button>
+                          <div id="loader"></div>
+                      </a>
+                  </div>
+                  <div *ngIf="page > 0" class="text-end mb-5 mb-xl-0">
+                      <a class="text-decoration-none">
+                          <button class="btn btn-secondary button" (click)="prevpage()" >
+                              <i class="fa fa-eye"></i>  Pagina anterior
+                          </button>
+                          <div id="loader"></div>
+                      </a>
+                  </div>
 
                 </div>
             </section>

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

@@ -12,19 +12,50 @@ import { NewsService } from 'src/app/services/news.service';
 
 
 export class HomeComponent{
+
+  page:number = 0;
+  ready: boolean = false;
   news!: News[];
 
 
   constructor( public newsService: NewsService, activatedRoute: ActivatedRoute){
 
-    const id = activatedRoute.snapshot.params['id'];
-        this.newsService.getNews().subscribe(
-            (news) => this.news =  news as News[], //casting in ts, es mejor hacerlo en el servicio (as Observable<News>), pero al dar error, hacemos el cast en el component
-            (error: any) => console.error(error)
+    //const id = activatedRoute.snapshot.params['id'];
 
+        this.newsService.findNewsPage(this.page).subscribe(
+          (news) => {var x = news['content'] ;this.news = x as News[];}, //casting in ts, es mejor hacerlo en el servicio (as Observable<News>), pero al dar error, hacemos el cast en el component
+          (error: any) => console.error(error)
+      );
+  }
 
-        );
+  ngOnInit(){
+    this.ready = true;
+  }
+
+  nextpage(){
+    this.changepage(1)
+    this.newsService.findNewsPage(this.page).subscribe(
+      (news) => {var x = news['content'] ;this.news = x as News[];},
+      (error: any) => console.error(error)
+  );
+  }
 
+  prevpage(){
+    this.changepage(-1)
+    this.newsService.findNewsPage(this.page).subscribe(
+      (news) => {var x = news['content'] ;this.news = x as News[];},
+      (error: any) => console.error(error)
+  );
   }
 
+  changepage(num:number){
+    if (num == -1){
+      this.page -= 1;
+    }else{
+      this.page += 1;
+    }
+  }
+
+
+
 }

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

@@ -64,13 +64,5 @@ export class NewsComponent{
       }
   }
 
-  //esto es una prueba
-  nextPage(){
-      if(this.news){
-          return this.router.navigate(['/news/1'])
-      } else {
-          return undefined;
-      }
-  }
 
 }