Add result number

src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.html

@@ -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"

src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.scss

@@ -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;

src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.ts

@@ -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);
+  }
+
 }

src/app/geosource/components/dataset-detail/dataset-table/dataset-table.component.html

-<!-- <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()">

src/app/geosource/components/dataset-detail/dataset-table/dataset-table.component.ts

@@ -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) {