geonetwork-ui 2.4.2-dev.ff0aab388 → 2.5.0-dev.22c177ea1

package/src/libs/feature/record/src/lib/data-view-share/data-view-share.component.html

@@ -1,4 +1,4 @@
-<div class="container-lg px-5 my-1 lg:mx-auto">
+<div class="px-5 my-1">
   <mat-tab-group
     [selectedIndex]="0"
     animationDuration="0ms"

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -4,7 +4,10 @@ import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { FeatureMapModule } from '../../../../../libs/feature/map/src'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import {
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../libs/ui/inputs/src'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
@@ -16,9 +19,8 @@ import { MatTabsModule } from '@angular/material/tabs'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
-import { TableComponent } from '../../../../../libs/ui/dataviz/src'
+import { DataTableComponent } from '../../../../../libs/ui/dataviz/src'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
-import { DropdownSelectorComponent } from '../../../../../libs/ui/inputs/src'
 
 @NgModule({
   imports: [
@@ -33,7 +35,7 @@ import { DropdownSelectorComponent } from '../../../../../libs/ui/inputs/src'
     MatTabsModule,
     UiWidgetsModule,
     TranslateModule,
-    TableComponent,
+    DataTableComponent,
     NgIconsModule,
     DropdownSelectorComponent,
   ],

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -1,6 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
   <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
+      [ngClass]="{ hidden: !displaySource }"
       class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -85,6 +85,7 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set excludeWfs(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  @Input() displaySource = true
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, Injector } from '@angular/core'
 import {
   AbstractSearchField,
+  AvailableServicesField,
   DateRangeSearchField,
   FieldValue,
   FullTextSearchField,
@@ -91,6 +92,7 @@ export class FieldsService {
     ),
     user: new UserSearchField(this.injector),
     changeDate: new DateRangeSearchField('changeDate', this.injector, 'desc'),
+    availableServices: new AvailableServicesField(this.injector),
   } as Record<string, AbstractSearchField>
 
   get supportedFields() {

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -9,6 +9,7 @@ import { PlatformServiceInterface } from '../../../../../../../libs/common/domai
 import {
   AggregationBuckets,
   AggregationsParams,
+  FieldFilter,
   FieldFilterByExpression,
   FieldFilters,
   TermBucket,
@@ -425,3 +426,57 @@ export class DateRangeSearchField extends SimpleSearchField {
     return 'dateRange'
   }
 }
+
+marker('search.filters.availableServices.view')
+marker('search.filters.availableServices.download')
+
+export class AvailableServicesField extends SimpleSearchField {
+  private translateService = this.injector.get(TranslateService)
+
+  constructor(injector: Injector) {
+    super('availableServices', injector, 'asc')
+  }
+
+  linkProtocolViewFilter = '/OGC:WMT?S.*/'
+  linkProtocolDownloadFilter = '/OGC:WFS.*/'
+
+  protected async getBucketLabel(bucket: TermBucket) {
+    return firstValueFrom(
+      this.translateService.get(
+        `search.filters.availableServices.${bucket.term}`
+      )
+    )
+  }
+
+  protected getAggregations(): AggregationsParams {
+    return {
+      availableServices: {
+        type: 'filters',
+        filters: {
+          view: `+linkProtocol:${this.linkProtocolViewFilter}`,
+          download: `+linkProtocol:${this.linkProtocolDownloadFilter}`,
+        },
+      },
+    }
+  }
+
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+    const filters: FieldFilter = {}
+    if (values.includes('view')) filters[this.linkProtocolViewFilter] = true
+    if (values.includes('download'))
+      filters[this.linkProtocolDownloadFilter] = true
+
+    return of({
+      linkProtocol: filters,
+    })
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const linkFilter = filters.linkProtocol
+    if (!linkFilter) return of([])
+    const values = []
+    if (linkFilter[this.linkProtocolViewFilter]) values.push('view')
+    if (linkFilter[this.linkProtocolDownloadFilter]) values.push('download')
+    return of(values)
+  }
+}

package/src/libs/ui/dataviz/src/index.ts

@@ -1,5 +1,5 @@
 export * from './lib/ui-dataviz.module'
 export * from './lib/chart/chart.component'
-export * from './lib/table/table.component'
-export * from './lib/table/table.fixtures'
+export * from './lib/data-table/data-table.component'
+export * from './lib/data-table/data-table.fixtures'
 export * from './lib/figure/figure.component'

package/src/libs/ui/dataviz/src/lib/data-table/custom.mat.paginator.intl.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core'
+import { MatPaginatorIntl } from '@angular/material/paginator'
+import { TranslateService } from '@ngx-translate/core'
+import { Subject } from 'rxjs'
+
+@Injectable()
+export class CustomMatPaginatorIntl extends MatPaginatorIntl {
+  override changes = new Subject<void>()
+
+  constructor(private translate: TranslateService) {
+    super()
+    this.setLabels()
+    this.translate.onLangChange.subscribe(() => {
+      this.setLabels()
+      this.changes.next()
+    })
+  }
+
+  setLabels() {
+    this.itemsPerPageLabel = this.translate.instant(
+      'table.paginator.itemsPerPage'
+    )
+    this.nextPageLabel = this.translate.instant('table.paginator.nextPage')
+    this.previousPageLabel = this.translate.instant(
+      'table.paginator.previousPage'
+    )
+    this.firstPageLabel = this.translate.instant('table.paginator.firstPage')
+    this.lastPageLabel = this.translate.instant('table.paginator.lastPage')
+    this.getRangeLabel = this.getRangeLabelIntl
+    this.changes.next()
+  }
+
+  getRangeLabelIntl(page: number, pageSize: number, length: number): string {
+    if (length === 0 || pageSize === 0) {
+      return this.translate.instant('table.paginator.rangeLabel', {
+        startIndex: 0,
+        endIndex: 0,
+        length,
+      })
+    }
+    const startIndex = page * pageSize
+    const endIndex =
+      startIndex < length
+        ? Math.min(startIndex + pageSize, length)
+        : startIndex + pageSize
+    return this.translate.instant('table.paginator.rangeLabel', {
+      startIndex: startIndex + 1,
+      endIndex,
+      length,
+    })
+  }
+}

package/src/libs/ui/dataviz/src/lib/{table/table.component.css → data-table/data-table.component.css}

@@ -30,3 +30,7 @@ tr {
 .active .mat-mdc-cell {
   color: var(--color-primary);
 }
+
+.mat-mdc-paginator {
+  background: none;
+}

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

@@ -0,0 +1,67 @@
+<div class="flex flex-col border border-gray-300 rounded-lg bg-white h-full">
+  <div class="flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative">
+    <table
+      mat-table
+      [dataSource]="dataSource"
+      matSort
+      (matSortChange)="setSort($event)"
+      [matSortDisableClear]="true"
+      *ngrxLet="properties$ as properties"
+    >
+      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          mat-sort-header
+          class="text-sm text-black bg-white"
+        >
+          {{ prop }}
+        </th>
+        <td
+          mat-cell
+          *matCellDef="let element"
+          class="whitespace-nowrap pr-1 truncate"
+        >
+          {{ element[prop] }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="properties; sticky: true"></tr>
+      <tr
+        [id]="getRowEltId(row.id)"
+        mat-row
+        *matRowDef="let row; columns: properties"
+        (click)="selected.emit(row)"
+        [class.active]="row.id === activeId"
+      ></tr>
+    </table>
+    <gn-ui-loading-mask
+      *ngIf="loading$ | async"
+      class="sticky inset-0"
+      [message]="'table.loading.data' | translate"
+    ></gn-ui-loading-mask>
+    <gn-ui-popup-alert
+      *ngIf="error"
+      type="warning"
+      icon="matErrorOutlineOutline"
+      class="absolute m-2 inset-0 z-[100]"
+    >
+      <span translate>{{ error }}</span>
+    </gn-ui-popup-alert>
+  </div>
+  <div class="flex justify-between items-center overflow-hidden">
+    <div class="text-gray-900 px-4 py-2 text-sm">
+      <span class="count font-extrabold text-primary">{{ count }}</span
+      >&nbsp;<span translate>table.object.count</span>.
+    </div>
+
+    <mat-paginator
+      class="my-[-16px]"
+      (page)="setPagination()"
+      [length]="count"
+      [pageSize]="10"
+      [showFirstLastButtons]="true"
+      [hidePageSize]="true"
+    ></mat-paginator>
+  </div>
+</div>

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/record-preview-feed/record-preview-feed.component.ts

@@ -2,6 +2,9 @@ import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 import { TranslateService } from '@ngx-translate/core'
 import Duration from 'duration-relativetimeformat'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+marker('record.was.created.time')
 
 @Component({
   selector: 'gn-ui-record-preview-feed',

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

@@ -85,7 +85,7 @@
 
   <!-- OWNER COLUMN -->
   <gn-ui-interactive-table-column
-    [width]="'9rem'"
+    [width]="'12rem'"
     [sortable]="true"
     [activeSort]="isSortedBy('recordOwner')"
     (sortChange)="setSortBy('recordOwner', $event)"

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',