geonetwork-ui 2.8.0-dev.c77b0c7dd → 2.8.0-dev.d7c07c0b9

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectorRef,
   Component,
@@ -6,6 +5,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { MatDialog, MatDialogModule } from '@angular/material/dialog'
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
@@ -20,7 +20,6 @@ type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
   styleUrls: ['./action-menu.component.css'],
   standalone: true,
   imports: [
-    CommonModule,
     ButtonComponent,
     MatMenuModule,
     MatDialogModule,
@@ -29,6 +28,9 @@ type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
   ],
 })
 export class ActionMenuComponent {
+  dialog = inject(MatDialog)
+  private cdr = inject(ChangeDetectorRef)
+
   @Input() canDuplicate = true
   @Input() isDuplicating: boolean
   @Input() canDelete = true
@@ -43,11 +45,6 @@ export class ActionMenuComponent {
 
   sectionDisplayed: ActionMenuPage = 'mainMenu'
 
-  constructor(
-    public dialog: MatDialog,
-    private cdr: ChangeDetectorRef
-  ) {}
-
   displayMainMenu() {
     this.sectionDisplayed = 'mainMenu'
     this.cdr.markForCheck()

package/src/libs/ui/search/src/lib/results-table/results-table.component.ts

@@ -9,6 +9,7 @@ import {
   QueryList,
   ViewChildren,
   ViewContainerRef,
+  inject,
 } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
@@ -68,6 +69,12 @@ import { Observable, of, take } from 'rxjs'
   ],
 })
 export class ResultsTableComponent {
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private cdr = inject(ChangeDetectorRef)
+  private dateService = inject(DateService)
+  private translateService = inject(TranslateService)
+
   @Input() records: CatalogRecord[] = []
   @Input() selectedRecordsIdentifiers: string[] = []
   @Input() sortOrder: SortByField = null
@@ -96,14 +103,6 @@ export class ResultsTableComponent {
 
   isActionMenuOpen = false
 
-  constructor(
-    private overlay: Overlay,
-    private viewContainerRef: ViewContainerRef,
-    private cdr: ChangeDetectorRef,
-    private dateService: DateService,
-    private translateService: TranslateService
-  ) {}
-
   openActionMenu(item, template) {
     this.isActionMenuOpen = true
     const index = this.records.indexOf(item)

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import {
   Component,
   AfterViewInit,
@@ -12,6 +11,7 @@ import {
   Renderer2,
   ViewContainerRef,
   EmbeddedViewRef,
+  inject,
 } from '@angular/core'
 import tippy, { Instance } from 'tippy.js'
 
@@ -20,9 +20,12 @@ import tippy, { Instance } from 'tippy.js'
   templateUrl: './popover.component.html',
   styleUrls: ['./popover.component.css'],
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
 })
 export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
+  private viewContainerRef = inject(ViewContainerRef)
+  private renderer = inject(Renderer2)
+
   @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
   @Input() content: string | TemplateRef<any>
   @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
@@ -30,11 +33,6 @@ export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
   private tippyInstance: Instance
   private view: EmbeddedViewRef<any>
 
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private renderer: Renderer2
-  ) {}
-
   private getContent(): string | HTMLElement {
     if (this.content instanceof TemplateRef) {
       if (this.view) {

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   OnInit,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import {
@@ -30,6 +31,8 @@ import { matErrorOutlineOutline } from '@ng-icons/material-icons/outline'
   ],
 })
 export class PopupAlertComponent implements OnInit {
+  private changeDetector = inject(ChangeDetectorRef)
+
   @Input() icon: string
   @Input() type: 'danger' | 'warning' | 'info' = 'info'
   @Input() position: 'top' | 'bottom' = 'top'
@@ -37,8 +40,6 @@ export class PopupAlertComponent implements OnInit {
   expanded = false
   timeout = null
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
-
   get showDuration() {
     const chars = this.content.nativeElement.innerHTML.length
     return Math.max(3000, chars * 20)

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.html

@@ -1,6 +1,6 @@
-<ng-container [ngSwitch]="type">
+@switch (type) {
   <!-- Light Theme -->
-  <ng-container *ngSwitchCase="'light'">
+  @case ('light') {
     <div class="flex items-center relative">
       <div
         class="flex-shrink-0 {{ color.text }} font-medium mr-2
@@ -17,10 +17,9 @@
         ></div>
       </div>
     </div>
-  </ng-container>
-
+  }
   <!-- Default / Primary / Secondary Themes -->
-  <ng-container *ngSwitchDefault>
+  @default {
     <div class="flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg">
       <div
         [style.width.%]="progress"
@@ -34,5 +33,5 @@
         </div>
       </div>
     </div>
-  </ng-container>
-</ng-container>
+  }
+}

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core'
-import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'
 
 interface ColorScheme {
   outerBar: string
@@ -12,7 +11,7 @@ interface ColorScheme {
   templateUrl: './progress-bar.component.html',
   styleUrls: ['./progress-bar.component.css'],
   standalone: true,
-  imports: [NgSwitch, NgSwitchCase, NgSwitchDefault],
+  imports: [],
 })
 export class ProgressBarComponent {
   @Input() value = 0

package/src/libs/util/data-fetcher/src/lib/readers/gml.ts

@@ -1,7 +1,7 @@
 import { BaseFileReader } from './base-file'
 import { DataItem, PropertyInfo } from '../model'
 import { fetchDataAsText, processItemProperties } from '../utils'
-import { GeoJSON, WFS } from 'ol/format'
+import { GeoJSON, WFS } from 'ol/format.js'
 import { WfsVersion } from '@camptocamp/ogc-client'
 
 export function parseGml(

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/i18n/src/lib/i18n.interceptor.ts

@@ -6,12 +6,12 @@ import {
 } from '@angular/common/http'
 import { DEFAULT_LANG } from './i18n.constants'
 import { Observable } from 'rxjs'
-import { Injectable, Injector } from '@angular/core'
+import { Injectable, Injector, inject } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 
 @Injectable()
 export class I18nInterceptor implements HttpInterceptor {
-  constructor(private injector: Injector) {}
+  private injector = inject(Injector)
 
   intercept(
     request: HttpRequest<unknown>,

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,40 @@
+import {
+  Renderer2,
+  Directive,
+  ElementRef,
+  Input,
+  OnInit,
+  inject,
+} from '@angular/core'
+import { DateService } from './services/date.service'
+
+@Directive({
+  selector: '[gnUiHumanizeDate]',
+  standalone: true,
+})
+export class GnUiHumanizeDateDirective implements OnInit {
+  private dateService = inject(DateService)
+  private el = inject(ElementRef)
+  private renderer = inject(Renderer2)
+
+  @Input() gnUiHumanizeDate: Date | string
+
+  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/image-fallback.directive.ts

@@ -1,10 +1,18 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core'
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  inject,
+} from '@angular/core'
 
 @Directive({
   selector: 'img[gnUiImageFallback]',
   standalone: true,
 })
 export class ImageFallbackDirective {
+  private el = inject(ElementRef)
+
   @Input() fallbackUrl: string
   @HostListener('error')
   useFallback() {
@@ -16,5 +24,4 @@ export class ImageFallbackDirective {
       this.el.nativeElement.src = fallbackUrl
     }
   }
-  constructor(private el: ElementRef) {}
 }

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

@@ -57,7 +57,14 @@ export const FORMATS = {
     extensions: ['gml'],
     priority: 5,
     color: '#E75113',
-    mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
+    mimeTypes: [
+      'application/gml+xml',
+      'application/vnd.ogc.gml',
+      'text/xml; subtype=gml',
+      'text/xml; subtype=gml/2.1.2',
+      'text/xml; subtype=gml/3.1.1',
+      'text/xml; subtype=gml/3.2.1',
+    ],
   },
   kml: {
     extensions: ['kml', 'kmz'],
@@ -97,7 +104,7 @@ export const FORMATS = {
     extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
     priority: 9,
     color: '#C4A98F',
-    mimeTypes: ['image/jpg'],
+    mimeTypes: ['image/jpeg'],
   },
   png: {
     extensions: ['png'],
@@ -129,15 +136,21 @@ export const FORMATS = {
     color: '#C0C9B6',
     mimeTypes: ['text/html'],
   },
+  xml: {
+    extensions: ['xml'],
+    priority: 15,
+    color: '#9B59B6',
+    mimeTypes: ['application/xml', 'text/xml'],
+  },
   fgb: {
     extensions: ['fgb', 'flatgeobuf'],
-    priority: 15,
+    priority: 16,
     color: '#A8111C',
     mimeTypes: ['application/flatgeobuf'],
   },
   jsonfg: {
     extensions: ['jsonfg', 'jsonfgc'],
-    priority: 16,
+    priority: 17,
     color: '#009EE0',
     mimeTypes: [
       'application/vnd.ogc.fg+json',
@@ -146,10 +159,16 @@ export const FORMATS = {
   },
   webp: {
     extensions: ['webp'],
-    priority: 17,
+    priority: 18,
     color: '#5A9E6F',
     mimeTypes: ['image/webp'],
   },
+  postgis: {
+    extensions: ['postgis'],
+    priority: 19,
+    color: '#336791',
+    mimeTypes: [],
+  },
 } as const
 
 export type FileFormat = keyof typeof FORMATS
@@ -195,6 +214,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,11 +1,19 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } 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 {
-  constructor(private translateService: TranslateService) {}
+  private translateService = inject(TranslateService)
+
+  dateLocales = import('../../../../../../libs/util/i18n/src/lib/date-locales').then(
+    (obj) => obj.default
+  )
 
   private getDateObject(date: Date | string): Date {
     if (typeof date === 'string') {
@@ -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, inject } from '@angular/core'
 import { Location } from '@angular/common'
 
 export const PROXY_PATH = new InjectionToken<string>('proxyPath')
@@ -7,10 +7,12 @@ export const PROXY_PATH = new InjectionToken<string>('proxyPath')
   providedIn: 'root',
 })
 export class ProxyService {
-  constructor(
-    @Optional() @Inject(PROXY_PATH) private proxyPath: string,
-    private location: Location
-  ) {}
+  private injector = inject(Injector)
+  private location = inject(Location)
+
+  private get proxyPath(): string | null {
+    return this.injector.get(PROXY_PATH, null)
+  }
 
   /**
    * Transforms the URL to go through a proxy specified with the PROXY_PATH

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)
 }

package/tailwind.base.css

@@ -223,5 +223,5 @@
 }
 
 html {
-  --mdc-typography-font-family: var(--font-family-main);
+  --mat-typography-font-family: var(--font-family-main);
 }