geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.4e8752d34

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -1,30 +1,44 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { MapConfig } from '../../../../../../libs/util/app-config/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  InjectionToken,
+  Input,
+  Optional,
+} from '@angular/core'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 
 marker('externalviewer.dataset.unnamed')
 
+export const EXTERNAL_VIEWER_URL_TEMPLATE = new InjectionToken<string>(
+  'externalViewerUrlTemplate'
+)
+export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
+  'externalViewerOpenNewTab',
+  { factory: () => false }
+)
+
 @Component({
   selector: 'gn-ui-external-viewer-button',
   templateUrl: './external-viewer-button.component.html',
   styleUrls: ['./external-viewer-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, NgIcon, TranslateModule],
+  viewProviders: [provideIcons({ matOpenInNew })],
 })
 export class ExternalViewerButtonComponent {
-  @Input() link: DatasetDistribution
-  @Input() mapConfig: MapConfig
+  @Input() link: DatasetOnlineResource
 
   get externalViewer() {
-    if (this.link && this.mapConfig) {
-      return (
-        !!this.mapConfig.EXTERNAL_VIEWER_URL_TEMPLATE &&
-        !!this.supportedLinkLayerType
-      )
-    }
-    return false
+    return !!this.urlTemplate && !!this.supportedLinkLayerType
   }
 
   get supportedLinkLayerType() {
@@ -45,10 +59,17 @@ export class ExternalViewerButtonComponent {
     return null
   }
 
-  constructor(private translateService: TranslateService) {}
+  constructor(
+    private translateService: TranslateService,
+    @Inject(EXTERNAL_VIEWER_URL_TEMPLATE)
+    @Optional()
+    private urlTemplate: string,
+    @Inject(EXTERNAL_VIEWER_OPEN_NEW_TAB)
+    private openinNewTab: boolean
+  ) {}
 
   openInExternalViewer() {
-    const templateUrl = this.mapConfig.EXTERNAL_VIEWER_URL_TEMPLATE
+    const templateUrl = this.urlTemplate
     const layerName = this.link.name
       ? this.link.name
       : this.translateService.instant('externalviewer.dataset.unnamed')
@@ -59,11 +80,6 @@ export class ExternalViewerButtonComponent {
         `${encodeURIComponent(this.link.url.toString())}`
       )
       .replace('${service_type}', `${this.supportedLinkLayerType}`)
-    window
-      .open(
-        url,
-        this.mapConfig.EXTERNAL_VIEWER_OPEN_NEW_TAB ? '_blank' : '_self'
-      )
-      .focus()
+    window.open(url, this.openinNewTab ? '_blank' : '_self').focus()
   }
 }

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

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { UiMapModule } from '../../../../../libs/ui/map/src'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
@@ -9,33 +8,19 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
-import { MapViewComponent } from './map-view/map-view.component'
-import { DataViewComponent } from './data-view/data-view.component'
 import {
   METADATA_VIEW_FEATURE_STATE_KEY,
   reducer,
 } from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
-import { MatIconModule } from '@angular/material/icon'
-import { PopupAlertComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { TranslateModule } from '@ngx-translate/core'
-import { ExternalViewerButtonComponent } from './external-viewer-button/external-viewer-button.component'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
 import { TableComponent } from '../../../../../libs/ui/dataviz/src'
-import { FeatureDatavizModule } from '../../../../../libs/feature/dataviz/src'
-import { DataViewPermalinkComponent } from './data-view-permalink/data-view-permalink.component'
-import { DataViewWebComponentComponent } from './data-view-web-component/data-view-web-component.component'
-import { DataViewShareComponent } from './data-view-share/data-view-share.component'
+import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
+import { DropdownSelectorComponent } from '../../../../../libs/ui/inputs/src'
 
 @NgModule({
-  declarations: [
-    MapViewComponent,
-    DataViewComponent,
-    ExternalViewerButtonComponent,
-    DataViewPermalinkComponent,
-    DataViewWebComponentComponent,
-    DataViewShareComponent,
-  ],
   imports: [
     CommonModule,
     StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
@@ -43,24 +28,20 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     UiLayoutModule,
     FeatureMapModule,
     FeatureCatalogModule,
-    UiMapModule,
     UiInputsModule,
     UiElementsModule,
     MatTabsModule,
-    MatIconModule,
     UiWidgetsModule,
     TranslateModule,
     TableComponent,
-    FeatureDatavizModule,
-    PopupAlertComponent,
+    NgIconsModule,
+    DropdownSelectorComponent,
   ],
-  providers: [MdViewFacade],
-  exports: [
-    MapViewComponent,
-    DataViewComponent,
-    DataViewPermalinkComponent,
-    DataViewWebComponentComponent,
-    DataViewShareComponent,
+  providers: [
+    MdViewFacade,
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class FeatureRecordModule {}

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.css

@@ -0,0 +1,22 @@
+:host ::ng-deep input {
+  color: black;
+  opacity: 1;
+}
+
+:host ::ng-deep gn-ui-copy-text-button input[type='text'] {
+  color: black;
+  background-color: white;
+}
+
+:host ::ng-deep gn-ui-copy-text-button button,
+host ::ng-deep gn-ui-copy-text-button button:hover {
+  background-color: var(--color-secondary) !important;
+}
+
+:host ::ng-deep gn-ui-copy-text-button button ng-icon {
+  color: white !important;
+  opacity: 1 !important;
+}
+:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon {
+  color: lightgrey !important;
+}

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.html

@@ -0,0 +1,132 @@
+<div class="flex flex-col gap-6 p-8 bg-white shadow-xl rounded-lg">
+  <!-- Header with Filter Title and Reset Button -->
+  <div class="flex items-center justify-between">
+    <h2
+      class="text-xl font-semibold"
+      translate
+      [attr.aria-label]="
+        'record.metadata.api.form.filterDescription' | translate
+      "
+    >
+      record.metadata.api.form.filter
+    </h2>
+    <button
+      (click)="resetUrl()"
+      class="bg-primary-opacity-50 inline-flex items-center justify-center px-4 py-2 text-white rounded hover:bg-primary transition"
+      [attr.title]="'record.metadata.api.form.resetTooltip' | translate"
+      [attr.aria-label]="'record.metadata.api.form.resetTooltip' | translate"
+    >
+      <span translate>record.metadata.api.form.reset</span>
+    </button>
+  </div>
+
+  <!-- Dropdown Selectors -->
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <gn-ui-dropdown-selector
+      #zone
+      [title]="'record.metadata.api.form.zoneTitle' | translate"
+      [choices]="bucketPromisesZone"
+      (selectValue)="setZone($event)"
+      [selected]="zone$ | async"
+      class="w-full"
+      [attr.title]="'record.metadata.api.form.zoneTooltip' | translate"
+      [attr.aria-label]="'record.metadata.api.form.zoneTooltip' | translate"
+    ></gn-ui-dropdown-selector>
+
+    <gn-ui-dropdown-selector
+      #format
+      [title]="'record.metadata.api.form.formatTitle' | translate"
+      [choices]="bucketPromisesFormat"
+      (selectValue)="setFormat($event)"
+      [selected]="format$ | async"
+      class="w-full"
+      [attr.title]="'record.metadata.api.form.formatTooltip' | translate"
+      [attr.aria-label]="'record.metadata.api.form.formatTooltip' | translate"
+    ></gn-ui-dropdown-selector>
+
+    <gn-ui-dropdown-selector
+      #crs
+      [title]="'record.metadata.api.form.crsTitle' | translate"
+      [choices]="bucketPromisesCrs"
+      (selectValue)="setCrs($event)"
+      [selected]="crs$ | async"
+      class="w-full"
+      [attr.title]="'record.metadata.api.form.crsTooltip' | translate"
+      [attr.aria-label]="'record.metadata.api.form.crsTooltip' | translate"
+    ></gn-ui-dropdown-selector>
+  </div>
+
+  <!-- Filtered Items Section -->
+  <div class="bg-gray-50 p-4 rounded-lg">
+    <h3
+      class="text-lg font-medium"
+      translate
+      [attr.aria-label]="
+        'record.metadata.api.form.itemsDescription' | translate
+      "
+    >
+      record.metadata.api.form.items
+    </h3>
+    <div
+      class="overflow-auto max-h-60"
+      [attr.title]="'record.metadata.api.form.itemsTooltip' | translate"
+      [attr.aria-label]="'record.metadata.api.form.itemsTooltip' | translate"
+    >
+      <div
+        *ngFor="let link of listFilteredProduct$ | async"
+        class="mb-2 sm:mb-3"
+      >
+        <gn-ui-gpf-api-dl-list-item
+          [link]="link"
+          color="rgb(124 45 18)"
+          [format]="getLinkFormat(link)"
+          [isFromWfs]="true"
+          [attr.title]="'record.metadata.api.form.productTooltip' | translate"
+          [attr.aria-label]="
+            'record.metadata.api.form.productTooltip' | translate
+          "
+        ></gn-ui-gpf-api-dl-list-item>
+      </div>
+    </div>
+  </div>
+
+  <!-- Pagination Section -->
+  <div class="flex items-center justify-between">
+    <button
+      (click)="lessResult()"
+      [class]="
+        'px-4 py-2 text-white rounded transition ' +
+        ((page$ | async) <= 1
+          ? 'bg-gray-400 cursor-not-allowed  '
+          : 'bg-primary-opacity-50  hover:bg-primary')
+      "
+      [attr.title]="'record.metadata.api.form.previousPageTooltip' | translate"
+      [attr.aria-label]="
+        'record.metadata.api.form.previousPageTooltip' | translate
+      "
+    >
+      <span translate>record.metadata.api.form.previousPage</span>
+    </button>
+    <div
+      class="font-semibold place-content-center"
+      [attr.aria-label]="
+        'record.metadata.api.form.paginationDescription' | translate
+      "
+    >
+      {{ page$ | async }}/{{ pageMax$ | async }}
+    </div>
+    <button
+      (click)="moreResult()"
+      [class]="
+        'bg-primary-opacity-50 px-4 py-2 text-white rounded transition ' +
+        ((page$ | async) >= (pageMax$ | async)
+          ? 'bg-gray-400 cursor-not-allowed  '
+          : 'bg-primary-opacity-50  hover:bg-primary')
+      "
+      [attr.title]="'record.metadata.api.form.nextPageTooltip' | translate"
+      [attr.aria-label]="'record.metadata.api.form.nextPageTooltip' | translate"
+    >
+      <span translate>record.metadata.api.form.nextPage</span>
+    </button>
+  </div>
+</div>

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.ts

@@ -0,0 +1,253 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { BehaviorSubject, Observable, combineLatest, map, mergeMap } from 'rxjs'
+import { HttpClient } from '@angular/common/http'
+import { Choice, DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
+import axios from 'axios'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { GpfApiDlListItemComponent } from '../gpf-api-dl-list-item/gpf-api-dl-list-item.component'
+
+export interface Label {
+  label: string
+}
+
+export interface FormatProduit {
+  title: string
+  update: string
+  format: Array<TermBucket>
+  zone: Array<TermBucket>
+}
+
+export interface FormatSortieProduit {
+  label: string
+  value: string | number
+}
+export interface ListUrl {
+  url: string
+}
+
+export interface ListChoice {
+  zone: Choice[]
+  format: Choice[]
+  editionDate: Choice[]
+  crs: Choice[]
+}
+
+export interface TermBucket {
+  term: string
+  label: string | number
+}
+
+export interface Field {
+  entry: Array<any>
+  link: any
+}
+
+@Component({
+  selector: 'gn-ui-gpf-api-dl',
+  templateUrl: './gpf-api-dl.component.html',
+  styleUrls: ['./gpf-api-dl.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    DropdownSelectorComponent,
+    GpfApiDlListItemComponent,
+  ],
+})
+export class GpfApiDlComponent implements OnInit {
+  isOpen = false
+  collapsed = false
+  initialLimit = 50
+  apiBaseUrl: string
+  editionDate$ = new BehaviorSubject('')
+  zone$ = new BehaviorSubject('')
+  format$ = new BehaviorSubject('')
+  crs$ = new BehaviorSubject('')
+  page$ = new BehaviorSubject(1)
+  url =
+    'https://data.geopf.fr/telechargement/capabilities?outputFormat=application/json'
+  choices: any
+  bucketPromisesZone: Choice[]
+  bucketPromisesFormat: Choice[]
+  bucketPromisesCrs: Choice[]
+
+  constructor(protected http: HttpClient) {}
+
+  @Input() set apiLink(value: DatasetServiceDistribution) {
+    this.apiBaseUrl = value ? value.url.href : undefined
+  }
+
+  ngOnInit(): void {
+    this.bucketPromisesZone = [{ value: '', label: 'ZONE' }]
+    this.bucketPromisesFormat = [{ value: '', label: 'FORMAT' }]
+    this.bucketPromisesCrs = [{ value: '', label: 'CRS' }]
+    this.getFields()
+  }
+
+  apiQueryUrl$ = combineLatest([
+    this.zone$,
+    this.format$,
+    this.editionDate$,
+    this.crs$,
+    this.page$,
+  ]).pipe(
+    map(([zone, format, editionDate, crs, page]) => {
+      let outputUrl
+      if (this.apiBaseUrl) {
+        const url = new URL(this.apiBaseUrl) // initialisation de l'url avec l'url de base
+        const params = {
+          zone: zone,
+          format: format,
+          editionDate: editionDate,
+          crs: crs,
+          page: page,
+        } // initialisation des paramètres de filtres
+        for (const [key, value] of Object.entries(params)) {
+          if (value && value !== 'null') {
+            url.searchParams.set(key, String(value))
+          } else {
+            url.searchParams.delete(key)
+          }
+        }
+        outputUrl = url.toString()
+      } else {
+        console.error('erreur apibaseUrl null')
+      }
+      return outputUrl
+    })
+  )
+
+  listFilteredProduct$ = this.apiQueryUrl$.pipe(
+    mergeMap((url) => {
+      return this.getFilteredProduct$(url).pipe(
+        map((response) => response['entry'])
+      )
+    })
+  )
+
+  pageMax$ = this.apiQueryUrl$.pipe(
+    mergeMap((url) => {
+      return this.getFilteredProduct$(url).pipe(
+        map((response) =>
+          Math.ceil(response['totalentries'] / Number(this.initialLimit))
+        )
+      )
+    })
+  )
+
+  getFilteredProduct$(url): Observable<any> {
+    return this.http.get(url)
+  }
+
+  getLinkFormat(produit): string {
+    return produit['format'][0]['label']
+  }
+
+  setEditionDate(value: string) {
+    if (value.match(/[0-9]{4}-[0-1][0-9]-[0-3][0-9]/)) {
+      this.editionDate$.next(value)
+      this.resetPage()
+    }
+  }
+
+  setZone(value: string) {
+    if (this.bucketPromisesZone.map((choice) => choice.value).includes(value)) {
+      this.zone$.next(value)
+      this.resetPage()
+    }
+  }
+
+  setCrs(value: string) {
+    if (this.bucketPromisesCrs.map((choice) => choice.value).includes(value)) {
+      this.crs$.next(value)
+      this.resetPage()
+    }
+  }
+
+  setFormat(value: string) {
+    if (
+      this.bucketPromisesFormat.map((choice) => choice.value).includes(value)
+    ) {
+      this.format$.next(value)
+      this.resetPage()
+    }
+  }
+
+  resetUrl() {
+    this.zone$.next('null')
+    this.format$.next('null')
+    this.crs$.next('null')
+    this.page$.next(1)
+  }
+  moreResult(): void {
+    this.page$.next(this.page$.value + 1)
+  }
+
+  lessResult(): void {
+    this.page$.next(this.page$.value - 1)
+  }
+
+  resetPage(): void {
+    this.page$.next(1)
+  }
+
+  async getCapabilities() {
+    let page = 0
+    let choicesTest = undefined
+    let pageCount = 1
+
+    while (choicesTest === undefined && pageCount > page) {
+      const response = await axios.get(
+        this.url.concat(`&limit=200&page=${page}`)
+      )
+
+      choicesTest = response.data.entry.filter(
+        (element) => element['id'] == this.apiBaseUrl
+      )[0]
+      page += 1
+      pageCount = response.data.pagecount
+    }
+
+    return choicesTest
+  }
+  async getFields() {
+    this.choices = await this.getCapabilities()
+
+    const tempZone = this.choices.zone.map((bucket) => ({
+      value: bucket.term,
+      label: bucket.label,
+    }))
+    tempZone.sort((a, b) => (a.label > b.label ? 1 : -1))
+    tempZone.unshift({ value: 'null', label: 'ZONE' })
+
+    this.bucketPromisesZone = tempZone
+
+    const tempFormat = this.choices.format.map((bucket) => ({
+      value: bucket.term,
+      label: bucket.label,
+    }))
+    tempFormat.sort((a, b) => (a.label > b.label ? 1 : -1))
+    tempFormat.unshift({ value: 'null', label: 'FORMAT' })
+
+    this.bucketPromisesFormat = tempFormat
+
+    const tempCrs = this.choices.category.map((bucket) => ({
+      value: bucket.term,
+      label: bucket.label,
+    }))
+    tempCrs.sort((a, b) => (a.label > b.label ? 1 : -1))
+    tempCrs.unshift({ value: 'null', label: 'CRS' })
+
+    this.bucketPromisesCrs = tempCrs
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  }
+}

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.html

@@ -0,0 +1,37 @@
+<a
+  class="group flex justify-between card-shadow px-6 py-5 cursor-pointer"
+  rel="noopener"
+>
+  <div class="grow-1 w-full overflow-hidden">
+    <div
+      class="text-16 text-black truncate font-title w-11/12"
+      [title]="link['title'] || link.name"
+    >
+      {{ link['title'] || link.name }}
+    </div>
+    <div class="pt-1">
+      <span
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        [style.background-color]="color"
+        data-cy="download-format"
+        >{{ format || ('downloads.format.unknown' | translate) }}</span
+      >
+      <span
+        class="pl-2 inline-flex items-center text-gray-800 text-sm"
+        *ngIf="isFromWfs"
+        translate=""
+        >datahub.search.filter.generatedByWfs</span
+      >
+    </div>
+    <div *ngFor="let entry of liste$ | async">
+      <a [href]="entry['link'][0]['href']"
+        >{{ entry['link'][0]['href'].split('/').slice(-1) }}
+        <ng-icon
+          class="text-primary opacity-45 mr-3"
+          name="matCloudDownloadOutline"
+        >
+        </ng-icon>
+      </a>
+    </div>
+  </div>
+</a>

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.ts

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common'
+import { HttpClient } from '@angular/common/http'
+import { Component, Input, OnInit } from '@angular/core'
+import { NgIconsModule } from '@ng-icons/core'
+import { TranslateModule } from '@ngx-translate/core'
+import { Observable, map, mergeMap } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-gpf-api-dl-list-item',
+  templateUrl: './gpf-api-dl-list-item.component.html',
+  styleUrls: ['./gpf-api-dl-list-item.component.css'],
+  standalone: true,
+  imports: [CommonModule, TranslateModule, NgIconsModule],
+})
+export class GpfApiDlListItemComponent implements OnInit {
+  @Input() link
+  @Input() color: string
+  @Input() format: string
+  @Input() isFromWfs: boolean
+
+  constructor(protected http: HttpClient) {}
+  liste$: Observable<any>
+
+  ngOnInit(): void {
+    this.liste$ = this.http
+      .get(this.link['id'])
+      .pipe(map((response) => response['entry']))
+  }
+
+  downloadListe(): void {
+    this.http
+      .get(this.link['id'])
+      .pipe(
+        map((response) => response['entry']),
+        mergeMap((response) => response)
+      )
+      .subscribe((reponse) => this.download(reponse['id']))
+  }
+
+  download(url): void {
+    this.http.get(url).subscribe()
+  }
+}