From f6a93a312fe6db0cb9c2acdc96d386a6ce538243 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Thu, 12 Dec 2024 10:02:12 +0100
Subject: [PATCH] wip

---
 apps/geoadmin-demo/src/index.html             |  11 --
 apps/geoadmin-demo/src/test-setup.ts          |  15 +--
 apps/webcomponents/src/app/app.component.html |  31 ++---
 .../gn-record-view.component.html             |  28 +++--
 .../gn-record-view.component.ts               |   4 +-
 .../src/app/webcomponents.module.ts           |   8 +-
 apps/webcomponents/src/index.html             | 106 +++++++++---------
 conf/default.toml                             |   2 +-
 8 files changed, 103 insertions(+), 102 deletions(-)

diff --git a/apps/geoadmin-demo/src/index.html b/apps/geoadmin-demo/src/index.html
index 51f87eed0..b9605f188 100644
--- a/apps/geoadmin-demo/src/index.html
+++ b/apps/geoadmin-demo/src/index.html
@@ -13,17 +13,6 @@
       id="geoadmin-root"
       src="https://map.geo.admin.ch/#embed?bgLayer=ch.swisstopo.pixelkarte-grau"
     ></iframe>
-    <gn-search-input
-      api-url="https://www.geocat.ch/geonetwork/srv/api"
-      primary-color="#0f4395"
-      secondary-color="#8bc832"
-    ></gn-search-input>
-    <gn-results-list
-      api-url="https://www.geocat.ch/geonetwork/srv/api"
-      layout="ROW"
-      primary-color="#0f4395"
-      secondary-color="#8bc832"
-    ></gn-results-list>
 
     <script>
       GNUI.recordsRepository
diff --git a/apps/geoadmin-demo/src/test-setup.ts b/apps/geoadmin-demo/src/test-setup.ts
index a5e675acf..5626c49f2 100644
--- a/apps/geoadmin-demo/src/test-setup.ts
+++ b/apps/geoadmin-demo/src/test-setup.ts
@@ -1,8 +1,9 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
-    errorOnUnknownElements: true,
-    errorOnUnknownProperties: true,
-  },
-}
 import 'jest-preset-angular/setup-jest'
+import '../../../jest.setup'
+
+class ResizeObserverMock {
+  observe = jest.fn()
+  unobserve = jest.fn()
+}
+
+;(window as any).ResizeObserver = ResizeObserverMock
diff --git a/apps/webcomponents/src/app/app.component.html b/apps/webcomponents/src/app/app.component.html
index 88454b96b..bcfb51cbe 100644
--- a/apps/webcomponents/src/app/app.component.html
+++ b/apps/webcomponents/src/app/app.component.html
@@ -1,20 +1,13 @@
-<main class="w-2/3 mx-auto my-12">
-  <gn-search-input
-    class="mt-28"
-    api-url="https://www.geo2france.fr/geonetwork/srv/api"
-    primary-color="#0f4395"
-    secondary-color="#8bc832"
-    main-color="#555"
-    background-color="#fdfbff"
-    main-font="'Inter', sans-serif"
-    title-font="'DM Serif Display', serif"
-  ></gn-search-input>
-
-  <gn-facets
-    api-url="https://www.geo2france.fr/geonetwork/srv/api"
-    facet-config='{"tag.default":{"terms":{"field":"tag.default","include":".*","size": 10}}}'
-  ></gn-facets>
-  <gn-results-list
-    api-url="https://www.geo2france.fr/geonetwork/srv/api"
-  ></gn-results-list>
+<main class="py-12">
+  <wc-gn-record-view
+    class="mx-auto w-[500px] h-[700px] overflow-auto"
+    apiUrl="https://www.geocat.ch/geonetwork/srv/api"
+    recordId="8698bf0b-fceb-4f0f-989b-111e7c4af0a4"
+    primaryColor="#0f4395"
+    secondaryColor="#8bc832"
+    mainColor="#555"
+    backgroundColor="#fdfbff"
+    mainFont="'Inter', sans-serif"
+    titleFont="'DM Serif Display', serif"
+  ></wc-gn-record-view>
 </main>
diff --git a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
index 7d14e1880..fe28b45cd 100644
--- a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
+++ b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
@@ -7,6 +7,7 @@
       {{ record.title }}
     </div>
     <gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>
+    {{ record | json }}
     <gn-ui-image-overlay-preview
       class="block h-[185px] mb-5"
       [imageUrl]="record?.overviews?.[0]?.url"
@@ -14,10 +15,13 @@
     </gn-ui-image-overlay-preview>
     <gn-ui-metadata-contact [metadata]="record"> </gn-ui-metadata-contact>
 
-    <div class="font-title text-lg my-4" translate>
-      record.metadata.download
+    <div class="font-title text-lg my-4">
+      <span translate> record.metadata.download</span>
+      <gn-ui-previous-next-buttons
+        [listComponent]="downloads"
+      ></gn-ui-previous-next-buttons>
     </div>
-    <gn-ui-block-list containerClass="gap-4 py-10">
+    <gn-ui-block-list containerClass="gap-4 py-10" #downloads>
       <gn-ui-download-item
         #block
         *ngFor="let otherLink of getDownloads(record.onlineResources)"
@@ -25,8 +29,13 @@
       ></gn-ui-download-item>
     </gn-ui-block-list>
 
-    <div class="font-title text-lg my-4" translate>record.metadata.links</div>
-    <gn-ui-block-list containerClass="gap-4 py-10">
+    <div class="font-title text-lg my-4">
+      <span translate>record.metadata.links</span>
+      <gn-ui-previous-next-buttons
+        [listComponent]="links"
+      ></gn-ui-previous-next-buttons>
+    </div>
+    <gn-ui-block-list containerClass="gap-4 py-10" #links>
       <gn-ui-link-card
         #block
         *ngFor="let otherLink of getLinks(record.onlineResources)"
@@ -35,8 +44,13 @@
       ></gn-ui-link-card>
     </gn-ui-block-list>
 
-    <div class="font-title text-lg my-4" translate>record.metadata.api</div>
-    <gn-ui-block-list containerClass="gap-4 py-10">
+    <div class="font-title text-lg my-4">
+      <span translate>record.metadata.api</span>
+      <gn-ui-previous-next-buttons
+        [listComponent]="apis"
+      ></gn-ui-previous-next-buttons>
+    </div>
+    <gn-ui-block-list containerClass="gap-4 py-10" #apis>
       <gn-ui-api-card
         #block
         *ngFor="let otherLink of getAPIs(record.onlineResources)"
diff --git a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
index ea6d5cf20..357636d3a 100644
--- a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
+++ b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
@@ -6,7 +6,7 @@ import {
   OnInit,
   ViewEncapsulation,
 } from '@angular/core'
-import { SearchFacade, SearchService } from '@geonetwork-ui/feature/search'
+import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { BaseComponent } from '../base.component'
 import { Observable } from 'rxjs'
 import {
@@ -24,7 +24,7 @@ import {
   styleUrls: ['./gn-record-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.ShadowDom,
-  providers: [SearchFacade, SearchService],
+  providers: [SearchFacade],
 })
 export class GnRecordViewComponent extends BaseComponent implements OnInit {
   @Input() recordId!: string
diff --git a/apps/webcomponents/src/app/webcomponents.module.ts b/apps/webcomponents/src/app/webcomponents.module.ts
index 4e27202a3..4cc7ad717 100644
--- a/apps/webcomponents/src/app/webcomponents.module.ts
+++ b/apps/webcomponents/src/app/webcomponents.module.ts
@@ -59,7 +59,10 @@ import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/reposit
 import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
 import { GnRecordViewComponent } from './components/gn-record-view/gn-record-view.component'
 import { LetDirective } from '@ngrx/component'
-import { BlockListComponent } from '@geonetwork-ui/ui/layout'
+import {
+  BlockListComponent,
+  PreviousNextButtonsComponent,
+} from '@geonetwork-ui/ui/layout'
 
 const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
   [GnFacetsComponent, 'gn-facets'],
@@ -126,6 +129,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     LinkCardComponent,
     ApiCardComponent,
     DownloadItemComponent,
+    PreviousNextButtonsComponent,
   ],
   providers: [
     provideGn4(),
@@ -139,7 +143,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
index 11553c7c9..9f65a1127 100644
--- a/apps/webcomponents/src/index.html
+++ b/apps/webcomponents/src/index.html
@@ -40,58 +40,58 @@
     </style>
   </head>
   <body>
-    <main class="container">
-      <h1 class="text-3xl">GeoNetwork demo</h1>
-      <ul>
-        <li class="mt-5">
-          <a href="gn-results-list.sample.html"
-            >Results List ROW, "show more" button</a
-          >
-        </li>
-        <li>
-          <a href="gn-results-list-multiple.sample.html"
-            >Results List TITLE, fixed, multiple</a
-          >
-        </li>
-        <li>
-          <a href="gn-results-list-watch.sample.html"
-            >Results List TITLE, watchers</a
-          >
-        </li>
-        <li>
-          <a href="gn-results-list-filter.sample.html"
-            >Results List TITLE, filters</a
-          >
-        </li>
-        <li class="mt-5">
-          <a href="gn-search-input.sample.html">Search Input</a>
-        </li>
-        <li>
-          <a href="gn-search-input-and-results.sample.html"
-            >Search Input + Results List (infinite scroll)</a
-          >
-        </li>
-        <li class="mt-5">
-          <a href="gn-dataset-view-table.sample.html"
-            >Preview dataset as table</a
-          >
-        </li>
-        <li>
-          <a href="gn-dataset-view-chart.sample.html"
-            >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>
-        <li class="mt-5">
-          <a href="gn-figure-datasets.sample.html">Figures - Datasets</a>
-        </li>
-      </ul>
-    </main>
-    <!--    <wc-root></wc-root>-->
+    <!--    <main class="container">-->
+    <!--      <h1 class="text-3xl">GeoNetwork demo</h1>-->
+    <!--      <ul>-->
+    <!--        <li class="mt-5">-->
+    <!--          <a href="gn-results-list.sample.html"-->
+    <!--            >Results List ROW, "show more" button</a-->
+    <!--          >-->
+    <!--        </li>-->
+    <!--        <li>-->
+    <!--          <a href="gn-results-list-multiple.sample.html"-->
+    <!--            >Results List TITLE, fixed, multiple</a-->
+    <!--          >-->
+    <!--        </li>-->
+    <!--        <li>-->
+    <!--          <a href="gn-results-list-watch.sample.html"-->
+    <!--            >Results List TITLE, watchers</a-->
+    <!--          >-->
+    <!--        </li>-->
+    <!--        <li>-->
+    <!--          <a href="gn-results-list-filter.sample.html"-->
+    <!--            >Results List TITLE, filters</a-->
+    <!--          >-->
+    <!--        </li>-->
+    <!--        <li class="mt-5">-->
+    <!--          <a href="gn-search-input.sample.html">Search Input</a>-->
+    <!--        </li>-->
+    <!--        <li>-->
+    <!--          <a href="gn-search-input-and-results.sample.html"-->
+    <!--            >Search Input + Results List (infinite scroll)</a-->
+    <!--          >-->
+    <!--        </li>-->
+    <!--        <li class="mt-5">-->
+    <!--          <a href="gn-dataset-view-table.sample.html"-->
+    <!--            >Preview dataset as table</a-->
+    <!--          >-->
+    <!--        </li>-->
+    <!--        <li>-->
+    <!--          <a href="gn-dataset-view-chart.sample.html"-->
+    <!--            >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>-->
+    <!--        <li class="mt-5">-->
+    <!--          <a href="gn-figure-datasets.sample.html">Figures - Datasets</a>-->
+    <!--        </li>-->
+    <!--      </ul>-->
+    <!--    </main>-->
+    <wc-root></wc-root>
   </body>
 </html>
diff --git a/conf/default.toml b/conf/default.toml
index a01878c72..b9045e527 100644
--- a/conf/default.toml
+++ b/conf/default.toml
@@ -72,7 +72,7 @@ fonts_stylesheet_url = "https://fonts.googleapis.com/css2?family=Public+Sans:wgh
 # The advanced search filters available to the user can be customized with this setting.
 # The following fields can be used for filtering: 'publisher', 'format', 'publicationYear', 'standard', 'inspireKeyword', 'topic', 'isSpatial', 'license'
 # any other field will be ignored
-advanced_filters = ['topic', 'publisher', 'contact', 'keyword', 'resourceType', 'representationType', 'format']
+advanced_filters = ['availableServices', 'topic', 'publisher', 'contact', 'keyword', 'resourceType', 'representationType', 'format']
 
 # One or several search presets can be defined here; every search preset is composed of:
 # - a name (which can be a translation key)