geonetwork-ui 2.4.0-dev.503109c9 → 2.4.0-dev.575f30f2

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,20 @@ 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'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-temporal-extents',
@@ -24,14 +23,22 @@ 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,
+    MatIconModule,
+  ],
 })
-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 +49,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 +68,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-update-frequency/form-field-update-frequency.component.css

@@ -0,0 +1,4 @@
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}

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

@@ -1,14 +1,16 @@
-<gn-ui-check-toggle
-  [label]="'editor.record.form.updateFrequency.planned' | translate"
-  [value]="planned"
-  (toggled)="onPlannedToggled()"
-></gn-ui-check-toggle>
-<gn-ui-dropdown-selector
-  title="updateFrequency"
-  [showTitle]="false"
-  [choices]="choices"
-  [selected]="selectedFrequency"
-  (selectValue)="onSelectFrequencyValue($event)"
-  [disabled]="!planned"
->
-</gn-ui-dropdown-selector>
+<div class="flex flex-col gap-2">
+  <gn-ui-check-toggle
+    [label]="'editor.record.form.updateFrequency.planned' | translate"
+    [value]="planned"
+    (toggled)="onPlannedToggled()"
+  ></gn-ui-check-toggle>
+  <gn-ui-dropdown-selector
+    title="updateFrequency"
+    [showTitle]="false"
+    [choices]="choices"
+    [selected]="selectedFrequency"
+    (selectValue)="onSelectFrequencyValue($event)"
+    [disabled]="!planned"
+  >
+  </gn-ui-dropdown-selector>
+</div>

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

@@ -22,30 +22,31 @@
 <ng-template #fieldContent>
   <ng-container [ngSwitch]="model">
     <ng-container *ngSwitchCase="'title'">
-      <div class="flex justify-between items-center gap-3">
+      <div class="flex flex-row flex-start items-center gap-3 mb-[12px]">
         <span
           #titleInput
           class="grow font-title text-3xl font-normal"
           [gnUiEditableLabel]="valueAsString"
           (editableLabelChanged)="valueChange.emit($event)"
         ></span>
-        <span
-          class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
-          (click)="focusTitleInput()"
-          >edit</span
-        >
-        <span
-          class="material-symbols-outlined gn-ui-icon-small m-2"
-          [matTooltip]="config.hintKey! | translate"
-          matTooltipPosition="above"
-        >
-          help
-        </span>
+        <div class="flex flex-row justify-between">
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+            (click)="focusTitleInput()"
+            >edit</span
+          >
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2"
+            [matTooltip]="config.hintKey! | translate"
+            matTooltipPosition="above"
+          >
+            help
+          </span>
+        </div>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="'abstract'">
       <gn-ui-form-field-rich
-        class="h-[8rem]"
         [label]="config.labelKey! | translate"
         [hint]="config.hintKey! | translate"
         [value]="valueAsString"
@@ -68,18 +69,16 @@
       ></gn-ui-form-field-simple>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceUpdated'">
-      <gn-ui-form-field-resource-updated
+      <gn-ui-form-field-date-updated
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-resource-updated>
+      ></gn-ui-form-field-date-updated>
     </ng-container>
     <ng-container *ngSwitchCase="'recordUpdated'">
-      <gn-ui-form-field-simple
-        type="date"
-        [readonly]="true"
+      <gn-ui-form-field-date-updated
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-simple>
+      ></gn-ui-form-field-date-updated>
     </ng-container>
     <ng-container *ngSwitchCase="'updateFrequency'">
       <gn-ui-form-field-update-frequency
@@ -115,5 +114,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'
@@ -24,10 +25,10 @@ import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layou
 import { TranslateModule } from '@ngx-translate/core'
 import {
   FormFieldLicenseComponent,
-  FormFieldResourceUpdatedComponent,
+  FormFieldDateUpdatedComponent,
   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',
@@ -54,7 +56,7 @@ import { FormFieldOpenDataComponent } from './form-field-open-data/form-field-op
     MatTooltipModule,
     FormFieldWrapperComponent,
     FormFieldLicenseComponent,
-    FormFieldResourceUpdatedComponent,
+    FormFieldDateUpdatedComponent,
     FormFieldUpdateFrequencyComponent,
     FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
@@ -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/form-field/index.ts

@@ -1,6 +1,6 @@
 export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
-export * from './form-field-resource-updated/form-field-resource-updated.component'
+export * from './form-field-date-updated/form-field-date-updated.component'
 export * from './form-field-temporal-extents/form-field-temporal-extents.component'
 export * from './form-field-simple/form-field-simple.component'
 export * from './form-field-file/form-field-file.component'

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

@@ -1,32 +1,28 @@
-<ng-container>
-  <div class="flex flex-col gap-6 p-8">
-    <ng-container
-      *ngFor="
-        let section of facade.currentSections$ | async;
-        trackBy: sectionTracker
-      "
-    >
-      <ng-container *ngIf="!section.hidden">
-        <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+<div class="flex flex-col gap-6">
+  <ng-container
+    *ngFor="
+      let section of facade.currentSections$ | async;
+      trackBy: sectionTracker
+    "
+  >
+    <ng-container *ngIf="!section.hidden">
+      <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+        <div
+          class="flex flex-col gap-2"
+          [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+        >
           <div
-            class="flex flex-col gap-2"
-            [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+            *ngIf="section.labelKey"
+            class="text-2xl font-title text-main"
+            translate
           >
-            <div
-              *ngIf="section.labelKey"
-              class="text-2xl font-title text-secondary"
-              translate
-            >
-              {{ section.labelKey }}
-            </div>
-            <div
-              *ngIf="section.descriptionKey"
-              class="text-secondary-lightest"
-              translate
-            >
-              {{ section.descriptionKey }}
-            </div>
+            {{ section.labelKey }}
           </div>
+          <div *ngIf="section.descriptionKey" class="text-gray-800" translate>
+            {{ section.descriptionKey }}
+          </div>
+        </div>
+        <div class="grid auto-rows-auto grid-cols-2 gap-[32px]">
           <ng-container
             *ngFor="
               let field of section.fieldsWithValues;
@@ -35,8 +31,14 @@
           >
             <ng-container *ngIf="!field.config.hidden">
               <gn-ui-form-field
+                [ngClass]="
+                  field.config.gridColumnSpan === 1
+                    ? 'col-span-1'
+                    : 'col-span-2'
+                "
                 [uniqueIdentifier]="recordUniqueIdentifier$ | async"
                 [model]="field.config.model!"
+                [modelSpecifier]="field.config.modelSpecifier!"
                 [config]="field.config.formFieldConfig"
                 [value]="field.value"
                 (valueChange)="
@@ -46,7 +48,7 @@
             </ng-container>
           </ng-container>
         </div>
-      </ng-container>
+      </div>
     </ng-container>
-  </div>
-</ng-container>
+  </ng-container>
+</div>

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
     }

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

@@ -4,6 +4,7 @@ import {
   EditorField,
   EditorSection,
 } from './models/editor-config.model'
+import { Keyword } from '../../../../../libs/common/domain/src/lib/model/record'
 
 /**
  * This file contains the configuration of the fields that will be displayed in the editor.
@@ -44,6 +45,7 @@ export const RECORD_RESOURCE_UPDATED_FIELD: EditorField = {
   formFieldConfig: {
     labelKey: marker('editor.record.form.field.resourceUpdated'),
   },
+  gridColumnSpan: 1,
 }
 
 export const RECORD_UPDATED_FIELD: EditorField = {
@@ -53,14 +55,15 @@ export const RECORD_UPDATED_FIELD: EditorField = {
     locked: true,
   },
   onSaveProcess: '${dateNow()}',
+  gridColumnSpan: 1,
 }
 
 export const RECORD_UPDATE_FREQUENCY_FIELD: EditorField = {
   model: 'updateFrequency',
-  formFieldConfig: {
-    labelKey: marker('editor.record.form.field.updateFrequency'),
-  },
+  formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.updateFrequency')
 
 export const RECORD_TEMPORAL_EXTENTS_FIELD: EditorField = {
   model: 'temporalExtents',
@@ -104,6 +107,14 @@ export const RECORD_SPATIAL_EXTENTS_FIELD: EditorField = {
   },
 }
 
+export const RECORD_ONLINE_LINK_RESOURCES: EditorField = {
+  model: 'onlineResources',
+  modelSpecifier: 'onlineResourceType:link',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.onlineLinkResources'),
+  },
+}
+
 /************************************************************
  ***************          SECTIONS          *****************
  ************************************************************
@@ -149,7 +160,7 @@ export const ASSOCIATED_RESOURCES_SECTION: EditorSection = {
 export const ANNEXES_SECTION: EditorSection = {
   labelKey: marker('editor.record.form.section.annexes.label'),
   hidden: false,
-  fields: [],
+  fields: [RECORD_ONLINE_LINK_RESOURCES],
 }
 
 export const CLASSIFICATION_SECTION: EditorSection = {
@@ -210,7 +221,7 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
 }
 
 /************************************************************
- ***************           LICENSES            *****************
+ ***************           LICENSES            **************
  ************************************************************
  */
 export const OPEN_DATA_LICENSES: string[] = [
@@ -220,3 +231,24 @@ export const OPEN_DATA_LICENSES: string[] = [
   'odc-by',
   'pddl',
 ]
+
+export const MAX_UPLOAD_SIZE_MB = 10
+/************************************************************
+ ***************        SPATIAL SCOPE            ************
+ ************************************************************
+ */
+
+export const SPATIAL_SCOPES: Keyword[] = [
+  {
+    key: 'http://inspire.ec.europa.eu/metadata-codelist/SpatialScope/national',
+    label: 'National',
+    description: '',
+    type: 'theme',
+  },
+  {
+    key: 'http://inspire.ec.europa.eu/metadata-codelist/SpatialScope/regional',
+    label: 'Regional',
+    description: '',
+    type: 'theme',
+  },
+]

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -16,12 +16,24 @@ export interface FormFieldConfig {
   invalidHintKey?: string
 }
 
+// Specifiers let us use specific components
+// This is used for instance to target only certain online resources in a field
+type OnlineLinkResourceSpecifier = `onlineResourceType:link`
+type DatasetDistributionsSpecifier = `onlineResourceType:!link`
+export type FieldModelSpecifier =
+  | OnlineLinkResourceSpecifier
+  | DatasetDistributionsSpecifier
+
 export interface EditorField {
   // configuration of the form field used as presentation
   formFieldConfig: FormFieldConfig
 
   // name of the target field in the record; will not change the record directly if not defined
   model?: CatalogRecordKeys
+  modelSpecifier?: FieldModelSpecifier
+
+  // grid column span; if unspecified, full width will be used
+  gridColumnSpan?: number
 
   // a hidden field won't show but can still be used to modify the record
   // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -13,7 +13,7 @@ import {
   MapContextLayerTypeEnum,
 } from '../../map-context/map-context.model'
 import {
-  DatasetDistribution,
+  DatasetOnlineResource,
   DatasetRecord,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
@@ -29,10 +29,10 @@ import { CommonModule } from '@angular/common'
   imports: [ThumbnailComponent, ButtonComponent, CommonModule],
 })
 export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
-  get mapLinks(): DatasetDistribution[] {
-    return (this.record as DatasetRecord).distributions.filter((link) =>
+  get mapLinks(): DatasetOnlineResource[] {
+    return (this.record as DatasetRecord).onlineResources.filter((link) =>
       this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
-    ) as DatasetDistribution[]
+    ) as DatasetOnlineResource[]
   }
 
   constructor(
@@ -44,13 +44,13 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     super(elementRef)
   }
 
-  async handleLinkClick(link: DatasetDistribution) {
+  async handleLinkClick(link: DatasetOnlineResource) {
     const layer = await this.getLayerFromLink(link).toPromise()
     this.mapFacade.addLayer({ ...layer, title: this.record.title })
   }
 
   getLayerFromLink(
-    link: DatasetDistribution
+    link: DatasetOnlineResource
   ): Observable<MapContextLayerModel> {
     if (link.type !== 'service')
       return throwError(
@@ -72,7 +72,7 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     return throwError(() => 'protocol not supported')
   }
 
-  getLinkLabel(link: DatasetDistribution) {
+  getLinkLabel(link: DatasetOnlineResource) {
     return getLinkLabel(link)
   }
 }

package/src/libs/feature/record/src/lib/data-view/data-view.component.ts

@@ -9,7 +9,7 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-data-view',
@@ -43,7 +43,7 @@ export class DataViewComponent {
       }))
     )
   )
-  selectedLink$ = new BehaviorSubject<DatasetDistribution>(null)
+  selectedLink$ = new BehaviorSubject<DatasetOnlineResource>(null)
 
   constructor(private mdViewFacade: MdViewFacade) {}
 
@@ -52,7 +52,7 @@ export class DataViewComponent {
   }
 
   selectLink(linkAsString: string) {
-    const link: DatasetDistribution = JSON.parse(linkAsString)
+    const link: DatasetOnlineResource = JSON.parse(linkAsString)
     link.url = new URL(link.url)
     this.selectedLink$.next(link)
   }

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MapConfig } from '../../../../../../libs/util/app-config/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
@@ -14,7 +14,7 @@ marker('externalviewer.dataset.unnamed')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExternalViewerButtonComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() mapConfig: MapConfig
 
   get externalViewer() {