geonetwork-ui 2.8.0-dev.93d2d87c0 → 2.8.0-dev.b7a1670bc

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -3,28 +3,34 @@
     data-test="previousButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isFirstPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isFirstPage"
     (buttonClick)="listComponent.goToPrevPage()"
   >
     <ng-icon name="matArrowBackIos"></ng-icon>
+    <span *ngIf="displayLabels" class="ml-2" translate
+      >pagination.previousPage</span
+    >
   </gn-ui-button>
   <gn-ui-button
     data-test="nextButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isLastPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isLastPage"
     (buttonClick)="listComponent.goToNextPage()"
   >
+    <span *ngIf="displayLabels" class="mr-2" translate
+      >pagination.nextPage</span
+    >
     <ng-icon name="matArrowForwardIos"></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -10,13 +10,15 @@ import {
 } from '@ng-icons/material-icons/baseline'
 import { Paginable } from '../paginable.interface'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-previous-next-buttons',
   templateUrl: './previous-next-buttons.component.html',
   styleUrls: ['./previous-next-buttons.component.css'],
   standalone: true,
-  imports: [ButtonComponent, NgIconComponent],
+  imports: [CommonModule, ButtonComponent, NgIconComponent, TranslateDirective],
   providers: [
     provideIcons({ matArrowBackIos, matArrowForwardIos }),
     provideNgIconsConfig({
@@ -26,4 +28,5 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 })
 export class PreviousNextButtonsComponent {
   @Input() listComponent: Paginable
+  @Input() displayLabels = false
 }

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

@@ -1,16 +1,18 @@
-<div class="h-full w-full" #map></div>
-<div
-  class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
-  [ngClass]="
-    (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
-  "
->
+<div class="relative h-full w-full" #map>
+  <ng-content></ng-content>
   <div
-    class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
-  ></div>
-  <ng-icon
-    class="!w-16 !h-16 text-[64px] mb-4"
-    name="matSwipeOutline"
-  ></ng-icon>
-  <p translate>map.navigation.message</p>
+    class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
+    [ngClass]="
+      (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
+    "
+  >
+    <div
+      class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
+    ></div>
+    <ng-icon
+      class="!w-16 !h-16 text-[64px] mb-4"
+      name="matSwipeOutline"
+    ></ng-icon>
+    <p translate>map.navigation.message</p>
+  </div>
 </div>

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

@@ -2,9 +2,11 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   EventEmitter,
   Inject,
+  inject,
   Input,
   OnChanges,
   Output,
@@ -13,6 +15,7 @@ import {
 } from '@angular/core'
 import { fromEvent, merge, Observable, of, timer } from 'rxjs'
 import { delay, map, startWith, switchMap } from 'rxjs/operators'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
 import {
@@ -24,10 +27,13 @@ import {
   FeaturesHoverEventType,
   MapClickEvent,
   MapClickEventType,
+  MapExtentChangeEvent,
+  MapExtentChangeEventType,
   MapContext,
   MapContextLayer,
   MapContextLayerXyz,
   MapContextView,
+  MapEventsByType,
   SourceLoadErrorEvent,
   SourceLoadErrorType,
 } from '@geospatial-sdk/core'
@@ -49,6 +55,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { matSwipeOutline } from '@ng-icons/material-icons/outline'
+import { transformExtent } from 'ol/proj'
 
 const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
   type: 'xyz',
@@ -61,6 +68,11 @@ const DEFAULT_VIEW: MapContextView = {
   zoom: 2,
 }
 
+interface MapViewConstraints {
+  maxZoom?: number
+  maxExtent?: Extent
+}
+
 @Component({
   selector: 'gn-ui-map-container',
   templateUrl: './map-container.component.html',
@@ -78,86 +90,151 @@ const DEFAULT_VIEW: MapContextView = {
 export class MapContainerComponent implements AfterViewInit, OnChanges {
   @Input() context: MapContext | null
 
-  // these events only get registered on the map if they are used
-  _featuresClick: EventEmitter<Feature[]>
+  @ViewChild('map') container: ElementRef
+
+  private olMap: OlMap
+  private olMapResolver: (value: OlMap) => void
+  private destroyRef: DestroyRef
+
+  displayMessage$: Observable<boolean>
+  openlayersMap = new Promise<OlMap>((resolve) => {
+    this.olMapResolver = resolve
+  })
+
+  // These events only get registered on the map if they are used
+  _featuresClick: EventEmitter<Feature[]> = null
+  _featuresHover: EventEmitter<Feature[]> = null
+  _mapClick: EventEmitter<[number, number]> = null
+  _extentChange: EventEmitter<Extent> = null
+  _sourceLoadError: EventEmitter<SourceLoadErrorEvent> = null
+  _resolvedExtentChange: EventEmitter<Extent> = null
+
   @Output() get featuresClick() {
     if (!this._featuresClick) {
-      this.openlayersMap.then((olMap) => {
-        listen(
-          olMap,
-          FeaturesClickEventType,
-          ({ features }: FeaturesClickEvent) =>
-            this._featuresClick.emit(features)
-        )
-      })
+      this.setupEventListener(
+        FeaturesClickEventType,
+        (event: FeaturesClickEvent) => {
+          this._featuresClick.emit(event.features)
+        }
+      )
       this._featuresClick = new EventEmitter<Feature[]>()
     }
     return this._featuresClick
   }
-  _featuresHover: EventEmitter<Feature[]>
+
   @Output() get featuresHover() {
     if (!this._featuresHover) {
-      this.openlayersMap.then((olMap) => {
-        listen(
-          olMap,
-          FeaturesHoverEventType,
-          ({ features }: FeaturesHoverEvent) =>
-            this._featuresHover.emit(features)
-        )
-      })
+      this.setupEventListener(
+        FeaturesHoverEventType,
+        (event: FeaturesHoverEvent) => {
+          this._featuresHover.emit(event.features)
+        }
+      )
       this._featuresHover = new EventEmitter<Feature[]>()
     }
     return this._featuresHover
   }
-  _mapClick: EventEmitter<[number, number]>
+
   @Output() get mapClick() {
     if (!this._mapClick) {
-      this.openlayersMap.then((olMap) => {
-        listen(olMap, MapClickEventType, ({ coordinate }: MapClickEvent) =>
-          this._mapClick.emit(coordinate)
-        )
+      this.setupEventListener(MapClickEventType, (event: MapClickEvent) => {
+        this._mapClick.emit(event.coordinate)
       })
       this._mapClick = new EventEmitter<[number, number]>()
     }
     return this._mapClick
   }
-  _sourceLoadError: EventEmitter<SourceLoadErrorEvent>
+
+  @Output() get extentChange() {
+    if (!this._extentChange) {
+      this.setupEventListener(
+        MapExtentChangeEventType,
+        (event: MapExtentChangeEvent) => {
+          this._extentChange.emit(event.extent as Extent)
+        }
+      )
+      this._extentChange = new EventEmitter<Extent>()
+    }
+    return this._extentChange
+  }
+
   @Output() get sourceLoadError() {
     if (!this._sourceLoadError) {
-      this.openlayersMap.then((olMap) => {
-        listen(olMap, SourceLoadErrorType, (error: SourceLoadErrorEvent) =>
-          this._sourceLoadError.emit(error)
-        )
-      })
+      this.setupEventListener(
+        SourceLoadErrorType,
+        (event: SourceLoadErrorEvent) => {
+          this._sourceLoadError.emit(event)
+        }
+      )
       this._sourceLoadError = new EventEmitter<SourceLoadErrorEvent>()
     }
     return this._sourceLoadError
   }
 
-  @ViewChild('map') container: ElementRef
-  displayMessage$: Observable<boolean>
-  olMap: OlMap
+  @Output() get resolvedExtentChange() {
+    if (!this._resolvedExtentChange) {
+      this._resolvedExtentChange = new EventEmitter<Extent>()
+    }
+    return this._resolvedExtentChange
+  }
 
   constructor(
     @Inject(DO_NOT_USE_DEFAULT_BASEMAP) private doNotUseDefaultBasemap: boolean,
     @Inject(BASEMAP_LAYERS) private basemapLayers: MapContextLayer[],
     @Inject(MAP_VIEW_CONSTRAINTS)
-    private mapViewConstraints: {
-      maxZoom?: number
-      maxExtent?: Extent
-    }
-  ) {}
+    private mapViewConstraints: MapViewConstraints
+  ) {
+    this.destroyRef = inject(DestroyRef)
+  }
 
-  private olMapResolver
-  openlayersMap = new Promise<OlMap>((resolve) => {
-    this.olMapResolver = resolve
-  })
+  calculateCurrentMapExtent(): Extent {
+    const extent = this.olMap.getView().calculateExtent(this.olMap.getSize())
+    const reprojectedExtent = transformExtent(
+      extent,
+      this.olMap.getView().getProjection(),
+      'EPSG:4326'
+    )
+
+    return reprojectedExtent as Extent
+  }
 
   async ngAfterViewInit() {
     this.olMap = await createMapFromContext(
       this.processContext(this.context),
       this.container.nativeElement
     )
+    if (this._resolvedExtentChange) {
+      this._resolvedExtentChange.emit(this.calculateCurrentMapExtent())
+    }
+
+    this.setupDisplayMessageObservable()
+    this.olMapResolver(this.olMap)
+  }
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes && !changes['context'].isFirstChange()) {
+      const diff = computeMapContextDiff(
+        this.processContext(changes['context'].currentValue),
+        this.processContext(changes['context'].previousValue)
+      )
+      await applyContextDiffToMap(this.olMap, diff)
+
+      if (this._resolvedExtentChange && diff.viewChanges) {
+        this._resolvedExtentChange.emit(this.calculateCurrentMapExtent())
+      }
+    }
+  }
+
+  private setupEventListener(
+    eventType: keyof MapEventsByType,
+    handler: (event: MapEventsByType[typeof eventType]) => void
+  ) {
+    this.openlayersMap.then((olMap: OlMap) => {
+      listen(olMap, eventType, handler)
+    })
+  }
+
+  private setupDisplayMessageObservable() {
     this.displayMessage$ = merge(
       fromEvent(this.olMap, 'mapmuted').pipe(map(() => true)),
       fromEvent(this.olMap, 'movestart').pipe(map(() => false)),
@@ -171,32 +248,25 @@ export class MapContainerComponent implements AfterViewInit, OnChanges {
               delay(400)
             )
           : of(false)
-      )
+      ),
+      takeUntilDestroyed(this.destroyRef)
     )
-    this.olMapResolver(this.olMap)
   }
 
-  async ngOnChanges(changes: SimpleChanges) {
-    if ('context' in changes && !changes['context'].isFirstChange()) {
-      const diff = computeMapContextDiff(
-        this.processContext(changes['context'].currentValue),
-        this.processContext(changes['context'].previousValue)
-      )
-      await applyContextDiffToMap(this.olMap, diff)
-    }
-  }
-
-  // This will apply basemap layers & view constraints
-  processContext(context: MapContext): MapContext {
+  private processContext(context: MapContext): MapContext {
     const processed = context
       ? { ...context, view: context.view ?? DEFAULT_VIEW }
       : { layers: [], view: DEFAULT_VIEW }
+
+    // Prepend with default basemap and basemap layers
     if (this.basemapLayers.length) {
       processed.layers = [...this.basemapLayers, ...processed.layers]
     }
     if (!this.doNotUseDefaultBasemap) {
       processed.layers = [DEFAULT_BASEMAP_LAYER, ...processed.layers]
     }
+
+    // Apply view constraints
     if (this.mapViewConstraints.maxZoom) {
       processed.view = {
         maxZoom: this.mapViewConstraints.maxZoom,
@@ -209,20 +279,29 @@ export class MapContainerComponent implements AfterViewInit, OnChanges {
         ...processed.view,
       }
     }
+
     if (
       processed.view &&
-      !('zoom' in processed.view) &&
-      !('center' in processed.view)
+      'zoom' in processed.view &&
+      'center' in processed.view
     ) {
-      if (this.mapViewConstraints.maxExtent) {
-        processed.view = {
-          extent: this.mapViewConstraints.maxExtent,
-          ...processed.view,
-        }
-      } else {
-        processed.view = { ...DEFAULT_VIEW, ...processed.view }
+      return processed
+    }
+
+    if (processed.view && 'extent' in processed.view) {
+      return processed
+    }
+
+    // Ensure valid view
+    if (this.mapViewConstraints.maxExtent) {
+      processed.view = {
+        extent: this.mapViewConstraints.maxExtent,
+        ...processed.view,
       }
+    } else {
+      processed.view = { ...DEFAULT_VIEW, ...processed.view }
     }
+
     return processed
   }
 }

package/src/libs/util/i18n/src/lib/date-locales.ts

@@ -0,0 +1,63 @@
+import { LanguageCode2 } from './language-codes'
+import {
+  ar,
+  az,
+  ca,
+  cs,
+  cy,
+  da,
+  de,
+  enUS,
+  es,
+  fi,
+  fr,
+  hy,
+  is,
+  it,
+  ka,
+  ko,
+  Locale,
+  nl,
+  nn,
+  pl,
+  pt,
+  ru,
+  sk,
+  sv,
+  tr,
+  uk,
+  zhCN,
+} from 'date-fns/locale'
+
+// all 2-char language codes should be listed here
+const locales: Record<LanguageCode2, Locale> = {
+  en: enUS,
+  nl: nl,
+  fr: fr,
+  de: de,
+  ko: ko,
+  es: es,
+  cs: cs,
+  ca: ca,
+  fi: fi,
+  is: is,
+  it: it,
+  pt: pt,
+  ru: ru,
+  zh: zhCN,
+  sk: sk,
+  ar: ar,
+  da: da,
+  no: nn,
+  pl: pl,
+  sv: sv,
+  tr: tr,
+  hy: hy,
+  az: az,
+  ka: ka,
+  uk: uk,
+  cy: cy,
+  rm: enUS, // locale is unavailable
+}
+
+export default locales

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

@@ -4,3 +4,4 @@ export * from './lib/links'
 export * from './lib/image-fallback.directive'
 export * from './lib/gn-ui-version'
 export * from './lib/record'
+export * from './lib/humanize-date.directive'

package/src/libs/util/shared/src/lib/humanize-date.directive.ts

@@ -0,0 +1,35 @@
+import { Renderer2, Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { DateService } from './services/date.service'
+
+@Directive({
+  selector: '[gnUiHumanizeDate]',
+  standalone: true,
+})
+export class GnUiHumanizeDateDirective implements OnInit {
+  @Input() gnUiHumanizeDate: Date | string
+
+  constructor(
+    private dateService: DateService,
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  async ngOnInit() {
+    await this.updateElement()
+  }
+
+  private async updateElement(): Promise<void> {
+    const dateValue = this.gnUiHumanizeDate
+
+    const fullDateTime = this.dateService.formatDateTime(dateValue)
+    const relativeDate =
+      await this.dateService.formatRelativeDateTime(dateValue)
+
+    this.renderer.setAttribute(this.el.nativeElement, 'title', fullDateTime)
+    this.renderer.setProperty(
+      this.el.nativeElement,
+      'textContent',
+      relativeDate
+    )
+  }
+}

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -39,6 +39,10 @@ export class LinkClassifierService {
             return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA]
           case 'GPFDL':
             return [LinkUsage.API]
+          case 'postgis':
+            return [LinkUsage.UNKNOWN]
+          case 'stac':
+            return [LinkUsage.API]
           default:
             return [LinkUsage.UNKNOWN]
         }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -150,6 +150,12 @@ export const FORMATS = {
     color: '#5A9E6F',
     mimeTypes: ['image/webp'],
   },
+  postgis: {
+    extensions: ['postgis'],
+    priority: 18,
+    color: '#336791',
+    mimeTypes: [],
+  },
 } as const
 
 export type FileFormat = keyof typeof FORMATS
@@ -195,6 +201,11 @@ export function getFileFormatFromServiceOutput(
 export function getFileFormat(
   link: DatasetOnlineResource | ServiceOnlineResource
 ): FileFormat {
+  if ('accessServiceProtocol' in link) {
+    if (link.accessServiceProtocol in FORMATS) {
+      return link.accessServiceProtocol as FileFormat
+    }
+  }
   if ('mimeType' in link) {
     const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
     if (mimeTypeFormat !== null) {

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

@@ -1,10 +1,18 @@
 import { Injectable } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
+import { type Locale } from 'date-fns/locale'
+import { formatDistance } from 'date-fns/formatDistance'
+
+const DEFAULT_LANGUAGE = 'en'
 
 @Injectable({
   providedIn: 'root',
 })
 export class DateService {
+  dateLocales = import('../../../../../../libs/util/i18n/src/lib/date-locales').then(
+    (obj) => obj.default
+  )
+
   constructor(private translateService: TranslateService) {}
 
   private getDateObject(date: Date | string): Date {
@@ -22,11 +30,17 @@ export class DateService {
     locale: string
     dateObj: Date
   } {
-    const locale = this.translateService.currentLang || 'en-US'
+    const locale = this.translateService.currentLang || DEFAULT_LANGUAGE
     const dateObj = this.getDateObject(date)
     return { locale, dateObj }
   }
 
+  private async getDateLocale(): Promise<Locale> {
+    const lang = this.translateService.currentLang || DEFAULT_LANGUAGE
+    const locales = await this.dateLocales
+    return locales[lang]
+  }
+
   formatDate(
     date: Date | string,
     options?: Intl.DateTimeFormatOptions
@@ -42,4 +56,16 @@ export class DateService {
     const { locale, dateObj } = this.getLocaleAndDate(date)
     return dateObj.toLocaleString(locale, options)
   }
+
+  async formatRelativeDateTime(date: Date | string): Promise<string> {
+    const dateObj = this.getDateObject(date)
+
+    const now = new Date()
+    const locale = await this.getDateLocale()
+
+    return formatDistance(dateObj, now, {
+      addSuffix: true,
+      locale: locale,
+    })
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Inject, Injectable, InjectionToken, Optional } from '@angular/core'
+import { Injectable, InjectionToken, Injector } from '@angular/core'
 import { Location } from '@angular/common'
 
 export const PROXY_PATH = new InjectionToken<string>('proxyPath')
@@ -7,8 +7,12 @@ export const PROXY_PATH = new InjectionToken<string>('proxyPath')
   providedIn: 'root',
 })
 export class ProxyService {
+  private get proxyPath(): string | null {
+    return this.injector.get(PROXY_PATH, null)
+  }
+
   constructor(
-    @Optional() @Inject(PROXY_PATH) private proxyPath: string,
+    private injector: Injector,
     private location: Location
   ) {}
 

package/src/libs/util/shared/src/lib/utils/sort-by.ts

@@ -6,12 +6,15 @@ export function sortByToStrings(sortBy: SortByField): string[] {
 }
 
 export function sortByToString(sortBy: SortByField): string {
-  return sortByToStrings(sortBy)[0]
+  return sortByToStrings(sortBy).join(',')
 }
 
 export function sortByFromString(sortByString: string): SortByField {
-  return [
-    sortByString.startsWith('-') ? 'desc' : 'asc',
-    sortByString.startsWith('-') ? sortByString.substring(1) : sortByString,
-  ]
+  const fields = sortByString
+    .split(',')
+    .map((field) => [
+      field.startsWith('-') ? 'desc' : 'asc',
+      field.startsWith('-') ? field.substring(1) : field,
+    ]) as SortByField
+  return fields.length > 1 ? fields : (fields[0] as SortByField)
 }