Merge pull request #266 from akhelouat/GSBHDF-479

(datahub): Improve download links rendering
geonetwork · Jun 20, 2022 · f2d4e90 · f2d4e90
2 parents 239454f + 9ba4a7a
commit f2d4e90
Show file tree

Hide file tree

Showing 48 changed files with 577 additions and 176 deletions.
diff --git a/libs/feature/record/src/lib/data-downloads/data-downloads.component.html b/libs/feature/record/src/lib/data-downloads/data-downloads.component.html
@@ -1,14 +1,2 @@
-<p
-  *ngIf="(links$ | async) && (links$ | async).length > 0"
-  class="font-title text-[28px] text-title font-medium mt-8 mb-6 text-center sm:mt-12 sm:mb-4 sm:text-left"
-  translate
->
-  record.metadata.download
-</p>
-<div class="mb-2 sm:mb-3" *ngFor="let link of links$ | async">
-  <gn-ui-download-item [link]="link"></gn-ui-download-item>
-</div>
-<!-- disable error report for now (until considered useful) -->
-<!--<gn-ui-popup-alert *ngIf="error" icon="error_outline" class="block h-32 mt-2">-->
-<!--  <span translate>downloads.wfs.error</span>: <span translate>{{ error }}</span>-->
-<!--</gn-ui-popup-alert>-->
+<gn-ui-downloads-list *ngIf="links$ | async as links" [links]="links">
+</gn-ui-downloads-list>
diff --git a/libs/feature/record/src/lib/data-downloads/data-downloads.component.spec.ts b/libs/feature/record/src/lib/data-downloads/data-downloads.component.spec.ts
@@ -8,7 +8,7 @@ import { BehaviorSubject, of, throwError } from 'rxjs'
 import { MdViewFacade } from '../state'
 import { DataDownloadsComponent } from './data-downloads.component'
 import { MetadataLink } from '@geonetwork-ui/util/shared'
-import { Component, Input } from '@angular/core'
+import { Component, Input, NO_ERRORS_SCHEMA } from '@angular/core'
 import { By } from '@angular/platform-browser'
 import { DataService } from '../service/data.service'
 
@@ -85,6 +85,7 @@ describe('DataDownloadsComponent', () => {
           useClass: DataServiceMock,
         },
       ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents()
     facade = TestBed.inject(MdViewFacade)
   })
@@ -204,66 +205,138 @@ describe('DataDownloadsComponent', () => {
         expect(downloadLinks).toEqual([
           {
             description: 'Lieu de surveillance (point)',
-            name: 'surval_parametre_point.csv',
             format: 'csv',
+            name: 'surval_parametre_point.csv',
             protocol: 'WWW:DOWNLOAD',
             url: 'https://www.ifremer.fr/surval_parametre_point.csv',
           },
+          {
+            description: 'Lieu de surveillance (ligne)',
+            format: 'WFS:csv',
+            name: 'surval_parametre_ligne',
+            protocol: 'OGC:WFS',
+            url: 'https://www.ifremer.fr/services/wfs/surveillance_littorale',
+          },
+          {
+            description: 'ArcGIS GeoService Wfs',
+            format: 'WFS:csv',
+            mediaType: 'application/json',
+            name: 'mes_hdf',
+            protocol: 'ESRI:REST',
+            url: 'https://services8.arcgis.com/rxZzohbySMKHTNcy/arcgis/rest/services/mes_hdf/WFSServer/0',
+          },
           {
             description: 'Lieu de surveillance (polygone)',
-            name: 'surval_parametre_polygone.geojson',
             format: 'geojson',
+            name: 'surval_parametre_polygone.geojson',
             protocol: 'WWW:DOWNLOAD',
             url: 'https://www.ifremer.fr/surval_parametre_polygone.geojson',
           },
           {
             description: 'Lieu de surveillance (ligne)',
-            name: 'surval_parametre_ligne',
             format: 'WFS:geojson',
-            protocol: 'OGC:WFS',
-            url: 'https://www.ifremer.fr/services/wfs/surveillance_littorale',
-          },
-          {
-            description: 'Lieu de surveillance (ligne)',
             name: 'surval_parametre_ligne',
-            format: 'WFS:csv',
             protocol: 'OGC:WFS',
             url: 'https://www.ifremer.fr/services/wfs/surveillance_littorale',
           },
           {
-            protocol: 'ESRI:REST',
-            name: 'mes_hdf',
-            format: 'WFS:geojson',
             description: 'ArcGIS GeoService Wfs',
+            format: 'WFS:geojson',
             mediaType: 'application/json',
-            url: 'https://services8.arcgis.com/rxZzohbySMKHTNcy/arcgis/rest/services/mes_hdf/WFSServer/0',
-          },
-          {
-            protocol: 'ESRI:REST',
             name: 'mes_hdf',
-            format: 'WFS:csv',
-            description: 'ArcGIS GeoService Wfs',
-            mediaType: 'application/json',
+            protocol: 'ESRI:REST',
             url: 'https://services8.arcgis.com/rxZzohbySMKHTNcy/arcgis/rest/services/mes_hdf/WFSServer/0',
           },
           {
-            protocol: 'ESRI:REST',
-            name: 'mes_hdf_journalier_poll_princ',
-            format: 'REST:json',
             description: 'ArcGIS GeoService',
+            format: 'REST:json',
             mediaType: 'application/json',
+            name: 'mes_hdf_journalier_poll_princ',
+            protocol: 'ESRI:REST',
             url: 'https://services8.arcgis.com/rxZzohbySMKHTNcy/arcgis/rest/services/mes_hdf_journalier_poll_princ/FeatureServer/0/query?f=json&where=1=1&outFields=*',
           },
           {
-            protocol: 'ESRI:REST',
-            name: 'mes_hdf_journalier_poll_princ',
-            format: 'REST:geojson',
             description: 'ArcGIS GeoService',
+            format: 'REST:geojson',
             mediaType: 'application/json',
+            name: 'mes_hdf_journalier_poll_princ',
+            protocol: 'ESRI:REST',
             url: 'https://services8.arcgis.com/rxZzohbySMKHTNcy/arcgis/rest/services/mes_hdf_journalier_poll_princ/FeatureServer/0/query?f=geojson&where=1=1&outFields=*',
           },
         ])
       }))
     })
+    describe('with sorted links', () => {
+      beforeEach(() => {
+        facade.downloadLinks$.next([
+          {
+            description: 'KML Data',
+            name: 'abc.kml',
+            format: 'kml',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/data.kml',
+          },
+          {
+            description: 'Lieu de surveillance (point)',
+            name: 'surval_parametre_point.csv',
+            format: 'csv',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/surval_parametre_point.csv',
+          },
+          {
+            description: 'pdf file',
+            name: 'abc.pdf',
+            format: 'pdf',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/file.pdf',
+          },
+          {
+            description: 'Lieu de surveillance (polygone)',
+            name: 'surval_parametre_polygone.geojson',
+            format: 'geojson',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/surval_parametre_polygone.geojson',
+          },
+        ])
+        fixture.detectChanges()
+      })
+      it('sorts links', fakeAsync(() => {
+        let downloadLinks = []
+        component.links$.subscribe((links: MetadataLink[]) => {
+          downloadLinks = links
+        })
+        tick(200)
+        expect(downloadLinks).toEqual([
+          {
+            description: 'Lieu de surveillance (point)',
+            name: 'surval_parametre_point.csv',
+            format: 'csv',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/surval_parametre_point.csv',
+          },
+          {
+            description: 'Lieu de surveillance (polygone)',
+            name: 'surval_parametre_polygone.geojson',
+            format: 'geojson',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/surval_parametre_polygone.geojson',
+          },
+          {
+            description: 'KML Data',
+            name: 'abc.kml',
+            format: 'kml',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/data.kml',
+          },
+          {
+            description: 'pdf file',
+            name: 'abc.pdf',
+            format: 'pdf',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/file.pdf',
+          },
+        ])
+      }))
+    })
   })
 })
diff --git a/libs/feature/record/src/lib/data-downloads/data-downloads.component.ts b/libs/feature/record/src/lib/data-downloads/data-downloads.component.ts
@@ -3,11 +3,13 @@ import {
   getFileFormat,
   getWfsFormat,
   LinkHelperService,
-} from '@geonetwork-ui/feature/search'
-import { catchError, map, startWith, switchMap } from 'rxjs/operators'
-import { MdViewFacade } from '../state'
-import { combineLatest } from 'rxjs'
+  sortPriority,
+} from '@geonetwork-ui/util/shared'
+import { MetadataLinkValid } from '@geonetwork-ui/util/shared'
+import { combineLatest, of } from 'rxjs'
+import { catchError, map, switchMap } from 'rxjs/operators'
 import { DataService } from '../service/data.service'
+import { MdViewFacade } from '../state'
 
 @Component({
   selector: 'gn-ui-data-downloads',
@@ -44,12 +46,13 @@ export class DataDownloadsComponent {
       this.error = null
 
       return combineLatest(
-        wfsLinks.map((link) => this.dataService.getDownloadLinksFromWfs(link))
+        wfsLinks.length > 0
+          ? wfsLinks.map((link) =>
+              this.dataService.getDownloadLinksFromWfs(link)
+            )
+          : [of([])]
       ).pipe(
-        catchError((e) => {
-          this.error = e.message
-          return []
-        }),
+        // flaten array
         map(
           (wfsDownloadLinks) =>
             wfsDownloadLinks.reduce((prev, curr) => [...prev, ...curr]),
@@ -62,6 +65,7 @@ export class DataDownloadsComponent {
               format: getWfsFormat(link),
             }))
             .filter((link) => link.format)
+            // remove duplicates
             .filter(
               (link, i, links) =>
                 links.findIndex(
@@ -76,7 +80,17 @@ export class DataDownloadsComponent {
           ...wfsDownloadLinks,
           ...esriRestLinks,
         ]),
-        startWith([...otherLinks, ...esriRestLinks])
+        catchError((e) => {
+          this.error = e.message
+          return of([...otherLinks, ...esriRestLinks])
+        }),
+        map((allLinks) =>
+          allLinks.sort(
+            (a: MetadataLinkValid, b: MetadataLinkValid): number => {
+              return sortPriority(b) - sortPriority(a)
+            }
+          )
+        )
       )
     })
   )

diff --git a/libs/feature/record/src/lib/data-view-map/data-view-map.component.ts b/libs/feature/record/src/lib/data-view-map/data-view-map.component.ts
@@ -13,7 +13,7 @@ import {
   MapStyleService,
   MapUtilsService,
 } from '@geonetwork-ui/feature/map'
-import { LinkHelperService } from '@geonetwork-ui/feature/search'
+import { LinkHelperService } from '@geonetwork-ui/util/shared'
 import { getMapConfig, MapConfig } from '@geonetwork-ui/util/app-config'
 import { MetadataLinkValid, ProxyService } from '@geonetwork-ui/util/shared'
 import { Feature } from 'ol'

diff --git a/libs/feature/record/src/lib/data-view-table/data-view-table.component.ts b/libs/feature/record/src/lib/data-view-table/data-view-table.component.ts
@@ -17,7 +17,7 @@ import {
   switchMap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
-import { getFileFormat, LinkHelperService } from '@geonetwork-ui/feature/search'
+import { getFileFormat, LinkHelperService } from '@geonetwork-ui/util/shared'
 import { DataService } from '../service/data.service'
 
 @Component({

diff --git a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.spec.ts b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.spec.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
-import { LinkHelperService } from '@geonetwork-ui/feature/search'
+import { LinkHelperService } from '@geonetwork-ui/util/shared'
 import { MAP_CONFIG_FIXTURE } from '@geonetwork-ui/util/app-config'
 
 import { ExternalViewerButtonComponent } from './external-viewer-button.component'

diff --git a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { LinkHelperService } from '@geonetwork-ui/feature/search'
+import { LinkHelperService } from '@geonetwork-ui/util/shared'
 import { MapConfig } from '@geonetwork-ui/util/app-config'
 import { MetadataLinkValid } from '@geonetwork-ui/util/shared'
 

diff --git a/libs/feature/record/src/lib/record-metadata/record-metadata.component.spec.ts b/libs/feature/record/src/lib/record-metadata/record-metadata.component.spec.ts
@@ -10,7 +10,7 @@ import {
   MetadataInfoComponent,
   UiElementsModule,
 } from '@geonetwork-ui/ui/elements'
-import { RECORDS_FULL_FIXTURE } from '@geonetwork-ui/ui/search'
+import { RECORDS_FULL_FIXTURE } from '@geonetwork-ui/util/shared'
 import { TranslateModule } from '@ngx-translate/core'
 import { BehaviorSubject, of } from 'rxjs'
 import { MdViewFacade } from '../state/mdview.facade'

diff --git a/libs/feature/record/src/lib/service/data.service.ts b/libs/feature/record/src/lib/service/data.service.ts
@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core'
-import { from, Observable, throwError } from 'rxjs'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { WfsEndpoint } from '@camptocamp/ogc-client'
+import { readDataset, SupportedType } from '@geonetwork-ui/data-fetcher'
 import { MetadataLinkValid, ProxyService } from '@geonetwork-ui/util/shared'
-import { catchError, map, pluck, tap } from 'rxjs/operators'
 import type { FeatureCollection } from 'geojson'
-import { readDataset, SupportedType } from '@geonetwork-ui/data-fetcher'
-import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { from, Observable, throwError } from 'rxjs'
+import { catchError, map, tap } from 'rxjs/operators'
 
 marker('wfs.unreachable.cors')
 marker('wfs.unreachable.http')

diff --git a/libs/feature/record/src/lib/state/mdview.facade.spec.ts b/libs/feature/record/src/lib/state/mdview.facade.spec.ts
@@ -5,7 +5,7 @@ import { MdViewFacade } from './mdview.facade'
 import {
   RECORDS_FULL_FIXTURE,
   RECORDS_SUMMARY_FIXTURE,
-} from '@geonetwork-ui/ui/search'
+} from '@geonetwork-ui/util/shared'
 import * as MdViewActions from './mdview.actions'
 import { hot } from 'jasmine-marbles'
 

diff --git a/libs/feature/record/src/lib/state/mdview.facade.ts b/libs/feature/record/src/lib/state/mdview.facade.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { LinkHelperService } from '@geonetwork-ui/feature/search'
+import { LinkHelperService } from '@geonetwork-ui/util/shared'
 import { MetadataLinkValid, MetadataRecord } from '@geonetwork-ui/util/shared'
 
 import { select, Store } from '@ngrx/store'

diff --git a/libs/feature/record/src/lib/state/mdview.reducer.spec.ts b/libs/feature/record/src/lib/state/mdview.reducer.spec.ts
@@ -1,4 +1,4 @@
-import { RECORDS_SUMMARY_FIXTURE } from '@geonetwork-ui/ui/search'
+import { RECORDS_SUMMARY_FIXTURE } from '@geonetwork-ui/util/shared'
 import * as MdViewActions from './mdview.actions'
 import { initialMdviewState, reducer } from './mdview.reducer'
 

diff --git a/libs/feature/record/tsconfig.lib.json b/libs/feature/record/tsconfig.lib.json
@@ -7,7 +7,7 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": ["dom", "es2018"]
+    "lib": ["dom", "es2019"]
   },
   "exclude": [
     "src/test-setup.ts",

diff --git a/libs/feature/search/src/index.ts b/libs/feature/search/src/index.ts
@@ -4,6 +4,5 @@ export * from './lib/state/selectors'
 export * from './lib/state/search.facade'
 export * from './lib/state/effects'
 export * from './lib/state/reducer'
-export * from './lib/utils/links'
 export * from './lib/utils/mapper'
 export * from './lib/utils/service/search.service'