geonetwork-ui 2.4.0-dev.e1bb65c4 → 2.4.0-dev.e550c0b3

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -0,0 +1,65 @@
+import { CatalogRecordKeys } from '../../../../../../libs/common/domain/src/lib/model/record'
+
+// Expressions should be enclosed in `${}` to be recognized as such
+// eg. ${dateNow()}
+export type EditorFieldExpression = `$\{${string}}`
+
+export type EditorFieldValue = string | number | boolean | unknown
+
+export interface FormFieldConfig {
+  labelKey?: string
+  hintKey?: string
+  tooltipKey?: string
+  required?: boolean
+  locked?: boolean
+  invalid?: boolean
+  invalidHintKey?: string
+}
+
+// Specifiers let us use specific components
+// This is used for instance to target only certain online resources in a field
+type OnlineLinkResourceSpecifier = `onlineResourceType:link`
+type DatasetDistributionsSpecifier = `onlineResourceType:!link`
+export type FieldModelSpecifier =
+  | OnlineLinkResourceSpecifier
+  | DatasetDistributionsSpecifier
+
+export interface EditorField {
+  // configuration of the form field used as presentation
+  formFieldConfig: FormFieldConfig
+
+  // name of the target field in the record; will not change the record directly if not defined
+  model?: CatalogRecordKeys
+  modelSpecifier?: FieldModelSpecifier
+
+  // grid column span; if unspecified, full width will be used
+  gridColumnSpan?: number
+
+  // 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 interface EditorSection {
+  labelKey?: string
+  descriptionKey?: string
+  hidden: boolean
+  fields: EditorField[]
+}
+
+export interface EditorFieldPage {
+  labelKey?: string
+  sections: EditorSection[]
+}
+
+export interface EditorConfig {
+  pages: EditorFieldPage[]
+}
+
+export interface EditorFieldState {
+  model: string
+  value: EditorFieldValue
+}

package/src/libs/feature/editor/src/lib/models/index.ts

@@ -1,2 +1,3 @@
 export * from './wizard-field.model'
 export * from './wizard-field.type'
+export * from './editor-config.model'

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { Observable, switchMap } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { EditorFieldsConfig } from '../models/fields.model'
+import { EditorConfig } from '../models/'
 import { evaluate } from '../expressions'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
@@ -15,17 +15,22 @@ export class EditorService {
   // returns the record as it was when saved, alongside its source
   saveRecord(
     record: CatalogRecord,
-    fieldsConfig: EditorFieldsConfig,
+    recordSource: string,
+    fieldsConfig: EditorConfig,
     generateNewUniqueIdentifier = false
   ): Observable<[CatalogRecord, string]> {
     const savedRecord = { ...record }
 
+    const fields = fieldsConfig.pages.flatMap((page) =>
+      page.sections.flatMap((section) => section.fields)
+    )
+
     // run onSave processes
-    for (const field of fieldsConfig) {
+    for (const field of fields) {
       if (field.onSaveProcess && field.model) {
         const evaluator = evaluate(field.onSaveProcess)
         savedRecord[field.model] = evaluator({
-          config: field,
+          model: field.model,
           value: record[field.model],
         })
       }
@@ -36,7 +41,7 @@ export class EditorService {
       savedRecord.uniqueIdentifier = null
     }
 
-    return this.recordsRepository.saveRecord(savedRecord).pipe(
+    return this.recordsRepository.saveRecord(savedRecord, recordSource).pipe(
       switchMap((uniqueIdentifier) =>
         this.recordsRepository.openRecordForEdition(uniqueIdentifier)
       ),
@@ -50,9 +55,19 @@ export class EditorService {
 
   // emits and completes once saving is done
   // note: onSave processes are not run for drafts
-  saveRecordAsDraft(record: CatalogRecord): Observable<void> {
+  saveRecordAsDraft(
+    record: CatalogRecord,
+    recordSource: string
+  ): Observable<void> {
     return this.recordsRepository
-      .saveRecordAsDraft(record)
+      .saveRecordAsDraft(record, recordSource)
       .pipe(map(() => undefined))
   }
+
+  undoRecordDraft(
+    record: CatalogRecord
+  ): Observable<[CatalogRecord, string, boolean]> {
+    this.recordsRepository.clearRecordDraft(record.uniqueIdentifier)
+    return this.recordsRepository.openRecordForEdition(record.uniqueIdentifier)
+  }
 }

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

@@ -1,20 +1,13 @@
 export * from './lib/+state/map.facade'
-export * from './lib/+state/map.models'
 export * from './lib/+state/map.selectors'
 export * from './lib/+state/map.reducer'
 export * from './lib/+state/map.actions'
 export * from './lib/feature-map.module'
-export * from './lib/manager/map-manager.service'
-export * from './lib/manager/map-instance.directive'
-export * from './lib/feature-info/feature-info.service'
-export * from './lib/map-context/map-context.model'
-export * from './lib/map-context/map-context.service'
-export * from './lib/map-context/component/map-context.component'
+export * from './lib/map-state-container/map-state-container.component'
 export * from './lib/constant'
 export * from './lib/utils'
 export * from './lib/style'
 export * from './lib/layers-panel/layers-panel.component'
 export * from './lib/add-layer-from-catalog/add-layer-from-catalog.component'
 export * from './lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
-export * from './lib/map-container/map-container.component'
 export * from './lib/geocoding/geocoding.component'

package/src/libs/feature/map/src/lib/+state/map.actions.ts

@@ -1,32 +1,17 @@
 import { createAction, props } from '@ngrx/store'
-import { MapLayer } from './map.models'
+import { MapContext } from '@geospatial-sdk/core'
+import type { Feature } from 'geojson'
 
-export const addLayer = createAction(
-  '[Map] Add Layer',
-  props<{ layer: MapLayer; atIndex?: number }>()
+export const setContext = createAction(
+  '[Map] Set Context',
+  props<{ context: MapContext }>()
 )
 
-export const removeLayer = createAction(
-  '[Map] Remove Layer',
-  props<{ index: number }>()
+export const setSelectedFeatures = createAction(
+  '[Map] Set Selected Features',
+  props<{ selectedFeatures: Feature[] }>()
 )
 
-export const updateLayer = createAction(
-  '[Map] Update Layer',
-  props<{ updatedLayer: MapLayer; index: number }>()
-)
-
-export const changeLayerOrder = createAction(
-  '[Map] Change Layer Order',
-  props<{ currentIndex: number; newIndex: number }>()
-)
-
-export const setLayerError = createAction(
-  '[Map] Set Layer Error',
-  props<{ index: number; error: string }>()
-)
-
-export const clearLayerError = createAction(
-  '[Map] Clear Layer Error',
-  props<{ index: number }>()
+export const clearSelectedFeatures = createAction(
+  '[Map] Clear Selected Features'
 )

package/src/libs/feature/map/src/lib/+state/map.facade.ts

@@ -1,30 +1,26 @@
 import { Injectable } from '@angular/core'
 import { select, Store } from '@ngrx/store'
 import * as MapSelectors from './map.selectors'
-import { MapLayer } from './map.models'
 import * as MapActions from './map.actions'
+import { MapContext } from '@geospatial-sdk/core'
+import { Feature } from 'geojson'
 
 @Injectable()
 export class MapFacade {
-  layers$ = this.store.pipe(select(MapSelectors.getMapLayers))
+  context$ = this.store.pipe(select(MapSelectors.getMapContext))
+  selectedFeatures$ = this.store.pipe(select(MapSelectors.getSelectedFeatures))
 
   constructor(private readonly store: Store) {}
 
-  /**
-   * Use the initialization action to perform one
-   * or more tasks in your Effects.
-   */
-  init() {
-    // placeholder
+  applyContext(context: MapContext) {
+    this.store.dispatch(MapActions.setContext({ context }))
   }
 
-  addLayer(layer: MapLayer) {
-    this.store.dispatch(MapActions.addLayer({ layer }))
+  selectFeatures(selectedFeatures: Feature[]) {
+    this.store.dispatch(MapActions.setSelectedFeatures({ selectedFeatures }))
   }
-  addLayerAtIndex(layer: MapLayer, index: number) {
-    this.store.dispatch(MapActions.addLayer({ layer, atIndex: index }))
-  }
-  removeLayer(index: number) {
-    this.store.dispatch(MapActions.removeLayer({ index }))
+
+  clearFeatureSelection() {
+    this.store.dispatch(MapActions.clearSelectedFeatures())
   }
 }

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

@@ -1,12 +1,13 @@
 import { Action, createReducer, on } from '@ngrx/store'
-
 import * as MapActions from './map.actions'
-import { MapLayerWithInfo } from './map.models'
+import { MapContext } from '@geospatial-sdk/core'
+import { Feature } from 'geojson'
 
 export const MAP_FEATURE_KEY = 'map'
 
 export interface MapState {
-  layers: MapLayerWithInfo[]
+  context: MapContext
+  selectedFeatures: Feature[]
 }
 
 export interface MapPartialState {
@@ -14,68 +15,30 @@ export interface MapPartialState {
 }
 
 export const initialMapState: MapState = {
-  layers: [],
+  context: { layers: [], view: null },
+  selectedFeatures: [],
 }
 
 const reducer = createReducer(
   initialMapState,
-  on(MapActions.addLayer, (state, action) => {
-    const layers: MapLayerWithInfo[] = [...state.layers]
-    const layerWithInfo = { ...action.layer, loading: false, error: null }
-    if (!('atIndex' in action)) layers.push(layerWithInfo)
-    else layers.splice(action.atIndex, 0, layerWithInfo)
+  on(MapActions.setContext, (state, { context }) => {
     return {
       ...state,
-      layers,
+      context,
     }
   }),
-  on(MapActions.updateLayer, (state, action) => ({
-    ...state,
-    layers: state.layers.map((layer, index) =>
-      index === action.index
-        ? {
-            ...action.updatedLayer,
-            loading: false,
-            error: null,
-          }
-        : layer
-    ),
-  })),
-  on(MapActions.removeLayer, (state, action) => ({
-    ...state,
-    layers: state.layers.filter((layer, index) => index !== action.index),
-  })),
-  on(MapActions.changeLayerOrder, (state, action) => {
-    const layers: MapLayerWithInfo[] = [...state.layers]
-    const moved = layers.splice(action.currentIndex, 1)[0]
-    layers.splice(action.newIndex, 0, moved)
+  on(MapActions.setSelectedFeatures, (state, { selectedFeatures }) => {
     return {
       ...state,
-      layers,
+      selectedFeatures,
     }
   }),
-  on(MapActions.setLayerError, (state, action) => ({
-    ...state,
-    layers: state.layers.map((layer, index) =>
-      index === action.index
-        ? {
-            ...layer,
-            error: action.error,
-          }
-        : layer
-    ),
-  })),
-  on(MapActions.clearLayerError, (state, action) => ({
-    ...state,
-    layers: state.layers.map((layer, index) =>
-      index === action.index
-        ? {
-            ...layer,
-            error: null,
-          }
-        : layer
-    ),
-  }))
+  on(MapActions.clearSelectedFeatures, (state) => {
+    return {
+      ...state,
+      selectedFeatures: [],
+    }
+  })
 )
 
 export function mapReducer(state: MapState | undefined, action: Action) {

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

@@ -4,7 +4,12 @@ import { MAP_FEATURE_KEY, MapState } from './map.reducer'
 // Lookup the 'Map' feature state managed by NgRx
 export const getMapState = createFeatureSelector<MapState>(MAP_FEATURE_KEY)
 
-export const getMapLayers = createSelector(
+export const getMapContext = createSelector(
   getMapState,
-  (state: MapState) => state.layers
+  (state: MapState) => state.context
+)
+
+export const getSelectedFeatures = createSelector(
+  getMapState,
+  (state: MapState) => state.selectedFeatures
 )

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-from-catalog.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
 import {
+  FeatureSearchModule,
   FIELDS_BRIEF,
   SearchFacade,
   SearchService,
@@ -15,6 +16,7 @@ import { AddLayerRecordPreviewComponent } from './add-layer-record-preview/add-l
   templateUrl: './add-layer-from-catalog.component.html',
   styleUrls: ['./add-layer-from-catalog.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
   providers: [
     SearchFacade,
     SearchService,
@@ -30,6 +32,7 @@ import { AddLayerRecordPreviewComponent } from './add-layer-record-preview/add-l
       },
     },
   ],
+  imports: [FeatureSearchModule],
 })
 export class AddLayerFromCatalogComponent implements OnInit {
   constructor(private searchFacade: SearchFacade) {}

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -5,49 +5,50 @@ import {
   LinkClassifierService,
   LinkUsage,
 } from '../../../../../../../libs/util/shared/src'
-import { Observable, of, throwError } from 'rxjs'
-import { map } from 'rxjs/operators'
-import { MapUtilsService } from '../../utils'
+import { firstValueFrom, Observable, of, throwError } from 'rxjs'
 import { MapFacade } from '../../+state/map.facade'
 import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-} from '../../map-context/map-context.model'
-import {
-  DatasetDistribution,
+  DatasetOnlineResource,
   DatasetRecord,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-record-preview',
   templateUrl: './add-layer-record-preview.component.html',
   styleUrls: ['./add-layer-record-preview.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ThumbnailComponent, ButtonComponent, CommonModule],
 })
 export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
-  get mapLinks(): DatasetDistribution[] {
-    return (this.record as DatasetRecord).distributions.filter((link) =>
+  get mapLinks(): DatasetOnlineResource[] {
+    return (this.record as DatasetRecord).onlineResources.filter((link) =>
       this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
-    ) as DatasetDistribution[]
+    ) as DatasetOnlineResource[]
   }
 
   constructor(
     protected elementRef: ElementRef,
     private linkClassifier: LinkClassifierService,
-    private mapFacade: MapFacade,
-    private mapUtils: MapUtilsService
+    private mapFacade: MapFacade
   ) {
     super(elementRef)
   }
 
-  async handleLinkClick(link: DatasetDistribution) {
-    const layer = await this.getLayerFromLink(link).toPromise()
-    this.mapFacade.addLayer({ ...layer, title: this.record.title })
+  async handleLinkClick(link: DatasetOnlineResource) {
+    const layer = await firstValueFrom(this.getLayerFromLink(link))
+    const context = await firstValueFrom(this.mapFacade.context$)
+    this.mapFacade.applyContext({
+      ...context,
+      layers: [...context.layers, { ...layer, label: this.record.title }],
+    })
   }
 
-  getLayerFromLink(
-    link: DatasetDistribution
-  ): Observable<MapContextLayerModel> {
+  getLayerFromLink(link: DatasetOnlineResource): Observable<MapContextLayer> {
     if (link.type !== 'service')
       return throwError(
         () => 'map layer could not be built for this distribution'
@@ -55,20 +56,20 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     if (link.accessServiceProtocol === 'wms') {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMS,
+        type: 'wms',
         name: link.name,
       })
     } else if (link.accessServiceProtocol === 'wmts') {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMTS,
+        type: 'wmts',
         name: link.name,
       })
     }
     return throwError(() => 'protocol not supported')
   }
 
-  getLinkLabel(link: DatasetDistribution) {
+  getLinkLabel(link: DatasetOnlineResource) {
     return getLinkLabel(link)
   }
 }

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.ts

@@ -1,6 +1,10 @@
 import { ChangeDetectorRef, Component } from '@angular/core'
-import { MapContextLayerModel } from '../map-context/map-context.model'
 import { MapFacade } from '../+state/map.facade'
+import { MapContextLayerGeojson } from '@geospatial-sdk/core'
+import { firstValueFrom } from 'rxjs'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
 
 const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
 
@@ -8,6 +12,8 @@ const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
   selector: 'gn-ui-add-layer-from-file',
   templateUrl: './add-layer-from-file.component.html',
   styleUrls: ['./add-layer-from-file.component.css'],
+  standalone: true,
+  imports: [UiInputsModule, TranslateModule, CommonModule],
 })
 export class AddLayerFromFileComponent {
   errorMessage: string | null = null
@@ -60,25 +66,30 @@ export class AddLayerFromFileComponent {
   }
 
   private addGeoJsonLayer(file: File) {
-    return new Promise<void>((resolve, reject) => {
+    return new Promise((resolve, reject) => {
       try {
         const reader = new FileReader()
         reader.onload = () => {
-          const result = reader.result as string
-          const title = file.name.split('.').slice(0, -1).join('.')
-          const layerToAdd: MapContextLayerModel = {
-            type: 'geojson',
-            data: result,
-          }
-          this.mapFacade.addLayer({ ...layerToAdd, title: title })
-          this.displayMessage('File successfully added to map', 'success')
-          resolve()
+          resolve(reader.result as string)
         }
         reader.onerror = reject
         reader.readAsText(file)
       } catch (error) {
         reject(error)
       }
+    }).then(async (result: string) => {
+      const context = await firstValueFrom(this.mapFacade.context$)
+      const title = file.name.split('.').slice(0, -1).join('.')
+      const layerToAdd: MapContextLayerGeojson = {
+        type: 'geojson',
+        data: result,
+        label: title,
+      }
+      this.mapFacade.applyContext({
+        ...context,
+        layers: [...context.layers, layerToAdd],
+      })
+      this.displayMessage('File successfully added to map', 'success')
     })
   }
 

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="ogcUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.ogc.urlInput.hint' | translate"
+    [placeholder]="'map.ogc.urlInput.hint' | translate"
     class="w-96"
   ></gn-ui-text-input>
 </div>

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -1,33 +1,32 @@
 import {
+  ChangeDetectorRef,
   Component,
-  OnInit,
-  Output,
   EventEmitter,
-  ChangeDetectionStrategy,
   Input,
-  ChangeDetectorRef,
+  OnInit,
+  Output,
 } from '@angular/core'
 import { OgcApiEndpoint } from '@camptocamp/ogc-client'
-import { Subject, debounceTime } from 'rxjs'
-import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-} from '../map-context/map-context.model'
+import { debounceTime, Subject } from 'rxjs'
 import { TranslateModule } from '@ngx-translate/core'
-import { DropdownChoice, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import {
+  DropdownChoice,
+  TextInputComponent,
+  UiInputsModule,
+} from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { MapLayer } from '../+state/map.models'
+import { MapContextLayer, MapContextLayerOgcApi } from '@geospatial-sdk/core'
 
 @Component({
   selector: 'gn-ui-add-layer-from-ogc-api',
   templateUrl: './add-layer-from-ogc-api.component.html',
   styleUrls: ['./add-layer-from-ogc-api.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslateModule, UiInputsModule],
+  imports: [CommonModule, TranslateModule, UiInputsModule, TextInputComponent],
 })
 export class AddLayerFromOgcApiComponent implements OnInit {
   @Input() ogcUrl: string
-  @Output() layerAdded = new EventEmitter<MapLayer>()
+  @Output() layerAdded = new EventEmitter<MapContextLayer>()
 
   urlChange = new Subject<string>()
   loading = false
@@ -109,24 +108,27 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     try {
       const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
       let layerUrl: string
+      let useTiles: MapContextLayerOgcApi['useTiles']
 
       if (layerType === 'vectorTiles') {
         layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer)
+        useTiles = 'vector'
       } else if (layerType === 'mapTiles') {
         layerUrl = await ogcEndpoint.getMapTilesetUrl(layer)
+        useTiles = 'map'
       } else {
         layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
           outputFormat: 'json',
         })
       }
 
-      const layerToAdd: MapContextLayerModel = {
-        name: layer,
+      this.layerAdded.emit({
         url: layerUrl,
-        type: MapContextLayerTypeEnum.OGCAPI,
-        layerType: layerType,
-      }
-      this.layerAdded.emit({ ...layerToAdd, title: layer })
+        type: 'ogcapi',
+        collection: layer,
+        ...(useTiles && { useTiles }),
+        label: layer,
+      })
     } catch (error) {
       const err = error as Error
       console.error('Error adding layer:', err.message)

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="wfsUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.wfs.urlInput.hint' | translate"
+    [placeholder]="'map.wfs.urlInput.hint' | translate"
     class="w-96"
   >
   </gn-ui-text-input>