geonetwork-ui 2.10.0-dev.300bb3d2d → 2.10.0-dev.37a1e4c4d

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

@@ -28,9 +28,15 @@ 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 { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
+import { ContactDetailsFormComponent } from '../../../contact-details/contact-details-form.component'
+import {
+  createFuzzyFilter,
+  getIndividualDisplayName,
+  toIndividual,
+} 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',
@@ -43,6 +49,7 @@ import { SortableListComponent } from '../../../../../../../../../libs/ui/layout
     TranslateDirective,
     TranslatePipe,
     ContactCardComponent,
+    ContactDetailsFormComponent,
     SortableListComponent,
   ],
 })
@@ -52,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[] = []
@@ -113,13 +121,19 @@ 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
    */
   displayWithFn: (user: UserModel) => string = (user) =>
-    `${user.name} ${user.surname} ${
-      user.organisation ? `(${user.organisation})` : ''
-    }`
+    getIndividualDisplayName(toIndividual(user))
 
   /**
    * gn-ui-autocomplete

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

@@ -8,6 +8,14 @@
       </gn-ui-button>
     }
   </div>
+  @if (value.length === 0) {
+    <div
+      class="p-4 border border-primary bg-primary-lightest rounded-lg"
+      translate
+    >
+      editor.record.form.field.contactsForResource.noContact
+    </div>
+  }
   @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {
     <div class="mt-8" data-test="displayedRoles">
       @for (
@@ -53,12 +61,5 @@
         </div>
       }
     </div>
-  } @else {
-    <div
-      class="p-4 border border-primary bg-primary-lightest rounded-lg"
-      translate
-    >
-      editor.record.form.field.contactsForResource.noContact
-    </div>
   }
 </div>

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

@@ -23,7 +23,11 @@ import {
   AutocompleteComponent,
   ButtonComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
-import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
+import {
+  createFuzzyFilter,
+  getIndividualDisplayName,
+  toIndividual,
+} from '../../../../../../../../../libs/util/shared/src'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   debounceTime,
@@ -169,11 +173,7 @@ export class FormFieldContactsForResourceComponent
    * gn-ui-autocomplete
    */
   displayWithFn: (user: UserModel) => string = (user) =>
-    user.name
-      ? `${user.name} ${user.surname} ${
-          user.organisation ? `(${user.organisation})` : ''
-        }`
-      : ``
+    getIndividualDisplayName(toIndividual(user))
 
   /**
    * gn-ui-autocomplete

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-topics/form-field-topics.component.ts

@@ -5,7 +5,7 @@ import {
   DropdownMultiselectComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { TranslatePipe, TranslateService } from '@ngx-translate/core'
-import { INSPIRE_TOPICS } from '../../../../fields.config'
+import { ISO_TOPICS } from '../../../../fields.config'
 
 @Component({
   selector: 'gn-ui-form-field-topics',
@@ -22,7 +22,7 @@ export class FormFieldTopicsComponent {
     this.topics = topics
   }
   @Output() valueChange: EventEmitter<string[]> = new EventEmitter()
-  availableTopics = INSPIRE_TOPICS.map((topic) => {
+  availableTopics = ISO_TOPICS.map((topic) => {
     return {
       label: this.translateService.instant(topic.label),
       value: topic.value,

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

@@ -0,0 +1,3 @@
+:host {
+  scroll-margin-top: 90px;
+}

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

@@ -150,6 +150,7 @@
     <ng-container *ngSwitchCase="'contacts'">
       <gn-ui-form-field-contacts
         [value]="valueAsIndividuals"
+        [modelSpecifier]="modelSpecifier"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-contacts>
     </ng-container>

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

@@ -4,6 +4,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   Output,
   ViewChild,
@@ -22,6 +23,7 @@ import {
 import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
 import { TranslatePipe } from '@ngx-translate/core'
 import {
+  FieldFocusDirective,
   FormFieldDateComponent,
   FormFieldLicenseComponent,
   FormFieldTemporalExtentsComponent,
@@ -77,6 +79,7 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldTopicsComponent,
     TextFieldModule,
   ],
+  hostDirectives: [FieldFocusDirective],
 })
 export class FormFieldComponent {
   @Input() uniqueIdentifier: string
@@ -92,6 +95,8 @@ export class FormFieldComponent {
   @ViewChild('titleInput') titleInput: ElementRef
   isOpenData = false
 
+  fieldFocus = inject(FieldFocusDirective)
+
   toggleIsOpenData(event: boolean) {
     this.isOpenData = event
   }

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

@@ -1,3 +1,4 @@
+export * from './field-focus.directive'
 export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
 export * from './form-field-date/form-field-date.component'

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

@@ -0,0 +1,35 @@
+/* Glow applied by FieldFocusDirective (gnUiFieldFocus) to a focused field or,
+   when the field is hidden, to its whole section. */
+.gn-ui-field-focus-glow {
+  position: relative;
+}
+
+.gn-ui-field-focus-glow::after {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+.gn-ui-field-focus-glow::before {
+  content: '';
+  position: absolute;
+  inset: -16px;
+  border: 2px dashed var(--color-primary);
+  border-radius: 10px;
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+@keyframes gn-ui-field-focus-glow {
+  0%,
+  55% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

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

@@ -4,7 +4,11 @@
     track sectionTracker($index, section)
   ) {
     @if (!section.hidden) {
-      <div class="flex flex-col gap-6 border p-8 rounded-[8px] shadow">
+      <div
+        class="flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px]"
+        gnUiFieldFocus
+        #sectionFocus="fieldFocus"
+      >
         <div class="flex flex-col gap-2">
           @if (section.labelKey) {
             <div class="text-2xl font-title text-black" translate>

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

@@ -1,15 +1,23 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  viewChildren,
+} from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldValue } from '../../models'
-import { FormFieldComponent } from './form-field'
+import { FieldFocusDirective, FormFieldComponent } from './form-field'
 import { TranslateDirective } from '@ngx-translate/core'
 import {
   EditorFieldWithValue,
   EditorSectionWithValues,
 } from '../../+state/editor.models'
-import { map } from 'rxjs'
+import { firstValueFrom, map, Subscription, withLatestFrom } from 'rxjs'
 import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { switchMap } from 'rxjs/operators'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -17,15 +25,63 @@ import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/l
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, FormFieldComponent, TranslateDirective],
+  imports: [
+    CommonModule,
+    FormFieldComponent,
+    FieldFocusDirective,
+    TranslateDirective,
+  ],
 })
-export class RecordFormComponent {
+export class RecordFormComponent implements OnInit, OnDestroy {
   facade = inject(EditorFacade)
+  subscription = new Subscription()
 
   recordUniqueIdentifier$ = this.facade.record$.pipe(
     map((record) => record.uniqueIdentifier)
   )
 
+  focusFieldWithPage$ = this.facade.focusedField$.pipe(
+    switchMap(async (field) => {
+      const location = await this.getFieldLocation(field)
+      return [field, location?.page ?? null, location?.section ?? -1] as const
+    })
+  )
+
+  formFields = viewChildren(FormFieldComponent)
+  sectionFocusDirectives = viewChildren<FieldFocusDirective>('sectionFocus')
+
+  focusField(model: CatalogRecordKeys, sectionIndex: number) {
+    const field = this.formFields().find((f) => f.model === model)
+    if (field) {
+      field.fieldFocus.focusField()
+      return
+    }
+    this.sectionFocusDirectives()[sectionIndex]?.focusField(false)
+  }
+
+  ngOnInit() {
+    this.subscription.add(
+      this.focusFieldWithPage$
+        .pipe(
+          withLatestFrom(
+            this.facade.currentPage$,
+            ([field, fieldPage, fieldSection], currentPage) =>
+              [field, fieldPage, fieldSection, currentPage] as const
+          )
+        )
+        .subscribe(([field, fieldPage, fieldSection, currentPage]) => {
+          if (fieldPage !== null && fieldPage !== currentPage) {
+            this.facade.setCurrentPage(fieldPage)
+          }
+          setTimeout(() => this.focusField(field, fieldSection))
+        })
+    )
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+
   handleFieldValueChange(model: CatalogRecordKeys, newValue: EditorFieldValue) {
     if (!model) {
       return
@@ -40,4 +96,20 @@ export class RecordFormComponent {
   sectionTracker(index: number, section: EditorSectionWithValues) {
     return section.labelKey
   }
+
+  async getFieldLocation(
+    model: CatalogRecordKeys
+  ): Promise<{ page: number; section: number } | null> {
+    const config = await firstValueFrom(this.facade.editorConfig$)
+    const page = config.pages.findIndex((p) =>
+      p.sections.some((s) => s.fields.some((f) => f.model === model))
+    )
+    if (page < 0) {
+      return null
+    }
+    const section = config.pages[page].sections
+      .filter((s) => !s.hidden)
+      .findIndex((s) => s.fields.some((f) => f.model === model))
+    return { page, section }
+  }
 }

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

@@ -4,10 +4,12 @@ import {
   EditorField,
   EditorSection,
 } from './models/editor-config.model'
-import {
-  INSPIRE_topic,
-  Keyword,
-} from '../../../../../libs/common/domain/src/lib/model/record'
+import { Keyword } from '../../../../../libs/common/domain/src/lib/model/record'
+
+export interface ISOTopic {
+  value: string
+  label: string
+}
 
 /**
  * This file contains the configuration of the fields that will be displayed in the editor.
@@ -359,75 +361,86 @@ export const SPATIAL_SCOPES: Keyword[] = [
 ]
 
 /************************************************************
- ***************           INSPIRE TOPICS            **************
+ ***************             ISO TOPICS             **************
  ************************************************************
  */
 
-export const INSPIRE_TOPICS: INSPIRE_topic[] = [
-  { value: 'biota', label: 'editor.record.form.topics.inspire.biota' },
+// label keys mirror the ISO MD_TopicCategoryCode value for consistency
+// TODO: correctly handle code lists; for instance, this code list is specific to ISO 19139
+export const ISO_TOPICS: ISOTopic[] = [
+  { value: 'biota', label: marker('editor.record.form.topics.iso.biota') },
   {
     value: 'boundaries',
-    label: 'editor.record.form.topics.inspire.boundaries',
+    label: marker('editor.record.form.topics.iso.boundaries'),
   },
   {
     value: 'climatologyMeteorologyAtmosphere',
-    label: 'editor.record.form.topics.inspire.climatology',
+    label: marker(
+      'editor.record.form.topics.iso.climatologyMeteorologyAtmosphere'
+    ),
+  },
+  {
+    value: 'economy',
+    label: marker('editor.record.form.topics.iso.economy'),
+  },
+  {
+    value: 'elevation',
+    label: marker('editor.record.form.topics.iso.elevation'),
   },
-  { value: 'economy', label: 'editor.record.form.topics.inspire.economy' },
-  { value: 'elevation', label: 'editor.record.form.topics.inspire.elevation' },
   {
     value: 'environment',
-    label: 'editor.record.form.topics.inspire.environnement',
+    label: marker('editor.record.form.topics.iso.environment'),
+  },
+  {
+    value: 'farming',
+    label: marker('editor.record.form.topics.iso.farming'),
+  },
+  {
+    value: 'geoscientificInformation',
+    label: marker('editor.record.form.topics.iso.geoscientificInformation'),
   },
-  { value: 'farming', label: 'editor.record.form.topics.inspire.farming' },
   {
-    value: 'geoscientific information',
-    label: 'editor.record.form.topics.inspire.geoscientific',
+    value: 'health',
+    label: marker('editor.record.form.topics.iso.health'),
   },
-  { value: 'health', label: 'editor.record.form.topics.inspire.health' },
   {
     value: 'imageryBaseMapsEarthCover',
-    label: 'editor.record.form.topics.inspire.imagery',
+    label: marker('editor.record.form.topics.iso.imageryBaseMapsEarthCover'),
+  },
+  {
+    value: 'inlandWaters',
+    label: marker('editor.record.form.topics.iso.inlandWaters'),
   },
-  { value: 'inlandWaters', label: 'editor.record.form.topics.inspire.waters' },
   {
     value: 'intelligenceMilitary',
-    label: 'editor.record.form.topics.inspire.intelligence',
+    label: marker('editor.record.form.topics.iso.intelligenceMilitary'),
+  },
+  {
+    value: 'location',
+    label: marker('editor.record.form.topics.iso.location'),
+  },
+  {
+    value: 'oceans',
+    label: marker('editor.record.form.topics.iso.oceans'),
   },
-  { value: 'Location', label: 'editor.record.form.topics.inspire.location' },
-  { value: 'Oceans', label: 'editor.record.form.topics.inspire.oceans' },
   {
     value: 'planningCadastre',
-    label: 'editor.record.form.topics.inspire.planning',
+    label: marker('editor.record.form.topics.iso.planningCadastre'),
   },
-  { value: 'Society', label: 'editor.record.form.topics.inspire.society' },
-  { value: 'Structure', label: 'editor.record.form.topics.inspire.structure' },
   {
-    value: 'Transportation',
-    label: 'editor.record.form.topics.inspire.transportation',
+    value: 'society',
+    label: marker('editor.record.form.topics.iso.society'),
+  },
+  {
+    value: 'structure',
+    label: marker('editor.record.form.topics.iso.structure'),
+  },
+  {
+    value: 'transportation',
+    label: marker('editor.record.form.topics.iso.transportation'),
   },
   {
     value: 'utilitiesCommunication',
-    label: 'editor.record.form.topics.inspire.utilities',
+    label: marker('editor.record.form.topics.iso.utilitiesCommunication'),
   },
 ]
-
-marker('editor.record.form.topics.inspire.biota')
-marker('editor.record.form.topics.inspire.boundaries')
-marker('editor.record.form.topics.inspire.climatology')
-marker('editor.record.form.topics.inspire.economy')
-marker('editor.record.form.topics.inspire.elevation')
-marker('editor.record.form.topics.inspire.environnement')
-marker('editor.record.form.topics.inspire.farming')
-marker('editor.record.form.topics.inspire.geoscientific')
-marker('editor.record.form.topics.inspire.health')
-marker('editor.record.form.topics.inspire.imagery')
-marker('editor.record.form.topics.inspire.intelligence')
-marker('editor.record.form.topics.inspire.location')
-marker('editor.record.form.topics.inspire.oceans')
-marker('editor.record.form.topics.inspire.planning')
-marker('editor.record.form.topics.inspire.society')
-marker('editor.record.form.topics.inspire.structure')
-marker('editor.record.form.topics.inspire.transportation')
-marker('editor.record.form.topics.inspire.utilities')
-marker('editor.record.form.topics.inspire.waters')

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

@@ -19,9 +19,13 @@ export interface FormFieldConfig {
 // This is used for instance to target only certain online resources in a field
 type OnlineLinkResourceSpecifier = `onlineResourceType:link`
 type DatasetDistributionsSpecifier = `onlineResourceType:!link`
+// When set on the `contacts` field, contacts are rendered as editable detail
+// fields (ContactDetailsFormComponent) instead of cards (ContactCardComponent)
+type EditableContactDetailsSpecifier = `contact:editableDetails`
 export type FieldModelSpecifier =
   | OnlineLinkResourceSpecifier
   | DatasetDistributionsSpecifier
+  | EditableContactDetailsSpecifier
 
 export type FormFieldComponentName =
   | 'form-field-constraints-shortcuts'

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core'
-import { forkJoin, Observable, of, switchMap } from 'rxjs'
+import { Observable, switchMap } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { EditorConfig } from '../models/'

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -2,6 +2,23 @@ import { Injectable } from '@angular/core'
 import { extend } from 'ol/extent.js'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import {
+  createSpatialExtentLayer,
+  SpatialExtentLayerStyle,
+} from '../../../../../../libs/ui/map/src'
+
+/**
+ * Style of the extent overlay drawn on top of the previewed data: a dashed
+ * black outline over a very light fill, so the extent stays readable without
+ * hiding the data underneath.
+ */
+const RECORD_EXTENT_OVERLAY_STYLE: SpatialExtentLayerStyle = {
+  'stroke-color': 'rgba(0, 0, 0, 0.6)',
+  'stroke-width': 2,
+  'stroke-line-dash': [8, 6],
+  'fill-color': 'rgba(0, 0, 0, 0.03)',
+}
 
 @Injectable({
   providedIn: 'root',
@@ -26,4 +43,20 @@ export class MapUtilsService {
       [Infinity, Infinity, -Infinity, -Infinity]
     )
   }
+
+  /**
+   * Builds a non-interactive overlay layer drawing the spatial extent(s)
+   * declared in the record's metadata (bounding boxes and/or geometries).
+   * Returns null when the record has no usable spatial extent.
+   *
+   * This is purely for display and is independent from the map's initial view,
+   * which is derived separately (see {@link getRecordExtent}).
+   */
+  getRecordExtentLayer(record: Partial<CatalogRecord>): MapContextLayer | null {
+    return createSpatialExtentLayer(record.spatialExtents ?? [], {
+      label: 'Spatial extent',
+      clickable: false,
+      style: RECORD_EXTENT_OVERLAY_STYLE,
+    })
+  }
 }

package/src/libs/feature/notify-reuse/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/notify-reuse-form/notify-reuse-form.component'

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.html

@@ -0,0 +1 @@
+@if (record) {}