geonetwork-ui 2.2.0-dev.3ee8e2c9 → 2.2.0-dev.40043f45

package/src/libs/feature/editor/src/lib/+state/editor.reducer.ts

@@ -0,0 +1,68 @@
+import { Action, createReducer, on } from '@ngrx/store'
+import * as EditorActions from './editor.actions'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { SaveRecordError } from './editor.models'
+import { EditorFieldsConfig } from '../models/fields.model'
+import { DEFAULT_FIELDS } from '../fields.config'
+
+export const EDITOR_FEATURE_KEY = 'editor'
+
+export interface EditorState {
+  record: CatalogRecord | null
+  saving: boolean
+  saveError: SaveRecordError | null
+  changedSinceSave: boolean
+  fieldsConfig: EditorFieldsConfig
+}
+
+export interface EditorPartialState {
+  readonly [EDITOR_FEATURE_KEY]: EditorState
+}
+
+export const initialEditorState: EditorState = {
+  record: null,
+  saving: false,
+  saveError: null,
+  changedSinceSave: false,
+  fieldsConfig: DEFAULT_FIELDS,
+}
+
+const reducer = createReducer(
+  initialEditorState,
+  on(EditorActions.openRecord, (state, { record }) => ({
+    ...state,
+    changedSinceSave: false,
+    record,
+  })),
+  on(EditorActions.saveRecord, (state) => ({
+    ...state,
+    saving: true,
+    saveError: null,
+  })),
+  on(EditorActions.saveRecordSuccess, (state) => ({
+    ...state,
+    saving: false,
+    saveError: null,
+    changedSinceSave: false,
+  })),
+  on(EditorActions.saveRecordFailure, (state, { error }) => ({
+    ...state,
+    saving: false,
+    saveError: error,
+  })),
+  on(EditorActions.updateRecordField, (state, { field, value }) => ({
+    ...state,
+    record: {
+      ...state.record,
+      [field]: value,
+    },
+  })),
+  on(EditorActions.markRecordAsChanged, (state) => ({
+    ...state,
+    changedSinceSave: true,
+  }))
+)
+
+export function editorReducer(state: EditorState | undefined, action: Action) {
+  return reducer(state, action)
+}

package/src/libs/feature/editor/src/lib/+state/editor.selectors.ts

@@ -0,0 +1,39 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store'
+import { EDITOR_FEATURE_KEY, EditorState } from './editor.reducer'
+
+export const selectEditorState =
+  createFeatureSelector<EditorState>(EDITOR_FEATURE_KEY)
+
+export const selectRecord = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.record
+)
+
+export const selectRecordSaving = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.saving
+)
+
+export const selectRecordSaveError = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.saveError
+)
+
+export const selectRecordChangedSinceSave = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.changedSinceSave
+)
+
+export const selectRecordFieldsConfig = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.fieldsConfig
+)
+
+export const selectRecordFields = createSelector(
+  selectEditorState,
+  (state: EditorState) =>
+    state.fieldsConfig.map((fieldConfig) => ({
+      config: fieldConfig,
+      value: state.record?.[fieldConfig.model] || null,
+    }))
+)

package/src/libs/feature/editor/src/lib/expressions.ts

@@ -0,0 +1,16 @@
+import { EditorFieldState, EditorFieldValue } from './models/fields.model'
+
+export type ExpressionEvaluator = (field: EditorFieldState) => EditorFieldValue
+
+export function evaluate(expression: string): ExpressionEvaluator {
+  if (expression.match(/^\${.*}$/)) {
+    return evaluate(expression.slice(2, -1))
+  }
+  const operator = expression.split('(')[0]
+  switch (operator) {
+    case 'dateNow':
+      return () => new Date()
+    default:
+      throw new Error(`Unknown operator: ${operator}`)
+  }
+}

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -10,6 +10,11 @@ import { TranslateModule } from '@ngx-translate/core'
 import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
 import { CommonModule } from '@angular/common'
 import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
+import { StoreModule } from '@ngrx/store'
+import { EffectsModule } from '@ngrx/effects'
+import * as fromEditor from './+state/editor.reducer'
+import { EditorEffects } from './+state/editor.effects'
+import { EditorFacade } from './+state/editor.facade'
 
 @NgModule({
   declarations: [
@@ -27,8 +32,14 @@ import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
     MatFormFieldModule,
     HttpClientModule,
     HttpClientXsrfModule,
+    StoreModule.forFeature(
+      fromEditor.EDITOR_FEATURE_KEY,
+      fromEditor.editorReducer
+    ),
+    EffectsModule.forFeature([EditorEffects]),
   ],
   exports: [WizardComponent, WizardSummarizeComponent],
+  providers: [EditorFacade],
 })
 export class FeatureEditorModule {}
 export * from './services/wizard.service'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -0,0 +1,35 @@
+import { EditorFieldsConfig } from './models/fields.model'
+
+export const DEFAULT_FIELDS: EditorFieldsConfig = [
+  {
+    model: 'title',
+    formFieldConfig: {
+      labelKey: 'Metadata title',
+      type: 'text',
+    },
+  },
+  {
+    model: 'abstract',
+    formFieldConfig: {
+      labelKey: 'Abstract',
+      type: 'rich',
+    },
+  },
+  {
+    model: 'uniqueIdentifier',
+    formFieldConfig: {
+      labelKey: 'Unique identifier',
+      type: 'text',
+      locked: true,
+    },
+  },
+  {
+    model: 'recordUpdated',
+    formFieldConfig: {
+      labelKey: 'Record Updated',
+      type: 'text',
+      locked: true,
+    },
+    onSaveProcess: '${dateNow()}',
+  },
+]

package/src/libs/feature/editor/src/lib/models/fields.model.ts

@@ -0,0 +1,29 @@
+import { FormFieldConfig } from '../../../../../../libs/ui/inputs/src'
+
+// Expressions should be enclosed in `${}` to be recognized as such
+// eg. ${dateNow()}
+export type EditorFieldExpression = `$\{${string}}`
+
+export interface EditorFieldConfig {
+  // configuration of the form field used as presentation; optional, nothing shown if not defined
+  formFieldConfig?: FormFieldConfig
+
+  // name of the target field in the record; will not change the record directly if not defined
+  model?: string
+
+  // a hidden field won't show but can still be used to modify the record
+  // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity
+  hidden?: boolean
+
+  // the result of this expression will replace the field value on save
+  onSaveProcess?: EditorFieldExpression
+}
+
+export type EditorFieldsConfig = EditorFieldConfig[]
+
+export type EditorFieldValue = string | number | boolean | unknown
+
+export interface EditorFieldState {
+  config: EditorFieldConfig
+  value: string | number | boolean | unknown
+}

package/src/libs/feature/editor/src/lib/record-form/record-form.component.html

@@ -1,8 +1,10 @@
-<div class="flex flex-col gap-6">
-  <gn-ui-form-field
-    *ngFor="let field of editorService.fields$ | async; trackBy: fieldTracker"
-    [config]="field.config"
-    [value]="field.value"
-    (valueChange)="handleFieldValueChange(field.config.model, $event)"
-  ></gn-ui-form-field>
+<div class="flex flex-col gap-6 p-6">
+  <ng-container *ngFor="let field of fields$ | async; trackBy: fieldTracker">
+    <gn-ui-form-field
+      *ngIf="field.config.formFieldConfig && !field.config.hidden"
+      [config]="field.config.formFieldConfig"
+      [value]="field.value"
+      (valueChange)="handleFieldValueChange(field, $event)"
+    ></gn-ui-form-field>
+  </ng-container>
 </div>

package/src/libs/feature/editor/src/lib/record-form/record-form.component.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { EditorService, FormField } from '../services/editor.service'
 import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { EditorFacade } from '../+state/editor.facade'
+import { EditorFieldState, EditorFieldValue } from '../models/fields.model'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -12,13 +13,18 @@ import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
   imports: [CommonModule, UiInputsModule],
 })
 export class RecordFormComponent {
-  constructor(public editorService: EditorService) {}
+  fields$ = this.facade.recordFields$
 
-  handleFieldValueChange(fieldName: string, value: unknown) {
-    this.editorService.updateRecordField(fieldName, value)
+  constructor(public facade: EditorFacade) {}
+
+  handleFieldValueChange(field: EditorFieldState, newValue: EditorFieldValue) {
+    if (!field.config.model) {
+      return
+    }
+    this.facade.updateRecordField(field.config.model, newValue)
   }
 
-  fieldTracker(index: number, field: FormField) {
+  fieldTracker(index: number, field: EditorFieldState) {
     return field.config.model
   }
 }

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,59 +1,27 @@
 import { Inject, Injectable, Optional } from '@angular/core'
 import { toModel, toXml } from '../../../../../../libs/api/metadata-converter/src'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
-import { BehaviorSubject, Observable } from 'rxjs'
-import { finalize, map, switchMap, take, tap } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
-import { FormFieldConfig } from '../../../../../../libs/ui/inputs/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-
-export interface FormField {
-  config: FormFieldConfig
-  value: string | number | boolean | unknown
-}
+import { EditorFieldsConfig } from '../models/fields.model'
+import { evaluate } from '../expressions'
 
 @Injectable({
   providedIn: 'root',
 })
 export class EditorService {
-  private record$ = new BehaviorSubject<CatalogRecord | null>(null)
-  private fieldsConfig: FormFieldConfig[] = [
-    {
-      model: 'title',
-      labelKey: 'Metadata title',
-      type: 'text',
-    },
-    {
-      model: 'abstract',
-      labelKey: 'Abstract',
-      type: 'rich',
-    },
-    {
-      model: 'uniqueIdentifier',
-      labelKey: 'Unique identifier',
-      type: 'text',
-      locked: true,
-    },
-  ]
-
   private apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`
 
-  fields$: Observable<FormField[]> = this.record$.pipe(
-    map((record) =>
-      this.fieldsConfig.map((fieldConfig) => ({
-        config: fieldConfig,
-        value: record?.[fieldConfig.model] || null,
-      }))
-    )
-  )
-  saving$ = new BehaviorSubject(false)
-
   constructor(
     private http: HttpClient,
     @Optional()
     @Inject(Configuration)
     private apiConfiguration: Configuration
   ) {}
+
+  // TODO: use the catalog repository instead
   loadRecordByUuid(uuid: string): Observable<CatalogRecord> {
     return this.http
       .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
@@ -65,43 +33,36 @@ export class EditorService {
       .pipe(map((response) => toModel(response.toString())))
   }
 
-  saveCurrentRecord(): Observable<void> {
-    return this.record$.pipe(
-      take(1),
-      tap((record) => {
-        if (!record)
-          throw new Error('Save record failed: no record currently open')
-        this.saving$.next(true)
-      }),
-      switchMap((record) =>
-        this.http.put(
-          `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
-          toXml(record),
-          {
-            headers: {
-              'Content-Type': 'application/xml',
-            },
-            withCredentials: true,
-          }
-        )
-      ),
-      map(() => undefined),
-      finalize(() => {
-        this.saving$.next(false)
-      })
-    )
-  }
+  // returns the record as it was when saved
+  saveRecord(
+    record: CatalogRecord,
+    fieldsConfig: EditorFieldsConfig
+  ): Observable<CatalogRecord> {
+    const savedRecord = { ...record }
 
-  setCurrentRecord(record: CatalogRecord) {
-    this.record$.next(record)
-  }
+    // run onSave processes
+    for (const field of fieldsConfig) {
+      if (field.onSaveProcess && field.model) {
+        const evaluator = evaluate(field.onSaveProcess)
+        savedRecord[field.model] = evaluator({
+          config: field,
+          value: record[field.model],
+        })
+      }
+    }
 
-  updateRecordField(fieldName: string, value: unknown) {
-    this.record$
-      .pipe(
-        take(1),
-        map((record) => ({ ...record, [fieldName]: value }))
+    // TODO: use the catalog repository instead
+    return this.http
+      .put(
+        `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
+        toXml(savedRecord),
+        {
+          headers: {
+            'Content-Type': 'application/xml',
+          },
+          withCredentials: true,
+        }
       )
-      .subscribe((record) => this.record$.next(record))
+      .pipe(map(() => savedRecord))
   }
 }

package/src/libs/feature/map/src/lib/feature-map.module.ts

@@ -24,6 +24,7 @@ import { AddLayerFromWmsComponent } from './add-layer-from-wms/add-layer-from-wm
 import { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-file.component'
 import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wfs.component'
 import { GeocodingComponent } from './geocoding/geocoding.component'
+import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
 
 @NgModule({
   declarations: [
@@ -65,6 +66,10 @@ import { GeocodingComponent } from './geocoding/geocoding.component'
       useValue: defaultMapOptions,
     },
     MapFacade,
+    {
+      provide: GEOCODING_PROVIDER,
+      useValue: ['geonames', { maxRows: 5 }] as GeocodingProvider,
+    },
   ],
 })
 export class FeatureMapModule {}

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnDestroy } from '@angular/core'
-import { queryGeoadmin, GeoadminOptions } from '@geospatial-sdk/geocoding'
 import { catchError, from, Subject, takeUntil } from 'rxjs'
 import { debounceTime, switchMap } from 'rxjs/operators'
 import { MapManagerService } from '../manager/map-manager.service'
 import { fromLonLat } from 'ol/proj'
 import { Polygon } from 'ol/geom'
+import { GeocodingService } from '../geocoding.service'
 
 @Component({
   selector: 'gn-ui-geocoding',
@@ -16,18 +16,20 @@ export class GeocodingComponent implements OnDestroy {
   results: any[] = []
   searchTextChanged = new Subject<string>()
   destroy$ = new Subject<void>()
+  errorMessage: string | null = null
 
-  constructor(private mapManager: MapManagerService) {
+  constructor(
+    private mapManager: MapManagerService,
+    private geocodingService: GeocodingService
+  ) {
     this.searchTextChanged
       .pipe(
         debounceTime(300),
         switchMap((searchText) => {
-          const options: GeoadminOptions = {
-            origins: ['zipcode', 'gg25', 'address'],
-            limit: 6,
-          }
-          return from(queryGeoadmin(searchText, options)).pipe(
+          return from(this.geocodingService.query(searchText)).pipe(
             catchError((error) => {
+              this.errorMessage =
+                'An error occurred while searching. Please try again.'
               console.error(error)
               return []
             })
@@ -57,18 +59,32 @@ export class GeocodingComponent implements OnDestroy {
   clearSearch() {
     this.searchText = ''
     this.results = []
+    this.errorMessage = null
   }
 
-  zoomToLocation(result) {
+  zoomToLocation(result: any) {
     const map = this.mapManager.map
     const view = map.getView()
     const geometry = result.geom
 
-    const polygonCoords = geometry.coordinates
-    const transformedCoords = polygonCoords[0].map((coord) => fromLonLat(coord))
+    if (geometry.type === 'Point') {
+      this.zoomToPoint(geometry.coordinates, view)
+    } else if (geometry.type === 'Polygon') {
+      this.zoomToPolygon(geometry.coordinates, view)
+    } else {
+      console.error(`Unsupported geometry type: ${geometry.type}`)
+    }
+  }
 
-    const polygon = new Polygon([transformedCoords])
+  zoomToPoint(pointCoords: [number, number], view: any) {
+    const transformedCoords = fromLonLat(pointCoords)
+    view.setCenter(transformedCoords)
+    view.setZoom(12)
+  }
 
+  zoomToPolygon(polygonCoords: [[number, number][]], view: any) {
+    const transformedCoords = polygonCoords[0].map((coord) => fromLonLat(coord))
+    const polygon = new Polygon([transformedCoords])
     view.fit(polygon, {
       duration: 100,
       maxZoom: 12,

package/src/libs/feature/map/src/lib/geocoding.service.ts

@@ -0,0 +1,59 @@
+import { Injectable, Inject, InjectionToken } from '@angular/core'
+import {
+  queryGeoadmin,
+  GeoadminOptions,
+  GeocodingResult,
+  queryGeonames,
+  GeonamesOptions,
+  DataGouvFrOptions,
+  queryDataGouvFr,
+} from '@geospatial-sdk/geocoding'
+import { from, Observable, throwError } from 'rxjs'
+import { catchError } from 'rxjs/operators'
+
+type GeoadminGeocodingProvider = ['geoadmin', GeoadminOptions]
+type GeonamesGeocodingProvider = ['geonames', GeonamesOptions]
+type DataGouvFrGeocodingProvider = ['data-gouv-fr', DataGouvFrOptions]
+export type GeocodingProvider =
+  | GeoadminGeocodingProvider
+  | GeonamesGeocodingProvider
+  | DataGouvFrGeocodingProvider
+
+export const GEOCODING_PROVIDER = new InjectionToken<GeocodingProvider>(
+  'geocoding-provider'
+)
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GeocodingService {
+  constructor(
+    @Inject(GEOCODING_PROVIDER) private provider: GeocodingProvider
+  ) {}
+
+  query(text: string): Observable<GeocodingResult[]> {
+    let queryObservable: Observable<GeocodingResult[]>
+    switch (this.provider[0]) {
+      case 'geoadmin':
+        queryObservable = from(
+          queryGeoadmin(text, this.provider[1] as GeoadminOptions)
+        )
+        break
+      case 'geonames':
+        queryObservable = from(
+          queryGeonames(text, this.provider[1] as GeonamesOptions)
+        )
+        break
+      case 'data-gouv-fr':
+        queryObservable = from(
+          queryDataGouvFr(text, this.provider[1] as DataGouvFrOptions)
+        )
+        break
+      default:
+        return throwError(
+          () => new Error(`Unsupported geocoding provider: ${this.provider[0]}`)
+        )
+    }
+    return queryObservable.pipe(catchError((error) => throwError(error)))
+  }
+}

package/src/libs/feature/map/src/lib/map-context/map-context.service.ts

@@ -58,6 +58,8 @@ export class MapContextService {
   ): Map {
     if (mapConfig) {
       mapContext = this.mergeMapConfigWithContext(mapContext, mapConfig)
+    } else {
+      mapContext.layers = this.addDefaultBaselayerContext(mapContext.layers)
     }
     if (
       !mapContext.view?.extent &&
@@ -179,6 +181,14 @@ export class MapContextService {
     return view
   }
 
+  addDefaultBaselayerContext(
+    layers: MapContextLayerModel[]
+  ): MapContextLayerModel[] {
+    return layers.includes(DEFAULT_BASELAYER_CONTEXT)
+      ? layers
+      : [DEFAULT_BASELAYER_CONTEXT, ...layers]
+  }
+
   mergeMapConfigWithContext(
     mapContext: MapContextModel,
     mapConfig: MapConfig

package/src/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts

@@ -29,18 +29,18 @@ export class DataViewPermalinkComponent {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
         const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
-        url.search = `?v=${this.version}
-&e=gn-dataset-view-chart
-&a=api-url=${this.config.basePath}
-&a=dataset-id=${metadata.uniqueIdentifier}
-&a=primary-color=%230f4395
-&a=secondary-color=%238bc832
-&a=main-color=%23555
-&a=background-color=%23fdfbff
-&a=aggregation=${aggregation}
-&a=x-property=${xProperty}
-&a=y-property=${yProperty}
-&a=chart-type=${chartType}`
+        url.searchParams.set('v', `${this.version}`)
+        url.searchParams.append('e', `gn-dataset-view-chart`)
+        url.searchParams.append('a', `api-url=${this.config.basePath}`)
+        url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
+        url.searchParams.append('a', `primary-color=#0f4395`)
+        url.searchParams.append('a', `secondary-color=#8bc832`)
+        url.searchParams.append('a', `main-color=#555`)
+        url.searchParams.append('a', `background-color=#fdfbff`)
+        url.searchParams.append('a', `aggregation=${aggregation}`)
+        url.searchParams.append('a', `x-property=${xProperty}`)
+        url.searchParams.append('a', `y-property=${yProperty}`)
+        url.searchParams.append('a', `chart-type=${chartType}`)
         return url.toString()
       }
       return ''

package/src/libs/feature/record/src/lib/state/mdview.reducer.ts

@@ -50,7 +50,7 @@ const mdViewReducer = createReducer(
     chartConfig,
   })),
   on(MdViewActions.close, (state) => {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { metadata, related, ...stateWithoutMd } = state
     return stateWithoutMd
   })

package/src/libs/feature/router/src/lib/default/index.ts

@@ -2,6 +2,7 @@ export * from './router.module'
 export * from './constants'
 export * from './state/router.facade'
 export * from './router.service'
+export * from './router.config'
 export * from './state/router.effects'
 export * from './state/router.facade'
 export * from './container/search-router.container.directive'

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -8,7 +8,7 @@ import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
 })
 export class RouterService {
   constructor(
-    @Inject(ROUTER_CONFIG) private routerConfig: RouterConfigModel,
+    @Inject(ROUTER_CONFIG) protected routerConfig: RouterConfigModel,
     private router: Router
   ) {}
 

package/src/libs/feature/search/src/index.ts

@@ -1,4 +1,6 @@
 export * from './lib/feature-search.module'
+export * from './lib/filter-geometry.token'
+export * from './lib/record-url.token'
 export * from './lib/state/actions'
 export * from './lib/state/selectors'
 export * from './lib/state/search.facade'
@@ -18,3 +20,4 @@ export * from './lib/results-hits-number/results-hits.container.component'
 export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'
+export * from './lib/results-table/results-table.component'