Skip to content
Snippets Groups Projects
Commit 79b99780 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Add loading system

parent 481b28b2
No related branches found
No related tags found
1 merge request!48Version 2.3.0
Showing
with 97 additions and 52 deletions
......@@ -5,7 +5,7 @@
<div class="tabulations">
<ul class="navigation-tabs">
<li [routerLinkActive]="'is-active'" *ngIf="hasData || hasMap">
<li [routerLinkActive]="'is-active'" *ngIf="hasTable || hasMap">
<a (click)="setPosition()" [routerLink]="[AppRoutes.data.uri]" class="tab-link">
<svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 32">
<path class="primary"
......
......@@ -78,7 +78,7 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
this.pageHeaderInfo = {
title: this.metadata.title,
metadataSubtitle : this.metadata.subtitle,
metadataSubtitle: this.metadata.subtitle,
subtitle: this.metadata.contacts.map(c => c.organisationName).join(', '),
};
......@@ -148,20 +148,11 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
}
get hasMap() {
if (!this.metadata || !this.metadata.link) {
return false;
}
return this.metadata.link.find((e) => {
let res = false;
if (e.service === linkFormats.wms || e.service === linkFormats.wfs) {
res = true;
}
return res;
});
return this._datasetDetailService.dataset.hasMap;
}
get hasData() {
return this._datasetDetailService.datasetEditorialMetadata.isSearchable;
get hasTable() {
return this._datasetDetailService.dataset.hasTable;
}
ngOnDestroy() {
......
......@@ -35,9 +35,9 @@
<div class="control button-research">
<button class="button is-medium" (click)="searchChanged()">
<span class="icon">
<img src="./assets/img/picto_search.svg" alt="Picto search">
<img src="./assets/img/picto_search.svg" alt="Picto search" *ngIf="!isLoading; else spinner">
<ng-template #spinner>
<i class="fas fa-spinner fa-spin has-text-danger"></i>
<i class="fas fa-spinner fa-spin"></i>
</ng-template>
</span>
</button>
......
......@@ -42,7 +42,8 @@
.button-research button {
background-color: $blue-color;
.icon {
.icon,
i {
color: white;
}
}
......
......@@ -4,6 +4,8 @@ import { linkFormats } from '../../../models/metadata.model';
import { DatasetMapComponent } from '../dataset-map/dataset-map.component';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { AppRoutes } from '../../../../routes';
@Component({
selector: 'app-dataset-table-map',
......@@ -30,14 +32,21 @@ export class DatasetTableMapComponent implements OnInit, OnDestroy {
constructor(
private _datasetDetailService: DatasetDetailService,
) {
this.properties = this._datasetDetailService.dataset.fields.list;
this.selectedProperties = Array.from(this.properties);
}
private _router: Router,
private _route: ActivatedRoute,
) { }
ngOnInit() {
// Intialize the search value with the value from the service in order to keep it when navigating in tabs
this.searchInput.setValue(this._datasetDetailService.searchString);
// If the dataset has at least a table or a map then initialize the component
// else redirect to the info tab
if (this.hasTable || this.hasMap) {
this.properties = this._datasetDetailService.dataset.fields.list;
this.selectedProperties = Array.from(this.properties);
// Intialize the search value with the value from the service in order to keep it when navigating in tabs
this.searchInput.setValue(this._datasetDetailService.searchString);
} else {
this._router.navigate([`./${AppRoutes.info.uri}`], { relativeTo: this._route.parent });
}
}
ngOnDestroy() {
......@@ -80,20 +89,11 @@ export class DatasetTableMapComponent implements OnInit, OnDestroy {
}
get hasMap() {
if (!this._datasetDetailService.dataset.metadata || !this._datasetDetailService.dataset.metadata.link) {
return false;
}
return this._datasetDetailService.dataset.metadata.link.find((e) => {
let res = false;
if (e.service === linkFormats.wms || e.service === linkFormats.wfs) {
res = true;
}
return res;
});
return this._datasetDetailService.dataset.hasMap;
}
get hasTable() {
return this._datasetDetailService.datasetEditorialMetadata.isSearchable;
return this._datasetDetailService.dataset.hasTable;
}
toogleColumsMenu() {
......@@ -144,4 +144,8 @@ export class DatasetTableMapComponent implements OnInit, OnDestroy {
return Math.ceil(this.researchMaxResult / this.datasetDataNumber * 100);
}
get isLoading() {
return this._datasetDetailService.isLoading;
}
}
......@@ -14,7 +14,7 @@
<span class="surtitle" *ngIf="surTitle[dataset.metadata.type]">
{{ surTitle[dataset.metadata.type] }}
</span>
<a [routerLink]="['/', AppRoutes.datasets.uri, dataset.slug]" class="link-without-decoration">
<a [routerLink]="['/', AppRoutes.datasets.uri, dataset.slug, datasetDetailsURI]" class="link-without-decoration">
<span class="h3"
[innerHTML]="!dataset.highlights.highlightedTitle ? dataset.metadata.title : dataset.highlights.highlightedTitle">
</span>
......
......@@ -25,7 +25,6 @@ export class ResultDatasetComponent implements OnInit {
constructor() { }
ngOnInit() {
if (this.dataset.metadata.image) {
this.imageUrl = this.dataset.metadata.image.url;
} else {
......@@ -48,4 +47,8 @@ export class ResultDatasetComponent implements OnInit {
}
}
get datasetDetailsURI() {
return this.dataset.hasMap || this.dataset.hasTable ? AppRoutes.data.uri : AppRoutes.info.uri;
}
}
import { IMetadata, Metadata } from './metadata.model';
import { IMetadata, Metadata, linkFormats } from './metadata.model';
import { Highlights } from './highlights.model';
import { Data, IData } from './data.model';
import { IEditorialMetadata, EditorialMetadata } from './editorial-metadata.model';
......@@ -61,4 +61,21 @@ export class Dataset {
}
}
}
get hasMap() {
if (!this.metadata || !this.metadata.link) {
return false;
}
return this.metadata.link.find((e) => {
let res = false;
if (e.service === linkFormats.wms || e.service === linkFormats.wfs) {
res = true;
}
return res;
});
}
get hasTable() {
return this.editorialMetadata.isSearchable;
}
}
......@@ -4,8 +4,8 @@ import {
Metadata, Dataset, DatasetChild, Data, IElasticsearchResponse, ElasticsearchOptions,
EditorialMetadata,
} from '../models';
import { Observable, Subject, forkJoin, of } from 'rxjs';
import { map, catchError, flatMap, tap } from 'rxjs/operators';
import { Observable, Subject, of, forkJoin } from 'rxjs';
import { map, catchError, flatMap, tap, finalize } from 'rxjs/operators';
import { ErrorService, MatomoService } from '../../core/services';
import { notificationMessages } from '../../../i18n/traductions';
import { IDatasetRawChild } from '../models/dataset-child.model';
......@@ -33,6 +33,8 @@ export class DatasetDetailService {
// Copy the initial value to be able to reinitialize at any moment
private _elasticSearchOptions: ElasticsearchOptions;
private _pendingRequests: number = 0;
constructor(
private _errorService: ErrorService,
private _elasticsearchService: ElasticsearchService,
......@@ -44,17 +46,17 @@ export class DatasetDetailService {
this._dataset.nbViews = null;
this._elasticSearchOptions = new ElasticsearchOptions(this._initialScrollOptions);
this._matomoService.getPageMetadataPageMetrics(slug).subscribe(
(views) => {
this._dataset.nbViews = views;
},
(err) => {
},
);
this.newAsyncRequest();
// Get the metadata
return this._elasticsearchService.getDatasetMetadata(slug).pipe(
map((e) => {
return forkJoin([
this._matomoService.getPageMetadataPageMetrics(slug).pipe(
catchError(() => of(null)),
),
this._elasticsearchService.getDatasetMetadata(slug),
]).pipe(
map(([nbViews, e]) => {
this._dataset.nbViews = nbViews;
if (e.hits.hits.length > 0) {
const metadata = new Metadata(e.hits.hits[0]._source['metadata-fr']);
this._dataset.uuid = metadata.geonet.uuid;
......@@ -146,12 +148,16 @@ export class DatasetDetailService {
}),
);
}),
finalize(() => {
this.asyncRequestDone();
}),
);
}
// Get the next page of data, add it to the current array and return the array with the updated data
retrieveMoreDatasetData(): Observable<Data[]> {
this.newAsyncRequest();
return this._elasticsearchService.getDatasetData(this._dataset.uuid, this._elasticSearchOptions).pipe(
tap((res) => {
this.setDatasetData(res);
......@@ -162,11 +168,15 @@ export class DatasetDetailService {
catchError((err) => {
throw this._errorService.handleError(err, { message: notificationMessages.geosource.getDatasetData });
}),
finalize(() => {
this.asyncRequestDone();
}),
);
}
// Initialize the dataset data array with an empty array and push the data retreived
retrieveDatasetData(): Observable<Data[]> {
this.newAsyncRequest();
return this._elasticsearchService.getDatasetData(this._dataset.uuid, this._elasticSearchOptions).pipe(
tap((res) => {
this._dataset.data = [];
......@@ -179,6 +189,9 @@ export class DatasetDetailService {
catchError((err) => {
throw this._errorService.handleError(err, { message: notificationMessages.geosource.getDatasetData });
}),
finalize(() => {
this.asyncRequestDone();
}),
);
}
......@@ -294,4 +307,20 @@ export class DatasetDetailService {
this._elasticSearchOptions.from += this._elasticSearchOptions.pageSize;
}
// Helpers for knowing if there are pending requests or not
// Increments the number of curretly running async request by one
newAsyncRequest() {
this._pendingRequests += 1;
}
// Decrement the number of async requests by one
asyncRequestDone() {
this._pendingRequests -= 1;
}
// Return true if http queries are being made
get isLoading() {
return this._pendingRequests > 0 ? true : false;
}
}
......@@ -366,8 +366,8 @@
<target>Request access to this data</target>
</trans-unit>
<trans-unit id="dataset.data.recordsFound" datatype="html">
<source> records found.</source>
<target> records found.</target>
<source> records found</source>
<target> records found</target>
</trans-unit>
<trans-unit id="dataset.data.properties" datatype="html">
<source>Properties</source>
......
......@@ -354,8 +354,8 @@ données sont en accès restreint. Pour consulter ou utiliser l’intégralité
<target>Demander l'accès à ces données</target>
</trans-unit>
<trans-unit id="dataset.data.recordsFound" datatype="html">
<source> records found.</source>
<target> enregistrements trouvés.</target>
<source> records found</source>
<target> enregistrements trouvés</target>
</trans-unit>
<trans-unit id="dataset.data.displayedProperties" datatype="html">
<source> displayed properties</source>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment