geonetwork-ui 2.7.0-dev.21bdf506c → 2.7.0-dev.228db3e1a

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -53,7 +53,7 @@ import {
 import { readKind } from './read-parts'
 import { writeGeometry } from './utils/geometry'
 import { namePartsToFull } from './utils/individual-name'
-import { getLang3FromLang2 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
+import { toLang3 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
 import { kindToCodeListValue } from '../common/resource-types'
 
 function writeLocalizedElement(
@@ -183,6 +183,10 @@ export function getProgressCode(status: RecordStatus): string {
       return 'removed'
     case 'under_development':
       return 'underDevelopment'
+    case 'planned':
+      return 'planned'
+    case 'required':
+      return 'required'
     default:
       throw new Error(
         `Could not determine progress code from status: ${status}`
@@ -1472,7 +1476,7 @@ export function writeLanguages(record: DatasetRecord, rootEl: XmlElement) {
       writeAttribute('id', lang.toUpperCase()),
       createNestedChild('gmd:languageCode', 'gmd:LanguageCode'),
       writeAttribute('codeList', 'http://www.loc.gov/standards/iso639-2/'),
-      writeAttribute('codeListValue', getLang3FromLang2(lang) ?? lang)
+      writeAttribute('codeListValue', toLang3(lang) ?? lang)
     )
 
   // add new languages (only if other than default one)
@@ -1486,7 +1490,7 @@ export function writeDefaultLanguage(
   record: DatasetRecord,
   rootEl: XmlElement
 ) {
-  const lang3 = getLang3FromLang2(record.defaultLanguage.toLowerCase())
+  const lang3 = toLang3(record.defaultLanguage.toLowerCase())
   return pipe(
     findNestedChildOrCreate('gmd:language', 'gmd:LanguageCode'),
     writeAttribute('codeList', 'http://www.loc.gov/standards/iso639-2/'),

package/src/libs/api/repository/src/index.ts

@@ -1,3 +1,3 @@
-export * from './lib/metadata-language'
+export * from './lib/metadata-language.token'
 export * from './lib/repository-url'
 export * from './lib/gn4'

package/src/libs/api/repository/src/lib/gn4/auth/auth.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken, Optional } from '@angular/core'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang2, toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
 import { Location } from '@angular/common'
 
@@ -35,8 +35,8 @@ export class AuthService {
         '${current_url}',
         new URL(this.location.path(), window.location.href).toString()
       )
-      .replace('${lang2}', this.translateService.currentLang)
-      .replace('${lang3}', getLang3FromLang2(this.translateService.currentLang))
+      .replace('${lang2}', toLang2(this.translateService.currentLang))
+      .replace('${lang3}', toLang3(this.translateService.currentLang))
   }
 
   get logoutUrl() {
@@ -46,7 +46,7 @@ export class AuthService {
   get settingsUrl() {
     return this.baseSettingsUrl.replace(
       '${lang3}',
-      getLang3FromLang2(this.translateService.currentLang)
+      toLang3(this.translateService.currentLang)
     )
   }
 

package/src/libs/api/repository/src/lib/gn4/elasticsearch/constant.ts

@@ -10,14 +10,12 @@ export const ES_SOURCE_SUMMARY = [
   'codelist_status_text',
   'link',
   'linkProtocol',
-  'contactForResource.organisation',
-  'contact.organisation',
-  'contact.email',
+  'contactForResource*.organisation*',
+  'contact*.organisation*',
+  'contact*.email',
   'userSavedCount',
-  'updateFrequency',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
-  'tag',
   'MD_LegalConstraints*Object',
   'qualityScore',
   'allKeywords',

package/src/libs/api/repository/src/lib/gn4/elasticsearch/elasticsearch.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Injector } from '@angular/core'
-import { Geometry } from 'geojson'
+import type { Geometry } from 'geojson'
 import {
   ES_QUERY_FIELDS_PRIORITY,
   ES_SOURCE_SUMMARY,
@@ -15,7 +15,7 @@ import {
   FiltersAggregationParams,
   SortByField,
 } from '../../../../../../../libs/common/domain/src/lib/model/search'
-import { METADATA_LANGUAGE } from '../../metadata-language'
+import { METADATA_LANGUAGE } from '../../metadata-language.token'
 import {
   AggregationResult,
   EsSearchParams,
@@ -26,10 +26,16 @@ import {
   SortParams,
   TermsAggregationResult,
 } from '../../../../../../../libs/api/metadata-converter/src'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { formatDate, isDateRange } from './date-range.utils'
-import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  LanguageCode,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateService } from '@ngx-translate/core'
+import { getGeometryBoundingBox } from '../../../../../../../libs/util/shared/src'
+import { getLength as getGeodesicLength } from 'ol/sphere'
+import { LineString } from 'ol/geom'
 
 export type DateRange = { start?: Date; end?: Date }
 
@@ -42,11 +48,9 @@ export class ElasticsearchService {
   private runtimeFields: Record<string, string> = {}
 
   // we're using getters in case the defined languages change over time
-  private get lang3() {
-    return getLang3FromLang2(this.translateService.currentLang)
-  }
-  private get metadataLang() {
-    return this.injector.get(METADATA_LANGUAGE, null)
+  private get metadataLang(): LanguageCode {
+    const mdLangValue = this.injector.get(METADATA_LANGUAGE, null)
+    return typeof mdLangValue === 'function' ? mdLangValue() : mdLangValue
   }
 
   constructor(
@@ -230,9 +234,12 @@ export class ElasticsearchService {
 
   private getQueryLang(): string {
     if (this.metadataLang) {
-      return this.isCurrentSearchLang()
-        ? `lang${this.lang3}`
-        : `lang${this.metadataLang}`
+      const lang3 = toLang3(
+        this.isCurrentSearchLang()
+          ? this.translateService.currentLang
+          : this.metadataLang
+      )
+      return `lang${lang3}`
     } else return '*'
   }
   private isCurrentSearchLang() {
@@ -351,6 +358,11 @@ export class ElasticsearchService {
       })
     }
     if (geometry) {
+      // boosts applied using the filter geometry:
+      // * records completely within the geometry receive a boost of 5
+      // * records intersecting the geometry receive a boost of 2
+      // * records close to the geometry center receive a boost of 5 (based on the `location` field)
+      // * records on the outskirt of the geometry receive a boost of 2.5
       should.push(
         {
           geo_shape: {
@@ -358,7 +370,7 @@ export class ElasticsearchService {
               shape: geometry,
               relation: 'within',
             },
-            boost: 10.0,
+            boost: 5.0,
           },
         },
         {
@@ -367,10 +379,49 @@ export class ElasticsearchService {
               shape: geometry,
               relation: 'intersects',
             },
-            boost: 7.0,
+            boost: 2.0,
           },
         }
       )
+
+      // this will boost the results variably depending on their distance from the given geometry
+      // note: this takes into account the `location` field of a record; this is generally the center of all spatial extents
+      // combined, and thus the actual size/coverage of the record spatial extent isn't relevant here
+      const bbox = getGeometryBoundingBox(geometry)
+      const center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2]
+      const northToCenter = new LineString([
+        [center[0], bbox[3]],
+        center,
+      ]).transform('EPSG:4326', 'EPSG:3857')
+      const southToCenter = new LineString([
+        [center[0], bbox[1]],
+        center,
+      ]).transform('EPSG:4326', 'EPSG:3857')
+      const westToCenter = new LineString([
+        [bbox[0], center[1]],
+        center,
+      ]).transform('EPSG:4326', 'EPSG:3857')
+      const eastToCenter = new LineString([
+        [bbox[2], center[1]],
+        center,
+      ]).transform('EPSG:4326', 'EPSG:3857')
+      // cutoff distance is the distance from where the boost will only be half of the max value
+      // it is an average of the "size" of the bounding box in every direction, in meters
+      const cutoffDistance =
+        (getGeodesicLength(northToCenter) +
+          getGeodesicLength(southToCenter) +
+          getGeodesicLength(westToCenter) +
+          getGeodesicLength(eastToCenter)) /
+        4
+
+      should.push({
+        distance_feature: {
+          field: 'location',
+          pivot: `${Math.round(cutoffDistance).toFixed(0)}m`,
+          origin: center,
+          boost: 5.0,
+        },
+      })
     }
 
     return {

package/src/libs/api/repository/src/lib/gn4/gn4-repository.ts

@@ -48,7 +48,7 @@ import {
 import { catchError, map, tap } from 'rxjs/operators'
 import { lt } from 'semver'
 import { ElasticsearchService } from './elasticsearch'
-import { getLang2FromLang3 } from '../../../../../../libs/util/i18n/src'
+import { toLang2 } from '../../../../../../libs/util/i18n/src'
 import { Gn4SettingsService } from './settings/gn4-settings.service'
 
 const minPublicationApiVersion = '4.2.5'
@@ -562,7 +562,7 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       .pipe(
         map((languages) =>
           languages
-            .map((lang) => getLang2FromLang3(lang.id))
+            .map((lang) => toLang2(lang.id))
             .filter((code): code is string => !!code)
         )
       )

package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-groups.service.ts

@@ -7,7 +7,7 @@ import {
 import { forkJoin, Observable, of } from 'rxjs'
 import { map, shareReplay } from 'rxjs/operators'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { FieldFilters } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import {
   CatalogRecord,
@@ -52,7 +52,7 @@ export class OrganizationsFromGroupsService
   organisationsCount$ = this.organisations$.pipe(map((orgs) => orgs.length))
 
   private get lang3() {
-    return getLang3FromLang2(this.translateService.currentLang)
+    return toLang3(this.translateService.currentLang)
   }
 
   constructor(

package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-metadata.service.ts

@@ -33,7 +33,7 @@ import {
   tap,
   withLatestFrom,
 } from 'rxjs/operators'
-import { getLocalizedIndexKey } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { coerce, satisfies, valid } from 'semver'
 import { TranslateService } from '@ngx-translate/core'
@@ -126,7 +126,7 @@ export class OrganizationsFromMetadataService
   ) {}
 
   private get langIndex() {
-    return getLocalizedIndexKey(this.translateService.currentLang)
+    return `lang${toLang3(this.translateService.currentLang)}`
   }
 
   equalsNormalizedStrings(

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -45,8 +45,7 @@ import {
   throwError,
 } from 'rxjs'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
-import { DatavizConfigModel } from '../../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 
 const minApiVersion = '4.2.2'
 
@@ -56,6 +55,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
   private readonly me$: Observable<UserModel>
   private readonly users$: Observable<UserModel[]>
   private readonly isUserAnonymous$: Observable<boolean>
+  private readonly gnParseVersion = '4.2.5'
 
   private keyTranslations$ = this.toolsApiService
     .getTranslationsPackage1('gnui')
@@ -98,7 +98,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
   private keywordsByThesauri: Record<string, Observable<Keyword[]>> = {}
 
   private get lang3() {
-    return getLang3FromLang2(this.translateService.currentLang)
+    return toLang3(this.translateService.currentLang)
   }
 
   constructor(
@@ -390,22 +390,35 @@ export class Gn4PlatformService implements PlatformServiceInterface {
         })
       )
   }
-
   getFileContent(url: URL | string): Observable<any> {
-    return this.httpClient.get(url.toString(), { responseType: 'text' }).pipe(
-      map((text) => {
+    return combineLatest([
+      this.httpClient.get(url.toString(), { responseType: 'text' }),
+      this.getApiVersion(),
+    ]).pipe(
+      map(([text, version]) => {
         const parsed = JSON.parse(text)
 
-        if (typeof parsed === 'object') {
+        if (version > this.gnParseVersion) {
           return parsed
         }
 
-        const decoded = atob(parsed)
+        const decoded = this.decodeBase64(parsed)
         return JSON.parse(decoded)
       })
     )
   }
 
+  decodeBase64(base64) {
+    const text = atob(base64)
+    const length = text.length
+    const bytes = new Uint8Array(length)
+    for (let i = 0; i < length; i++) {
+      bytes[i] = text.charCodeAt(i)
+    }
+    const decoder = new TextDecoder()
+    return decoder.decode(bytes)
+  }
+
   attachFileToRecord(
     recordUuid: string,
     file: File,

package/src/libs/api/repository/src/lib/metadata-language.token.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core'
+import { LanguageCode } from '../../../../../libs/common/domain/src/lib/model/record'
+
+export type LanguageCodeFactory = () => LanguageCode
+
+export const METADATA_LANGUAGE = new InjectionToken<
+  LanguageCode | LanguageCodeFactory
+>('metadata-language')

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -69,6 +69,8 @@ marker('domain.record.status.ongoing')
 marker('domain.record.status.under_development')
 marker('domain.record.status.deprecated')
 marker('domain.record.status.removed')
+marker('domain.record.status.planned')
+marker('domain.record.status.required')
 
 export const RecordStatusValues = [
   'completed',
@@ -76,6 +78,8 @@ export const RecordStatusValues = [
   'under_development',
   'deprecated',
   'removed',
+  'planned',
+  'required',
 ]
 export type RecordStatus = (typeof RecordStatusValues)[number]
 
@@ -104,6 +108,11 @@ export interface Keyword {
   translations?: KeywordTranslations
 }
 
+export interface INSPIRE_theme {
+  value: string
+  label: string
+}
+
 export interface BaseRecord {
   uniqueIdentifier: Uuid
   ownerOrganization: Organization
@@ -156,6 +165,17 @@ export type ServiceProtocol =
   | 'maplibre-style'
   | 'other'
 
+marker('record.metadata.api.accessServiceProtocol.wms')
+marker('record.metadata.api.accessServiceProtocol.wfs')
+marker('record.metadata.api.accessServiceProtocol.wps')
+marker('record.metadata.api.accessServiceProtocol.wmts')
+marker('record.metadata.api.accessServiceProtocol.esriRest')
+marker('record.metadata.api.accessServiceProtocol.ogcFeatures')
+marker('record.metadata.api.accessServiceProtocol.GPFDL')
+marker('record.metadata.api.accessServiceProtocol.tms')
+marker('record.metadata.api.accessServiceProtocol.maplibre-style')
+marker('record.metadata.api.accessServiceProtocol.other')
+
 export type OnlineResourceType = 'service' | 'download' | 'link' | 'endpoint'
 
 export interface DatasetServiceDistribution {

package/src/libs/common/fixtures/src/lib/editor/editor.fixtures.ts

@@ -127,9 +127,6 @@ export const editorFieldSpatialExtentsFixture = () => ({
 export const editorFieldKeywordsFixture = () => ({
   model: 'keywords',
   hidden: false,
-  formFieldConfig: {
-    labelKey: 'editor.record.form.field.keywords',
-  },
 })
 
 export const editorFieldUniqueIdentifierFixture = () => ({

package/src/libs/feature/catalog/src/lib/sources/sources.service.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs'
 import { filter, map, shareReplay } from 'rxjs/operators'
 import { CatalogSource } from './sources.model'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../libs/util/i18n/src'
 
 @Injectable({
   providedIn: 'root',
@@ -23,10 +23,7 @@ export class SourcesService {
     return this.sources$.pipe(
       map((sources) => sources.filter((source) => source.uuid === uuid)[0]),
       filter((source) => !!source),
-      map(
-        (source) =>
-          source.label[getLang3FromLang2(this.translateService.currentLang)]
-      )
+      map((source) => source.label[toLang3(this.translateService.currentLang)])
     )
   }
 }

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -237,7 +237,9 @@ export class DataService {
     tmsLink: DatasetServiceDistribution,
     keepOriginalLink = false
   ): Promise<DatasetServiceDistribution[]> {
-    const endpoint = new TmsEndpoint(tmsLink.url.toString())
+    const endpoint = new TmsEndpoint(
+      tmsLink.url.toString().replace(/\/?$/, `/${tmsLink.name}`)
+    )
     const tileMaps = await endpoint.allTileMaps.catch(() => {
       throw new Error(`ogc.unreachable.unknown`)
     })

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

@@ -9,3 +9,4 @@ export * from './lib/components/import-record/import-record.component'
 export * from './lib/components/record-form/record-form.component'
 export * from './lib/components/record-form/form-field'
 export * from './lib/components/multilingual-panel/multilingual-panel.component'
+export * from './lib/components/metadata-quality-panel/metadata-quality-panel.component'

package/src/libs/feature/editor/src/lib/components/metadata-quality-panel/metadata-quality-panel.component.html

@@ -0,0 +1,37 @@
+<div
+  class="flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-3 overflow-auto"
+  style="background-color: #fafaf9"
+>
+  <div class="flex flex-row px-2 justify-between">
+    <span class="text-3xl font-title text-black/80" translate
+      >editor.record.form.metadataQuality.title</span
+    >
+  </div>
+  <div
+    *ngFor="let properties of propertiesByPage; let i = index"
+    class="flex flex-col gap-2"
+  >
+    <gn-ui-button
+      *ngFor="let property of properties"
+      [extraClass]="getExtraClass(property.value)"
+      type="outline"
+      attr.data-cy="md-quality-btn-{{ property.label }}"
+    >
+      <span>{{ property.label | translate }}</span>
+      <div class="flex flex-row gap-2 items-center">
+        <ng-icon
+          *ngIf="property.value; else notChecked"
+          class="text-primary"
+          name="iconoirBadgeCheck"
+        ></ng-icon>
+        <ng-template #notChecked>
+          <ng-icon class="text-neutral-300" name="iconoirSystemShut"></ng-icon>
+        </ng-template>
+      </div>
+    </gn-ui-button>
+    <hr
+      *ngIf="i !== propertiesByPage.length - 1"
+      class="border-gray-300 w-11/12 mx-auto"
+    />
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/metadata-quality-panel/metadata-quality-panel.component.ts

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, OnChanges } from '@angular/core'
+import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  getAllKeysValidator,
+  getQualityValidators,
+  ValidatorMapperKeys,
+} from '../../../../../../../libs/util/shared/src'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirBadgeCheck, iconoirSystemShut } from '@ng-icons/iconoir'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { EditorConfig } from '../../models'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+//forced translations that are not available in fields.config.ts
+marker('editor.record.form.field.keywords')
+marker('editor.record.form.field.topics')
+marker('editor.record.form.field.contacts')
+marker('editor.record.form.field.organisation')
+@Component({
+  selector: 'gn-ui-metadata-quality-panel',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateDirective,
+    TranslatePipe,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSystemShut,
+      iconoirBadgeCheck,
+    }),
+    provideNgIconsConfig({
+      size: '1.25em',
+    }),
+  ],
+  templateUrl: './metadata-quality-panel.component.html',
+  styleUrl: './metadata-quality-panel.component.css',
+})
+export class MetadataQualityPanelComponent implements OnChanges {
+  propsToValidate: ValidatorMapperKeys[] = getAllKeysValidator()
+  propertiesByPage: { label: string; value: boolean }[][] = []
+  @Input() editorConfig: EditorConfig
+  @Input() record: CatalogRecord
+
+  ngOnChanges() {
+    if (this.editorConfig && this.record) {
+      const fieldsByPage = this.editorConfig.pages.map((page) =>
+        page.sections.flatMap((section) =>
+          section.fields
+            .filter((field) => this.propsToValidate.includes(field.model))
+            .map((field) => field.model as ValidatorMapperKeys)
+        )
+      )
+      // FIXME: temporarily add topics and organisation to the first and third page
+      // as long as they are not handled by the editor
+      if (fieldsByPage.length > 0) {
+        fieldsByPage[0].includes('topics') || fieldsByPage[0].push('topics')
+        fieldsByPage[2].includes('organisation') ||
+          fieldsByPage[2].push('organisation')
+      }
+      this.propertiesByPage = fieldsByPage
+        .map((fields) =>
+          getQualityValidators(
+            this.record,
+            fields as ValidatorMapperKeys[]
+          ).map(({ name, validator }) => ({
+            label: `editor.record.form.field.${name}`, // use same translations as in fields.config.ts
+            value: validator(),
+          }))
+        )
+        .filter((arr) => arr.length > 0)
+    }
+  }
+
+  getExtraClass(checked: boolean): string {
+    const baseClasses =
+      'flex flex-row justify-between rounded mb-1 h-[34px] w-full focus:ring-0 hover:border-none border-none hover:text-black text-black cursor-default'
+    return checked
+      ? `${baseClasses} bg-neutral-100 hover:bg-neutral-100`
+      : `${baseClasses} bg-transparent hover:bg-transparent`
+  }
+}

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.html

@@ -1,5 +1,6 @@
 <div
-  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+  class="flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+  style="background-color: #fafaf9"
 >
   <div class="flex flex-row px-2 justify-between">
     <span class="text-3xl font-title text-black/80" translate

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

@@ -0,0 +1,20 @@
+<div class="flex flex-col gap-3">
+  <div class="flex flex-col gap-4">
+    <gn-ui-autocomplete
+      [placeholder]="'editor.record.form.inspire.placeholder' | translate"
+      [displayWithFn]="displayWithFn"
+      [action]="autoCompleteAction"
+      (itemSelected)="handleItemSelection($event)"
+      [minCharacterCount]="1"
+      [clearOnSelection]="true"
+    ></gn-ui-autocomplete>
+    <div class="flex gap-2 flex-wrap">
+      <gn-ui-badge
+        *ngFor="let theme of themes"
+        [removable]="true"
+        (badgeRemoveClicked)="removeTheme(theme)"
+        >{{ getTranslatedTheme(theme) }}
+      </gn-ui-badge>
+    </div>
+  </div>
+</div>