Skip to content
GitLab
Commit c4f7be3b authored by Jérémy Destin's avatar Jérémy Destin
Browse files

fix: Fix the bug that appear when select the tab trait (The band that indicate... 

fix: Fix the bug that appear when select the tab trait (The band that indicate the number of results and the page navigator were not display on the good part of the page). GNP-4309
parent fafc103b
Hide whitespace changes
Inline Side-by-side
frontend/src/app/result-page/result-page.component.html
View file @ c4f7be3b
<h3 align="center" class="mb-4">{{ appTitle }}</h3>
<div class="row justify-content-end">
<!-- Column for facets -->
<div class="col-lg-3 order-lg-first">
<!-- Reset all button -->
<div class="text-right">
<button type="button" class="btn btn-sm btn-danger mt-1"
(click)="resetAll()">
Reset all
</button>
</div>
<div class="row">
<!-- Column for facets -->
<div class="col-3">
<faidare-facets
[criteria$]="criteria$"
[facets]="facets"
......@@ -19,109 +28,113 @@
</faidare-facets>
</div>
<!-- Column for form and results-->
<div class="col-lg-9">
<!-- Reset all button -->
<div class="text-right reset-all-div">
<button type="button" class="btn btn-sm btn-danger mt-1"
(click)="resetAll()">
Reset all
</button>
</div>
<!-- Form -->
<faidare-form
#form
[criteria$]="criteria$"
[displayGermplasmResult$]="displayGermplasmResult$">
</faidare-form>
<!-- Column for form and results -->
<div class="col-9">
<div class="row">
<!-- Loading spinner-->
<div class="text-center">
<faidare-loading-spinner [loading]="loading"></faidare-loading-spinner>
</div>
<div class="col-12">
<!-- Form -->
<faidare-form
#form
[criteria$]="criteria$"
[displayGermplasmResult$]="displayGermplasmResult$">
</faidare-form>
</div>
<!-- No criteria selected -->
<div *ngIf="criteriaIsEmpty && !loading"
class="text-center text-muted mt-5 bolder">
Select criteria to get results.
</div>
<div class="col-12">
<!-- Loading spinner-->
<div class="text-center">
<faidare-loading-spinner
[loading]="loading"></faidare-loading-spinner>
</div>
<!-- Display results when possible -->
<ng-container
*ngIf="documents.length && !criteriaIsEmpty && !loading && !displayGermplasmResult">
<!-- Pagination status -->
<div class="container">
<div class="row result align-content-center">
<!-- No criteria selected -->
<div *ngIf="criteriaIsEmpty && !loading"
class="text-center text-muted mt-5 bolder">
Select criteria to get results.
</div>
<!-- Display results when possible -->
<ng-container
*ngIf="documents.length && !criteriaIsEmpty && !loading && !displayGermplasmResult">
<!-- Pagination status -->
<div class="container">
<div class="row result align-content-center">
<span class="col-4 mt-2 bolder">
Results:
</span>
<span *ngIf="pagination.totalResult"
class="col-8 text-right small text-muted mt-3">
<span *ngIf="pagination.totalResult"
class="col-8 text-right small text-muted mt-3">
From {{ pagination.startResult | number }}
to {{ pagination.endResult | number }}
over {{ pagination.totalResult | number }} documents
to {{ pagination.endResult | number }}
over {{ pagination.totalResult | number }} documents
<span *ngIf="pagination.totalResult > pagination.maxResults">
(limited to {{ pagination.maxResults | number }})
</span>
</span>
</div>
</div>
</div>
</div>
<!--Top page navigator-->
<div class="d-flex justify-content-center mt-3"
*ngIf="pagination.totalPages > 1">
<!-- we add 1 to the page because ngb-pagination is 1 based -->
<ngb-pagination [page]="pagination.currentPage + 1"
(pageChange)="changePage($event)"
[collectionSize]="resultCount()"
[pageSize]="pagination.pageSize"
[maxSize]="5"
[boundaryLinks]="true"
[ellipses]="false"
size="sm">
</ngb-pagination>
</div>
<!--Top page navigator-->
<div class="d-flex justify-content-center mt-3"
*ngIf="pagination.totalPages > 1">
<!-- we add 1 to the page because ngb-pagination is 1 based -->
<ngb-pagination [page]="pagination.currentPage + 1"
(pageChange)="changePage($event)"
[collectionSize]="resultCount()"
[pageSize]="pagination.pageSize"
[maxSize]="5"
[boundaryLinks]="true"
[ellipses]="false"
size="sm">
</ngb-pagination>
</div>
<!-- Result document -->
<faidare-document
*ngFor="let document of documents"
[document]="document">
</faidare-document>
<!-- Pagination -->
<!--Bottom page navigator-->
<div class="d-flex justify-content-center mt-4 mb-5"
*ngIf="pagination.totalPages > 1">
<!-- we add 1 to the page because ngb-pagination is 1 based -->
<ngb-pagination [page]="pagination.currentPage + 1"
(pageChange)="changePage($event)"
[collectionSize]="resultCount()"
[pageSize]="pagination.pageSize"
[maxSize]="5"
[boundaryLinks]="true"
[ellipses]="false"
size="sm">
</ngb-pagination>
</div>
</ng-container>
<ng-container *ngIf="displayGermplasmResult">
<faidare-germplasm-result-page
[criteriaFromForm$]=criteria$
[germplasmSearchCriteria$]="germplasmSearchCriteria$"
[germplasmFacets$]="germplasmfacets$">
</faidare-germplasm-result-page>
</ng-container>
<!-- Else we display a simple message when no result found -->
<div *ngIf="pagination.totalResult == 0 && !loading
<!-- Result document -->
<faidare-document
*ngFor="let document of documents"
[document]="document">
</faidare-document>
<!-- Pagination -->
<!--Bottom page navigator-->
<div class="d-flex justify-content-center mt-4 mb-5"
*ngIf="pagination.totalPages > 1">
<!-- we add 1 to the page because ngb-pagination is 1 based -->
<ngb-pagination [page]="pagination.currentPage + 1"
(pageChange)="changePage($event)"
[collectionSize]="resultCount()"
[pageSize]="pagination.pageSize"
[maxSize]="5"
[boundaryLinks]="true"
[ellipses]="false"
size="sm">
</ngb-pagination>
</div>
</ng-container>
<!-- Display the table of the germplasm-result-page -->
<ng-container *ngIf="displayGermplasmResult">
<faidare-germplasm-result-page
[criteriaFromForm$]=criteria$
[germplasmSearchCriteria$]="germplasmSearchCriteria$"
[germplasmFacets$]="germplasmfacets$">
</faidare-germplasm-result-page>
</ng-container>
<!-- Else we display a simple message when no result found -->
<div *ngIf="pagination.totalResult == 0 && !loading
&& (!criteriaIsEmpty && !displayGermplasmResult)"
id="no-results" class="text-center">
<div class="no-result-icon">
<span class="fa fa-meh-o"></span>
id="no-results" class="text-center">
<div class="no-result-icon">
<span class="fa fa-meh-o"></span>
</div>
No results.
</div>
</div>
No results.
</div>
</div>
</div>
frontend/src/app/result-page/result-page.component.scss
View file @ c4f7be3b
......@@ -15,10 +15,6 @@
font-weight: bold;
}
.reset-all-div {
height: 0;
}
// Loading spinner
.lds-spinner {
$scale: 0.75;
......
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