geonetwork-ui 2.11.0-dev.2478042b2 → 2.11.0-dev.4976ded4f

package/src/libs/ui/inputs/src/lib/spatial-extent-dropdown/spatial-extent-dropdown.component.ts

@@ -0,0 +1,191 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  inject,
+} from '@angular/core'
+import {
+  CdkConnectedOverlay,
+  CdkOverlayOrigin,
+  ConnectedPosition,
+  OverlayModule,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+
+import { ButtonComponent } from '../button/button.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import {
+  iconoirCheckCircle,
+  iconoirImport,
+  iconoirSquareDashed,
+  iconoirTrash,
+} from '@ng-icons/iconoir'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
+import { TranslatePipe } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  BoundingBox,
+  getGeometryBoundingBox,
+  getGeometryFromGeoJSON,
+  propagateToDocumentOnly,
+  readFileAsText,
+} from '../../../../../../libs/util/shared/src'
+import {
+  DragAndDropFileInputComponent,
+  DragAndDropFileInputError,
+} from '../drag-and-drop-file-input/drag-and-drop-file-input.component'
+
+marker('search.filters.spatialExtent.import')
+marker('search.filters.spatialExtent.helpText')
+marker('search.filters.spatialExtent.error.title')
+marker('search.filters.spatialExtent.bboxPrefix')
+
+export interface SpatialExtentDropdownError {
+  key: string
+  params?: Record<string, string | number>
+}
+marker('search.filters.spatialExtent.bboxDelete')
+
+@Component({
+  selector: 'gn-ui-spatial-extent-dropdown',
+  standalone: true,
+  imports: [
+    ButtonComponent,
+    NgIcon,
+    OverlayModule,
+    TranslatePipe,
+    DragAndDropFileInputComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirCheckCircle,
+      iconoirImport,
+      iconoirSquareDashed,
+      iconoirTrash,
+      matClose,
+      matExpandLess,
+      matExpandMore,
+    }),
+  ],
+  templateUrl: './spatial-extent-dropdown.component.html',
+  styleUrls: ['./spatial-extent-dropdown.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpatialExtentDropdownComponent {
+  private cd = inject(ChangeDetectorRef)
+  private scrollStrategies = inject(ScrollStrategyOptions)
+
+  @Input() title: string
+  @Input() maxFileSizeMb: number | null = null
+
+  @Output() bboxChange = new EventEmitter<BoundingBox | null>()
+  @Output() errorChange = new EventEmitter<SpatialExtentDropdownError>()
+
+  bbox: BoundingBox | null = null
+  fileName = ''
+
+  @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
+  @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay
+  @ViewChild(DragAndDropFileInputComponent)
+  fileInput: DragAndDropFileInputComponent
+
+  overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: 8,
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      offsetY: -8,
+    },
+  ]
+  scrollStrategy = this.scrollStrategies.reposition()
+  overlayOpen = false
+  overlayMinWidth = 'none'
+
+  errorKey: string | null = null
+
+  get hasSelection() {
+    return !!this.bbox
+  }
+
+  openOverlay() {
+    this.overlayMinWidth =
+      this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
+        .width + 'px'
+    this.overlayOpen = true
+  }
+
+  closeOverlay() {
+    this.overlayOpen = false
+  }
+
+  toggleOverlay() {
+    if (this.overlayOpen) {
+      this.closeOverlay()
+    } else {
+      this.openOverlay()
+    }
+  }
+
+  async handleFileSelected(file: File) {
+    this.errorKey = null
+    let content: string
+    try {
+      content = await readFileAsText(file)
+      const parsed = JSON.parse(content)
+      const geometry = getGeometryFromGeoJSON(parsed)
+      if (!geometry) {
+        this.setError(marker('search.filters.spatialExtent.error.noGeometry'))
+        return
+      }
+      const bbox = getGeometryBoundingBox(geometry)
+      this.bbox = bbox
+      this.fileName = file.name
+      this.bboxChange.emit(bbox)
+      this.cd.markForCheck()
+    } catch {
+      this.setError(marker('search.filters.spatialExtent.error.invalidFormat'))
+      return
+    }
+  }
+
+  handleFileError(error: DragAndDropFileInputError) {
+    if (error === 'file-too-large') {
+      this.setError(marker('search.filters.spatialExtent.error.fileTooLarge'), {
+        maxSize: this.maxFileSizeMb,
+      })
+    } else {
+      this.setError(marker('search.filters.spatialExtent.error.invalidFormat'))
+    }
+  }
+
+  private setError(errorKey: string, params?: Record<string, string | number>) {
+    this.errorKey = errorKey
+    this.errorChange.emit({ key: errorKey, params })
+    this.cd.markForCheck()
+  }
+
+  removeSelection(event: Event) {
+    this.bbox = null
+    this.fileName = ''
+    this.errorKey = null
+    this.fileInput?.clear()
+    this.bboxChange.emit(null)
+    propagateToDocumentOnly(event)
+  }
+}

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

@@ -29,11 +29,11 @@ import {
   MapExtentChangeEvent,
   MapExtentChangeEventType,
   MapContext,
-  MapContextLayerXyz,
   MapContextView,
   MapEventsByType,
   SourceLoadErrorEvent,
   SourceLoadErrorType,
+  MapContextLayerMapLibreStyle,
 } from '@geospatial-sdk/core'
 import {
   applyContextDiffToMap,
@@ -55,10 +55,11 @@ import {
 import { matSwipeOutline } from '@ng-icons/material-icons/outline'
 import { transformExtent } from 'ol/proj.js'
 
-const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
-  type: 'xyz',
-  url: `https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-  attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
+export const DEFAULT_BASEMAP_LAYER: MapContextLayerMapLibreStyle = {
+  type: 'maplibre-style',
+  styleUrl: `https://basemaps.cartocdn.com/gl/positron-gl-style/style.json`,
+  clickable: false,
+  hoverable: false,
 }
 
 const DEFAULT_VIEW: MapContextView = {

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

@@ -252,6 +252,7 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
           'search_preset',
           'advanced_filters',
           'limit',
+          'spatial_extent_max_file_size',
         ],
         warnings,
         errors
@@ -281,6 +282,8 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
               })),
               ADVANCED_FILTERS: parsedSearchSection.advanced_filters,
               LIMIT: parsedSearchSection.limit,
+              SPATIAL_EXTENT_MAX_FILE_SIZE:
+                parsedSearchSection.spatial_extent_max_file_size,
             } as SearchConfig)
 
       const parsedMetadataQualitySection = parseConfigSection(

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

@@ -63,6 +63,7 @@ export interface SearchConfig {
   SEARCH_PRESET?: SearchPreset[]
   ADVANCED_FILTERS?: []
   LIMIT?: number
+  SPATIAL_EXTENT_MAX_FILE_SIZE?: number
 }
 
 export interface MetadataQualityConfig {

package/src/libs/util/shared/src/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
+export * from './lib/autofocus.directive'
 export * from './lib/image-fallback.directive'
 export * from './lib/gn-ui-version'
 export * from './lib/record'

package/src/libs/util/shared/src/lib/autofocus.directive.ts

@@ -0,0 +1,26 @@
+import {
+  Directive,
+  ElementRef,
+  Injector,
+  Input,
+  afterNextRender,
+  booleanAttribute,
+  inject,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiAutofocus]',
+  standalone: true,
+})
+export class AutofocusDirective {
+  private el = inject<ElementRef<HTMLElement>>(ElementRef)
+  private injector = inject(Injector)
+
+  @Input({ alias: 'gnUiAutofocus', transform: booleanAttribute })
+  set autofocus(active: boolean) {
+    if (!active) return
+    afterNextRender(() => this.el.nativeElement.focus(), {
+      injector: this.injector,
+    })
+  }
+}

package/src/libs/util/shared/src/lib/services/date.service.ts

@@ -35,10 +35,10 @@ export class DateService {
     return { locale, dateObj }
   }
 
-  private async getDateLocale(): Promise<Locale> {
+  async getDateFnsLocale(): Promise<Locale> {
     const lang = this.translateService.getCurrentLang() || DEFAULT_LANGUAGE
     const locales = await this.dateLocales
-    return locales[lang]
+    return locales[lang] ?? locales[DEFAULT_LANGUAGE]
   }
 
   formatDate(
@@ -61,7 +61,7 @@ export class DateService {
     const dateObj = this.getDateObject(date)
 
     const now = new Date()
-    const locale = await this.getDateLocale()
+    const locale = await this.getDateFnsLocale()
 
     return formatDistance(dateObj, now, {
       addSuffix: true,

package/src/libs/util/shared/src/lib/utils/file.ts

@@ -0,0 +1,15 @@
+export function isFileExtensionValid(
+  fileName: string,
+  acceptedExtensions: string[]
+): boolean {
+  return acceptedExtensions.some((ext) => fileName.toLowerCase().endsWith(ext))
+}
+
+export function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(file)
+  })
+}

package/src/libs/util/shared/src/lib/utils/geojson.ts

@@ -38,6 +38,14 @@ export function getGeometryFromGeoJSON(
 // FIXME: this type should be more generic across the project
 export type BoundingBox = [number, number, number, number]
 
+export function isBoundingBox(value: unknown): value is BoundingBox {
+  return (
+    Array.isArray(value) &&
+    value.length === 4 &&
+    value.every((item) => typeof item === 'number')
+  )
+}
+
 export function getGeometryBoundingBox(geometry: Geometry): BoundingBox {
   // use the bounding box if specified in the GeoJSON object
   if (geometry.bbox) {

package/src/libs/util/shared/src/lib/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './bytes-convert'
 export * from './event'
+export * from './file'
 export * from './format-fields'
 export * from './fuzzy-filter'
 export * from './geojson'

package/tailwind.base.css

@@ -224,6 +224,11 @@
     disabled:cursor-not-allowed disabled:border-gray-100 disabled:placeholder-gray-300 disabled:text-gray-700 disabled:bg-white;
   }
 
+  .gn-ui-gray-outline-input {
+    @apply bg-white rounded-lg
+    border border-gray-400 hover:border-neutral-300 hover:bg-black/10;
+  }
+
   /* GENERIC CARD */
   .gn-ui-card {
     @apply flex flex-row border border-gray-200 rounded-xl p-4 gap-2 w-full;

package/translations/de.json

@@ -65,9 +65,10 @@
   "dataset.error.restrictedAccess": "",
   "dataset.error.unknown": "Die Daten können nicht angezeigt werden: \"{ info }\"",
   "dataset.error.unsupportedType": "Der folgende Inhaltstyp wird nicht unterstützt: \"{ info }\"",
-  "daterange.filter.from": "Von",
+  "daterange.filter.datePlaceholder": "tt.mm.jjjj",
+  "daterange.filter.from": "Ab dem",
   "daterange.filter.period": "Zeitraum auswählen",
-  "daterange.filter.to": "Bis",
+  "daterange.filter.to": "Bis zum",
   "domain.contact.role.author": "Autor",
   "domain.contact.role.collaborator": "Mitarbeiter",
   "domain.contact.role.contributor": "Beitragender",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "Dienste",
   "search.filters.representationType": "Repräsentationstyp",
   "search.filters.resourceType": "Ressourcentyp",
+  "search.filters.spatialExtent": "",
+  "search.filters.spatialExtent.bboxDelete": "",
+  "search.filters.spatialExtent.bboxPrefix": "",
+  "search.filters.spatialExtent.error.fileTooLarge": "",
+  "search.filters.spatialExtent.error.invalidFormat": "",
+  "search.filters.spatialExtent.error.noGeometry": "",
+  "search.filters.spatialExtent.error.title": "",
+  "search.filters.spatialExtent.helpText": "",
+  "search.filters.spatialExtent.import": "",
   "search.filters.standard": "Standard",
   "search.filters.summaryLabel.changeDate": "Geändert am: ",
   "search.filters.summaryLabel.user": "Geändert von: ",

package/translations/en.json

@@ -65,9 +65,10 @@
   "dataset.error.restrictedAccess": "Access to this resource is restricted",
   "dataset.error.unknown": "The data cannot be displayed: \"{ info }\"",
   "dataset.error.unsupportedType": "The following content type is unsupported: \"{ info }\"",
+  "daterange.filter.datePlaceholder": "mm/dd/yyyy",
   "daterange.filter.from": "From",
   "daterange.filter.period": "Period",
-  "daterange.filter.to": "To",
+  "daterange.filter.to": "Until",
   "domain.contact.role.author": "Author",
   "domain.contact.role.collaborator": "Collaborator",
   "domain.contact.role.contributor": "Contributor",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "Services",
   "search.filters.representationType": "Representation type",
   "search.filters.resourceType": "Resource type",
+  "search.filters.spatialExtent": "Spatial extent",
+  "search.filters.spatialExtent.bboxDelete": "Delete",
+  "search.filters.spatialExtent.bboxPrefix": "bbox from",
+  "search.filters.spatialExtent.error.fileTooLarge": "The file exceeds the maximum allowed size ({maxSize} MB)",
+  "search.filters.spatialExtent.error.invalidFormat": "The file could not be read as a valid GeoJSON",
+  "search.filters.spatialExtent.error.noGeometry": "No geometry could be found in the file",
+  "search.filters.spatialExtent.error.title": "GeoJSON import error",
+  "search.filters.spatialExtent.helpText": "The selected item for the spatial extent will be converted to a bbox",
+  "search.filters.spatialExtent.import": "Import a GeoJSON",
   "search.filters.standard": "Standard",
   "search.filters.summaryLabel.changeDate": "Updated: ",
   "search.filters.summaryLabel.user": "Editor: ",

package/translations/es.json

@@ -65,6 +65,7 @@
   "dataset.error.restrictedAccess": "",
   "dataset.error.unknown": "",
   "dataset.error.unsupportedType": "",
+  "daterange.filter.datePlaceholder": "dd/mm/aaaa",
   "daterange.filter.from": "",
   "daterange.filter.period": "",
   "daterange.filter.to": "",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "",
   "search.filters.representationType": "",
   "search.filters.resourceType": "",
+  "search.filters.spatialExtent": "",
+  "search.filters.spatialExtent.bboxDelete": "",
+  "search.filters.spatialExtent.bboxPrefix": "",
+  "search.filters.spatialExtent.error.fileTooLarge": "",
+  "search.filters.spatialExtent.error.invalidFormat": "",
+  "search.filters.spatialExtent.error.noGeometry": "",
+  "search.filters.spatialExtent.error.title": "",
+  "search.filters.spatialExtent.helpText": "",
+  "search.filters.spatialExtent.import": "",
   "search.filters.standard": "",
   "search.filters.summaryLabel.changeDate": "",
   "search.filters.summaryLabel.user": "",

package/translations/fr.json

@@ -65,9 +65,10 @@
   "dataset.error.restrictedAccess": "L’accès à cette ressource est restreint",
   "dataset.error.unknown": "Les données ne peuvent être affichées: \"{ info }\"",
   "dataset.error.unsupportedType": "Le type de contenu suivant n'est pas pris en charge: \"{ info }\"",
-  "daterange.filter.from": "Du",
+  "daterange.filter.datePlaceholder": "jj/mm/aaaa",
+  "daterange.filter.from": "A partir du",
   "daterange.filter.period": "Choix de la période",
-  "daterange.filter.to": "Au",
+  "daterange.filter.to": "Jusqu'au",
   "domain.contact.role.author": "Auteur",
   "domain.contact.role.collaborator": "Collaborateur",
   "domain.contact.role.contributor": "Contributeur",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "Services",
   "search.filters.representationType": "Type de représentation",
   "search.filters.resourceType": "Type de ressource",
+  "search.filters.spatialExtent": "Étendue spatiale",
+  "search.filters.spatialExtent.bboxDelete": "Supprimer",
+  "search.filters.spatialExtent.bboxPrefix": "bbox de",
+  "search.filters.spatialExtent.error.fileTooLarge": "Le fichier dépasse la taille maximale autorisée ({maxSize} Mo)",
+  "search.filters.spatialExtent.error.invalidFormat": "Le fichier n'a pas pu être lu comme un GeoJSON valide",
+  "search.filters.spatialExtent.error.noGeometry": "Aucune géométrie n'a pu être trouvée dans le fichier",
+  "search.filters.spatialExtent.error.title": "Erreur d'importation GeoJSON",
+  "search.filters.spatialExtent.helpText": "L’élément sélectionné pour l'étendue sera converti en bbox",
+  "search.filters.spatialExtent.import": "Importer un GeoJSON",
   "search.filters.standard": "Standard",
   "search.filters.summaryLabel.changeDate": "Mise à jour : ",
   "search.filters.summaryLabel.user": "Éditeur : ",

package/translations/it.json

@@ -65,6 +65,7 @@
   "dataset.error.restrictedAccess": "L'accesso a questa risorsa è limitato",
   "dataset.error.unknown": "Impossibile visualizzare i dati: \"{info}\"",
   "dataset.error.unsupportedType": "Il seguente tipo di contenuto non è supportato: \"{info}\"",
+  "daterange.filter.datePlaceholder": "gg/mm/aaaa",
   "daterange.filter.from": "",
   "daterange.filter.period": "",
   "daterange.filter.to": "",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "Servizi",
   "search.filters.representationType": "Tipo di rappresentazione",
   "search.filters.resourceType": "Tipo di risorsa",
+  "search.filters.spatialExtent": "",
+  "search.filters.spatialExtent.bboxDelete": "",
+  "search.filters.spatialExtent.bboxPrefix": "",
+  "search.filters.spatialExtent.error.fileTooLarge": "",
+  "search.filters.spatialExtent.error.invalidFormat": "",
+  "search.filters.spatialExtent.error.noGeometry": "",
+  "search.filters.spatialExtent.error.title": "",
+  "search.filters.spatialExtent.helpText": "",
+  "search.filters.spatialExtent.import": "",
   "search.filters.standard": "Standard",
   "search.filters.summaryLabel.changeDate": "Aggiornato: ",
   "search.filters.summaryLabel.user": "Editor: ",

package/translations/nl.json

@@ -65,6 +65,7 @@
   "dataset.error.restrictedAccess": "",
   "dataset.error.unknown": "",
   "dataset.error.unsupportedType": "",
+  "daterange.filter.datePlaceholder": "dd-mm-jjjj",
   "daterange.filter.from": "",
   "daterange.filter.period": "",
   "daterange.filter.to": "",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "",
   "search.filters.representationType": "",
   "search.filters.resourceType": "",
+  "search.filters.spatialExtent": "",
+  "search.filters.spatialExtent.bboxDelete": "",
+  "search.filters.spatialExtent.bboxPrefix": "",
+  "search.filters.spatialExtent.error.fileTooLarge": "",
+  "search.filters.spatialExtent.error.invalidFormat": "",
+  "search.filters.spatialExtent.error.noGeometry": "",
+  "search.filters.spatialExtent.error.title": "",
+  "search.filters.spatialExtent.helpText": "",
+  "search.filters.spatialExtent.import": "",
   "search.filters.standard": "",
   "search.filters.summaryLabel.changeDate": "",
   "search.filters.summaryLabel.user": "",

package/translations/pt.json

@@ -65,6 +65,7 @@
   "dataset.error.restrictedAccess": "",
   "dataset.error.unknown": "",
   "dataset.error.unsupportedType": "",
+  "daterange.filter.datePlaceholder": "dd/mm/aaaa",
   "daterange.filter.from": "",
   "daterange.filter.period": "",
   "daterange.filter.to": "",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "",
   "search.filters.representationType": "",
   "search.filters.resourceType": "",
+  "search.filters.spatialExtent": "",
+  "search.filters.spatialExtent.bboxDelete": "",
+  "search.filters.spatialExtent.bboxPrefix": "",
+  "search.filters.spatialExtent.error.fileTooLarge": "",
+  "search.filters.spatialExtent.error.invalidFormat": "",
+  "search.filters.spatialExtent.error.noGeometry": "",
+  "search.filters.spatialExtent.error.title": "",
+  "search.filters.spatialExtent.helpText": "",
+  "search.filters.spatialExtent.import": "",
   "search.filters.standard": "",
   "search.filters.summaryLabel.changeDate": "",
   "search.filters.summaryLabel.user": "",

package/translations/sk.json

@@ -65,6 +65,7 @@
   "dataset.error.restrictedAccess": "",
   "dataset.error.unknown": "Dáta nie je možné zobraziť: \"{ info }\"",
   "dataset.error.unsupportedType": "Nepodporovaný typ obsahu: \"{ info }\"",
+  "daterange.filter.datePlaceholder": "d. m. rrrr",
   "daterange.filter.from": "",
   "daterange.filter.period": "",
   "daterange.filter.to": "",
@@ -690,6 +691,15 @@
   "search.filters.recordKind.service": "",
   "search.filters.representationType": "Typ reprezentácie",
   "search.filters.resourceType": "Typ zdroja",
+  "search.filters.spatialExtent": "",
+  "search.filters.spatialExtent.bboxDelete": "",
+  "search.filters.spatialExtent.bboxPrefix": "",
+  "search.filters.spatialExtent.error.fileTooLarge": "",
+  "search.filters.spatialExtent.error.invalidFormat": "",
+  "search.filters.spatialExtent.error.noGeometry": "",
+  "search.filters.spatialExtent.error.title": "",
+  "search.filters.spatialExtent.helpText": "",
+  "search.filters.spatialExtent.import": "",
   "search.filters.standard": "Štandard",
   "search.filters.summaryLabel.changeDate": "",
   "search.filters.summaryLabel.user": "",