Merge branch 'development' into 'master'

Fix flyTo

See merge request refonte-data/portail-data!51

src/app/editorialisation/components/reuse-detail/reuse-detail.component.html

@@ -15,7 +15,7 @@
 
       <div class="dataset-list">
         <div class="reused-dataset" *ngFor="let dataset of datasetsUsed">
-          <img [src]="dataset.image.url" alt="Dataset image"
+          <img [src]="dataset.image.url || './assets/img/vignette-data.png'" alt="Dataset image"
             onerror="this.onerror=null;this.src='./assets/img/vignette-data.png';this.alt='Default image'">
           <div class="dataset-title">
             <a class="link-without-decoration"

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

@@ -48,8 +48,6 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
       this._scroller.scrollToPosition(this.position);
     });
 
-    this.initDatasetInfo();
-
     this._route.params.subscribe((params) => {
       this.isLoading = true;
       this.initDatasetInfo();
@@ -123,7 +121,7 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
 
     // If a tab (info, data...) is not specified in the url then redirect to the data tab if the dataset
     // as a table or a map or to the info tab in the failing case
-    if (this._route.snapshot.url.join('/') === `${AppRoutes.datasets.uri}/${this._route.snapshot.params.id}`) {
+    if (!this._route.snapshot.firstChild) {
       if (this.hasTable || this.hasMap) {
         this._router.navigate([
           `/${AppRoutes.datasets.uri}/${this._datasetDetailService.dataset.slug}/${AppRoutes.data.uri}`,
@@ -133,6 +131,12 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
           `/${AppRoutes.datasets.uri}/${this._datasetDetailService.dataset.slug}/${AppRoutes.info.uri}`,
         ]);
       }
+    } else {
+      // Making that the url contains the slug and not the uuid of the dataset
+      this._router.navigate([
+        // tslint:disable-next-line: max-line-length
+        `/${AppRoutes.datasets.uri}/${this._datasetDetailService.dataset.slug}/${this._route.snapshot.firstChild.url[0]}`,
+      ]);
     }
 
     // Emit event to indicate to child component that the dataset has changed

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

@@ -24,7 +24,7 @@
       </span>
       <div class="related-dataset">
         <div class="related-dataset-item">
-          <img [src]="parent.imageUrl" alt="dataset parent thumbnail image"
+          <img [src]="parent.imageUrl || './assets/img/vignette-collection.png'" alt="dataset parent thumbnail image"
             onerror="this.onerror=null;this.src='./assets/img/vignette-collection.png';this.alt='Default image'">
           <a class="link-without-decoration"
             [routerLink]="['/', AppRoutes.datasets.uri, parent.slug]">{{parent.title}}</a>
@@ -38,7 +38,7 @@
       </span>
       <div class="related-dataset">
         <div class="related-dataset-item" *ngFor="let child of children">
-          <img [src]="child.imageUrl" alt="dataset children thumbnail image"
+          <img [src]="child.imageUrl || './assets/img/vignette-data.png'" alt="dataset children thumbnail image"
             onerror="this.onerror=null;this.src='./assets/img/vignette-data.png';this.alt='Default image'">
           <a class="link-without-decoration"
             [routerLink]="['/', AppRoutes.datasets.uri, child.slug]">{{child.title}}</a>

src/app/geosource/models/data.model.ts

@@ -23,12 +23,4 @@ export class Data implements IData {
       this.id = data.properties.gid;
     }
   }
-
-  orderProperties(orderedProperties: string[]) {
-    const newDataPropertiesOrder = {};
-    orderedProperties.forEach((field) => {
-      newDataPropertiesOrder[field] = this.properties[field] ? this.properties[field] : '';
-    });
-    this.properties = newDataPropertiesOrder;
-  }
 }

src/app/geosource/models/elasticsearch-hit.model.ts

@@ -10,6 +10,8 @@ export interface IElasticsearchHit {
     'metadata-fr': IMetadata;
     'data-fr': IData;
   } | IESCMSResponse;
+  'uuid': string;
+  'slug': string;
   'inner_hits': {
     'data': {
       'hits': {

src/app/geosource/resolvers/dataset-detail.resolver.ts

@@ -10,8 +10,18 @@ export class DatasetDetailResolver implements Resolve<Dataset> {
   constructor(private datasetDetailService: DatasetDetailService) { }
 
   resolve(route: ActivatedRouteSnapshot) {
-    return this.datasetDetailService.initializeDataset(route.params.id).pipe(
-      catchError(() => of(null)),
-    );
+    let toBeReturned;
+    if (
+      !(route.params.id === this.datasetDetailService.dataset.slug) &&
+      !(route.params.id === this.datasetDetailService.dataset.uuid)
+    ) {
+      toBeReturned = this.datasetDetailService.initializeDataset(route.params.id).pipe(
+        catchError(() => of(null)),
+      );
+    } else {
+      toBeReturned = of(null);
+    }
+
+    return toBeReturned;
   }
 }

src/app/geosource/services/dataset-detail.service.ts

@@ -44,26 +44,26 @@ export class DatasetDetailService {
     private _matomoService: MatomoService,
   ) { }
 
-  initializeDataset(slug: string): Observable<Dataset> {
+  initializeDataset(slugOrUuid: string): Observable<Dataset> {
     this._dataset.data = [];
     this._dataset.nbViews = null;
     this._elasticSearchOptions = new ElasticsearchOptions(this._initialScrollOptions);
 
     this.newAsyncRequest();
 
-    this._matomoService.getPageMetadataPageMetrics(slug).pipe(
+    this._matomoService.getPageMetadataPageMetrics(slugOrUuid).pipe(
       catchError(() => of(null)),
     ).subscribe((nbViews) => {
       this._dataset.nbViews = nbViews;
     });
 
     // Get the metadata
-    return this._elasticsearchService.getDatasetMetadata(slug).pipe(
+    return this._elasticsearchService.getDatasetMetadata(slugOrUuid).pipe(
       map((e) => {
         if (e.hits.hits.length > 0) {
           const metadata = new Metadata(e.hits.hits[0]._source['metadata-fr']);
           this._dataset.uuid = metadata.geonet.uuid;
-          this.dataset.slug = slug;
+          this._dataset.slug = e.hits.hits[0]._source['slug'];
           this._dataset.editorialMetadata = e.hits.hits[0]._source['editorial-metadata'];
 
           this._dataset.fields = e.hits.hits[0]._source['fields'] ? e.hits.hits[0]._source['fields'] : {
@@ -209,7 +209,7 @@ export class DatasetDetailService {
         );
         // Set the properties order based on the natural order from the data provider (set in 'dataset.fields.list')
         this._dataset.data.forEach((data) => {
-          data.orderProperties(this._dataset.fields.list);
+          this.orderProperties(data, this._dataset.fields.list);
         });
       }
     });
@@ -218,6 +218,14 @@ export class DatasetDetailService {
     }
   }
 
+  orderProperties(data: any, orderedProperties: string[]) {
+    const newDataPropertiesOrder = {};
+    orderedProperties.forEach((field) => {
+      newDataPropertiesOrder[field] = data.properties[field] ? data.properties[field] : '';
+    });
+    data.properties = newDataPropertiesOrder;
+  }
+
   get datasetData(): Data[] {
     return this._dataset.data;
   }

src/app/geosource/services/elasticsearch.service.ts

@@ -48,16 +48,27 @@ export class ElasticsearchService {
     );
   }
 
-  getDatasetMetadata(slug: string): Observable<IElasticsearchResponse> {
+  getDatasetMetadata(slugOrUuid: string): Observable<IElasticsearchResponse> {
     return this._http.request<IElasticsearchResponse>('POST', this.elasticSearchUrl, {
       withCredentials: true,
       body: {
         from: 0,
         size: 1,
-        _source: ['metadata-fr', 'editorial-metadata', 'uuid', 'fields'],
+        _source: ['metadata-fr', 'editorial-metadata', 'uuid', 'fields', 'slug'],
         query: {
-          term: {
-            'slug.keyword': slug,
+          bool: {
+            should: [
+              {
+                term: {
+                  'slug.keyword': slugOrUuid,
+                },
+              },
+              {
+                term: {
+                  'metadata-fr.geonet:info.uuid.keyword': slugOrUuid,
+                },
+              },
+            ],
           },
         },
       },

src/app/map/services/map.service.ts

@@ -172,7 +172,14 @@ export class MapService {
           // 70 is the width of the dataset data details panel divided by 4 (by 2 because the map and the table
           // share the remaining space and again by 2 because we want to center the point so there is half on the
           // left, half on the right)
-          this._map.flyTo({ center: e.lngLat, curve: 1, speed: 0.4, offset: new mapboxgl.Point(-70, 0) });
+          this._map.panTo(e.lngLat, {
+            duration: 500,
+            // 70 is the width of the dataset data details panel divided by 4 (by 2 because the map and the table
+            // share the remaining space and again by 2 because we want to center the point so there is half on the
+            // left, half on the right)
+            offset: new mapboxgl.Point(-70, 0),
+          },
+          );
         }
       }
 
@@ -496,15 +503,14 @@ export class MapService {
 
       const pointCenter = selectedFeature.geometry.type === 'Point' ?
         selectedFeature.geometry.coordinates : centroid(selectedFeature).geometry.coordinates;
-
-      this._map.flyTo({
-        center: pointCenter,
-        curve: 1, duration: 500,
+      this._map.panTo(pointCenter, {
+        duration: 500,
         // 70 is the width of the dataset data details panel divided by 4 (by 2 because the map and the table
         // share the remaining space and again by 2 because we want to center the point so there is half on the
         // left, half on the right)
         offset: new mapboxgl.Point(-70, 0),
-      });
+      },
+      );
 
     }
   }