geonetwork-ui 2.10.0-dev.91673b3ba → 2.10.0-dev.981f59a75

package/src/libs/feature/editor/src/lib/components/contact-details/contact-details-form.component.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  Individual,
+  Organization,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { TextInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-contact-details-form',
+  templateUrl: './contact-details-form.component.html',
+  styleUrls: ['./contact-details-form.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TextInputComponent, TranslateDirective, TranslatePipe],
+})
+export class ContactDetailsFormComponent {
+  @Input() contact: Individual
+  @Output() contactChange = new EventEmitter<Individual>()
+
+  emitContactChange() {
+    this.contactChange.emit(this.contact)
+  }
+
+  handleOrganizationChange(change: Partial<Organization>) {
+    this.contact.organization = {
+      ...(this.contact.organization ?? ({} as Organization)),
+      ...change,
+    } as Organization
+
+    this.emitContactChange()
+  }
+}

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -11,20 +11,11 @@
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     @for (keyword of keywords; track keyword) {
-      <gn-ui-badge
-        [removable]="true"
-        (badgeRemoveClicked)="removeKeyword(keyword)"
-        >{{ keyword.label }}
-        @if (isPlaceWithoutExtent(keyword)) {
-          <ng-icon
-            [title]="
-              'editor.record.form.keywords.place.withoutExtent' | translate
-            "
-            class="badge-warning"
-            name="matWarningAmberOutline"
-          ></ng-icon>
-        }
-      </gn-ui-badge>
+      <gn-ui-keyword-badge
+        [keyword]="keyword"
+        [editable]="true"
+        (keywordRemove)="removeKeyword($event)"
+      ></gn-ui-keyword-badge>
     }
   </div>
 </div>

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -7,40 +7,20 @@ import {
   inject,
 } from '@angular/core'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { AutocompleteComponent, BadgeComponent } from '../../../../../../../libs/ui/inputs/src'
+import { AutocompleteComponent } from '../../../../../../../libs/ui/inputs/src'
+import { KeywordBadgeComponent } from '../../../../../../../libs/ui/elements/src'
 import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
-import { TranslatePipe } from '@ngx-translate/core'
-import {
-  NgIconComponent,
-  provideIcons,
-  provideNgIconsConfig,
-} from '@ng-icons/core'
-import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
 
 type AutocompleteItem = { title: string; value: Keyword }
 
 @Component({
   selector: 'gn-ui-generic-keywords',
   templateUrl: './generic-keywords.component.html',
-  styleUrls: ['./generic-keywords.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    AutocompleteComponent,
-    NgIconComponent,
-    BadgeComponent,
-    TranslatePipe,
-  ],
-  providers: [
-    provideIcons({
-      matWarningAmberOutline,
-    }),
-    provideNgIconsConfig({
-      size: '1.5em',
-    }),
-  ],
+  imports: [AutocompleteComponent, KeywordBadgeComponent],
 })
 export class GenericKeywordsComponent {
   private platformService = inject(PlatformServiceInterface)
@@ -87,9 +67,4 @@ export class GenericKeywordsComponent {
     this.changedKeywords.emit(this.keywords)
     this.deletedKeyword.emit(keyword)
   }
-
-  isPlaceWithoutExtent(keyword: Keyword): boolean {
-    if (keyword.type !== 'place') return false
-    return !keyword.bbox
-  }
 }

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

@@ -7,11 +7,26 @@
       >editor.record.form.metadataQuality.title</span
     >
   </div>
-  @for (properties of propertiesByPage; track properties; let i = $index) {
+  @for (
+    properties of (propertiesByPage$ | async) ?? [];
+    track properties;
+    let isLast = $last
+  ) {
     <div class="flex flex-col gap-2">
       @for (property of properties; track property) {
         <gn-ui-button
-          [extraClass]="getExtraClass(property.value)"
+          style="
+            --gn-ui-button-justify: space-between;
+            --gn-ui-button-height: 34px;
+            --gn-ui-button-width: 100%;
+            --gn-ui-button-border-width: 0;
+            --gn-ui-button-color: black;
+            --gn-ui-button-background: transparent;
+            --gn-ui-button-bg-hover: #f3f4f6;
+            --gn-ui-button-disabled-opacity: 1;
+          "
+          [disabled]="property.value"
+          (buttonClick)="onCriterionClick(property)"
           type="outline"
           attr.data-cy="md-quality-btn-{{ property.label }}"
         >
@@ -28,7 +43,7 @@
           </div>
         </gn-ui-button>
       }
-      @if (i !== propertiesByPage.length - 1) {
+      @if (!isLast) {
         <hr class="border-gray-300 w-11/12 mx-auto" />
       }
     </div>

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

@@ -1,5 +1,5 @@
-import { Component, Input, OnChanges } from '@angular/core'
-import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { Component, inject } from '@angular/core'
+import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
 import {
   getAllKeysValidator,
@@ -13,8 +13,10 @@ import {
 } 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'
+import { EditorFacade } from '../../+state/editor.facade'
+import { combineLatest, map } from 'rxjs'
+import { AsyncPipe } from '@angular/common'
 
 //forced translations that are not available in fields.config.ts
 marker('editor.record.form.field.keywords')
@@ -29,6 +31,7 @@ marker('editor.record.form.field.organisation')
     TranslatePipe,
     ButtonComponent,
     NgIconComponent,
+    AsyncPipe,
   ],
   providers: [
     provideIcons({
@@ -42,47 +45,37 @@ marker('editor.record.form.field.organisation')
   templateUrl: './metadata-quality-panel.component.html',
   styleUrl: './metadata-quality-panel.component.css',
 })
-export class MetadataQualityPanelComponent implements OnChanges {
+export class MetadataQualityPanelComponent {
+  facade = inject(EditorFacade)
   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(),
-          }))
+  propertiesByPage$ = combineLatest([
+    this.facade.editorConfig$,
+    this.facade.record$,
+  ]).pipe(
+    map(([editorConfig, record]) => {
+      if (!editorConfig || !record) return []
+      const validators = getQualityValidators(record, this.propsToValidate)
+      return editorConfig.pages
+        .map((page) =>
+          page.sections
+            .flatMap((section) => section.fields)
+            .flatMap(({ model }) =>
+              validators.filter((v) => (v.alias ?? v.name) === model)
+            )
+            .map(({ name, validator, alias }) => ({
+              label: `editor.record.form.field.${name}`,
+              value: validator(),
+              model: (alias ?? name) as CatalogRecordKeys,
+            }))
         )
         .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`
+  onCriterionClick(property: { value: boolean; model: CatalogRecordKeys }) {
+    if (!property.value) {
+      this.facade.setFocusedField(property.model)
+    }
   }
 }

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.html

@@ -3,13 +3,13 @@
     editor.record.form.field.onlineResource.edit.protocol
   </h3>
   @if (protocolHint) {
-    <span
-      class="material-symbols-outlined m-2 gn-ui-icon-small"
+    <ng-icon
+      name="matHelpOutline"
+      size="16"
+      class="m-2"
       [matTooltip]="protocolHint"
       matTooltipPosition="above"
-    >
-      help
-    </span>
+    ></ng-icon>
   }
 </div>
 <div class="flex flex-row items-center gap-4 h-[48px]">

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -30,6 +30,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirRefresh } from '@ng-icons/iconoir'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BehaviorSubject,
@@ -65,7 +66,7 @@ marker(
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirRefresh }),
+    provideIcons({ iconoirRefresh, matHelpOutline }),
     provideNgIconsConfig({
       size: '1.5em',
     }),

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

@@ -0,0 +1,41 @@
+import { Directive, ElementRef, inject, Input } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiFieldFocus]',
+  standalone: true,
+  exportAs: 'fieldFocus',
+})
+export class FieldFocusDirective {
+  @Input() gnUiFieldFocusGlowClass = 'gn-ui-field-focus-glow'
+
+  private el = inject(ElementRef)
+
+  public focusField(focusInnerTarget = true) {
+    setTimeout(() => {
+      const host = this.el.nativeElement as HTMLElement
+      const glowClass = this.gnUiFieldFocusGlowClass
+
+      host.classList.remove(glowClass)
+      void host.offsetWidth
+      host.classList.add(glowClass)
+      host.addEventListener(
+        'animationend',
+        () => host.classList.remove(glowClass),
+        { once: true }
+      )
+
+      host.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      if (!focusInnerTarget) {
+        return
+      }
+      const target =
+        host.querySelector<HTMLElement>(
+          'input, textarea, select, [contenteditable="true"]'
+        ) ??
+        host.querySelector<HTMLElement>(
+          'button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      target?.focus({ preventScroll: true })
+    })
+  }
+}

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

@@ -2,7 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   OnDestroy,
-  OnInit,
+  afterNextRender,
   inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
@@ -67,9 +67,7 @@ export type ConstraintChoice =
   styleUrls: ['./form-field-constraints-shortcuts.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FormFieldConstraintsShortcutsComponent
-  implements OnInit, OnDestroy
-{
+export class FormFieldConstraintsShortcutsComponent implements OnDestroy {
   private editorFacade = inject(EditorFacade)
 
   legalConstraints$ = this.editorFacade.record$.pipe(
@@ -112,37 +110,38 @@ export class FormFieldConstraintsShortcutsComponent
 
   onDestroy$ = new Subject<void>()
 
-  ngOnInit(): void {
-    // hide all constraints if any toggle is activated
-    this.anyToggleActivated$
-      .pipe(takeUntil(this.onDestroy$), distinctUntilChanged())
-      .subscribe((anyToggleActivated) => {
-        if (anyToggleActivated) {
-          this.hideAllConstraintSections()
-        }
-      })
+  constructor() {
+    // Deferred to afterNextRender to avoid dispatching store actions
+    // synchronously during Angular's change detection cycle (NG0100)
+    afterNextRender(() => {
+      this.anyToggleActivated$
+        .pipe(takeUntil(this.onDestroy$), distinctUntilChanged())
+        .subscribe((anyToggleActivated) => {
+          if (anyToggleActivated) {
+            this.hideAllConstraintSections()
+          }
+        })
 
-    // also hide constraints which are empty arrays
-    const hideEmptyConstraints = (
-      constraints$: Observable<Constraint[]>,
-      model: ConstraintChoice
-    ) => {
-      const isConstraintNotEmpty$ = constraints$.pipe(
-        takeUntil(this.onDestroy$),
-        map((c) => c.length > 0),
-        distinctUntilChanged()
-      )
-      combineLatest([
-        isConstraintNotEmpty$,
-        this.anyToggleActivated$,
-      ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
-        const visible = isNotEmpty && !anyToggleActivated
-        this.editorFacade.setFieldVisibility({ model }, visible)
-      })
-    }
-    hideEmptyConstraints(this.legalConstraints$, 'legalConstraints')
-    hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')
-    hideEmptyConstraints(this.otherConstraints$, 'otherConstraints')
+      const hideEmptyConstraints = (
+        constraints$: Observable<Constraint[]>,
+        model: ConstraintChoice
+      ) => {
+        const isConstraintNotEmpty$ = constraints$.pipe(
+          takeUntil(this.onDestroy$),
+          map((c) => c.length > 0),
+          distinctUntilChanged()
+        )
+        combineLatest([isConstraintNotEmpty$, this.anyToggleActivated$])
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe(([isNotEmpty, anyToggleActivated]) => {
+            const visible = isNotEmpty && !anyToggleActivated
+            this.editorFacade.setFieldVisibility({ model }, visible)
+          })
+      }
+      hideEmptyConstraints(this.legalConstraints$, 'legalConstraints')
+      hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')
+      hideEmptyConstraints(this.otherConstraints$, 'otherConstraints')
+    })
   }
 
   ngOnDestroy() {

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

@@ -15,8 +15,15 @@
       (itemsOrderChange)="handleContactsChanged($event)"
       [elementTemplate]="contactTemplate"
     ></gn-ui-sortable-list>
-    <ng-template #contactTemplate let-contact>
-      <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+    <ng-template #contactTemplate let-contact let-index="index">
+      @if (modelSpecifier === 'contact:editableDetails') {
+        <gn-ui-contact-details-form
+          [contact]="contact"
+          (contactChange)="handleContactChanged($event, index)"
+        ></gn-ui-contact-details-form>
+      } @else {
+        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+      }
     </ng-template>
   } @else {
     <div

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

@@ -28,6 +28,7 @@ import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
 import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { ContactDetailsFormComponent } from '../../../contact-details/contact-details-form.component'
 import {
   createFuzzyFilter,
   getIndividualDisplayName,
@@ -35,6 +36,7 @@ import {
 } from '../../../../../../../../../libs/util/shared/src'
 import { map } from 'rxjs/operators'
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
+import { FieldModelSpecifier } from '../../../../models/editor-config.model'
 
 @Component({
   selector: 'gn-ui-form-field-contacts',
@@ -47,6 +49,7 @@ import { SortableListComponent } from '../../../../../../../../../libs/ui/layout
     TranslateDirective,
     TranslatePipe,
     ContactCardComponent,
+    ContactDetailsFormComponent,
     SortableListComponent,
   ],
 })
@@ -56,6 +59,7 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
   private changeDetectorRef = inject(ChangeDetectorRef)
 
   @Input() value: Individual[]
+  @Input() modelSpecifier: FieldModelSpecifier
   @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
   contacts: Individual[] = []
@@ -117,6 +121,14 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
     this.valueChange.emit(contacts)
   }
 
+  handleContactChanged(updatedContact: Individual, index: number) {
+    const contacts = this.contacts.map((contact, i) =>
+      i === index ? updatedContact : contact
+    )
+
+    this.handleContactsChanged(contacts)
+  }
+
   /**
    * gn-ui-autocomplete
    */

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

@@ -3,11 +3,11 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
   TemplateRef,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-single-link-resource/form-field-online-single-link-resource.component.html

@@ -0,0 +1,5 @@
+<gn-ui-url-input
+  [value]="displayUrl"
+  [showValidateButton]="false"
+  (valueChange)="handleUrlChange($event)"
+></gn-ui-url-input>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-single-link-resource/form-field-online-single-link-resource.component.ts

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+} from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  OnlineLinkResource,
+  OnlineResource,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { UrlInputComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { TranslateService } from '@ngx-translate/core'
+
+marker('editor.record.form.field.onlineLinkageResource.defaultName')
+
+@Component({
+  selector: 'gn-ui-form-field-online-single-link-resource',
+  templateUrl: './form-field-online-single-link-resource.component.html',
+  styleUrls: ['./form-field-online-single-link-resource.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [UrlInputComponent],
+})
+export class FormFieldOnlineSingleLinkResourceComponent {
+  private notificationsService = inject(NotificationsService)
+  private translateService = inject(TranslateService)
+
+  @Input() set value(onlineResources: Array<OnlineResource>) {
+    this.allResources = onlineResources ?? []
+    const firstResource = this.allResources[0]
+    this.displayUrl = firstResource?.url?.toString() ?? ''
+  }
+  @Output() valueChange: EventEmitter<Array<OnlineResource>> =
+    new EventEmitter()
+
+  private allResources: OnlineResource[] = []
+  displayUrl = ''
+
+  handleUrlChange(url: string | null) {
+    if (!url) return
+
+    try {
+      const parsedUrl = new URL(url)
+
+      if (this.allResources.length === 0) {
+        const defaultName = this.translateService.instant(
+          'editor.record.form.field.onlineLinkageResource.defaultName'
+        )
+        const newResource: OnlineLinkResource = {
+          type: 'link',
+          url: parsedUrl,
+          name: defaultName,
+        }
+        this.valueChange.emit([newResource])
+      } else {
+        const updatedFirst: OnlineResource = {
+          ...this.allResources[0],
+          url: parsedUrl,
+        }
+        this.valueChange.emit([updatedFirst, ...this.allResources.slice(1)])
+      }
+    } catch (error) {
+      this.handleError(error as Error)
+    }
+  }
+
+  private handleError(error: Error) {
+    this.notificationsService.showNotification(
+      {
+        type: 'error',
+        title: this.translateService.instant(
+          'editor.record.onlineResourceError.title'
+        ),
+        text: `${this.translateService.instant(
+          'editor.record.onlineResourceError.body'
+        )} ${error.message}`,
+        closeMessage: this.translateService.instant(
+          'editor.record.onlineResourceError.closeMessage'
+        ),
+      },
+      undefined,
+      error
+    )
+  }
+}

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

@@ -3,11 +3,14 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
-  inject,
 } from '@angular/core'
-import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  GraphicOverview,
+  RecordKind,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { ImageInputComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
@@ -30,6 +33,7 @@ export class FormFieldOverviewsComponent {
   private cd = inject(ChangeDetectorRef)
 
   @Input() metadataUuid: string
+  @Input() recordKind: RecordKind
   @Input() value: Array<GraphicOverview>
   @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
     new EventEmitter()
@@ -111,13 +115,16 @@ export class FormFieldOverviewsComponent {
       {
         type: 'error',
         title: this.translateService.instant(
-          'editor.record.resourceError.title'
+          'editor.record.resourceError.title',
+          { recordKind: this.recordKind }
         ),
         text: `${this.translateService.instant(
-          'editor.record.resourceError.body'
+          'editor.record.resourceError.body',
+          { recordKind: this.recordKind }
         )} ${error.message}`,
         closeMessage: this.translateService.instant(
-          'editor.record.resourceError.closeMessage'
+          'editor.record.resourceError.closeMessage',
+          { recordKind: this.recordKind }
         ),
       },
       undefined,