geonetwork-ui 2.4.2 → 2.5.0-dev.22c177ea1

package/src/libs/api/repository/src/lib/gn4/elasticsearch/elasticsearch.service.ts

@@ -28,6 +28,7 @@ import {
 } from '../../../../../../../libs/api/metadata-converter/src'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
 import { formatDate, isDateRange } from './date-range.utils'
+import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 export type DateRange = { start?: Date; end?: Date }
 
@@ -50,7 +51,7 @@ export class ElasticsearchService {
     size = 0,
     from = 0,
     sortBy: SortByField = null,
-    requestFields: RequestFields = [],
+    requestFields: RequestFields = null,
     searchFilters: SearchFilters = {},
     configFilters: SearchFilters = {},
     uuids?: string[],
@@ -68,7 +69,7 @@ export class ElasticsearchService {
         geometry
       ),
       ...(size > 0 ? { track_total_hits: true } : {}),
-      _source: requestFields,
+      ...(requestFields && { _source: requestFields }),
     }
     this.processRuntimeFields(payload)
     return payload
@@ -134,8 +135,7 @@ export class ElasticsearchService {
   }
 
   getRelatedRecordPayload(
-    title: string,
-    uuid: string,
+    record: CatalogRecord,
     size = 6,
     _source = [...ES_SOURCE_SUMMARY, 'allKeywords', 'createDate']
   ): EsSearchParams {
@@ -148,9 +148,23 @@ export class ElasticsearchService {
                 fields: [
                   'resourceTitleObject.default',
                   'resourceAbstractObject.default',
-                  'tag.raw',
+                  'allKeywords',
+                ],
+                like: [
+                  {
+                    doc: {
+                      resourceTitleObject: {
+                        default: record.title,
+                      },
+                      resourceAbstractObject: {
+                        default: record.abstract,
+                      },
+                      allKeywords: record.keywords.map(
+                        (keyword) => keyword.label
+                      ),
+                    },
+                  },
                 ],
-                like: title,
                 min_term_freq: 1,
                 max_query_terms: 12,
               },
@@ -166,7 +180,7 @@ export class ElasticsearchService {
               },
             },
           ],
-          must_not: [{ wildcard: { uuid: uuid } }],
+          must_not: [{ wildcard: { uuid: record.uniqueIdentifier } }],
         },
       },
       size,
@@ -220,6 +234,7 @@ export class ElasticsearchService {
   private filtersToQuery(
     filters: FieldFilters | FiltersAggregationParams | string
   ): FilterQuery {
+    const addQuote = (key: string) => (/^\/.+\/$/.test(key) ? key : `"${key}"`)
     const makeQuery = (filter: FieldFilter): string => {
       if (typeof filter === 'string') {
         return filter
@@ -227,9 +242,9 @@ export class ElasticsearchService {
       return Object.keys(filter)
         .map((key) => {
           if (filter[key] === true) {
-            return `"${key}"`
+            return addQuote(key)
           }
-          return `-"${key}"`
+          return `-${addQuote(key)}`
         })
         .join(' OR ')
     }
@@ -518,13 +533,15 @@ export class ElasticsearchService {
       switch (aggregation.type) {
         case 'filters':
           return {
-            filters: Object.keys(aggregation.filters).reduce((prev, curr) => {
-              const filter = aggregation.filters[curr]
-              return {
-                ...prev,
-                [curr]: this.filtersToQuery(filter)[0],
-              }
-            }, {}),
+            filters: {
+              filters: Object.keys(aggregation.filters).reduce((prev, curr) => {
+                const filter = aggregation.filters[curr]
+                return {
+                  ...prev,
+                  [curr]: this.filtersToQuery(filter)[0],
+                }
+              }, {}),
+            },
           }
         case 'terms':
           return {

package/src/libs/api/repository/src/lib/gn4/gn4-repository.ts

@@ -143,11 +143,7 @@ export class Gn4Repository implements RecordsRepositoryInterface {
         'bucket',
         null,
         JSON.stringify(
-          this.gn4SearchHelper.getRelatedRecordPayload(
-            similarTo.title,
-            similarTo.uniqueIdentifier,
-            3
-          )
+          this.gn4SearchHelper.getRelatedRecordPayload(similarTo, 3)
         )
       )
       .pipe(

package/src/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.html

@@ -1,11 +1,11 @@
 <div class="flex flex-row h-full overflow-auto">
-  <gn-ui-table
+  <gn-ui-data-table
     #table
     class="w-1/2 overflow-auto"
-    [data]="tableData"
+    [dataset]="dataset"
     [activeId]="selectionId"
     (selected)="onTableSelect($event)"
-  ></gn-ui-table>
+  ></gn-ui-data-table>
   <gn-ui-map-container
     #mapContainer
     class="w-1/2 h-full"

package/src/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts

@@ -8,7 +8,7 @@ import {
   ViewChild,
 } from '@angular/core'
 import {
-  TableComponent,
+  DataTableComponent,
   TableItemId,
   TableItemModel,
 } from '../../../../../../libs/ui/dataviz/src'
@@ -19,18 +19,19 @@ import {
   FeatureDetailComponent,
   MapContainerComponent,
 } from '../../../../../../libs/ui/map/src'
+import { BaseReader } from '../../../../../../libs/util/data-fetcher/src'
 
 @Component({
   selector: 'gn-ui-geo-table-view',
   templateUrl: './geo-table-view.component.html',
   styleUrls: ['./geo-table-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TableComponent, MapContainerComponent, FeatureDetailComponent],
+  imports: [MapContainerComponent, FeatureDetailComponent, DataTableComponent],
   standalone: true,
 })
 export class GeoTableViewComponent implements OnInit, OnDestroy {
-  @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] }
-  @ViewChild('table') uiTable: TableComponent
+  @Input() dataset: BaseReader
+  @ViewChild('table') uiTable: DataTableComponent
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   tableData: TableItemModel[]
@@ -39,21 +40,16 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
   selection: Feature
   private subscription = new Subscription()
 
-  get features() {
-    return this.data.features
-  }
-
   constructor(private changeRef: ChangeDetectorRef) {}
 
-  ngOnInit(): void {
-    this.tableData = this.geojsonToTableData(this.data)
-    this.mapContext = this.initMapContext()
+  async ngOnInit() {
+    this.mapContext = await this.initMapContext()
   }
 
   onTableSelect(tableEntry: TableItemModel) {
     const { id } = tableEntry
     this.selectionId = id
-    this.selection = this.getFeatureFromId(id)
+    // this.selection = this.getFeatureFromId(id)
     if (this.selection) {
       this.animateToFeature(this.selection)
     }
@@ -77,7 +73,8 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
     }))
   }
 
-  private initMapContext(): MapContext {
+  private async initMapContext(): Promise<MapContext> {
+    this.dataset.selectAll()
     return {
       layers: [
         {
@@ -86,7 +83,11 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
         },
         {
           type: 'geojson',
-          data: this.data,
+          data: {
+            type: 'FeatureCollection',
+            // FIXME: we're not getting geojson here
+            features: await this.dataset.read(),
+          },
         },
       ],
       view: {
@@ -112,7 +113,8 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
   }
 
   private getFeatureFromId(id: TableItemId) {
-    return this.features.find((feature) => feature.id === id)
+    // FIXME: restore this once we need it?
+    // return this.features.find((feature) => feature.id === id)
   }
 
   ngOnDestroy(): void {

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -168,6 +168,7 @@ export class DataService {
       map((urls) =>
         Object.keys(urls).map((format) => ({
           ...wfsLink,
+          name: wfsLink.name,
           type: 'download',
           url: new URL(urls[format]),
           mimeType: getMimeTypeForFormat(
@@ -187,6 +188,7 @@ export class DataService {
     return Object.keys(collectionInfo.bulkDownloadLinks).map((downloadLink) => {
       return {
         ...ogcApiLink,
+        name: collectionInfo.id,
         type: 'download',
         url: new URL(collectionInfo.bulkDownloadLinks[downloadLink]),
         mimeType: getMimeTypeForFormat(

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.html

@@ -1,10 +1,11 @@
 <div class="w-full h-full flex flex-col">
   <div class="relative h-full">
-    <gn-ui-table
+    <gn-ui-data-table
+      *ngIf="tableData$ | async as dataset"
       class="overflow-auto grow"
-      [data]="tableData$ | async"
+      [dataset]="dataset"
       (selected)="onTableSelect($event)"
-    ></gn-ui-table>
+    ></gn-ui-data-table>
     <gn-ui-loading-mask
       *ngIf="loading"
       class="absolute inset-0"

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.ts

@@ -3,14 +3,13 @@ import { BehaviorSubject, Observable, of } from 'rxjs'
 import {
   catchError,
   finalize,
-  map,
   shareReplay,
   startWith,
   switchMap,
 } from 'rxjs/operators'
-import { DataItem, FetchError } from '../../../../../../libs/util/data-fetcher/src'
+import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
-import { TableComponent, TableItemModel } from '../../../../../../libs/ui/dataviz/src'
+import { DataTableComponent } from '../../../../../../libs/ui/dataviz/src'
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import {
@@ -26,7 +25,7 @@ import { CommonModule } from '@angular/common'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
-    TableComponent,
+    DataTableComponent,
     LoadingMaskComponent,
     PopupAlertComponent,
     TranslateModule,
@@ -45,25 +44,19 @@ export class TableViewComponent {
   tableData$ = this.currentLink$.pipe(
     switchMap((link) => {
       this.error = null
-      if (!link) return of([] as TableItemModel[])
+      if (!link) return of(undefined)
       this.loading = true
-      return this.fetchData(link).pipe(
-        map((items) =>
-          items.map((item) => ({
-            id: item.id,
-            ...item.properties,
-          }))
-        ),
+      return this.getDatasetReader(link).pipe(
         catchError((error) => {
           this.handleError(error)
-          return of([] as TableItemModel[])
+          return of(undefined)
         }),
         finalize(() => {
           this.loading = false
         })
       )
     }),
-    startWith([] as TableItemModel[]),
+    startWith(undefined),
     shareReplay(1)
   )
 
@@ -72,10 +65,8 @@ export class TableViewComponent {
     private translateService: TranslateService
   ) {}
 
-  fetchData(link: DatasetOnlineResource): Observable<DataItem[]> {
-    return this.dataService
-      .getDataset(link)
-      .pipe(switchMap((dataset) => dataset.read()))
+  getDatasetReader(link: DatasetOnlineResource): Observable<BaseReader> {
+    return this.dataService.getDataset(link)
   }
 
   onTableSelect(event) {

package/src/libs/feature/editor/src/lib/components/wizard-summarize/wizard-summarize.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
 import { WizardService } from '../../services/wizard.service'
-import { TranslateService } from '@ngx-translate/core'
+import { DateService } from '../../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-wizard-summarize',
@@ -28,9 +28,8 @@ export class WizardSummarizeComponent {
 
   get createdDate() {
     const time = this.wizardService.getWizardFieldData('datepicker')
-    const locale = this.translateService.currentLang
 
-    return new Date(Number(time)).toLocaleDateString(locale, {
+    return this.dateService.formatDate(new Date(Number(time)), {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
@@ -54,6 +53,6 @@ export class WizardSummarizeComponent {
 
   constructor(
     private wizardService: WizardService,
-    private translateService: TranslateService
+    private dateService: DateService
   ) {}
 }

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

@@ -8,7 +8,7 @@
     [choices]="choices"
     (selectValue)="selectLink($event)"
   ></gn-ui-dropdown-selector>
-  <div class="relative h-[420px]">
+  <div class="relative h-[460px]">
     <gn-ui-table-view
       *ngIf="mode === 'table'"
       [link]="selectedLink$ | async"

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/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>