geonetwork-ui 2.4.2 → 2.4.4-dev.9094d472a

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

@@ -164,17 +164,26 @@ export class DataService {
       wfsLink.url.toString(),
       wfsLink.name
     ).pipe(
-      map((urls) => urls.all),
-      map((urls) =>
-        Object.keys(urls).map((format) => ({
-          ...wfsLink,
-          type: 'download',
-          url: new URL(urls[format]),
-          mimeType: getMimeTypeForFormat(
-            getFileFormatFromServiceOutput(format)
-          ),
-        }))
-      )
+      map((urls) => {
+        if (urls.geojson) {
+          urls.all['application/json'] = urls.geojson
+        }
+        return urls
+      }),
+      map((urls) => {
+        const resources: DatasetOnlineResource[] = Object.keys(urls.all).map(
+          (format) => ({
+            ...wfsLink,
+            name: wfsLink.name,
+            type: 'download' as const,
+            url: new URL(urls.all[format]),
+            mimeType: getMimeTypeForFormat(
+              getFileFormatFromServiceOutput(format)
+            ),
+          })
+        )
+        return resources
+      })
     )
   }
 
@@ -187,6 +196,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(
@@ -232,8 +242,11 @@ export class DataService {
     }))
   }
 
-  readAsGeoJson(link: DatasetOnlineResource): Observable<FeatureCollection> {
-    return this.getDataset(link).pipe(
+  readAsGeoJson(
+    link: DatasetOnlineResource,
+    cacheActive: boolean
+  ): Observable<FeatureCollection> {
+    return this.getDataset(link, cacheActive).pipe(
       switchMap((dataset) => dataset.selectAll().read()),
       map((features) => ({
         type: 'FeatureCollection',
@@ -242,13 +255,21 @@ export class DataService {
     )
   }
 
-  getDataset(link: DatasetOnlineResource): Observable<BaseReader> {
+  getDataset(
+    link: DatasetOnlineResource,
+    cacheActive: boolean
+  ): Observable<BaseReader> {
     if (link.type === 'service' && link.accessServiceProtocol === 'wfs') {
       const wfsUrlEndpoint = this.proxy.getProxiedUrl(link.url.toString())
       return from(
-        openDataset(wfsUrlEndpoint, 'wfs', {
-          wfsFeatureType: link.name,
-        })
+        openDataset(
+          wfsUrlEndpoint,
+          'wfs',
+          {
+            wfsFeatureType: link.name,
+          },
+          cacheActive
+        )
       )
     } else if (link.type === 'download') {
       const linkProxifiedUrl = this.proxy.getProxiedUrl(link.url.toString())
@@ -257,7 +278,9 @@ export class DataService {
         SupportedTypes.indexOf(format as any) > -1
           ? (format as SupportedType)
           : undefined
-      return from(openDataset(linkProxifiedUrl, supportedType)).pipe()
+      return from(
+        openDataset(linkProxifiedUrl, supportedType, undefined, cacheActive)
+      ).pipe()
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'esriRest'
@@ -266,7 +289,7 @@ export class DataService {
         link.url.toString(),
         'geojson'
       )
-      return from(openDataset(url, 'geojson')).pipe()
+      return from(openDataset(url, 'geojson', undefined, cacheActive)).pipe()
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'ogcFeatures'
@@ -274,7 +297,7 @@ export class DataService {
       return from(this.getDownloadUrlsFromOgcApi(link.url.href)).pipe(
         switchMap((collectionInfo) => {
           const geojsonUrl = collectionInfo.jsonDownloadLink
-          return openDataset(geojsonUrl, 'geojson')
+          return openDataset(geojsonUrl, 'geojson', undefined, cacheActive)
         }),
         tap((url) => {
           if (url === null) {

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,
@@ -34,6 +33,7 @@ import { CommonModule } from '@angular/common'
   standalone: true,
 })
 export class TableViewComponent {
+  @Input() cacheActive = true
   @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
   }
@@ -45,25 +45,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 +66,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, this.cacheActive)
   }
 
   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,14 +8,16 @@
     [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'"
+      [cacheActive]="cacheActive$ | async"
       [link]="selectedLink$ | async"
     ></gn-ui-table-view>
     <gn-ui-chart-view
       *ngIf="mode === 'chart'"
       (chartConfig$)="setChartConfig($event)"
+      [cacheActive]="cacheActive$ | async"
       [link]="selectedLink$ | async"
     ></gn-ui-chart-view>
   </div>

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

@@ -36,6 +36,9 @@ export class DataViewComponent {
   @Input() mode: 'table' | 'chart'
   @Input() displaySource = true
   @Output() chartConfig$ = new BehaviorSubject<DatavizConfigurationModel>(null)
+  cacheActive$ = this.mdViewFacade.isHighUpdateFrequency$.pipe(
+    map((highF) => !highF)
+  )
   compatibleDataLinks$ = combineLatest([
     this.mdViewFacade.dataLinks$,
     this.mdViewFacade.geoDataLinks$,

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.ts

@@ -239,7 +239,8 @@ export class MapViewComponent implements AfterViewInit {
           link.accessServiceProtocol === 'ogcFeatures')) ||
       link.type === 'download'
     ) {
-      return this.dataService.readAsGeoJson(link).pipe(
+      const cacheActive = true // TODO implement whether should be true or false
+      return this.dataService.readAsGeoJson(link, cacheActive).pipe(
         map((data) => ({
           type: 'geojson',
           data,

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -57,6 +57,19 @@ export class MdViewFacade {
     filter((incomplete) => incomplete !== null)
   )
 
+  isHighUpdateFrequency$ = this.metadata$.pipe(
+    map((record) => {
+      if (record.updateFrequency instanceof Object) {
+        return (
+          record.updateFrequency.per === 'day' &&
+          record.updateFrequency.updatedTimes > 1
+        )
+      }
+
+      return record.updateFrequency === 'continual'
+    })
+  )
+
   error$ = this.store.pipe(select(MdViewSelectors.getMetadataError))
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))

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>