Merge pull request #886 from geonetwork/wc-figure-md-count

Datasets figure web component

apps/datahub/src/app/home/news-page/key-figures/key-figures.component.spec.ts

@@ -1,15 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { KeyFiguresComponent } from './key-figures.component'
-import { of } from 'rxjs'
+import { BehaviorSubject, of } from 'rxjs'
 import { RecordsService } from '@geonetwork-ui/feature/catalog'
 import { TranslateModule } from '@ngx-translate/core'
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { RouterTestingModule } from '@angular/router/testing'
 import { By } from '@angular/platform-browser'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 
+const recordsCount$ = new BehaviorSubject(1234)
 class RecordsServiceMock {
-  recordsCount$ = of(1234)
+  recordsCount$ = recordsCount$
 }
 
 class OrganisationsServiceMock {
@@ -58,6 +59,16 @@ describe('KeyFiguresComponent', () => {
     it('emits the records count', () => {
       expect(values[1]).toBe(1234)
     })
+    describe('when the request does not behave as expected', () => {
+      beforeEach(() => {
+        recordsCount$.error('blargz')
+      })
+      it('emits -', () => {
+        let count
+        component.recordsCount$.subscribe((v) => (count = v))
+        expect(count).toBe('-')
+      })
+    })
   })
 
   describe('orgsCount$', () => {

apps/datahub/src/app/home/news-page/key-figures/key-figures.component.ts

@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { startWith } from 'rxjs/operators'
+import { catchError, startWith } from 'rxjs/operators'
 import { RecordsService } from '@geonetwork-ui/feature/catalog'
 import { ROUTER_ROUTE_SEARCH } from '@geonetwork-ui/feature/router'
 import { ROUTER_ROUTE_ORGANIZATIONS } from '../../../router/constants'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { of } from 'rxjs'
 
 marker('catalog.figures.datasets')
 marker('catalog.figures.organisations')
@@ -16,7 +17,10 @@ marker('catalog.figures.organisations')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class KeyFiguresComponent {
-  recordsCount$ = this.catalogRecords.recordsCount$.pipe(startWith('-'))
+  recordsCount$ = this.catalogRecords.recordsCount$.pipe(
+    startWith('-'),
+    catchError(() => of('-'))
+  )
   orgsCount$ = this.catalogOrgs.organisationsCount$.pipe(startWith('-'))
   ROUTE_SEARCH = `/${ROUTER_ROUTE_SEARCH}`
   ROUTE_ORGANISATIONS = `/${ROUTER_ROUTE_ORGANIZATIONS}`

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
 

apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.css

@@ -0,0 +1 @@
+@import '../../../styles.css';

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>

apps/webcomponents/src/app/components/gn-figure-datasets/gn-figure-datasets.component.ts

@@ -0,0 +1,42 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Injector,
+  ViewEncapsulation,
+} from '@angular/core'
+import { BaseComponent } from '../base.component'
+import { RecordsService } from '@geonetwork-ui/feature/catalog'
+import { catchError, startWith } from 'rxjs/operators'
+import { Observable, of } 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('-'),
+      catchError(() => of('-'))
+    )
+  }
+
+  init(): void {
+    super.init()
+  }
+
+  changes(): void {
+    super.changes()
+  }
+}

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>

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,

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>-->

libs/feature/catalog/src/lib/records/records.service.spec.ts

@@ -1,5 +1,5 @@
 import { RecordsService } from './records.service'
-import { of, throwError } from 'rxjs'
+import { of } from 'rxjs'
 import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
 
 class RecordsRepositoryMock {
@@ -33,17 +33,5 @@ describe('RecordsService', () => {
         expect(repository.getMatchesCount).toHaveBeenCalledTimes(1)
       })
     })
-
-    describe('when the request does not behave as expected', () => {
-      beforeEach(() => {
-        repository.getMatchesCount = () => throwError(() => 'blargz')
-        service = new RecordsService(repository) // create a new service to enable the changed repository behaviour
-      })
-      it('emits 0', () => {
-        let count
-        service.recordsCount$.subscribe((v) => (count = v))
-        expect(count).toBe(0)
-      })
-    })
   })
 })

libs/feature/catalog/src/lib/records/records.service.ts

@@ -1,18 +1,16 @@
 import { Injectable } from '@angular/core'
-import { Observable, of } from 'rxjs'
-import { catchError, shareReplay } from 'rxjs/operators'
+import { Observable, of, switchMap } from 'rxjs'
+import { 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(true).pipe(
+    switchMap(() => this.recordsRepository.getMatchesCount({})),
+    shareReplay(1)
+  )
 
   constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }