Commit 481b28b2 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Add result number

parent a7bb76ba
......@@ -44,6 +44,15 @@
</div>
</div>
</div>
<div class="documents-number">
<span class="research-documents-number">
{{ researchMaxResult }}
</span>
<span>/ {{ datasetDataNumber }}</span>
<span i18n="@@dataset.data.recordsFound"> records found</span>
<span class="result-number-bar" [ngStyle]="{'width': datasetDataNumberPercentage + '%'}"></span>
</div>
</div>
<div class="right-section">
<button class="button button-toogle-table-map" type="button" (click)="toogleTable()" *ngIf="hasTable"
......
......@@ -73,6 +73,25 @@
}
}
.documents-number {
border-bottom: 1px solid #ccd6ea;
position: relative;
align-self: center;
padding-bottom: 0.2rem;
}
.result-number-bar {
border-bottom: 1px solid $blue-color;
position: absolute;
top: 1px;
height: 100%;
left: 0;
}
.research-documents-number {
color: $blue-color;
font-weight: bold;
}
.button-toogle-table-map {
width: 100px;
......
......@@ -131,4 +131,17 @@ export class DatasetTableMapComponent implements OnInit, OnDestroy {
this._datasetDetailService.searchChanged(this.searchInput.value);
}
// Get the number of documents in this dataset
get datasetDataNumber() {
return this._datasetDetailService.datasetDataNumber;
}
get researchMaxResult() {
return this._datasetDetailService.researchMaxResult;
}
get datasetDataNumberPercentage() {
return Math.ceil(this.researchMaxResult / this.datasetDataNumber * 100);
}
}
<!-- <div class="columns is-multiline page-header">
<div class="column is-paddingless">
<div class="documents-number">
<span class="documents-number">
<span class="research-documents-number">
{{ researchMaxResult }}
</span>
<span>/ {{ datasetDataNumber }}</span>
<span i18n="@@dataset.data.recordsFound"> records found</span>
</span>
</div>
<div class="search-container">
<div class="control has-icons-left search-control" [ngClass]="{'is-loading': isLoading}">
<span class="icon is-medium is-left">
<svg xmlns="http://www.w3.org/2000/svg" id="loupe" viewBox="0 0 17 16">
<path
d="M9 3zM3.5 4.5zM15.8 14.4h-.1l-3.1-3.1v-.1h-.8v.9l3.1 3.1.8-.8zM3.7 12.1zM9.9 1.5C9 1 8.1.8 7 .8c-1.1 0-2 .2-2.9.7C3.2 2 2.5 2.7 2 3.6c-.5.9-.8 1.8-.8 2.9 0 1.1.3 2 .8 2.9.5.9 1.2 1.6 2.1 2.1.9.5 1.8.7 2.9.7 1.3 0 2.5-.4 3.5-1.2l.6-.4.4-.6c.8-1 1.2-2.2 1.2-3.5 0-1.1-.3-2-.8-2.9-.4-.9-1.1-1.6-2-2.1m-7 2.6c.4-.7 1-1.3 1.7-1.7.7-.4 1.5-.6 2.4-.6.9 0 1.6.2 2.4.6.7.4 1.3 1 1.7 1.7.4.7.6 1.5.6 2.4 0 .9-.2 1.7-.6 2.4-.4.7-1 1.3-1.7 1.7-.8.4-1.5.6-2.4.6-.9 0-1.7-.2-2.4-.6-.7-.4-1.3-1-1.7-1.7-.4-.7-.7-1.5-.7-2.4 0-.9.3-1.6.7-2.4z"
class="st0" />
</svg>
</span>
<input type="text" [formControl]="searchInput" class="input" placeholder="Filter records"
i18n-placeholder="@@dataset.data.filterReccordPlaceholder">
</div>
</div>
</div>
<div class="column is-paddingless">
<div class="properties-number">
<span><span
class="selected-properties-number">{{ selectedProperties.length }}</span><span>/{{ properties.length }}</span>
<span i18n="@@dataset.data.displayedProperties"> displayed properties</span></span>
</div>
<div class="dropdown properties-dropdown" [ngClass]="{'is-active': displayColumnsMenu}"
(clickOutside)="closeColumsMenu()">
<div class="dropdown-trigger">
<button class="button button-gl is-outlined" aria-haspopup="true" aria-controls="dropdown-menu"
(click)="toogleColumsMenu()" i18n="@@dataset.data.customizeButton">
Customize
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content has-text-left">
<div class="field dropdown-item" *ngFor="let prop of properties">
<input class="is-checkradio has-error is-small" [id]="prop" type="checkbox" name="selectedColumns"
[checked]="columnIsSelected(prop) !== -1" (click)="toogleColumn(prop)">
<label [for]="prop">{{ prop }}</label>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div class="data-table" infinite-scroll [infiniteScrollDistance]="scrollDistance"
[infiniteScrollUpDistance]="scrollUpDistance" [infiniteScrollThrottle]="throttle" [scrollWindow]="false"
(scrolled)="onScrollDown()" [ngStyle]="getStyle()">
......
......@@ -109,11 +109,6 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
}
}
// Get the number of documents in this dataset
get datasetDataNumber() {
return this._datasetDetailService.datasetDataNumber;
}
// Add or Remove the id (given in the code) of the data
// from the array of openned data (details displayed)
toogleData(num: number) {
......
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