Skip to content

Commit

Permalink
Pagination blogs and search
Browse files Browse the repository at this point in the history
added blog pagination and the search pagination
  • Loading branch information
mariafg11 committed Apr 19, 2020
1 parent 15d3925 commit 5d9ec1b
Showing 6 changed files with 34 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ <h1 class="mb-3 bread">Resultado de <br>tu búsqueda</h1>
<section class="ftco-section">
<div class="container">
<div class="row">
<div class="col-md-4" *ngFor="let advertisement of searchAdvertisements">
<div class="col-md-4" *ngFor="let advertisement of searchAdvertisements | slice : startPage:paginationLimit">
<div class="property-wrap">
<a class="img"[routerLink]="['/advertisement',advertisement.id]" [ngStyle]="{background: 'url(assets/static/images/' + advertisement.images[0] +')'}" ></a>
<div class="text">
@@ -35,5 +35,7 @@ <h3><a>{{advertisement.property}} en {{advertisement.location}}</a></h3>
</div>
</div>
</div>
<input type="button" *ngIf ="paginationLimit < searchAdvertisements.length" (click)="showMoreItems()" value= "Show more"/>
<input type="button" *ngIf ="paginationLimit > 3" (click)="showLessItems()" value= "Show less"/>
</div>
</section>
Original file line number Diff line number Diff line change
@@ -24,11 +24,16 @@ export class AdvertisementListComponent implements OnInit {
id:any = '';
key:any = '';
value:any = '';
startPage : number;
paginationLimit:number;

constructor(
private router: Router,
private service: AdvertisementService,
public loginService: LoginService) { }
public loginService: LoginService) {
this.startPage = 0;
this.paginationLimit = 3;
}

ngOnInit() {
this.service.currentMessage.subscribe(message => this.message = message);
@@ -52,7 +57,14 @@ export class AdvertisementListComponent implements OnInit {
);;
console.log("cmon");
}
showMoreItems(){
this.paginationLimit = Number(this.paginationLimit) + 3;
}
showLessItems(){
this.paginationLimit = Number(this.paginationLimit) - 3;
}
}




Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="row">
<div class="offset-lg-2 col-lg-8 col-md-12">
<div class="text text-center content-center" id = "containerPresentation">
<div class="text text-center content-center" id = "containerPresentation" style="margin-top: 100px;">
<h1 class="mb-4">Encuentra ya <br>tu próxima propiedad</h1>
<p style="font-size: 18px;">Introduce la zona deseada y disfruta de nuestro catálogo de viviendas</p>
<form class="search-location mt-md-5">
@@ -30,7 +30,7 @@ <h1 class="mb-4">Encuentra ya <br>tu próxima propiedad</h1>
<option value="2">2 o Más</option>
<option value="3">3 o Más</option>
</select>
<a class="filter"> Número de baños:</a>
<a class="filter"> Número de baños:</a><s></s>

<select [(ngModel)]="bathrooms" name="bathrooms" class="selectInput">
<option value="1">1 o Más</option>
4 changes: 3 additions & 1 deletion WebApp12Angular/src/app/blog-list.component.html
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ <h1 class="mb-3 bread">Nuestro Blog</h1>

<div class="container">
<div class="row d-flex">
<div class="col-md-3 d-flex " *ngFor="let blog of blogs">
<div class="col-md-3 d-flex " *ngFor="let blog of blogs | slice : startPage:paginationLimit">
<div class="blog-entry justify-content-end">
<div class="text">
<h3 class="heading titulo" >
@@ -45,6 +45,8 @@ <h3 class="heading titulo" >
</div>
</div>
</div>
<input type="button" *ngIf ="paginationLimit < blogs.length" (click)="showMoreItems()" value= "Show more"/>
<input type="button" *ngIf ="paginationLimit > 4" (click)="showLessItems()" value= "Show less"/>
</div>
</div>
</section>
13 changes: 12 additions & 1 deletion WebApp12Angular/src/app/blog-list.component.ts
Original file line number Diff line number Diff line change
@@ -12,8 +12,13 @@ import { Router } from '@angular/router';
export class blogListComponent {
blogs: Blog[];
canDelete: boolean = false;
startPage : number;
paginationLimit:number;

constructor(private blogService: BlogService,private router: Router) {
this.blogs = [];
this.startPage = 0;
this.paginationLimit = 4;
}

ngOnInit() {
@@ -22,7 +27,7 @@ export class blogListComponent {
this.canDelete = true;
}
}
this.blogService.getBlogs(0, 4).subscribe(
this.blogService.getBlogs(0, 50).subscribe(
blogs => this.blogs = blogs,
error => console.log(error)
);
@@ -41,4 +46,10 @@ export class blogListComponent {
error => console.log(error)
);
}
showMoreItems(){
this.paginationLimit = Number(this.paginationLimit) + 4;
}
showLessItems(){
this.paginationLimit = Number(this.paginationLimit) - 4;
}
}
2 changes: 1 addition & 1 deletion WebApp12Angular/src/app/pages/home/home.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div style="margin-top: 100px;" >
<div >

<div class=" hero-wrap-2 ftco-degree-bg js-fullheight" style="background-image: url('assets/static/images/bg_1.jpg');" data-stellar-background-ratio="0.5">
<advertisementSearch></advertisementSearch>

0 comments on commit 5d9ec1b

Please sign in to comment.