geonetwork-ui 2.10.0-dev.6fa5006eb → 2.10.0-dev.842517315

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -1,5 +1,5 @@
 <gn-ui-content-ghost
-  [showContent]="imageUrl !== undefined"
+  [showContent]="imageUrl() !== undefined"
   ghostClass="h-full w-full"
 >
   @if (imageUrl) {
@@ -9,7 +9,7 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="imageUrl"
+        [thumbnailUrl]="imageUrl()"
         fit="cover"
         (placeholderShown)="isPlaceholderShown.emit($event)"
       ></gn-ui-thumbnail>
@@ -18,7 +18,7 @@
           class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
           [type]="'outline'"
           [extraClass]="'!py-2 !px-0'"
-          (buttonClick)="openLightbox(imageUrl)"
+          (buttonClick)="openLightbox()"
         >
           <ng-icon name="matZoomOutMap"></ng-icon>
         </gn-ui-button>
@@ -26,3 +26,13 @@
     </div>
   }
 </gn-ui-content-ghost>
+
+<ng-template #imageTemplate>
+  <img
+    data-test="lightbox-image"
+    class="lightbox-image bg-white max-h-[90vh] max-w-[90vw]"
+    [src]="imageUrl()"
+    alt="Preview image"
+    (click)="closeLightbox()"
+  />
+</ng-template>

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts

@@ -1,10 +1,19 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import * as basicLightbox from 'basiclightbox'
+import {
+  Component,
+  inject,
+  input,
+  output,
+  TemplateRef,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
+import { Overlay, OverlayRef } from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
 
 @Component({
   selector: 'gn-ui-image-overlay-preview',
@@ -20,9 +29,37 @@ import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
   ],
 })
 export class ImageOverlayPreviewComponent {
-  @Input() imageUrl: string
-  @Output() isPlaceholderShown = new EventEmitter<boolean>()
-  openLightbox(src: string) {
-    basicLightbox.create(`<img src="${src}"/>`).show()
+  imageUrl = input<string>()
+  isPlaceholderShown = output<boolean>({})
+
+  private imageTemplate = viewChild<TemplateRef<HTMLElement>>('imageTemplate')
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private overlayRef: OverlayRef
+
+  openLightbox() {
+    const positionStrategy = this.overlay
+      .position()
+      .global()
+      .centerHorizontally()
+      .centerVertically()
+    const scrollStrategy = this.overlay.scrollStrategies.block()
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'bg-black/80',
+      positionStrategy,
+      scrollStrategy,
+    })
+    this.overlayRef.backdropClick().subscribe(() => this.overlayRef.dispose())
+    const portal = new TemplatePortal(
+      this.imageTemplate(),
+      this.viewContainerRef
+    )
+    this.overlayRef.attach(portal)
+  }
+
+  closeLightbox() {
+    this.overlayRef?.dispose()
   }
 }

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { marked } from 'marked'
+import { parse } from 'marked'
 
 @Component({
   selector: 'gn-ui-markdown-parser',
@@ -14,6 +14,6 @@ export class MarkdownParserComponent {
   @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
-    return marked.parse(this.textContent ?? '')
+    return parse(this.textContent ?? '')
   }
 }

package/src/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.ts

@@ -21,7 +21,7 @@ import {
   matCallOutline,
   matLocationOnOutline,
 } from '@ng-icons/material-icons/outline'
-
+import { getAddressLines } from '../../../../../../libs/util/shared/src'
 import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
@@ -59,10 +59,7 @@ export class MetadataContactComponent {
   }
 
   get address() {
-    const addressParts = this.contacts[0].address
-      .split(',')
-      .map((part) => part.trim())
-    return addressParts
+    return getAddressLines(this.contacts[0]?.address)
   }
 
   onOrganizationClick() {

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -28,13 +28,23 @@
       <gn-ui-max-lines [maxLines]="7">
         <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
           @for (keyword of metadata.keywords; track keyword) {
-            <gn-ui-button
-              type="primary-light"
-              class="inline-block opacity-70"
-              extraClass="lowercase text-sm py-1 px-2"
-              (buttonClick)="onKeywordClick(keyword)"
-              >{{ keyword.label }}</gn-ui-button
-            >
+            <ng-template #keywordTooltip>
+              @for (segment of keywordTooltipSegments(keyword); track $index) {
+                <span [class.font-bold]="$last">{{ segment }}</span>
+                @if (!$last) {
+                  <span> &gt; </span>
+                }
+              }
+            </ng-template>
+            <gn-ui-popover [content]="keywordTooltip" theme="dark">
+              <gn-ui-button
+                type="primary-light"
+                class="inline-block opacity-70"
+                extraClass="lowercase text-sm py-1 px-2"
+                (buttonClick)="onKeywordClick(keyword)"
+                >{{ keyword.label }}</gn-ui-button
+              >
+            </gn-ui-popover>
           }
         </div>
       </gn-ui-max-lines>
@@ -53,7 +63,7 @@
     data-test="usage-panel"
   >
     <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
-      @for (license of licenses; track license) {
+      @for (license of licenses; track $index) {
         @if (license.url) {
           <div class="text-primary">
             <a
@@ -113,11 +123,11 @@
   >
     <div class="flex flex-col gap-1 pt-3 pb-4">
       @for (group of contactGroups; track group.role) {
-        <div class="flex flex-col gap-1 rounded bg-gray-50 py-4 px-2">
+        <div class="flex flex-col gap-1 rounded py-4 px-2">
           <p class="text-xs font-normal text-black">
             {{ group.roleLabel | translate }}
           </p>
-          <div class="grid gap-0.5 grid-cols-1 md:grid-cols-2">
+          <div class="grid gap-1 grid-cols-1 md:grid-cols-2">
             @for (contact of group.contacts; track contact.email) {
               <gn-ui-contact-pill [contact]="contact"></gn-ui-contact-pill>
             }

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -19,12 +19,18 @@ import {
   ExpandablePanelComponent,
   MaxLinesComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
   BadgeComponent,
   ButtonComponent,
   CopyTextButtonComponent,
 } from '../../../../../../libs/ui/inputs/src'
+import { PopoverComponent } from '../../../../../../libs/ui/widgets/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
@@ -35,6 +41,11 @@ import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/sr
 import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
 import { ContactPillComponent } from '../contact-pill/contact-pill.component'
 
+marker('domain.record.keywordType.theme')
+marker('domain.record.keywordType.place')
+marker('domain.record.keywordType.temporal')
+marker('domain.record.keywordType.other')
+
 @Component({
   selector: 'gn-ui-metadata-info',
   templateUrl: './metadata-info.component.html',
@@ -56,6 +67,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
     GnUiHumanizeDateDirective,
     SpatialExtentComponent,
     ContactPillComponent,
+    PopoverComponent,
   ],
   viewProviders: [
     provideIcons({
@@ -66,6 +78,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
 })
 export class MetadataInfoComponent {
   private dateService = inject(DateService)
+  private translateService = inject(TranslateService)
 
   @Input() metadata: Partial<CatalogRecord>
   @Input() incomplete: boolean
@@ -167,4 +180,19 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: Keyword) {
     this.keyword.emit(keyword)
   }
+
+  keywordTooltipSegments(keyword: Keyword): string[] {
+    if (keyword.hierarchyPath?.length) {
+      return keyword.hierarchyPath
+    }
+    if (keyword.thesaurus?.name) {
+      return [keyword.thesaurus.name, keyword.label]
+    }
+    return [
+      this.translateService.instant(
+        `domain.record.keywordType.${keyword.type}`
+      ),
+      keyword.label,
+    ]
+  }
 }

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -25,6 +25,7 @@ export class ButtonComponent {
       | 'outline'
       | 'light'
       | 'gray'
+      | 'gray-light'
       | 'black'
       | 'primary-light'
   ) {
@@ -45,6 +46,9 @@ export class ButtonComponent {
       case 'gray':
         this.btnClass = 'gn-ui-btn-gray'
         break
+      case 'gray-light':
+        this.btnClass = 'gn-ui-btn-gray-light'
+        break
       case 'black':
         this.btnClass = 'gn-ui-btn-black'
         break

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -2,9 +2,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
-  inject,
 } from '@angular/core'
 import {
   DateAdapter,
@@ -52,6 +52,6 @@ export class DatePickerComponent {
   @Output() dateChange = new EventEmitter<Date>()
 
   constructor() {
-    this.dateAdapter.setLocale(this.translate.currentLang)
+    this.dateAdapter.setLocale(this.translate.getCurrentLang())
   }
 }

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.html

@@ -6,7 +6,7 @@
     type="url"
     [value]="inputValue"
     (input)="handleInput($event)"
-    (keydown.enter)="handleUpload(input)"
+    (keydown.enter)="handleUpload(input, $event)"
     [placeholder]="placeholder"
     [attr.aria-label]="placeholder"
     [disabled]="disabled"
@@ -25,7 +25,7 @@
       extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
       type="primary"
       [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
-      (buttonClick)="handleUpload(input)"
+      (buttonClick)="handleUpload(input, $event)"
     >
       <ng-content>
         <ng-icon name="iconoirArrowUp"></ng-icon>

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.ts

@@ -81,7 +81,8 @@ export class UrlInputComponent implements OnChanges {
     this.valueChange.next(value)
   }
 
-  handleUpload(element: HTMLInputElement) {
+  handleUpload(element: HTMLInputElement, event: Event) {
+    event.stopPropagation()
     const value = element.value
     if (!value || !this.isValidUrl(value)) return
     this.uploadClick.next(value)

package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts

@@ -1,18 +1,11 @@
 import { ChangeDetectorRef, Component, inject, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { Geometry } from 'geojson'
-import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON.js'
-import GeoJSON from 'ol/format/GeoJSON.js'
-import { Polygon } from 'ol/geom.js'
-import {
-  createViewFromLayer,
-  MapContext,
-  MapContextLayer,
-} from '@geospatial-sdk/core'
+import { createViewFromLayer, MapContext } from '@geospatial-sdk/core'
 import { MapContainerComponent } from '../map-container/map-container.component'
 import { BehaviorSubject, from, Observable, of } from 'rxjs'
 import { map, switchMap, tap } from 'rxjs/operators'
 import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { createSpatialExtentLayer } from '../../map-utils'
 
 @Component({
   selector: 'gn-ui-spatial-extent',
@@ -30,39 +23,10 @@ export class SpatialExtentComponent {
   spatialExtents$ = new BehaviorSubject<DatasetSpatialExtent[]>([])
   mapContext$: Observable<MapContext> = this.spatialExtents$.pipe(
     switchMap((extents) => {
-      if (extents.length === 0) {
+      const layer = createSpatialExtentLayer(extents)
+      if (!layer) {
         return of(null)
       }
-      const featureCollection: GeoJSONFeatureCollection = {
-        type: 'FeatureCollection',
-        features: [],
-      }
-      extents.forEach((extent) => {
-        if (extent.geometry) {
-          featureCollection.features.push({
-            type: 'Feature',
-            properties: {},
-            geometry: extent.geometry,
-          })
-        } else if (extent.bbox?.length >= 0) {
-          featureCollection.features.push({
-            type: 'Feature',
-            properties: {},
-            geometry: this.bboxCoordsToGeometry(extent.bbox),
-          })
-        }
-      })
-
-      const layer: MapContextLayer = {
-        type: 'geojson',
-        data: featureCollection,
-        label: 'Spatial extents',
-        style: {
-          'stroke-color': 'black',
-          'stroke-width': 2,
-          'fill-color': 'rgba(153, 153, 153, 0.3)',
-        },
-      }
       return from(createViewFromLayer(layer)).pipe(
         map((view) => ({ view, layers: [layer] }) as MapContext),
         tap(() => this._cdr.markForCheck())
@@ -71,18 +35,4 @@ export class SpatialExtentComponent {
   )
 
   error = ''
-
-  bboxCoordsToGeometry(bbox: [number, number, number, number]): Geometry {
-    const geometry = new Polygon([
-      [
-        [bbox[0], bbox[1]],
-        [bbox[0], bbox[3]],
-        [bbox[2], bbox[3]],
-        [bbox[2], bbox[1]],
-        [bbox[0], bbox[1]],
-      ],
-    ])
-
-    return new GeoJSON().writeGeometryObject(geometry)
-  }
 }

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -12,6 +12,54 @@ import {
   MouseWheelZoom,
 } from 'ol/interaction.js'
 import MapBrowserEvent from 'ol/MapBrowserEvent.js'
+import type { DatasetSpatialExtent } from '../../../../../libs/common/domain/src/lib/model/record'
+import type {
+  MapContextLayer,
+  MapContextLayerGeojson,
+} from '@geospatial-sdk/core'
+import { spatialExtentsToFeatureCollection } from '../../../../../libs/util/shared/src'
+
+export type SpatialExtentLayerStyle = NonNullable<
+  MapContextLayerGeojson['style']
+>
+
+/**
+ * Default style for a spatial-extent layer: a solid black outline over a
+ * translucent grey fill.
+ */
+export const DEFAULT_SPATIAL_EXTENT_STYLE: SpatialExtentLayerStyle = {
+  'stroke-color': 'black',
+  'stroke-width': 2,
+  'fill-color': 'rgba(153, 153, 153, 0.3)',
+}
+
+/**
+ * Builds a GeoJSON map layer drawing the given spatial extents: each extent is
+ * rendered from its own geometry or, when only a bounding box is available,
+ * from a polygon derived from that box.
+ *
+ * @returns the layer, or `null` when none of the extents can be represented.
+ */
+export function createSpatialExtentLayer(
+  extents: DatasetSpatialExtent[],
+  overrides?: {
+    label?: string
+    clickable?: boolean
+    style?: SpatialExtentLayerStyle
+  }
+): MapContextLayer | null {
+  const data = spatialExtentsToFeatureCollection(extents)
+  if (data.features.length === 0) {
+    return null
+  }
+  return {
+    type: 'geojson',
+    data,
+    label: 'Spatial extents',
+    style: DEFAULT_SPATIAL_EXTENT_STYLE,
+    ...overrides,
+  }
+}
 
 export function prioritizePageScroll(interactions: Collection<Interaction>) {
   interactions.clear()

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts

@@ -52,7 +52,7 @@ export class RecordPreviewFeedComponent extends RecordPreviewComponent {
   protected elementRef: ElementRef
   private translate = inject(TranslateService)
 
-  timeFormat = new Duration(this.translate.currentLang, {})
+  timeFormat = new Duration(this.translate.getCurrentLang(), {})
 
   constructor() {
     const elementRef = inject(ElementRef)

package/src/libs/ui/widgets/src/lib/popover/popover.component.ts

@@ -28,7 +28,13 @@ export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
   @Input() content: string | TemplateRef<any>
-  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
+  @Input() theme:
+    | 'light'
+    | 'light-border'
+    | 'translucent'
+    | 'material'
+    | 'dark'
+    | ''
 
   private tippyInstance: Instance
   private view: EmbeddedViewRef<any>

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -1,6 +1,8 @@
 import * as TOML from '@ltd/j-toml'
 import {
   checkMetadataLanguage,
+  checkNewRecordDefaultLanguage,
+  checkNewRecordStandard,
   parseConfigSection,
   parseMultiConfigSection,
   parseTranslationsConfigSection,
@@ -8,6 +10,7 @@ import {
 import {
   CustomTranslations,
   CustomTranslationsAllLanguages,
+  EditorConfig,
   GlobalConfig,
   LayerConfig,
   MapConfig,
@@ -15,10 +18,15 @@ import {
   SearchConfig,
   ThemeConfig,
 } from './model'
-import { TranslateCompiler, TranslateLoader } from '@ngx-translate/core'
+import {
+  TranslateCompiler,
+  TranslateLoader,
+  TranslateModuleConfig,
+} from '@ngx-translate/core'
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
-import { HttpClient } from '@angular/common/http'
 import { FileWithOverridesTranslateLoader } from './i18n/file-with-overrides.translate.loader'
+import { TRANSLATE_HTTP_LOADER_CONFIG } from '@ngx-translate/http-loader'
+import { HttpClient } from '@angular/common/http'
 
 const MISSING_CONFIG_ERROR = `Application configuration was not initialized correctly.
 This error might show up in case of an invalid/malformed configuration file.
@@ -51,6 +59,12 @@ export function getOptionalSearchConfig(): SearchConfig | null {
   return searchConfig
 }
 
+let editorConfig: EditorConfig = null
+
+export function getOptionalEditorConfig(): EditorConfig | null {
+  return editorConfig
+}
+
 let metadataQualityConfig: MetadataQualityConfig = null
 export function getMetadataQualityConfig(): MetadataQualityConfig {
   return (
@@ -285,6 +299,45 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
               SORTABLE: parsedMetadataQualitySection.sortable,
             } as MetadataQualityConfig)
 
+      let parsedEditingSection = parseConfigSection(
+        parsed,
+        'editing',
+        [],
+        ['new_record_default_language', 'new_record_standard'],
+        warnings,
+        errors
+      )
+      if (
+        parsedEditingSection !== null &&
+        parsedEditingSection.new_record_default_language !== undefined
+      ) {
+        parsedEditingSection = checkNewRecordDefaultLanguage(
+          parsedEditingSection,
+          warnings
+        )
+      }
+      if (
+        parsedEditingSection !== null &&
+        parsedEditingSection.new_record_standard !== undefined
+      ) {
+        parsedEditingSection = checkNewRecordStandard(
+          parsedEditingSection,
+          warnings
+        )
+      }
+      editorConfig =
+        parsedEditingSection === null
+          ? null
+          : ({
+              NEW_RECORD_DEFAULT_LANGUAGE:
+                parsedEditingSection.new_record_default_language as
+                  | string
+                  | undefined,
+              NEW_RECORD_STANDARD: parsedEditingSection.new_record_standard as
+                | EditorConfig['NEW_RECORD_STANDARD']
+                | undefined,
+            } as EditorConfig)
+
       customTranslations = parseTranslationsConfigSection(
         parsed,
         'translations'
@@ -309,19 +362,27 @@ export function isConfigLoaded() {
 export function _reset() {
   globalConfig = null
   themeConfig = null
+  editorConfig = null
   customTranslations = null
 }
 
-export const TRANSLATE_WITH_OVERRIDES_CONFIG = {
+export const TRANSLATE_WITH_OVERRIDES_CONFIG: TranslateModuleConfig = {
   compiler: {
     provide: TranslateCompiler,
     useClass: TranslateMessageFormatCompiler,
   },
-  loader: {
-    provide: TranslateLoader,
-    useFactory: function HttpLoaderFactory(http: HttpClient) {
-      return new FileWithOverridesTranslateLoader(http, './assets/i18n/')
+  loader: [
+    {
+      provide: TRANSLATE_HTTP_LOADER_CONFIG,
+      useValue: {
+        prefix: './assets/i18n/',
+        suffix: '.json',
+      },
     },
-    deps: [HttpClient],
-  },
+    {
+      provide: TranslateLoader,
+      useClass: FileWithOverridesTranslateLoader,
+      deps: [HttpClient, TRANSLATE_HTTP_LOADER_CONFIG],
+    },
+  ],
 }

package/src/libs/util/app-config/src/lib/model.ts

@@ -69,6 +69,13 @@ export interface MetadataQualityConfig {
   ENABLED: boolean
 }
 
+export type NewRecordStandard = 'iso19139' | 'iso19115-3'
+
+export interface EditorConfig {
+  NEW_RECORD_DEFAULT_LANGUAGE?: string
+  NEW_RECORD_STANDARD?: NewRecordStandard
+}
+
 export type CustomTranslations = { [translationKey: string]: string }
 export type CustomTranslationsAllLanguages = {
   [lang: string]: CustomTranslations