geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.73bac9979

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

@@ -1,47 +1,26 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import {
-  FeatureDetailComponent,
-  MapContainerComponent,
-} from '../../../../../libs/ui/map/src'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
-import {
-  FeatureMapModule,
-  MapStateContainerComponent,
-} from '../../../../../libs/feature/map/src'
+import { FeatureMapModule } from '../../../../../libs/feature/map/src'
 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),
@@ -52,23 +31,17 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     UiInputsModule,
     UiElementsModule,
     MatTabsModule,
-    MatIconModule,
     UiWidgetsModule,
     TranslateModule,
     TableComponent,
-    FeatureDatavizModule,
-    PopupAlertComponent,
-    FeatureDetailComponent,
-    MapStateContainerComponent,
-    MapContainerComponent,
+    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()
+  }
+}

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

@@ -1,7 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end mb-7 mt-1">
+  <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
-      class="truncate p-1 -mx-1"
+      class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"
@@ -25,18 +25,56 @@
       class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
       [class.hidden]="!selection"
     >
-      <button
-        (click)="resetSelection()"
-        class="rounded bg-primary-opacity-25 text-white absolute right-[0.5em]"
+      <gn-ui-button
+        type="light"
+        (buttonClick)="resetSelection()"
+        style="
+          --gn-ui-button-padding: 0px;
+          --gn-ui-button-width: 24px;
+          --gn-ui-button-height: 24px;
+        "
+        extraClass="absolute right-[0.5em] ml-[8px] mr-[10px]"
       >
-        <mat-icon
-          class="material-symbols-outlined align-middle text-sm"
-          style="height: 21px"
-          >close</mat-icon
-        >
-      </button>
+        <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+      </gn-ui-button>
       <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
     </div>
+
+    <div
+      class="top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
+      [ngClass]="{ 'right-[1em]': !selection, 'right-[16em]': selection }"
+      [hidden]="!showLegend || !legendExists"
+    >
+      <div class="flex justify-between items-center mb-2">
+        <div class="text-primary font-bold">Legend</div>
+        <gn-ui-button
+          type="light"
+          (buttonClick)="toggleLegend()"
+          style="
+            --gn-ui-button-padding: 0px;
+            --gn-ui-button-width: 24px;
+            --gn-ui-button-height: 24px;
+          "
+          extraClass="ml-[8px] mr-[10px]"
+        >
+          <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+        </gn-ui-button>
+      </div>
+      <gn-ui-map-legend
+        [context]="mapContext$ | async"
+        (legendStatusChange)="onLegendStatusChange($event)"
+      ></gn-ui-map-legend>
+    </div>
+
+    <gn-ui-button
+      *ngIf="!showLegend && legendExists && !selection"
+      type="outline"
+      (buttonClick)="toggleLegend()"
+      extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
+    >
+      Legend
+    </gn-ui-button>
+
     <gn-ui-loading-mask
       *ngIf="loading"
       class="absolute inset-0"
@@ -45,7 +83,7 @@
     <gn-ui-popup-alert
       *ngIf="error"
       type="warning"
-      icon="error_outline"
+      icon="matErrorOutlineOutline"
       class="absolute m-2 inset-0"
     >
       <span translate>{{ error }}</span>