geonetwork-ui 2.11.0-dev.8442dae6e → 2.11.0-dev.8aa6985e0

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-associated-records/form-field-associated-records.component.ts

@@ -0,0 +1,94 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  AssociatedRecord,
+  AssociationType,
+  associationTypeValues,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CheckToggleComponent,
+  DropdownChoice,
+  DropdownSelectorComponent,
+  TextInputComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
+import { TranslatePipe } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-associated-records',
+  templateUrl: './form-field-associated-records.component.html',
+  styleUrls: ['./form-field-associated-records.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CheckToggleComponent,
+    TextInputComponent,
+    DropdownSelectorComponent,
+    FormFieldWrapperComponent,
+    TranslatePipe,
+  ],
+})
+export class FormFieldAssociatedRecordsComponent {
+  @Input() value?: AssociatedRecord[]
+  @Output() valueChange = new EventEmitter<AssociatedRecord[]>()
+
+  private get list() {
+    return this.value ?? []
+  }
+  private get first() {
+    return this.list[0]
+  }
+  private get rest() {
+    return this.list.slice(1)
+  }
+
+  get hasParentLink() {
+    return this.list.length > 0
+  }
+  get uniqueIdentifier() {
+    return this.first?.uniqueIdentifier ?? ''
+  }
+  get selectedType() {
+    return this.first?.associationType
+  }
+  get choices(): DropdownChoice[] {
+    return associationTypeValues.map((value) => ({
+      value,
+      label: `domain.record.associationType.${value}`,
+    }))
+  }
+
+  onToggle(checked: boolean) {
+    this.valueChange.emit(
+      checked
+        ? [
+            {
+              uniqueIdentifier: '',
+              associationType: associationTypeValues[0],
+            },
+            ...this.rest,
+          ]
+        : this.rest
+    )
+  }
+
+  onUniqueIdentifierChange(uniqueIdentifier: string) {
+    this.valueChange.emit(
+      uniqueIdentifier
+        ? [{ ...this.first, uniqueIdentifier }, ...this.rest]
+        : this.rest
+    )
+  }
+
+  onTypeChange(associationType: DropdownChoice['value']) {
+    this.valueChange.emit([
+      { ...this.first, associationType: associationType as AssociationType },
+      ...this.rest,
+    ])
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html

@@ -1,17 +1,21 @@
-<div class="flex gap-2 mb-2">
-  @for (addOption of addOptions$ | async; track addOption) {
-    <gn-ui-button type="gray" (buttonClick)="onAdd(addOption.eventName)">
-      <ng-icon name="iconoirPlus" class="text-primary"></ng-icon> &nbsp;{{
-        addOption.buttonLabel
-      }}</gn-ui-button
-    >
+<div class="flex flex-col gap-2">
+  <div class="flex gap-2">
+    @for (addOption of addOptions$ | async; track addOption) {
+      <gn-ui-button type="gray" (buttonClick)="onAdd(addOption.eventName)">
+        <ng-icon name="iconoirPlus" class="text-primary"></ng-icon> &nbsp;{{
+          addOption.buttonLabel
+        }}</gn-ui-button
+      >
+    }
+  </div>
+  @if (extents.length) {
+    <gn-ui-sortable-list
+      [items]="extents"
+      (itemsOrderChange)="onItemsOrderChange($event)"
+      [elementTemplate]="template"
+    ></gn-ui-sortable-list>
   }
 </div>
-<gn-ui-sortable-list
-  [items]="extents"
-  (itemsOrderChange)="onItemsOrderChange($event)"
-  [elementTemplate]="template"
-></gn-ui-sortable-list>
 <ng-template #template let-extent let-index="index">
   @if (extent.end === undefined) {
     <div class="border rounded-lg px-4 pb-4">

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

@@ -98,6 +98,12 @@
         [recordKind]="recordKind"
       ></gn-ui-form-field-update-frequency>
     </ng-container>
+    <ng-container *ngSwitchCase="'associatedRecords'">
+      <gn-ui-form-field-associated-records
+        [value]="valueAsAssociatedRecords"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-associated-records>
+    </ng-container>
     <ng-container *ngSwitchCase="'temporalExtents'">
       <gn-ui-form-field-temporal-extents
         [value]="valueAsTemporalExtents"

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

@@ -11,6 +11,7 @@ import {
 } from '@angular/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import {
+  AssociatedRecord,
   CatalogRecordKeys,
   Constraint,
   DatasetTemporalExtent,
@@ -39,6 +40,7 @@ import {
   FormFieldComponentName,
   FormFieldConfig,
 } from '../../../models'
+import { FormFieldAssociatedRecordsComponent } from './form-field-associated-records/form-field-associated-records.component'
 import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
 import { FormFieldContactsComponent } from './form-field-contacts/form-field-contacts.component'
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
@@ -70,6 +72,7 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldLicenseComponent,
     FormFieldDateComponent,
     FormFieldUpdateFrequencyComponent,
+    FormFieldAssociatedRecordsComponent,
     FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
@@ -140,6 +143,9 @@ export class FormFieldComponent {
   get valueAsUpdateFrequency() {
     return this.value as UpdateFrequency
   }
+  get valueAsAssociatedRecords() {
+    return this.value as Array<AssociatedRecord>
+  }
   get valueAsTemporalExtents() {
     return this.value as Array<DatasetTemporalExtent>
   }

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

@@ -134,6 +134,11 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
               },
               hidden: '${record.kind == "service"}',
             },
+            {
+              model: 'associatedRecords',
+              formFieldConfig: {},
+              hidden: '${record.kind == "service"}',
+            },
           ],
         },
 

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

@@ -10,4 +10,3 @@ 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/geocoding/geocoding.component'

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

@@ -5,6 +5,7 @@
         (fileChange)="handleFileChange($event)"
         [accept]="acceptedMimeType.join(',')"
         [placeholder]="'map.addFromFile.placeholder' | translate"
+        textClass="text-gray-900 pl-2 py-2"
         class="placeholder-grey"
       ></gn-ui-drag-and-drop-file-input>
     </div>

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

@@ -2,18 +2,11 @@ import { NgModule } from '@angular/core'
 import { StoreModule } from '@ngrx/store'
 import * as fromMap from './+state/map.reducer'
 import { MapFacade } from './+state/map.facade'
-import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
 
 @NgModule({
   imports: [
     StoreModule.forFeature(fromMap.MAP_FEATURE_KEY, fromMap.mapReducer),
   ],
-  providers: [
-    MapFacade,
-    {
-      provide: GEOCODING_PROVIDER,
-      useValue: ['geonames', { maxRows: 5 }] as GeocodingProvider,
-    },
-  ],
+  providers: [MapFacade],
 })
 export class FeatureMapModule {}

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/record/src/lib/state/mdview.actions.ts

@@ -3,6 +3,7 @@ import { createAction, props } from '@ngrx/store'
 import {
   CatalogRecord,
   DatasetFeatureCatalog,
+  LinkedRecord,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -54,14 +55,9 @@ export const setRelated = createAction(
   props<{ related: CatalogRecord[] }>()
 )
 
-export const setSources = createAction(
-  '[Metadata view] Set sources',
-  props<{ sources: CatalogRecord[] }>()
-)
-
-export const setSourceOf = createAction(
-  '[Metadata view] Set has sources',
-  props<{ sourceOf: CatalogRecord[] }>()
+export const setLinkedRecords = createAction(
+  '[Metadata view] Set associated records',
+  props<{ linkedRecords: LinkedRecord[] }>()
 )
 
 /*

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

@@ -70,25 +70,16 @@ export class MdViewEffects {
     )
   )
 
-  loadSources$ = createEffect(() =>
+  loadLinkedRecords$ = createEffect(() =>
     this.actions$.pipe(
       ofType(MdViewActions.loadFullMetadataSuccess),
-      switchMap(({ full }) => this.recordsRepository.getSources(full)),
-      map((sources) => {
-        return MdViewActions.setSources({ sources })
+      switchMap(({ full }) => this.recordsRepository.getLinkedRecords(full)),
+      map((linkedRecords) => {
+        return MdViewActions.setLinkedRecords({ linkedRecords })
       }),
-      catchError(() => of(MdViewActions.setSources({ sources: null })))
-    )
-  )
-
-  loadSourceOf$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(MdViewActions.loadFullMetadataSuccess),
-      switchMap(({ full }) => this.recordsRepository.getSourceOf(full)),
-      map((sourceOf) => {
-        return MdViewActions.setSourceOf({ sourceOf })
-      }),
-      catchError(() => of(MdViewActions.setSourceOf({ sourceOf: null })))
+      catchError(() =>
+        of(MdViewActions.setLinkedRecords({ linkedRecords: null }))
+      )
     )
   )
 

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

@@ -74,9 +74,7 @@ export class MdViewFacade {
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))
 
-  sources$ = this.store.pipe(select(MdViewSelectors.getSources))
-
-  sourceOf$ = this.store.pipe(select(MdViewSelectors.getSourceOf))
+  linkedRecords$ = this.store.pipe(select(MdViewSelectors.getLinkedRecords))
 
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 

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

@@ -4,6 +4,7 @@ import { DatavizChartConfigModel } from '../../../../../../libs/common/domain/sr
 import {
   CatalogRecord,
   DatasetFeatureCatalog,
+  LinkedRecord,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -14,8 +15,7 @@ export interface MetadataViewState {
   error: { notFound?: boolean; otherError?: string } | null
   metadata?: Partial<CatalogRecord>
   related?: CatalogRecord[]
-  sources?: CatalogRecord[]
-  sourceOf?: CatalogRecord[]
+  linkedRecords?: LinkedRecord[]
   userFeedbacks?: UserFeedback[]
   allUserFeedbacksLoading: boolean
   addUserFeedbackLoading: boolean
@@ -77,14 +77,9 @@ const metadataViewReducer = createReducer(
     related,
   })),
 
-  on(MetadataViewActions.setSources, (state, { sources }) => ({
+  on(MetadataViewActions.setLinkedRecords, (state, { linkedRecords }) => ({
     ...state,
-    sources,
-  })),
-
-  on(MetadataViewActions.setSourceOf, (state, { sourceOf }) => ({
-    ...state,
-    sourceOf,
+    linkedRecords,
   })),
 
   /*

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

@@ -41,14 +41,9 @@ export const getRelated = createSelector(
   (state: MetadataViewState) => state.related
 )
 
-export const getSources = createSelector(
+export const getLinkedRecords = createSelector(
   getMdViewState,
-  (state: MetadataViewState) => state.sources
-)
-
-export const getSourceOf = createSelector(
-  getMdViewState,
-  (state: MetadataViewState) => state.sourceOf
+  (state: MetadataViewState) => state.linkedRecords
 )
 /*
   Metadata selectors

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

@@ -62,6 +62,6 @@ export class RouterService {
   }
 
   getDefaultSort(): SortByField {
-    return SortByEnum.RESOURCE_DATES
+    return SortByEnum.RESOURCE_DATE
   }
 }

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,19 @@
 @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-spatial-extent-dropdown>
 } @else {
   <gn-ui-dropdown-multiselect
     class="w-full"

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

@@ -9,6 +9,8 @@ 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 +24,10 @@ 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 { TranslateService } from '@ngx-translate/core'
+import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -33,18 +39,23 @@ import { CommonModule } from '@angular/common'
     CommonModule,
     DateRangeDropdownComponent,
     DropdownMultiselectComponent,
+    SpatialExtentDropdownComponent,
   ],
 })
 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
 
+  spatialExtentMaxFileSize =
+    getOptionalSearchConfig()?.SPATIAL_EXTENT_MAX_FILE_SIZE
+
   fieldType: FieldType
-  dateRange: DateRange
   choices$: Observable<Choice[]>
   selected$ = this.searchFacade.searchFilters$.pipe(
     switchMap((filters) =>
@@ -57,15 +68,54 @@ 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()
+  }
+
+  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 +130,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/{map/src/lib → search/src/lib/geocoding}/geocoding.service.ts

@@ -5,22 +5,31 @@ import {
   GeocodingResult,
   queryGeonames,
   GeonamesOptions,
-  DataGouvFrOptions,
-  queryDataGouvFr,
+  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 DataGouvFrGeocodingProvider = ['data-gouv-fr', DataGouvFrOptions]
+type GeoplateformeGeocodingProvider = ['geoplateforme', GeoplateformeOptions]
 export type GeocodingProvider =
   | GeoadminGeocodingProvider
   | GeonamesGeocodingProvider
-  | DataGouvFrGeocodingProvider
+  | GeoplateformeGeocodingProvider
+
+export const DEFAULT_GEOCODING_PROVIDER = [
+  'geonames',
+  { maxRows: 5 },
+] as GeocodingProvider
 
 export const GEOCODING_PROVIDER = new InjectionToken<GeocodingProvider>(
-  'geocoding-provider'
+  'geocoding-provider',
+  {
+    providedIn: 'root',
+    factory: (): GeocodingProvider => DEFAULT_GEOCODING_PROVIDER,
+  }
 )
 
 @Injectable({
@@ -42,9 +51,9 @@ export class GeocodingService {
           queryGeonames(text, this.provider[1] as GeonamesOptions)
         )
         break
-      case 'data-gouv-fr':
+      case 'geoplateforme':
         queryObservable = from(
-          queryDataGouvFr(text, this.provider[1] as DataGouvFrOptions)
+          queryGeoplateforme(text, this.provider[1] as GeoplateformeOptions)
         )
         break
       default:

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

@@ -0,0 +1,8 @@
+<gn-ui-autocomplete
+  [action]="searchAction"
+  [displayWithFn]="displayWithFn"
+  [placeholder]="placeholder"
+  [displayWithTemplate]="displayWithTemplate"
+  (itemSelected)="handleItemSelected($event)"
+>
+</gn-ui-autocomplete>

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

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { Observable } from 'rxjs'
+import { GeocodingResult } from '@geospatial-sdk/geocoding'
+import {
+  AutocompleteComponent,
+  AutocompleteItem,
+} from '../../../../../../libs/ui/inputs/src'
+import { GeocodingService } from '../geocoding/geocoding.service'
+
+@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)
+
+  @Input() placeholder = ''
+  @Input() displayWithTemplate?: TemplateRef<{ $implicit: GeocodingResult }>
+  @Output() resultSelected = new EventEmitter<GeocodingResult>()
+
+  displayWithFn = (item: AutocompleteItem) => (item as GeocodingResult).label
+
+  searchAction = (text: string): Observable<AutocompleteItem[]> =>
+    this.geocodingService.query(text)
+
+  handleItemSelected(item: AutocompleteItem) {
+    this.resultSelected.emit(item as GeocodingResult)
+  }
+}