Commit 4536f9d1 authored by Jean-Baptiste Nizet's avatar Jean-Baptiste Nizet
Browse files

fix: bugs in pagination

 - initial requested page was 0, but the minimum is 1
 - new search kept the current page instead of resetting to default (1)
 - pagination was way too large to fit on any mobile
 - put it at the bottom, since this is not the most important part of the page
parent e188b011
......@@ -8,16 +8,19 @@
</div>
</form>
</div>
<!-- results -->
<div class="mt-5">
<rare-genetic-resources [geneticResources]="results"></rare-genetic-resources>
</div>
<!-- pagination -->
<div class="d-flex justify-content-center mt-5">
<!-- we add 1 to the page because ngb-pagination is 1 based -->
<ngb-pagination *ngIf="results" [page]="results.number + 1" (pageChange)="navigateToPage($event)"
[collectionSize]="results.totalElements"
[pageSize]="results.size"
[maxSize]="20">
[maxSize]="5"
[boundaryLinks]="true"
[ellipses]="false"
size="sm">
</ngb-pagination>
</div>
<!-- results -->
<div class="mt-5">
<rare-genetic-resources [geneticResources]="results"></rare-genetic-resources>
</div>
......@@ -64,7 +64,7 @@ describe('SearchComponent', () => {
// then the search should be populated
expect(component.searchForm.get('search').value).toBe(query);
// the search service called
expect(searchService.search).toHaveBeenCalledWith(query, 0);
expect(searchService.search).toHaveBeenCalledWith(query, 1);
// and the results fetched
expect(component.results).toEqual(results);
});
......@@ -95,26 +95,28 @@ describe('SearchComponent', () => {
expect(component.results).toEqual(results);
});
it('should navigate to search when a query is entered', () => {
it('should navigate to search and reset the page to default when a query is entered', () => {
// given a component
const router = TestBed.get(Router) as Router;
spyOn(router, 'navigate');
const searchService = TestBed.get(SearchService) as SearchService;
spyOn(searchService, 'search');
const activatedRoute = fakeRoute({});
// with a current query Rosa and a current page 2
let query = 'Rosa';
const queryParams = of({ query, page: 2 });
const activatedRoute = fakeRoute({ queryParams });
const component = new SearchComponent(activatedRoute, router, searchService);
// with a query
const query = 'Bacteria';
query = 'Bacteria';
component.searchForm.get('search').setValue(query);
// when searching
// when searching with a new query Bacteria
component.newSearch();
// then it should redirect to the search with correct parameters
expect(router.navigate).toHaveBeenCalledWith(['.'], { relativeTo: activatedRoute, queryParams: { query, page: 0 } });
// then it should redirect to the search with the new query and no page
expect(router.navigate).toHaveBeenCalledWith(['.'], { relativeTo: activatedRoute, queryParams: { query, page: undefined } });
});
it('should navigate to next page when pagination is used', () => {
it('should navigate to requested page when pagination is used', () => {
// given a component
const router = TestBed.get(Router) as Router;
spyOn(router, 'navigate');
......@@ -130,7 +132,6 @@ describe('SearchComponent', () => {
component.navigateToPage(2);
// then it should redirect to the search with correct parameters
expect(component.page).toBe(2);
expect(router.navigate).toHaveBeenCalledWith(['.'], { relativeTo: activatedRoute, queryParams: { query, page: 2 } });
});
......
......@@ -15,7 +15,6 @@ import { Page } from '../models/page';
})
export class SearchComponent implements OnInit {
query = '';
page = 0;
searchForm: FormGroup;
results: Page<GeneticResourceModel>;
......@@ -33,34 +32,42 @@ export class SearchComponent implements OnInit {
this.query = params.get('query');
// set the search field
this.searchForm.get('search').setValue(this.query);
let page = 1;
if (params.get('page')) {
this.page = +params.get('page');
page = +params.get('page');
}
// launch the search
return this.searchService.search(this.query, this.page)
return this.searchService.search(this.query, page)
.pipe(catchError(() => EMPTY));
})
)
.subscribe(results => this.results = results);
}
search() {
/**
* Method called when the user enters a new value in the search field and submits the search form.
* It uses the new search terms in the form, and asks for the default page (1) for this new query
*/
newSearch() {
this.query = this.searchForm.get('search').value;
this.search();
}
/**
* Method called when the user navigates to a different page using the pagination. It uses the current query
* and navigates to the requested page.
*/
navigateToPage(requestedPage: number) {
this.search(requestedPage);
}
private search(page?: number) {
this.router.navigate(['.'], {
relativeTo: this.route,
queryParams: {
query: this.query,
page: this.page
page
}
});
}
newSearch() {
this.query = this.searchForm.get('search').value;
this.search();
}
navigateToPage(nextPage: number) {
this.page = nextPage;
this.search();
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment