geonetwork · cmoinier · Jul 15, 2024 · Jun 28, 2024 · Jun 28, 2024 · Jun 28, 2024
diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -1,4 +1,5 @@
 import 'cypress-real-events'
+import { tile } from 'ol/loadingstrategy'
 import path from 'path'
 
 beforeEach(() => {
@@ -293,7 +294,7 @@ describe('dataset pages', () => {
     })
   })
 
-  describe('PREVIEW SECTION : display & functions', () => {
+  describe.only('PREVIEW SECTION : display & functions', () => {
     beforeEach(() => {
       cy.get('datahub-record-metadata')
         .find('[id="preview"]')
@@ -355,6 +356,9 @@ describe('dataset pages', () => {
         })
         cy.screenshot({ capture: 'fullPage' })
       })
+      it('should display the sharing options', () => {
+        cy.get('gn-ui-data-view-share').should('be.visible')
+      })
     })
     describe('features', () => {
       it('MAP : should open a popup on layer click', () => {

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -110,7 +110,7 @@
     </div>
   </div>
   <gn-ui-data-view-share
-    *ngIf="(selectedTabIndex$ | async) === 2"
+    [tabIndex]="selectedTabIndex$ | async"
   ></gn-ui-data-view-share>
   <div
     id="access"

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
@@ -421,10 +421,10 @@ describe('RecordMetadataComponent', () => {
           fixture.debugElement.query(By.directive(MockDataViewComponent))
         ).toBeFalsy()
       })
-      it('does not render the permalink component', () => {
+      it('does render the permalink component', () => {
         expect(
           fixture.debugElement.query(By.directive(MockDataViewShareComponent))
-        ).toBeFalsy()
+        ).toBeTruthy()
       })
     })
     describe('when a DATA link present', () => {
@@ -446,10 +446,10 @@ describe('RecordMetadataComponent', () => {
             .length
         ).toEqual(2)
       })
-      it('does not render the permalink component', () => {
+      it('does render the permalink component', () => {
         expect(
           fixture.debugElement.query(By.directive(MockDataViewShareComponent))
-        ).toBeFalsy()
+        ).toBeTruthy()
       })
       describe('when selectedTabIndex$ is 2 (chart tab)', () => {
         beforeEach(() => {

diff --git a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.css b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.css
@@ -1 +1,7 @@
 @import '../../../styles.css';
+@import 'ol/ol.css';
+
+:host {
+  display: block;
+  height: 500px;
+}
diff --git a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.ts b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.ts
@@ -1,13 +1,17 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Injector,
+  Input,
   OnInit,
   ViewEncapsulation,
 } from '@angular/core'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
 import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { BaseComponent } from '../base.component'
+import { LinkUsage } from '@geonetwork-ui/util/shared'
+import { DatasetDistribution } from '@geonetwork-ui/common/domain/model/record'
 
 @Component({
   selector: 'wc-gn-dataset-view-map',
@@ -18,10 +22,22 @@ import { BaseComponent } from '../base.component'
   providers: [SearchFacade],
 })
 export class GnDatasetViewMapComponent extends BaseComponent implements OnInit {
-  constructor(injector: Injector, private mdViewFacade: MdViewFacade) {
+  constructor(
+    injector: Injector,
+    private mdViewFacade: MdViewFacade,
+    private changeDetector: ChangeDetectorRef
+  ) {
     super(injector)
   }
-  ngOnInit(): void {
-    this.mdViewFacade.loadFull('ee965118-2416-4d48-b07e-bbc696f002c2')
+  @Input() datasetId: string
+  link: DatasetDistribution
+  async init() {
+    super.init()
+    this.mdViewFacade.loadFull(this.datasetId)
+    this.link = await this.getRecordLink(this.datasetId, [
+      LinkUsage.MAP_API,
+      LinkUsage.GEODATA,
+    ])
+    this.changeDetector.detectChanges()
   }
 }
diff --git a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.sample.html b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.sample.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Web Component Demo</title>
+    <base href="./" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style>
+      html,
+      body {
+        font-family: var(--font-family-main);
+      }
+      .container {
+        max-width: 1024px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 3rem;
+      }
+      gn-dataset-view-map {
+        height: 500px;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <div style="margin: 60px 16px">
+        <p>
+          Visualize Map dataset from a Metadata Record with
+          <b><i>gn-dataset-view-map</i></b> web component
+        </p>
+      </div>
+
+      <script src="gn-wc.js"></script>
+      <gn-dataset-view-map
+        api-url="https://www.geo2france.fr/geonetwork/srv/api"
+        dataset-id="9da51f58-15c6-4325-82b1-2cf6c8e75d0f"
+        primary-color="#0f4395"
+        secondary-color="#8bc832"
+        main-color="#555"
+        background-color="#fdfbff"
+        main-font="'Inter', sans-serif"
+        title-font="'DM Serif Display', serif"
+      ></gn-dataset-view-map>
+    </main>
+  </body>
+</html>
diff --git a/apps/webcomponents/src/app/webcomponents.module.ts b/apps/webcomponents/src/app/webcomponents.module.ts
@@ -36,6 +36,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { provideGn4 } from '@geonetwork-ui/api/repository'
 import { GnFigureDatasetsComponent } from './components/gn-figure-datasets/gn-figure-datasets.component'
 import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
+import { GnDatasetViewMapComponent } from './components/gn-dataset-view-map/gn-dataset-view-map.component'
 
 const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
   [GnFacetsComponent, 'gn-facets'],
@@ -46,6 +47,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
   [GnDatasetViewChartComponent, 'gn-dataset-view-chart'],
   [GnMapViewerComponent, 'gn-map-viewer'],
   [GnFigureDatasetsComponent, 'gn-figure-datasets'],
+  [GnDatasetViewMapComponent, 'gn-dataset-view-map'],
 ]
 
 @NgModule({
@@ -61,6 +63,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     GnDatasetViewChartComponent,
     GnMapViewerComponent,
     GnFigureDatasetsComponent,
+    GnDatasetViewMapComponent,
   ],
   imports: [
     CommonModule,
@@ -100,7 +103,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     },
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  // bootstrap: [AppComponent],
+  bootstrap: [AppComponent],
 })
 export class WebcomponentsModule {
   constructor(private injector: Injector) {

diff --git a/apps/webcomponents/src/index.html b/apps/webcomponents/src/index.html
@@ -81,6 +81,9 @@ <h1 class="text-3xl">GeoNetwork demo</h1>
             >Preview dataset as chart</a
           >
         </li>
+        <li>
+          <a href="gn-dataset-view-map.sample.html">Preview dataset as map</a>
+        </li>
         <li class="mt-5">
           <a href="gn-map-viewer.sample.html">Map viewer</a>
         </li>

diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts
@@ -4,7 +4,7 @@
   DataViewPermalinkComponent,
   WEB_COMPONENT_EMBEDDER_URL,
 } from './data-view-permalink.component'
-import { BehaviorSubject, firstValueFrom } from 'rxjs'
+import { BehaviorSubject, firstValueFrom, lastValueFrom, takeLast } from 'rxjs'
 import { MdViewFacade } from '../state'
 import { Component, Input } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
@@ -75,46 +75,87 @@
     facade = TestBed.inject(MdViewFacade)
     fixture = TestBed.createComponent(DataViewPermalinkComponent)
     component = fixture.componentInstance
+    component.tabIndex$.next(2)
     fixture.detectChanges()
   })
 
   it('should create', () => {
     expect(component).toBeTruthy()
   })
 
-  describe('init permalinkUrl$', () => {
-    it('should generate URL based on configs', async () => {
-      const url = await firstValueFrom(component.permalinkUrl$)
-      expect(url).toBe(
-        `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=api-url%3D${encodeURIComponent(
-          component.config.basePath
-        )}&a=dataset-id%3D${
-          metadata.uniqueIdentifier
-        }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff&a=aggregation%3D${
-          chartConfig1.aggregation
-        }&a=x-property%3D${chartConfig1.xProperty}&a=y-property%3D${
-          chartConfig1.yProperty
-        }&a=chart-type%3D${chartConfig1.chartType}`
-      )
+  describe('Chart view', () => {
+    describe('init permalinkUrl$', () => {
+      it('should generate URL based on configs', async () => {
+        const url = await firstValueFrom(component.permalinkUrl$)
+        expect(url).toBe(
+          `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=aggregation%3D${
+            chartConfig1.aggregation
+          }&a=x-property%3D${chartConfig1.xProperty}&a=y-property%3D${
+            chartConfig1.yProperty
+          }&a=chart-type%3D${
+            chartConfig1.chartType
+          }&a=api-url%3D${encodeURIComponent(
+            component.config.basePath
+          )}&a=dataset-id%3D${
+            metadata.uniqueIdentifier
+          }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff`
+        )
+      })
+    })
+    describe('update permalinkUrl$', () => {
+      beforeEach(() => {
+        facade.chartConfig$.next(chartConfig2)
+      })
+      it('should update URL based on configs', async () => {
+        const url = await firstValueFrom(component.permalinkUrl$)
+        expect(url).toBe(
+          `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=aggregation%3D${
+            chartConfig2.aggregation
+          }&a=x-property%3D${chartConfig2.xProperty}&a=y-property%3D${
+            chartConfig2.yProperty
+          }&a=chart-type%3D${
+            chartConfig2.chartType
+          }&a=api-url%3D${encodeURIComponent(
+            component.config.basePath
+          )}&a=dataset-id%3D${
+            metadata.uniqueIdentifier
+          }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff`
+        )
+      })
+    })
+  })
+  describe('Map view', () => {
+    beforeEach(() => {
+      component.tabIndex$.next(0)
+    })
+    describe('init permalinkUrl$', () => {
+      it('should generate URL based on configs', async () => {
+        const url = await firstValueFrom(component.permalinkUrl$)
+        expect(url).toBe(
+          `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-map&a=api-url%3D${encodeURIComponent(
+            component.config.basePath
+          )}&a=dataset-id%3D${
+            metadata.uniqueIdentifier
+          }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff`
+        )
+      })
     })
   })
-  describe('update permalinkUrl$', () => {
+  describe('Table view', () => {
     beforeEach(() => {
-      facade.chartConfig$.next(chartConfig2)
+      component.tabIndex$.next(1)
     })
-    it('should update URL based on configs', async () => {
-      const url = await firstValueFrom(component.permalinkUrl$)
-      expect(url).toBe(
-        `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=api-url%3D${encodeURIComponent(
-          component.config.basePath
-        )}&a=dataset-id%3D${
-          metadata.uniqueIdentifier
-        }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff&a=aggregation%3D${
-          chartConfig2.aggregation
-        }&a=x-property%3D${chartConfig2.xProperty}&a=y-property%3D${
-          chartConfig2.yProperty
-        }&a=chart-type%3D${chartConfig2.chartType}`
-      )
+    describe('init permalinkUrl$', () => {
+      it('should generate URL based on configs', async () => {
+        const url = await firstValueFrom(component.permalinkUrl$)
+        expect(url).toBe(
+          `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-table&a=api-url%3D${encodeURIComponent(
+            component.config.basePath
+          )}&a=dataset-id%3D${
+            metadata.uniqueIdentifier
+          }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff`
+        )
+      })
     })
   })
 })