geonetwork-ui 2.4.2 → 2.5.0-dev.22c177ea1

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -0,0 +1,173 @@
+import { ScrollingModule } from '@angular/cdk/scrolling'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { MatSort, MatSortModule } from '@angular/material/sort'
+import { MatTableModule } from '@angular/material/table'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DataTableDataSource } from './data-table.data.source'
+import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
+import {
+  MatPaginator,
+  MatPaginatorIntl,
+  MatPaginatorModule,
+} from '@angular/material/paginator'
+import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
+import { CommonModule } from '@angular/common'
+import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import { LetDirective } from '@ngrx/component'
+
+const rowIdPrefix = 'table-item-'
+
+export type TableItemId = string | number
+type TableItemType = string | number | Date
+
+export interface TableItemModel {
+  id: TableItemId
+  [key: string]: TableItemType
+}
+
+@Component({
+  standalone: true,
+  imports: [
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    ScrollingModule,
+    TranslateModule,
+    CommonModule,
+    LoadingMaskComponent,
+    PopupAlertComponent,
+    LetDirective,
+  ],
+  providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
+  selector: 'gn-ui-data-table',
+  templateUrl: './data-table.component.html',
+  styleUrls: ['./data-table.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  @Input() set dataset(value: BaseReader) {
+    this.properties$.next(null)
+    this.dataset_ = value
+    this.dataset_.load()
+    this.dataset_.properties.then((properties) =>
+      this.properties$.next(properties.map((p) => p.name))
+    )
+    this.dataset_.info.then((info) => (this.count = info.itemsCount))
+  }
+  @Input() activeId: TableItemId
+  @Output() selected = new EventEmitter<any>()
+
+  @ViewChild(MatSort) sort: MatSort
+  @ViewChild(MatPaginator) paginator: MatPaginator
+
+  dataset_: BaseReader
+  properties$ = new BehaviorSubject<string[]>(null)
+  dataSource: DataTableDataSource
+  headerHeight: number
+  count: number
+  loading$ = new BehaviorSubject<boolean>(false)
+  error = null
+
+  constructor(
+    private eltRef: ElementRef,
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.dataSource = new DataTableDataSource()
+  }
+
+  ngAfterViewInit() {
+    this.headerHeight =
+      this.eltRef.nativeElement.querySelector('thead').offsetHeight
+    this.setPagination()
+    this.cdr.detectChanges()
+  }
+
+  ngOnChanges() {
+    this.setPagination()
+  }
+
+  setSort(sort: MatSort) {
+    if (!this.dataset_) return
+    if (!sort.active) {
+      this.dataset_.orderBy()
+    } else {
+      this.dataset_.orderBy([sort.direction || 'asc', sort.active])
+    }
+    this.readData()
+  }
+
+  setPagination() {
+    if (!this.paginator) return
+    if (!this.dataset_) return
+    this.dataset_.limit(
+      this.paginator.pageIndex * this.paginator.pageSize,
+      this.paginator.pageSize
+    )
+    this.readData()
+  }
+
+  async readData() {
+    this.loading$.next(true)
+    // wait for properties to be read
+    const properties = await firstValueFrom(
+      this.properties$.pipe(filter((p) => !!p))
+    )
+    const propsWithoutGeom = properties.filter(
+      (p) => !p.toLowerCase().startsWith('geom')
+    )
+    this.dataset_.select(...propsWithoutGeom)
+    try {
+      await this.dataSource.showData(this.dataset_.read())
+      this.error = null
+    } catch (error) {
+      this.handleError(error as FetchError | Error)
+    }
+    this.loading$.next(false)
+  }
+
+  scrollToItem(itemId: TableItemId): void {
+    const row = this.eltRef.nativeElement.querySelector(
+      `#${this.getRowEltId(itemId)}`
+    )
+    this.eltRef.nativeElement.scrollTop = row.offsetTop - this.headerHeight
+  }
+
+  public getRowEltId(id: TableItemId): string {
+    return rowIdPrefix + id
+  }
+
+  handleError(error: FetchError | Error) {
+    this.dataSource.clearData()
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    }
+  }
+}

package/src/libs/ui/dataviz/src/lib/data-table/data-table.data.source.ts

@@ -0,0 +1,33 @@
+import { DataSource } from '@angular/cdk/collections'
+import { BehaviorSubject, Observable } from 'rxjs'
+import { DataItem } from '../../../../../../libs/util/data-fetcher/src'
+import { map } from 'rxjs/operators'
+import { TableItemModel } from './data-table.component'
+
+export class DataTableDataSource implements DataSource<TableItemModel> {
+  private dataItems$ = new BehaviorSubject<DataItem[]>([])
+
+  connect(): Observable<TableItemModel[]> {
+    return this.dataItems$.asObservable().pipe(
+      map((items) =>
+        items.map((item) => ({
+          id: item.id,
+          ...item.properties,
+        }))
+      )
+    )
+  }
+
+  disconnect(): void {
+    this.dataItems$.complete()
+  }
+
+  async showData(itemsPromise: Promise<DataItem[]>) {
+    const items = await itemsPromise
+    this.dataItems$.next(items)
+  }
+
+  clearData() {
+    this.dataItems$.next([])
+  }
+}

package/src/libs/ui/dataviz/src/lib/data-table/data-table.fixtures.ts

@@ -0,0 +1,84 @@
+import { DataItem, PropertyInfo } from '../../../../../../libs/util/data-fetcher/src'
+
+export const tableItemsFixture = {
+  items: [
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0001',
+        firstName: 'John',
+        lastName: 'Lennon',
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0002',
+        firstName: 'Ozzy',
+        lastName: 'Osbourne',
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0003',
+        firstName: 'Claude',
+        lastName: 'François',
+      },
+    },
+  ] as DataItem[],
+  properties: [
+    { name: 'id', label: 'id', type: 'string' },
+    { name: 'firstName', label: 'Firstname', type: 'string' },
+    { name: 'lastName', label: 'Lastname', type: 'string' },
+  ] as PropertyInfo[],
+}
+
+export const someHabTableItemFixture = {
+  items: [
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '1',
+        name: 'France',
+        pop: 50500000,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '2',
+        name: 'Italy',
+        pop: 155878789655,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '3',
+        name: 'UK',
+        pop: 31522456,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '4',
+        name: 'US',
+        pop: 3215448888,
+      },
+    },
+  ] as DataItem[],
+  properties: [
+    { name: 'id', label: 'ID', type: 'string' },
+    { name: 'name', label: 'Name', type: 'string' },
+    { name: 'pop', label: 'Population', type: 'number' },
+  ] as PropertyInfo[],
+}

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

@@ -163,13 +163,13 @@
     <div *ngIf="metadata.resourceCreated">
       <p class="text-sm" translate>record.metadata.creation</p>
       <p class="text-primary font-medium mt-1">
-        {{ metadata.resourceCreated.toLocaleDateString() }}
+        {{ formatDate(metadata.resourceCreated) }}
       </p>
     </div>
     <div *ngIf="metadata.resourcePublished">
       <p class="text-sm" translate>record.metadata.publication</p>
       <p class="text-primary font-medium mt-1">
-        {{ metadata.resourcePublished.toLocaleDateString() }}
+        {{ formatDate(metadata.resourcePublished) }}
       </p>
     </div>
     <div *ngIf="updateFrequency">
@@ -233,7 +233,7 @@
     <div *ngIf="metadata.recordUpdated">
       <p class="text-sm" translate>record.metadata.updatedOn</p>
       <p class="text-primary font-medium">
-        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
+        {{ metadata.recordUpdated && formatDateTime(metadata.recordUpdated) }}
       </p>
     </div>
     <div *ngIf="metadata.landingPage">

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

@@ -9,7 +9,7 @@ import {
   DatasetRecord,
   Keyword,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
+import { DateService, getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
 import {
   ExpandablePanelComponent,
@@ -60,6 +60,8 @@ export class MetadataInfoComponent {
   @Output() keyword = new EventEmitter<Keyword>()
   updatedTimes: number
 
+  constructor(private dateService: DateService) {}
+
   get hasUsage() {
     return (
       this.metadata.extras?.isOpenData === true ||
@@ -121,7 +123,7 @@ export class MetadataInfoComponent {
 
   get temporalExtent(): { start: string; end: string } {
     const temporalExtents = this.metadata.temporalExtents
-    return getTemporalRangeUnion(temporalExtents)
+    return getTemporalRangeUnion(temporalExtents, this.dateService)
   }
 
   get shownOrganization() {
@@ -139,4 +141,12 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: Keyword) {
     this.keyword.emit(keyword)
   }
+
+  formatDate(date: Date): string {
+    return this.dateService.formatDate(date)
+  }
+
+  formatDateTime(date: Date): string {
+    return this.dateService.formatDateTime(date)
+  }
 }

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

@@ -21,6 +21,7 @@ import {
   InteractiveTableComponent,
 } from '../../../../../../libs/ui/layout/src'
 import {
+  DateService,
   FileFormat,
   formatUserInfo,
   getBadgeColor,
@@ -86,7 +87,8 @@ export class ResultsTableComponent {
   constructor(
     private overlay: Overlay,
     private viewContainerRef: ViewContainerRef,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private dateService: DateService
   ) {}
 
   openActionMenu(item, template) {
@@ -139,7 +141,7 @@ export class ResultsTableComponent {
   }
 
   dateToString(date: Date): string {
-    return date?.toLocaleDateString(undefined, {
+    return this.dateService.formatDate(date, {
       year: 'numeric',
       month: 'long',
       day: 'numeric',

package/src/libs/util/data-fetcher/src/index.ts

@@ -5,6 +5,9 @@ export {
   DataItem,
   FetchError,
   FieldAggregation,
+  PropertyInfo,
 } from './lib/model'
 export { getJsonDataItemsProxy } from './lib/utils'
 export { BaseReader } from './lib/readers/base'
+export { BaseFileReader } from './lib/readers/base-file'
+export { GeojsonReader } from './lib/readers/geojson'

package/src/libs/util/data-fetcher/src/lib/model.ts

@@ -13,8 +13,12 @@ export class FetchError {
   ) {
     this.message = `An error happened in the data fetcher, type: ${type}, info: ${info}`
   }
-  static http(code: number) {
-    return new FetchError('http', '', code)
+  static http(code: number, body?: string) {
+    const info = body
+      ? `Error ${code}
+${body}`
+      : `${code}`
+    return new FetchError('http', info, code)
   }
   static corsOrNetwork(message: string) {
     return new FetchError('network', message, 0)

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

@@ -4,6 +4,7 @@ import { fetchDataAsText } from '../utils'
 import { BaseReader } from './base'
 import { GmlReader, parseGml } from './gml'
 import { GeojsonReader, parseGeojson } from './geojson'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 export class WfsReader extends BaseReader {
   endpoint: WfsEndpoint
@@ -18,7 +19,22 @@ export class WfsReader extends BaseReader {
   }
 
   get properties(): Promise<PropertyInfo[]> {
-    return this.getData().then((result) => result.properties)
+    return this.endpoint
+      .getFeatureTypeFull(this.featureTypeName)
+      .then((featureType) =>
+        Object.keys(featureType.properties).map((prop) => {
+          const originalType = featureType.properties[prop]
+          const type =
+            originalType === 'float' || originalType === 'integer'
+              ? 'number'
+              : (originalType as PropertyInfo['type']) // FIXME: ogc-client typing is incorrect, should be a string union
+          return {
+            name: prop,
+            label: prop,
+            type,
+          }
+        })
+      )
   }
 
   get info(): Promise<DatasetInfo> {
@@ -75,12 +91,18 @@ export class WfsReader extends BaseReader {
   }
 
   protected getData() {
+    if (this.aggregations || this.groupedBy) {
+      throw new Error(marker('wfs.aggregations.notsupported'))
+    }
+
     const asJson = this.endpoint.supportsJson(this.featureTypeName)
+    const attributes = this.selected ?? undefined
     let url = this.endpoint.getFeatureUrl(this.featureTypeName, {
       ...(this.startIndex !== null && { startIndex: this.startIndex }),
       ...(this.count !== null && { maxFeatures: this.count }),
       asJson,
       outputCrs: 'EPSG:4326',
+      attributes,
       // sortBy: this.sort // TODO: no sort in ogc-client?
     })
 

package/src/libs/util/data-fetcher/src/lib/utils.ts

@@ -60,7 +60,7 @@ export function fetchDataAsText(url: string): Promise<string> {
         })
         .then(async (response) => {
           if (!response.ok) {
-            throw FetchError.http(response.status)
+            throw FetchError.http(response.status, await response.text())
           }
           return response.text()
         }),
@@ -77,7 +77,7 @@ export function fetchDataAsArrayBuffer(url: string): Promise<ArrayBuffer> {
         })
         .then(async (response) => {
           if (!response.ok) {
-            throw FetchError.http(response.status)
+            throw FetchError.http(response.status, await response.text())
           }
           // convert to a numeric array so that we can store the response in cache
           return Array.from(new Uint8Array(await response.arrayBuffer()))

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

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DateService {
+  constructor(private translateService: TranslateService) {}
+
+  private getDateObject(date: Date | string): Date {
+    if (typeof date === 'string') {
+      const dateObj = new Date(date)
+      if (isNaN(dateObj.getTime())) {
+        throw new Error('Invalid date string')
+      }
+      return dateObj
+    }
+    return date
+  }
+
+  private getLocaleAndDate(date: Date | string): {
+    locale: string
+    dateObj: Date
+  } {
+    const locale = this.translateService.currentLang || 'en-US'
+    const dateObj = this.getDateObject(date)
+    return { locale, dateObj }
+  }
+
+  formatDate(
+    date: Date | string,
+    options?: Intl.DateTimeFormatOptions
+  ): string {
+    const { locale, dateObj } = this.getLocaleAndDate(date)
+    return dateObj.toLocaleDateString(locale, options)
+  }
+
+  formatDateTime(
+    date: Date | string,
+    options?: Intl.DateTimeFormatOptions
+  ): string {
+    const { locale, dateObj } = this.getLocaleAndDate(date)
+    return dateObj.toLocaleString(locale, options)
+  }
+}

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

@@ -1,3 +1,4 @@
 export * from './theme.service'
 export * from './log.service'
 export * from './proxy.service'
+export * from './date.service'

package/src/libs/util/shared/src/lib/utils/temporal-extent-union.ts

@@ -1,8 +1,11 @@
+import { DateService } from '../services'
+
 export function getTemporalRangeUnion(
   ranges: {
     start?: Date
     end?: Date
-  }[]
+  }[],
+  dateService: DateService
 ) {
   let earliestStartDate = Infinity
   let latestEndDate = -Infinity
@@ -24,11 +27,11 @@ export function getTemporalRangeUnion(
     return {
       start:
         earliestStartDate !== -Infinity
-          ? new Date(earliestStartDate).toLocaleDateString()
+          ? dateService.formatDate(new Date(earliestStartDate))
           : undefined,
       end:
         latestEndDate !== Infinity
-          ? new Date(latestEndDate).toLocaleDateString()
+          ? dateService.formatDate(new Date(latestEndDate))
           : undefined,
     }
   } else {

package/translations/de.json

@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Integrieren",
   "table.loading.data": "Daten werden geladen...",
   "table.object.count": "Objekte in diesem Datensatz",
+  "table.paginator.firstPage": "Erste Seite",
+  "table.paginator.itemsPerPage": "Elemente pro Seite",
+  "table.paginator.lastPage": "Letzte Seite",
+  "table.paginator.nextPage": "Nächste Seite",
+  "table.paginator.previousPage": "Vorherige Seite",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} von {length}",
   "table.select.data": "Datenquelle",
   "tooltip.html.copy": "HTML kopieren",
   "tooltip.id.copy": "Eindeutige Kennung kopieren",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "URL öffnen",
   "ui.readLess": "Weniger lesen",
   "ui.readMore": "Weiterlesen",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "Zu viele Features, um den WFS-Layer anzuzeigen!",
   "wfs.featuretype.notfound": "Kein passender Feature-Typ wurde im Dienst gefunden",
   "wfs.geojsongml.notsupported": "Dieser Dienst unterstützt das GeoJSON- oder GML-Format nicht",

package/translations/en.json

@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Integrate",
   "table.loading.data": "Loading data...",
   "table.object.count": "Objects in this dataset",
+  "table.paginator.firstPage": "First page",
+  "table.paginator.itemsPerPage": "Items per page",
+  "table.paginator.lastPage": "Last page",
+  "table.paginator.nextPage": "Next page",
+  "table.paginator.previousPage": "Previous page",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} of {length}",
   "table.select.data": "Data source",
   "tooltip.html.copy": "Copy HTML",
   "tooltip.id.copy": "Copy unique identifier",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "Open URL",
   "ui.readLess": "Read less",
   "ui.readMore": "Read more",
+  "wfs.aggregations.notsupported": "Aggregations are currently not supported for WFS services",
   "wfs.feature.limit": "Too many features to display the WFS layer!",
   "wfs.featuretype.notfound": "No matching feature type was found in the service",
   "wfs.geojsongml.notsupported": "This service does not support the GeoJSON or GML format",

package/translations/es.json

@@ -589,6 +589,12 @@
   "share.tab.webComponent": "",
   "table.loading.data": "",
   "table.object.count": "",
+  "table.paginator.firstPage": "Primera página",
+  "table.paginator.itemsPerPage": "Elementos por página",
+  "table.paginator.lastPage": "Última página",
+  "table.paginator.nextPage": "Página siguiente",
+  "table.paginator.previousPage": "Página anterior",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} de {length}",
   "table.select.data": "",
   "tooltip.html.copy": "",
   "tooltip.id.copy": "",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "",
   "ui.readLess": "",
   "ui.readMore": "",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "",
   "wfs.featuretype.notfound": "",
   "wfs.geojsongml.notsupported": "",

package/translations/fr.json

@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Intégrer",
   "table.loading.data": "Chargement des données...",
   "table.object.count": "enregistrements dans ces données",
+  "table.paginator.firstPage": "Première page",
+  "table.paginator.itemsPerPage": "Éléments par page",
+  "table.paginator.lastPage": "Dernière page",
+  "table.paginator.nextPage": "Page suivante",
+  "table.paginator.previousPage": "Page précédente",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} sur {length}",
   "table.select.data": "Source de données",
   "tooltip.html.copy": "Copier le HTML",
   "tooltip.id.copy": "Copier l'identifiant unique",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "Ouvrir l'URL",
   "ui.readLess": "Réduire",
   "ui.readMore": "Lire la suite",
+  "wfs.aggregations.notsupported": "Agrégations non supportées pour les services WFS",
   "wfs.feature.limit": "Trop d'objets pour afficher la couche WFS !",
   "wfs.featuretype.notfound": "La classe d'objets n'a pas été trouvée dans le service",
   "wfs.geojsongml.notsupported": "Le service ne supporte pas le format GeoJSON ou GML",

package/translations/it.json

@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Incorporare",
   "table.loading.data": "Caricamento dei dati...",
   "table.object.count": "record in questi dati",
+  "table.paginator.firstPage": "Prima pagina",
+  "table.paginator.itemsPerPage": "Elementi per pagina",
+  "table.paginator.lastPage": "Ultima pagina",
+  "table.paginator.nextPage": "Pagina successiva",
+  "table.paginator.previousPage": "Pagina precedente",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} di {total}",
   "table.select.data": "Sorgente dati",
   "tooltip.html.copy": "Copiare il HTML",
   "tooltip.id.copy": "Copiare l'identificatore unico",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "Aprire l'URL",
   "ui.readLess": "Ridurre",
   "ui.readMore": "Leggere di più",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "Troppi oggetti per visualizzare il WFS layer!",
   "wfs.featuretype.notfound": "La classe di oggetto non è stata trovata nel servizio",
   "wfs.geojsongml.notsupported": "Il servizio non supporta il formato GeoJSON o GML",