geonetwork · fgravin · Jun 26, 2024 · May 28, 2024 · May 28, 2024 · May 28, 2024
diff --git a/apps/webcomponents/README.md b/apps/webcomponents/README.md
@@ -83,6 +83,20 @@ To export content as a Web Component you have to:
 }
 ```
 
+- Provide the dependencies which are not inject in root by default (eg `SearchFacade`, `SearchService`, etc.)
+
+```typescript
+{
+  providers: [SearchFacade]
+}
+```
+
+- import gnui styles from the component css file
+
+```css
+@import '../../../styles.css';
+```
+
 - add your component in application module `webcomponents.module.ts` `declarations` list.
 - register your component as a custom element in the `CUSTOM_ELEMENTS` array in application module `webcomponents.ts`, the custom element identifier (i.e Web Component tag name) _must_ be the same as the component folder name
 

diff --git a/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.css b/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.css
@@ -0,0 +1 @@
+@import '../../../styles.css';
diff --git a/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.html b/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.html
@@ -0,0 +1,7 @@
+<gn-ui-figure
+  class=""
+  [figure]="recordsCount$ | async"
+  [icon]="'folder_open'"
+  title="catalog.figures.datasets"
+  [color]="'secondary'"
+></gn-ui-figure>
diff --git a/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.ts b/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.ts
@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Injector,
+  ViewEncapsulation,
+} from '@angular/core'
+import { BaseComponent } from '../base.component'
+import { RecordsService } from '@geonetwork-ui/feature/catalog'
+import { startWith } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+import { SearchFacade } from '@geonetwork-ui/feature/search'
+
+@Component({
+  selector: 'wc-gn-figure-datasets',
+  templateUrl: './gn-figure-datasets.component.html',
+  styleUrls: ['./gn-figure-datasets.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  providers: [SearchFacade],
+})
+export class GnFigureDatasetsComponent extends BaseComponent {
+  catalogRecords: RecordsService
+  recordsCount$: Observable<string | number>
+
+  constructor(injector: Injector, private changeDetector: ChangeDetectorRef) {
+    super(injector)
+    this.catalogRecords = injector.get(RecordsService)
+    this.recordsCount$ = this.catalogRecords.recordsCount$.pipe(startWith('-'))
+  }
+
+  init(): void {
+    super.init()
+  }
+
+  changes(): void {
+    super.changes()
+  }
+}
diff --git a/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.sample.html b/apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.sample.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Web Component Demo - Figure datasets</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>
+      body {
+        margin: 0;
+        font-family: 'Inter', sans-serif;
+      }
+      main {
+        margin: 5rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h3>Figure - Datasets</h3>
+      <div>
+        <script src="gn-wc.js"></script>
+
+        <gn-figure-datasets
+          api-url="https://demo.georchestra.org/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-figure-datasets>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/apps/webcomponents/src/app/webcomponents.module.ts b/apps/webcomponents/src/app/webcomponents.module.ts
@@ -34,6 +34,8 @@ import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz'
 import { FeatureAuthModule } from '@geonetwork-ui/feature/auth'
 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'
 
 const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
   [GnFacetsComponent, 'gn-facets'],
@@ -43,6 +45,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
   [GnDatasetViewTableComponent, 'gn-dataset-view-table'],
   [GnDatasetViewChartComponent, 'gn-dataset-view-chart'],
   [GnMapViewerComponent, 'gn-map-viewer'],
+  [GnFigureDatasetsComponent, 'gn-figure-datasets'],
 ]
 
 @NgModule({
@@ -57,13 +60,15 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     GnDatasetViewTableComponent,
     GnDatasetViewChartComponent,
     GnMapViewerComponent,
+    GnFigureDatasetsComponent,
   ],
   imports: [
     CommonModule,
     BrowserModule,
     UiInputsModule,
     UiSearchModule,
     UiElementsModule,
+    UiDatavizModule,
     FeatureSearchModule,
     FeatureRecordModule,
     FeatureMapModule,

diff --git a/apps/webcomponents/src/index.html b/apps/webcomponents/src/index.html
@@ -84,6 +84,9 @@ <h1 class="text-3xl">GeoNetwork demo</h1>
         <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>-->

diff --git a/libs/feature/catalog/src/lib/records/records.service.ts b/libs/feature/catalog/src/lib/records/records.service.ts
@@ -1,18 +1,17 @@
 import { Injectable } from '@angular/core'
-import { Observable, of } from 'rxjs'
+import { Observable, of, switchMap } from 'rxjs'
 import { catchError, shareReplay } from 'rxjs/operators'
 import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
 
 @Injectable({
   providedIn: 'root',
 })
 export class RecordsService {
-  recordsCount$: Observable<number> = this.recordsRepository
-    .getMatchesCount({})
-    .pipe(
-      shareReplay(1),
-      catchError(() => of(0))
-    )
+  recordsCount$: Observable<number> = of(0).pipe(
+    switchMap(() => this.recordsRepository.getMatchesCount({})),
+    shareReplay(1),
+    catchError(() => of(0))
+  )
 
   constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }