geonetwork-ui 2.11.0-dev.68d9eaa3a → 2.11.0-dev.7f3cfba04

package/src/libs/feature/notifications/src/lib/notifications.service.ts

@@ -18,10 +18,12 @@ export class NotificationsService {
     error && console.error(error)
     const id = Math.floor(Math.random() * 1000000)
     this.notifications$.next([...this.notifications$.value, { ...content, id }])
-    if (typeof timeoutMs === 'undefined') return
-    setTimeout(() => {
-      this.removeNotificationById(id)
-    }, timeoutMs)
+    if (typeof timeoutMs !== 'undefined') {
+      setTimeout(() => {
+        this.removeNotificationById(id)
+      }, timeoutMs)
+    }
+    return id
   }
 
   removeNotificationById(id: number) {

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.ts

@@ -33,7 +33,6 @@ import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain
 import { NOT_KNOWN_CONSTRAINT } from '../../../../../../libs/feature/editor/src'
 import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
-import { getOptionalEditorConfig } from '../../../../../../libs/util/app-config/src'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { iconoirAppWindow, iconoirPlusCircle } from '@ng-icons/iconoir'
 import { matCloseOutline } from '@ng-icons/material-icons/outline'
@@ -48,6 +47,10 @@ marker('notify.reuse.form.error.title')
 marker('notify.reuse.form.error.body')
 
 export const REUSE_FORM_URL = new InjectionToken<string>('reuseFormUrl')
+// language assigned to the created reuse record; falls back to the current UI language
+export const NEW_RECORD_DEFAULT_LANGUAGE = new InjectionToken<string>(
+  'newRecordDefaultLanguage'
+)
 
 @Component({
   selector: 'gn-ui-notify-reuse-form',
@@ -86,6 +89,9 @@ export class NotifyReuseFormComponent implements OnDestroy {
   private readonly notificationsService = inject(NotificationsService)
   private readonly platformServiceInterface = inject(PlatformServiceInterface)
   reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private newRecordDefaultLanguage = inject(NEW_RECORD_DEFAULT_LANGUAGE, {
+    optional: true,
+  })
   private locationStrategy = inject(LocationStrategy)
 
   me = toSignal(this.platformServiceInterface.getMe())
@@ -158,8 +164,7 @@ export class NotifyReuseFormComponent implements OnDestroy {
   submit() {
     if (!this.isFormValid()) return
     const defaultLang =
-      getOptionalEditorConfig()?.NEW_RECORD_DEFAULT_LANGUAGE ??
-      this.translate.currentLang
+      this.newRecordDefaultLanguage ?? this.translate.currentLang
     const onlineResource: OnlineLinkResource = {
       type: 'link',
       url: new URL(this.url()),

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

@@ -40,7 +40,9 @@ export class MdViewEffects {
     this.actions$.pipe(
       ofType(MdViewActions.loadFullMetadataSuccess),
       filter(({ full }) => full !== undefined),
-      switchMap(({ full }) => this.recordsRepository.getFeatureCatalog(full)),
+      switchMap(({ full }) =>
+        this.recordsRepository.queryLinkedFeatureCatalog(full)
+      ),
       map((featureCatalog) =>
         MdViewActions.loadFeatureCatalogSuccess({
           datasetCatalog: featureCatalog,

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

@@ -162,7 +162,7 @@ export class MdViewFacade {
               link.accessServiceProtocol === 'ogcFeatures'
             ) {
               return from(
-                this.dataService.getItemsFromOgcApi(link.url.href, 1)
+                this.dataService.getItemsFromOgcApi(link.url.href, link.name, 1)
               ).pipe(
                 map((collectionRecords: OgcApiRecord[]) => {
                   return collectionRecords &&

package/src/libs/feature/router/src/lib/default/state/query-params.utils.ts

@@ -22,7 +22,7 @@ export function flattenQueryParams(
       const start = (flattened[key] as DateRange).start
       const end = (flattened[key] as DateRange).end
       flattened[key] = [
-        `${start ? formatDate(start) : ''}..${formatDate(end) || ''}`,
+        `${start ? formatDate(start) : ''}..${end ? formatDate(end) : ''}`,
       ]
     }
   }

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

@@ -1,4 +1,6 @@
 export * from './lib/feature-search.module'
+export * from './lib/geocoding/geocoding.service'
+export * from './lib/location-search/location-search.component'
 export * from './lib/filter-geometry.token'
 export * from './lib/record-url.token'
 export * from './lib/state/actions'

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.html

@@ -1,11 +1,25 @@
 @if (fieldType === 'dateRange') {
   <gn-ui-date-range-dropdown
     [title]="title"
-    [startDate]="(selectedDateRange$ | async)?.start"
-    [endDate]="(selectedDateRange$ | async)?.end"
-    (startDateChange)="onStartDateChange($event)"
-    (endDateChange)="onEndDateChange($event)"
+    [dateRange]="(selectedDateRange$ | async) ?? {}"
+    (dateRangeChange)="onDateRangeChange($event)"
+    [attr.data-cy-field]="fieldName"
   ></gn-ui-date-range-dropdown>
+} @else if (fieldType === 'spatialExtent') {
+  <gn-ui-spatial-extent-dropdown
+    [title]="title"
+    [initialBbox]="(selectedBoundingBox$ | async) ?? null"
+    [maxFileSizeMb]="spatialExtentMaxFileSize"
+    (bboxChange)="onBboxChange($event)"
+    (errorChange)="onSpatialExtentError($event)"
+    [attr.data-cy-field]="fieldName"
+  >
+    <gn-ui-location-search
+      [placeholder]="'search.filters.spatialExtent.searchLocation' | translate"
+      (bboxSelected)="onLocationSelected($event)"
+      data-cy="locationSearch"
+    ></gn-ui-location-search>
+  </gn-ui-spatial-extent-dropdown>
 } @else {
   <gn-ui-dropdown-multiselect
     class="w-full"

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts

@@ -1,14 +1,18 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  InjectionToken,
   Input,
   OnInit,
+  ViewChild,
   inject,
 } from '@angular/core'
 import {
   Choice,
   DateRangeDropdownComponent,
   DropdownMultiselectComponent,
+  SpatialExtentDropdownComponent,
+  SpatialExtentDropdownError,
 } from '../../../../../../libs/ui/inputs/src'
 import { Observable, of, switchMap } from 'rxjs'
 import { catchError, filter, map, startWith } from 'rxjs/operators'
@@ -22,6 +26,22 @@ import {
 } from '../utils/service/fields'
 import { DateRange } from '../../../../../../libs/api/repository/src'
 import { CommonModule } from '@angular/common'
+import { BoundingBox } from '../../../../../../libs/util/shared/src'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  LocationBbox,
+  LocationSearchComponent,
+} from '../location-search/location-search.component'
+
+marker('search.filters.spatialExtent.searchLocation')
+
+// in MB, null means no limit
+export const SPATIAL_EXTENT_MAX_FILE_SIZE = new InjectionToken<number | null>(
+  'spatialExtentMaxFileSize',
+  { factory: () => null }
+)
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -33,18 +53,27 @@ import { CommonModule } from '@angular/common'
     CommonModule,
     DateRangeDropdownComponent,
     DropdownMultiselectComponent,
+    SpatialExtentDropdownComponent,
+    LocationSearchComponent,
+    TranslatePipe,
   ],
 })
 export class FilterDropdownComponent implements OnInit {
   private searchFacade = inject(SearchFacade)
   private searchService = inject(SearchService)
   private fieldsService = inject(FieldsService)
+  private notificationsService = inject(NotificationsService)
+  private translateService = inject(TranslateService)
 
   @Input() fieldName: string
   @Input() title: string
 
+  @ViewChild(SpatialExtentDropdownComponent)
+  spatialExtentDropdown: SpatialExtentDropdownComponent
+
+  spatialExtentMaxFileSize = inject(SPATIAL_EXTENT_MAX_FILE_SIZE)
+
   fieldType: FieldType
-  dateRange: DateRange
   choices$: Observable<Choice[]>
   selected$ = this.searchFacade.searchFilters$.pipe(
     switchMap((filters) =>
@@ -57,15 +86,58 @@ export class FilterDropdownComponent implements OnInit {
   ) as Observable<FieldValue[]>
 
   selectedDateRange$ = this.selected$.pipe(
-    map((selectedDateRange) => selectedDateRange as DateRange)
+    map((selected) => (Array.isArray(selected) ? {} : (selected as DateRange)))
   ) as Observable<DateRange>
 
+  selectedBoundingBox$ = this.selected$.pipe(
+    map((selected) =>
+      Array.isArray(selected) && selected.length > 0
+        ? (selected as BoundingBox)
+        : null
+    )
+  ) as Observable<BoundingBox | null>
+
   onSelectedValues(values: unknown[]) {
     this.fieldsService
       .buildFiltersFromFieldValues({ [this.fieldName]: values as FieldValue[] })
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
 
+  private spatialExtentErrorNotificationId: number | null = null
+
+  onBboxChange(bbox: BoundingBox | null) {
+    this.fieldsService
+      .buildFiltersFromFieldValues({
+        [this.fieldName]: bbox,
+      })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
+    this.clearSpatialExtentErrorNotification()
+  }
+
+  onLocationSelected({ bbox, label }: LocationBbox) {
+    this.spatialExtentDropdown.setLocationBbox(bbox, label)
+  }
+
+  onSpatialExtentError(error: SpatialExtentDropdownError) {
+    this.clearSpatialExtentErrorNotification()
+    this.spatialExtentErrorNotificationId =
+      this.notificationsService.showNotification({
+        type: 'error',
+        title: this.translateService.instant(
+          'search.filters.spatialExtent.error.title'
+        ),
+        text: this.translateService.instant(error.key, error.params),
+      })
+  }
+
+  private clearSpatialExtentErrorNotification() {
+    if (this.spatialExtentErrorNotificationId === null) return
+    this.notificationsService.removeNotificationById(
+      this.spatialExtentErrorNotificationId
+    )
+    this.spatialExtentErrorNotificationId = null
+  }
+
   ngOnInit() {
     this.fieldType = this.fieldsService.getFieldType(this.fieldName)
     this.choices$ = this.fieldsService.getAvailableValues(this.fieldName).pipe(
@@ -80,22 +152,11 @@ export class FilterDropdownComponent implements OnInit {
     )
   }
 
-  onStartDateChange(start: Date) {
-    if (!start) return
-    this.dateRange = { ...this.dateRange, start }
-  }
-
-  onEndDateChange(end: Date) {
-    if (!end) return
-    this.dateRange = { ...this.dateRange, end }
-    if (this.dateRange.start && this.dateRange.end) {
-      this.fieldsService
-        .buildFiltersFromFieldValues({
-          [this.fieldName]: this.dateRange,
-        })
-        .subscribe((filters) => {
-          return this.searchService.updateFilters(filters)
-        })
-    }
+  onDateRangeChange(dateRange: DateRange) {
+    this.fieldsService
+      .buildFiltersFromFieldValues({
+        [this.fieldName]: dateRange,
+      })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
   }
 }

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

@@ -0,0 +1,105 @@
+import { Injectable, InjectionToken, inject } from '@angular/core'
+import {
+  queryGeoadmin,
+  GeoadminOptions,
+  GeocodingResult,
+  queryGeonames,
+  GeonamesOptions,
+  GeoplateformeOptions,
+  queryGeoplateforme,
+} from '@geospatial-sdk/geocoding'
+import { from, Observable, throwError } from 'rxjs'
+import { catchError } from 'rxjs/operators'
+
+type GeoadminGeocodingProvider = ['geoadmin', GeoadminOptions]
+type GeonamesGeocodingProvider = ['geonames', GeonamesOptions]
+type GeoplateformeGeocodingProvider = ['geoplateforme', GeoplateformeOptions]
+export type GeocodingProvider =
+  | GeoadminGeocodingProvider
+  | GeonamesGeocodingProvider
+  | GeoplateformeGeocodingProvider
+
+export const DEFAULT_GEOCODING_PROVIDER = [
+  'geonames',
+  { maxRows: 5 },
+] as GeocodingProvider
+
+export const GEOCODING_PROVIDER = new InjectionToken<GeocodingProvider>(
+  'geocoding-provider',
+  {
+    providedIn: 'root',
+    factory: (): GeocodingProvider => DEFAULT_GEOCODING_PROVIDER,
+  }
+)
+
+// these options are arrays in the providers, but they can be configured
+// with a single value for simplicity
+const GEOCODING_PROVIDER_ARRAY_OPTIONS: {
+  geoadmin: (keyof GeoadminOptions)[]
+  geoplateforme: (keyof GeoplateformeOptions)[]
+} = {
+  geoadmin: ['origins', 'features'],
+  geoplateforme: [
+    'index',
+    'category',
+    'type',
+    'postCode',
+    'cityCode',
+    'depCode',
+  ],
+}
+
+function wrapArrayOptions<T extends object>(options: T, keys: (keyof T)[]): T {
+  const wrapped = { ...options }
+  for (const key of keys) {
+    if (typeof wrapped[key] === 'string') {
+      wrapped[key] = [wrapped[key]] as T[keyof T]
+    }
+  }
+  return wrapped
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GeocodingService {
+  private provider = inject<GeocodingProvider>(GEOCODING_PROVIDER)
+
+  query(text: string): Observable<GeocodingResult[]> {
+    let queryObservable: Observable<GeocodingResult[]>
+    switch (this.provider[0]) {
+      case 'geoadmin':
+        queryObservable = from(
+          queryGeoadmin(
+            text,
+            wrapArrayOptions(
+              this.provider[1] as GeoadminOptions,
+              GEOCODING_PROVIDER_ARRAY_OPTIONS.geoadmin
+            )
+          )
+        )
+        break
+      case 'geonames':
+        queryObservable = from(
+          queryGeonames(text, this.provider[1] as GeonamesOptions)
+        )
+        break
+      case 'geoplateforme':
+        queryObservable = from(
+          queryGeoplateforme(text, {
+            ...wrapArrayOptions(
+              this.provider[1] as GeoplateformeOptions,
+              GEOCODING_PROVIDER_ARRAY_OPTIONS.geoplateforme
+            ),
+            returnTrueGeometry: true,
+          })
+        )
+        break
+      default:
+        return throwError(
+          () => new Error(`Unsupported geocoding provider: ${this.provider[0]}`)
+        )
+    }
+    return queryObservable.pipe(catchError((error) => throwError(error)))
+  }
+}

package/src/libs/feature/search/src/lib/location-search/location-search.component.html

@@ -0,0 +1,18 @@
+<gn-ui-autocomplete
+  [action]="searchAction"
+  [displayWithFn]="displayWithFn"
+  [placeholder]="placeholder"
+  [displayWithTemplate]="defaultItemTpl"
+  [clearOnSelection]="true"
+  (itemSelected)="handleItemSelected($event)"
+>
+</gn-ui-autocomplete>
+
+<ng-template #defaultItemTpl let-result>
+  <div class="py-2">
+    @if (getSecondaryLabel(result)) {
+      <div class="gn-ui-card-detail">{{ getSecondaryLabel(result) }}</div>
+    }
+    <div class="gn-ui-card-title">{{ getDisplayLabel(result) }}</div>
+  </div>
+</ng-template>

package/src/libs/feature/search/src/lib/location-search/location-search.component.ts

@@ -0,0 +1,114 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  InjectionToken,
+  Input,
+  Output,
+} from '@angular/core'
+import { Observable } from 'rxjs'
+import pointer from 'jsonpointer'
+import { GeocodingResult } from '@geospatial-sdk/geocoding'
+import { Geometry } from 'geojson'
+import {
+  AutocompleteComponent,
+  AutocompleteItem,
+} from '../../../../../../libs/ui/inputs/src'
+import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
+import { GeocodingService } from '../geocoding/geocoding.service'
+
+// JSON Pointers resolved against a geocoding result to build the labels shown in the dropdown
+export interface GeocodingProviderLabels {
+  main?: string
+  secondary?: string
+  tertiary?: string
+}
+
+export interface LocationBbox {
+  bbox: BoundingBox
+  label: string
+}
+
+export const GEOCODING_PROVIDER_LABELS =
+  new InjectionToken<GeocodingProviderLabels>('geocodingProviderLabels', {
+    factory: () => ({}),
+  })
+
+@Component({
+  selector: 'gn-ui-location-search',
+  templateUrl: './location-search.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [AutocompleteComponent],
+})
+export class LocationSearchComponent {
+  private geocodingService = inject(GeocodingService)
+  private labels = inject(GEOCODING_PROVIDER_LABELS)
+
+  @Input() placeholder = ''
+  @Output() resultSelected = new EventEmitter<GeocodingResult>()
+  @Output() bboxSelected = new EventEmitter<LocationBbox>()
+
+  displayWithFn = (item: AutocompleteItem) => (item as GeocodingResult).label
+
+  searchAction = (text: string): Observable<AutocompleteItem[]> =>
+    this.geocodingService.query(text)
+
+  getSecondaryLabel(result: GeocodingResult): string | undefined {
+    return this.resolveLabel(result, this.labels.secondary)
+  }
+
+  getMainLabel(result: GeocodingResult): string {
+    return this.resolveLabel(result, this.labels.main) ?? result.label
+  }
+
+  getTertiaryLabel(result: GeocodingResult): string | undefined {
+    return this.resolveLabel(result, this.labels.tertiary)
+  }
+
+  getDisplayLabel(result: GeocodingResult): string {
+    const tertiary = this.getTertiaryLabel(result)
+    return this.getMainLabel(result) + (tertiary ? ', ' + tertiary : '')
+  }
+
+  private resolveLabel(
+    result: GeocodingResult,
+    path?: string
+  ): string | undefined {
+    if (!path) return undefined
+    let value: unknown
+    try {
+      value = pointer.get(result, path)
+    } catch {
+      return undefined
+    }
+    const values = Array.isArray(value) ? value : [value]
+    const label = values
+      .filter((v) => typeof v === 'string' || typeof v === 'number')
+      .join(', ')
+    return label || undefined
+  }
+
+  // geoplateforme keeps a simplified geometry in geom and puts the real one,
+  // as a JSON string, in properties.truegeometry when returnTrueGeometry is set
+  private getGeometry(result: GeocodingResult): Geometry | null {
+    const trueGeometry = result.properties?.['truegeometry']
+    if (typeof trueGeometry === 'string') {
+      return JSON.parse(trueGeometry)
+    }
+    return (trueGeometry as Geometry) ?? result.geom
+  }
+
+  handleItemSelected(item: AutocompleteItem) {
+    const result = item as GeocodingResult
+    this.resultSelected.emit(result)
+    const geometry = this.getGeometry(result)
+    if (geometry) {
+      this.bboxSelected.emit({
+        bbox: getGeometryBoundingBox(geometry),
+        label: this.getDisplayLabel(result),
+      })
+    }
+  }
+}

package/src/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, inject } from '@angular/core'
-import { CommonModule, DatePipe } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import {
   catchError,
   firstValueFrom,
@@ -15,11 +15,15 @@ import { FieldType, FieldValue } from '../utils/service/fields'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { FieldsService } from '../utils/service/fields.service'
-import { formatUserInfo } from '../../../../../../libs/util/shared/src'
+import { DateService, formatUserInfo } from '../../../../../../libs/util/shared/src'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 marker('search.filters.summaryLabel.user')
 marker('search.filters.summaryLabel.changeDate')
+marker('search.filters.summaryLabel.resourceCreationRevisionDate')
+marker('search.filters.summaryLabel.temporalExtent')
+
+const OPEN_BOUND = '…'
 
 interface DisplayedValue {
   label: string
@@ -32,13 +36,12 @@ interface DisplayedValue {
   imports: [CommonModule, BadgeComponent],
   templateUrl: './search-filters-summary-item.component.html',
   styleUrls: ['./search-filters-summary-item.component.css'],
-  providers: [DatePipe],
 })
 export class SearchFiltersSummaryItemComponent implements OnInit {
   private searchFacade = inject(SearchFacade)
   private searchService = inject(SearchService)
   private fieldsService = inject(FieldsService)
-  private datePipe = inject(DatePipe)
+  private dateService = inject(DateService)
   private translate = inject(TranslateService)
 
   @Input() fieldName: string
@@ -82,12 +85,10 @@ export class SearchFiltersSummaryItemComponent implements OnInit {
   getReadableValues(fieldValues: FieldValue[] | DateRange[]): DisplayedValue[] {
     return fieldValues.map((value) => {
       if (this.fieldType === 'dateRange') {
+        const { start, end } = value as DateRange
         return {
           value,
-          label: `${this.datePipe.transform(
-            value.start,
-            'dd.MM.yyyy'
-          )} - ${this.datePipe.transform(value.end, 'dd.MM.yyyy')}`,
+          label: `${this.formatBound(start)} - ${this.formatBound(end)}`,
         }
       } else if (this.fieldName === 'user') {
         return { value, label: formatUserInfo(value) }
@@ -97,6 +98,16 @@ export class SearchFiltersSummaryItemComponent implements OnInit {
     })
   }
 
+  private formatBound(date: Date | undefined): string {
+    return date
+      ? this.dateService.formatDate(date, {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+        })
+      : OPEN_BOUND
+  }
+
   async removeFilterValue(fieldValue: FieldValue | DateRange) {
     const currentFieldValues: DisplayedValue[] = await firstValueFrom(
       this.fieldValues$

package/src/libs/feature/search/src/lib/state/reducer.ts

@@ -8,7 +8,6 @@ import {
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { DEFAULT_PAGE_SIZE, FIELDS_SUMMARY } from '../constants'
-import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export const SEARCH_FEATURE_KEY = 'searchState'
@@ -56,9 +55,7 @@ export const initSearch = (): SearchStateSearch => {
     },
     params: {
       filters: {},
-      pageSize: getOptionalSearchConfig()?.LIMIT
-        ? getOptionalSearchConfig().LIMIT
-        : DEFAULT_PAGE_SIZE,
+      pageSize: DEFAULT_PAGE_SIZE,
       currentPage: 0,
       favoritesOnly: false,
       useSpatialFilter: true,