geonetwork-ui 2.4.0-dev.7a893adc → 2.4.0-dev.80a79eca

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

@@ -0,0 +1,182 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import {
+  OnlineLinkResource,
+  OnlineResource,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  FileInputComponent,
+  TextAreaComponent,
+  TextInputComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
+import {
+  ModalDialogComponent,
+  SortableListComponent,
+} from '../../../../../../../../../libs/ui/layout/src'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { Subscription } from 'rxjs'
+import { MatDialog } from '@angular/material/dialog'
+import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+
+@Component({
+  selector: 'gn-ui-form-field-online-link-resources',
+  templateUrl: './form-field-online-link-resources.component.html',
+  styleUrls: ['./form-field-online-link-resources.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FileInputComponent,
+    CommonModule,
+    SortableListComponent,
+    OnlineResourceCardComponent,
+    TextInputComponent,
+    TextAreaComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldOnlineLinkResourcesComponent {
+  @Input() metadataUuid: string
+  @Input() set value(onlineResources: Array<OnlineResource>) {
+    this.allResources = onlineResources
+    this.linkResources = onlineResources.filter(
+      (res): res is OnlineLinkResource => res.type === 'link'
+    )
+  }
+  @Output() valueChange: EventEmitter<Array<OnlineResource>> =
+    new EventEmitter()
+
+  @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<OnlineResource>
+
+  private allResources: OnlineResource[] = []
+  linkResources: OnlineLinkResource[] = []
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+
+  protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
+
+  constructor(
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private platformService: PlatformServiceInterface,
+    private cd: ChangeDetectorRef,
+    private dialog: MatDialog
+  ) {}
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            const newResource: OnlineLinkResource = {
+              type: 'link',
+              url: new URL(event.attachment.url),
+              name: event.attachment.fileName,
+            }
+            this.valueChange.emit([...this.allResources, newResource])
+          }
+        },
+        error: (error: Error) => this.handleError(error.message),
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
+  }
+
+  handleUrlChange(url: string) {
+    try {
+      const name = url.split('/').pop()
+      const newLink: OnlineLinkResource = {
+        type: 'link',
+        url: new URL(url),
+        name,
+      }
+      this.valueChange.emit([...this.allResources, newLink])
+    } catch (e) {
+      this.handleError((e as Error).message)
+    }
+  }
+
+  handleResourcesChange(items: unknown[]) {
+    const links = items as OnlineResource[]
+    const newResources = [
+      ...this.allResources.filter((r) => r.type !== 'link'),
+      ...links,
+    ]
+    this.valueChange.emit(newResources)
+  }
+
+  handleResourceModify(resource: OnlineLinkResource, index: number) {
+    this.openEditDialog(resource, index)
+  }
+
+  private handleError(error: string) {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant(
+        'editor.record.onlineResourceError.title'
+      ),
+      text: `${this.translateService.instant(
+        'editor.record.onlineResourceError.body'
+      )} ${error}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.onlineResourceError.closeMessage'
+      ),
+    })
+  }
+
+  private openEditDialog(resource: OnlineLinkResource, index: number) {
+    const resourceCopy = {
+      ...resource,
+    }
+    this.dialog
+      .open(ModalDialogComponent, {
+        data: {
+          title: this.translateService.instant(
+            'editor.record.form.field.onlineResource.dialogTitle'
+          ),
+          body: this.dialogTemplate,
+          bodyContext: resourceCopy,
+          confirmText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.confirm'
+          ),
+          cancelText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.cancel'
+          ),
+        },
+      })
+      .afterClosed()
+      .subscribe((confirmed: boolean) => {
+        if (!confirmed) return
+        const newLinks = [...this.linkResources]
+        newLinks.splice(index, 1, resourceCopy)
+        this.valueChange.emit([
+          ...this.allResources.filter((r) => r.type !== 'link'),
+          ...newLinks,
+        ])
+      })
+  }
+}

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

@@ -1,5 +1,11 @@
-<gn-ui-overview-upload
-  [metadataUuid]="metadataUuid"
-  [overview]="firstOverview"
-  (overviewChange)="handleOverviewChange($event)"
-></gn-ui-overview-upload>
+<gn-ui-image-input
+  [maxSizeMB]="MAX_UPLOAD_SIZE_MB"
+  [previewUrl]="firstOverview.url"
+  [altText]="firstOverview.description"
+  (fileChange)="handleFileChange($event)"
+  (urlChange)="handleUrlChange($event)"
+  (altTextChange)="handleAltTextChange($event)"
+  (delete)="handleDelete()"
+  [uploadProgress]="uploadProgress"
+  (uploadCancel)="handleUploadCancel()"
+></gn-ui-image-input>

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

@@ -1,13 +1,19 @@
 import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
   Output,
 } from '@angular/core'
 import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
-import { OverviewUploadComponent } from '../../../overview-upload/overview-upload.component'
+import { ImageInputComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
+import { Subscription } from 'rxjs'
+import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
 
 @Component({
   selector: 'gn-ui-form-field-overviews',
@@ -15,7 +21,7 @@ import { OverviewUploadComponent } from '../../../overview-upload/overview-uploa
   styleUrls: ['./form-field-overviews.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, OverviewUploadComponent],
+  imports: [CommonModule, ImageInputComponent],
 })
 export class FormFieldOverviewsComponent {
   @Input() metadataUuid: string
@@ -23,11 +29,94 @@ export class FormFieldOverviewsComponent {
   @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
     new EventEmitter()
 
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+
+  protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
+
   get firstOverview() {
-    return this.value[0]
+    return (
+      this.value[0] ?? {
+        url: null,
+        description: '',
+      }
+    )
+  }
+
+  constructor(
+    private platformService: PlatformServiceInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            this.emitOverview({
+              url: event.attachment.url,
+              description: event.attachment.fileName,
+            })
+          }
+        },
+        error: this.errorHandle,
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
   }
 
-  handleOverviewChange(overView: GraphicOverview | null) {
+  handleUrlChange(url: string) {
+    try {
+      const filename = url.split('/').pop()
+      this.emitOverview({
+        url: new URL(url),
+        description: filename,
+      })
+    } catch (e) {
+      this.errorHandle(e)
+    }
+  }
+
+  handleAltTextChange(newAltText: string) {
+    this.emitOverview({
+      url: this.firstOverview.url,
+      description: newAltText,
+    })
+  }
+
+  handleDelete() {
+    this.emitOverview(null)
+  }
+
+  emitOverview(overView: GraphicOverview | null) {
     this.valueChange.emit(overView ? [overView] : [])
   }
+
+  private errorHandle = (error) => {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant('editor.record.resourceError.title'),
+      text: `${this.translateService.instant(
+        'editor.record.resourceError.body'
+      )} ${error.message}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.resourceError.closeMessage'
+      ),
+    })
+  }
 }

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

@@ -1,4 +1,9 @@
-<div class="flex flex-col gap-3">
+<div class="flex flex-col gap-8">
+  <gn-ui-switch-toggle
+    [options]="switchToggleOptions$ | async"
+    (selectedValue)="onSpatialScopeChange($event)"
+    extraClasses="grow"
+  ></gn-ui-switch-toggle>
   <gn-ui-generic-keywords
     [placeholder]="'Search for place keywords'"
     [keywords]="shownKeywords$ | async"

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

@@ -6,11 +6,16 @@ import {
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { firstValueFrom, map, shareReplay } from 'rxjs'
+import { firstValueFrom, map, Observable, shareReplay } from 'rxjs'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { switchMap } from 'rxjs/operators'
 import { FormFieldMapContainerComponent } from '../form-field-map-container/form-field-map-container.component'
 import { TranslateService } from '@ngx-translate/core'
+import {
+  SwitchToggleComponent,
+  SwitchToggleOption,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { SPATIAL_SCOPES } from '../../../../fields.config'
 
 // This intermediary type will let us keep track of which keyword is bound to
 // which extent; these properties will not be persisted
@@ -35,6 +40,7 @@ type KeywordWithExtent = Keyword & {
     CommonModule,
     GenericKeywordsComponent,
     FormFieldMapContainerComponent,
+    SwitchToggleComponent,
   ],
 })
 export class FormFieldSpatialExtentComponent {
@@ -42,6 +48,25 @@ export class FormFieldSpatialExtentComponent {
     map((record) => ('spatialExtents' in record ? record?.spatialExtents : []))
   )
 
+  allKeywords$ = this.editorFacade.record$.pipe(
+    map((record) => record?.keywords)
+  )
+
+  switchToggleOptions$: Observable<SwitchToggleOption[]> =
+    this.allKeywords$.pipe(
+      map((keywords) =>
+        SPATIAL_SCOPES.map((scope) => {
+          const isChecked = keywords.some(
+            (keyword) => keyword.label === scope.label
+          )
+          return {
+            label: scope.label,
+            checked: isChecked,
+          }
+        })
+      )
+    )
+
   shownKeywords$ = this.editorFacade.record$.pipe(
     map((record) => record?.keywords.filter((k) => k.type === 'place')),
     // look for full keywords in the thesauri
@@ -162,4 +187,24 @@ export class FormFieldSpatialExtentComponent {
     ])
     this.editorFacade.updateRecordField('spatialExtents', spatialExtents)
   }
+
+  async onSpatialScopeChange(selectedOption: SwitchToggleOption) {
+    // remove all existing spatial scope keywords
+    const allKeywords = await firstValueFrom(this.allKeywords$)
+    const filteredKeywords = allKeywords.filter((keyword) => {
+      const spatialScopeLabels = SPATIAL_SCOPES.map((scope) => scope.label)
+      return !spatialScopeLabels.includes(keyword.label)
+    })
+
+    const selectedOptionLabel = selectedOption.label
+    const selectedKeyword = SPATIAL_SCOPES.find(
+      (scopes) => scopes.label === selectedOptionLabel
+    )
+
+    // add the selected spatial scope keyword
+    this.editorFacade.updateRecordField('keywords', [
+      ...filteredKeywords,
+      { ...selectedKeyword },
+    ])
+  }
 }

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

@@ -8,6 +8,25 @@
   >
 </div>
 <gn-ui-sortable-list
-  [elements]="elements"
-  (elementsChange)="onElementsChange($event)"
+  [items]="extents"
+  (itemsOrderChange)="onItemsOrderChange($event)"
+  [elementTemplate]="template"
 ></gn-ui-sortable-list>
+<ng-template #template let-extent let-index="index">
+  <div class="border rounded-lg px-4 pb-4" *ngIf="extent.end === undefined">
+    <p class="my-2" translate>editor.record.form.temporalExtents.date</p>
+    <gn-ui-date-picker
+      [date]="extent.start"
+      (dateChange)="onExtentChange({ start: $event }, index)"
+    ></gn-ui-date-picker>
+  </div>
+  <div class="border rounded-lg px-4 pb-4" *ngIf="extent.end !== undefined">
+    <p class="my-2" translate>editor.record.form.temporalExtents.range</p>
+    <gn-ui-date-range-picker
+      [startDate]="extent.start"
+      [endDate]="extent.end"
+      (startDateChange)="onExtentChange({ start: $event }, index)"
+      (endDateChange)="onExtentChange({ end: $event }, index)"
+    ></gn-ui-date-range-picker>
+  </div>
+</ng-template>

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

@@ -2,21 +2,19 @@ import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
-  OnChanges,
   Output,
 } from '@angular/core'
-import { FormArray, FormControl } from '@angular/forms'
 import { DatasetTemporalExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
 import {
-  DynamicElement,
-  SortableListComponent,
-} from '../../../../../../../../../libs/ui/elements/src'
-import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
-import { TranslateService } from '@ngx-translate/core'
-import { Observable, combineLatest, map } from 'rxjs'
-import { FormFieldTemporalExtentsDateComponent } from './form-field-temporal-extents-date/form-field-temporal-extents-date.component'
-import { FormFieldTemporalExtentsRangeComponent } from './form-field-temporal-extents-range/form-field-temporal-extents-range.component'
+  ButtonComponent,
+  DatePickerComponent,
+  DateRangePickerComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { combineLatest, map } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-form-field-temporal-extents',
@@ -24,14 +22,21 @@ import { FormFieldTemporalExtentsRangeComponent } from './form-field-temporal-ex
   styleUrls: ['./form-field-temporal-extents.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ButtonComponent, SortableListComponent],
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    SortableListComponent,
+    DatePickerComponent,
+    DateRangePickerComponent,
+    TranslateModule,
+  ],
 })
-export class FormFieldTemporalExtentsComponent implements OnChanges {
-  @Input() value: Array<DatasetTemporalExtent>
-  @Output() valueChange: Observable<Array<DatasetTemporalExtent>>
-
-  array: FormArray = new FormArray([])
-  elements: DynamicElement[] = []
+export class FormFieldTemporalExtentsComponent {
+  extents: DatasetTemporalExtent[] = []
+  @Input() set value(v: Array<DatasetTemporalExtent>) {
+    this.extents = v
+  }
+  @Output() valueChange = new EventEmitter<Array<DatasetTemporalExtent>>()
 
   addOptions$ = combineLatest([
     this.translateService
@@ -42,30 +47,18 @@ export class FormFieldTemporalExtentsComponent implements OnChanges {
       .pipe(map((buttonLabel) => ({ buttonLabel, eventName: 'range' }))),
   ])
 
-  constructor(private translateService: TranslateService) {
-    this.valueChange = this.array.valueChanges
-  }
-
-  ngOnChanges() {
-    this.resetValueFromInput(this.value)
-  }
-
-  onElementsChange(elements: DynamicElement[]) {
-    this.elements = elements
-    this.array.clear({ emitEvent: false })
+  constructor(private translateService: TranslateService) {}
 
-    this.elements.forEach((e: DynamicElement, i: number) =>
-      this.array.push(e.inputs.control, {
-        emitEvent: i === elements.length - 1,
-      })
-    )
+  onItemsOrderChange(extents: unknown[]) {
+    this.extents = extents as DatasetTemporalExtent[]
+    this.emitValue()
   }
 
   onAdd(eventName: string) {
     switch (eventName) {
       case 'date': {
         const instant = { start: new Date() }
-        this.pushDate(instant, this.elements, true)
+        this.extents = [...this.extents, instant]
         break
       }
       case 'range': {
@@ -73,47 +66,20 @@ export class FormFieldTemporalExtentsComponent implements OnChanges {
           start: new Date(),
           end: new Date(),
         }
-        this.pushRange(range, this.elements, true)
+        this.extents = [...this.extents, range]
         break
       }
     }
+    this.emitValue()
   }
 
-  private resetValueFromInput(value) {
-    this.array.clear({ emitEvent: false })
-    this.elements = []
-    if (!value) return
-
-    const newElements = []
-    value.forEach((v: DatasetTemporalExtent) => {
-      if ('start' in v && 'end' in v) {
-        this.pushRange(v, newElements, false)
-      } else {
-        this.pushDate(v, newElements, false)
-      }
-    })
-    this.elements = newElements
-  }
-
-  private pushDate(instant, elements, emitEvent) {
-    const dateControl = new FormControl(instant)
-    this.array.push(dateControl, { emitEvent })
-    elements.push({
-      component: FormFieldTemporalExtentsDateComponent,
-      inputs: {
-        control: dateControl,
-      },
-    })
+  onExtentChange(extent: Partial<DatasetTemporalExtent>, index: number) {
+    this.extents = [...this.extents]
+    this.extents[index] = { ...this.extents[index], ...extent }
+    this.emitValue()
   }
 
-  private pushRange(period, elements, emitEvent) {
-    const rangeControl = new FormControl(period)
-    this.array.push(rangeControl, { emitEvent })
-    elements.push({
-      component: FormFieldTemporalExtentsRangeComponent,
-      inputs: {
-        control: rangeControl,
-      },
-    })
+  emitValue() {
+    this.valueChange.emit(this.extents)
   }
 }

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

@@ -115,5 +115,13 @@
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-contacts-for-resource>
     </ng-container>
+    <ng-container *ngSwitchCase="'onlineResources'">
+      <gn-ui-form-field-online-link-resources
+        *ngIf="modelSpecifier === 'onlineResourceType:link'"
+        [metadataUuid]="uniqueIdentifier"
+        [value]="valueAsOnlineResources"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-online-link-resources>
+    </ng-container>
   </ng-container>
 </ng-template>

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

@@ -17,6 +17,7 @@ import {
   GraphicOverview,
   Individual,
   Keyword,
+  OnlineResource,
   UpdateFrequency,
 } from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/src'
@@ -27,7 +28,7 @@ import {
   FormFieldResourceUpdatedComponent,
   FormFieldTemporalExtentsComponent,
 } from '.'
-import { FormFieldConfig } from '../../../models'
+import { FieldModelSpecifier, FormFieldConfig } from '../../../models'
 import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
 import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
 import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
@@ -39,6 +40,7 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
 import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 import { FormFieldOpenDataComponent } from './form-field-open-data/form-field-open-data.component'
+import { FormFieldOnlineLinkResourcesComponent } from './form-field-online-link-resources/form-field-online-link-resources.component'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -67,11 +69,13 @@ import { FormFieldOpenDataComponent } from './form-field-open-data/form-field-op
     FormFieldOverviewsComponent,
     FormFieldContactsForResourceComponent,
     FormFieldOpenDataComponent,
+    FormFieldOnlineLinkResourcesComponent,
   ],
 })
 export class FormFieldComponent {
   @Input() uniqueIdentifier: string
   @Input() model: CatalogRecordKeys
+  @Input() modelSpecifier: FieldModelSpecifier
   @Input() config: FormFieldConfig
   @Input() value: unknown
 
@@ -114,4 +118,7 @@ export class FormFieldComponent {
   get valueAsIndividuals() {
     return this.value as Array<Individual>
   }
+  get valueAsOnlineResources() {
+    return this.value as Array<OnlineResource>
+  }
 }

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

@@ -37,6 +37,7 @@
               <gn-ui-form-field
                 [uniqueIdentifier]="recordUniqueIdentifier$ | async"
                 [model]="field.config.model!"
+                [modelSpecifier]="field.config.modelSpecifier!"
                 [config]="field.config.formFieldConfig"
                 [value]="field.value"
                 (valueChange)="

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

@@ -9,6 +9,7 @@ import {
   EditorSectionWithValues,
 } from '../../+state/editor.models'
 import { map } from 'rxjs'
+import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -25,7 +26,7 @@ export class RecordFormComponent {
 
   constructor(public facade: EditorFacade) {}
 
-  handleFieldValueChange(model: string, newValue: EditorFieldValue) {
+  handleFieldValueChange(model: CatalogRecordKeys, newValue: EditorFieldValue) {
     if (!model) {
       return
     }