geonetwork-ui 2.4.0-alpha.2.dbfa93cf3 → 2.4.0-alpha.2.ddc8a5a9f

package/src/libs/common/fixtures/src/lib/link.fixtures.ts

@@ -37,13 +37,13 @@ export const aSetOfLinksFixture = () => ({
       description: 'Readme page',
       type: 'link',
       url: new URL('http://envlit.ifremer.fr/resultats/quadrige'),
-    } as OnlineLinkResource),
+    }) as OnlineLinkResource,
   doiLink: () =>
     ({
       description: 'DOI for the resource',
       type: 'link',
       url: new URL('http://doi.org/123-456-678'),
-    } as OnlineLinkResource),
+    }) as OnlineLinkResource,
   dataCsv: () =>
     ({
       name: 'abc.csv',
@@ -51,56 +51,56 @@ export const aSetOfLinksFixture = () => ({
       type: 'download',
       sizeBytes: 1234567890,
       url: new URL('http://my.server/files/abc.csv'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   dataPdf: () =>
     ({
       name: 'abc.pdf',
       description: 'Data in PDF format',
       type: 'download',
       url: new URL('https://my.server/files/abc.pdf'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   dataJpg: () =>
     ({
       name: 'abc.jpg',
       description: 'Data in JPG format',
       type: 'download',
       url: new URL('https://my.server/files/abc.jpg'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   dataZip: () =>
     ({
       name: 'abc.zip',
       description: 'Data in ZIP format',
       type: 'download',
       url: new URL('https://my.server/files/abc.zip'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   dataXls: () =>
     ({
       name: 'abc.xls',
       description: 'Data in XLS format',
       type: 'download',
       url: new URL('https://my.server/files/abc.xls'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   dataXlsx: () =>
     ({
       name: 'abc.XLSX',
       description: 'Data in XLSX format',
       type: 'download',
       url: new URL('https://my.server/files/abc.XLSX'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   dataJson: () =>
     ({
       name: 'abc.json',
       description: 'Data in JSON format',
       type: 'download',
       url: new URL('https://my.server/files/abc.json'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   geodataJson: () =>
     ({
       name: 'dataset.geojson',
       description: 'Geographic data in GeoJSON format',
       type: 'download',
       url: new URL('http://my.server/files/geographic/dataset.geojson'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   geodataJsonWithMimeType: () =>
     ({
       name: 'dataset.geojson',
@@ -108,28 +108,28 @@ export const aSetOfLinksFixture = () => ({
       type: 'download',
       url: new URL('http://my.server/files/geographic/dataset'),
       mimeType: 'application/vnd.geo+json',
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   geodataKml: () =>
     ({
       name: 'dataset.kml',
       description: 'Geographic data in KML format',
       type: 'download',
       url: new URL('http://my.server/files/geographic/dataset.kml'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   geodataGpkg: () =>
     ({
       name: 'dataset.gpkg',
       description: 'Geographic data in geopackage format',
       type: 'download',
       url: new URL('http://my.server/files/geographic/dataset.gpkg'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   geodataShp: () =>
     ({
       name: 'dataset.shp',
       description: 'Geographic data in shapefile format',
       type: 'download',
       url: new URL('http://my.server/files/geographic/dataset.zip'),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   geodataShpWithMimeType: () =>
     ({
       name: 'dataset',
@@ -137,7 +137,7 @@ export const aSetOfLinksFixture = () => ({
       type: 'download',
       url: new URL('http://my.server/files/geographic/dataset.zip'),
       mimeType: 'x-gis/x-shapefile',
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   geodataWms: () =>
     ({
       name: 'mylayer',
@@ -145,21 +145,21 @@ export const aSetOfLinksFixture = () => ({
       type: 'service',
       url: new URL('https://my.ogc.server/wms'),
       accessServiceProtocol: 'wms',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   geodataWmts: () =>
     ({
       name: 'mylayer',
       type: 'service',
       url: new URL('https://my.ogc.server/wmts'),
       accessServiceProtocol: 'wmts',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   geodataWfs: () =>
     ({
       name: 'mylayer',
       type: 'service',
       url: new URL('https://my.ogc.server/wfs'),
       accessServiceProtocol: 'wfs',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   geodataWfsDownload: () =>
     ({
       name: 'mylayer',
@@ -168,47 +168,56 @@ export const aSetOfLinksFixture = () => ({
         'https://my.ogc.server/wfs?GetFeature&FeatureType=surval_parametre_ligne&format=csv'
       ),
       accessServiceProtocol: 'wfs',
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
+  geodataOgcApiDownload: () =>
+    ({
+      name: 'mylayer',
+      type: 'download',
+      url: new URL(
+        'https://my.ogc.server/data/ogcapi/collections/comptages_velo/items?'
+      ),
+      accessServiceProtocol: 'ogcFeatures',
+    }) as DatasetDownloadDistribution,
   geodataWms2: () =>
     ({
       name: 'myotherlayer',
       type: 'service',
       url: new URL('https://my.ogc.server/wms'),
       accessServiceProtocol: 'wms',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   geodataWfs2: () =>
     ({
       name: 'myotherlayer',
       type: 'service',
       url: new URL('https://my.ogc.server/wfs'),
       accessServiceProtocol: 'wfs',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   geodataRest: () =>
     ({
       name: 'myrestlayer',
       type: 'service',
       url: new URL('https://my.esri.server/FeatureServer'),
       accessServiceProtocol: 'esriRest',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   geodataRestWfs: () =>
     ({
       name: 'mywfsrestlayer',
       type: 'service',
       url: new URL('https://my.esri.server/WFSServer'),
       accessServiceProtocol: 'wfs',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   maplayerRest: () =>
     ({
       name: 'myotherrestlayer',
       type: 'link',
       url: new URL('https://my.esri.server/MapServer'),
-    } as OnlineLinkResource),
+    }) as OnlineLinkResource,
   landingPage: () =>
     ({
       name: 'landingpage link',
       type: 'link',
       url: new URL('https://landing.page'),
-    } as OnlineLinkResource),
+    }) as OnlineLinkResource,
   unknownFormat: () =>
     ({
       name: 'Vue HTML des métadonnées sur internet',
@@ -216,7 +225,7 @@ export const aSetOfLinksFixture = () => ({
       url: new URL(
         'http://catalogue.geo-ide.developpement-durable.gouv.fr/catalogue/srv/fre/catalog.search#/metadata/fr-120066022-jdd-199fd14c-2abb-4c14-b0f8-6c8d92e7b480'
       ),
-    } as DatasetDownloadDistribution),
+    }) as DatasetDownloadDistribution,
   ogcApiFormat: () =>
     ({
       name: 'ogc api features layer',
@@ -225,7 +234,7 @@ export const aSetOfLinksFixture = () => ({
         'https://mel.integration.apps.gs-fr-prod.camptocamp.com/data/ogcapi/collections/comptages_velo/items?'
       ),
       accessServiceProtocol: 'ogcFeatures',
-    } as DatasetServiceDistribution),
+    }) as DatasetServiceDistribution,
   wmsEndpoint: () =>
     ({
       description:
@@ -235,5 +244,5 @@ export const aSetOfLinksFixture = () => ({
       ),
       protocol: 'wms',
       type: 'endpoint',
-    } as ServiceEndpoint),
+    }) as ServiceEndpoint,
 })

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

@@ -52,10 +52,7 @@ interface WfsDownloadUrls {
 export class DataService {
   constructor(private proxy: ProxyService) {}
 
-  getDownloadUrlsFromWfs(
-    wfsUrl: string,
-    featureTypeName: string
-  ): Observable<WfsDownloadUrls> {
+  getWfsEndpoint(wfsUrl: string): Observable<WfsEndpoint> {
     return from(
       new WfsEndpoint(this.proxy.getProxiedUrl(wfsUrl)).isReady()
     ).pipe(
@@ -78,7 +75,15 @@ export class DataService {
             throw new Error(`wfs.unreachable.unknown`)
           }
         }
-      }),
+      })
+    )
+  }
+
+  getDownloadUrlsFromWfs(
+    wfsUrl: string,
+    featureTypeName: string
+  ): Observable<WfsDownloadUrls> {
+    return this.getWfsEndpoint(wfsUrl).pipe(
       map((endpoint) => {
         const featureTypes = endpoint.getFeatureTypes()
         const featureType = endpoint.getFeatureTypeSummary(
@@ -127,6 +132,24 @@ export class DataService {
     )
   }
 
+  getWfsFeatureCount(
+    wfsUrl: string,
+    featureTypeName: string
+  ): Observable<number> {
+    return this.getWfsEndpoint(wfsUrl).pipe(
+      switchMap((endpoint) =>
+        from(endpoint.getFeatureTypeFull(featureTypeName)).pipe(
+          map((featureType) => {
+            if (!featureType) {
+              throw new Error('wfs.featuretype.notfound')
+            }
+            return featureType.objectCount
+          })
+        )
+      )
+    )
+  }
+
   getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
     return this.proxy.getProxiedUrl(
       `${apiUrl}/query?f=${format}&where=1=1&outFields=*`

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-file/form-field-file.component.html

@@ -7,6 +7,6 @@
   [ngClass]="{
     'border-pink-500': invalid,
     'border-gray-200': !invalid,
-    'text-gray-600': readonly
+    'text-gray-600': readonly,
   }"
 />

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html

@@ -12,10 +12,10 @@
     <span
       class="material-symbols-outlined gn-ui-icon-small"
       [ngClass]="{ 'text-primary': !preview }"
-      >{{ preview ? 'visibility' : 'visibility_off' }}</span
+      >{{ preview ? 'visibility_off' : 'visibility' }}</span
     >
     &nbsp;
-    {{ preview ? 'WYSIWYG' : 'Markdown' }}
+    {{ preview ? 'Edit' : 'Preview' }}
   </gn-ui-button>
   <gn-ui-markdown-editor
     [preview]="preview"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -153,7 +153,7 @@ export class FormFieldSpatialExtentComponent {
             label,
             type,
             ...(thesaurus && { thesaurus }),
-          } as Keyword)
+          }) as Keyword
       )
 
     const notPlaceKwAndSpatialScopeKw = await firstValueFrom(

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -256,10 +256,10 @@ export const DATA_MANAGERS_SECTION: EditorSection = {
   fields: [CONTACTS_FOR_RESOURCE_FIELD],
 }
 
-export const DATA_POINT_OF_CONTACT_SECTION: EditorSection = {
-  labelKey: marker('editor.record.form.section.dataPointOfContact.label'),
+export const METADATA_POINT_OF_CONTACT_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.metadataPointOfContact.label'),
   descriptionKey: marker(
-    'editor.record.form.section.dataPointOfContact.description'
+    'editor.record.form.section.metadataPointOfContact.description'
   ),
   hidden: false,
   fields: [CONTACTS],
@@ -285,7 +285,7 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
         CLASSIFICATION_SECTION,
         USE_AND_ACCESS_CONDITIONS_SECTION,
         DATA_MANAGERS_SECTION,
-        DATA_POINT_OF_CONTACT_SECTION,
+        METADATA_POINT_OF_CONTACT_SECTION,
       ],
     },
   ],

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.html

@@ -22,7 +22,7 @@
     *ngFor="let layer of layers"
     [ngTemplateOutlet]="layerTreeItem"
     [ngTemplateOutletContext]="{
-      layer: layer
+      layer: layer,
     }"
   ></ng-container>
 </div>
@@ -47,7 +47,7 @@
       *ngFor="let child of layer.children"
       [ngTemplateOutlet]="layerTreeItem"
       [ngTemplateOutletContext]="{
-        layer: child
+        layer: child,
       }"
     >
     </ng-container>

package/src/libs/feature/record/src/index.ts

@@ -7,4 +7,6 @@ export * from './lib/data-view-share/data-view-share.component'
 export * from './lib/data-view-web-component/data-view-web-component.component'
 export * from './lib/external-viewer-button/external-viewer-button.component'
 export * from './lib/map-view/map-view.component'
+export * from './lib/gpf-api-dl/gpf-api-dl.component'
 export * from './lib/record-meta/record-meta.component'
+export * from './lib/external-viewer-button/external-viewer-button.component'

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

@@ -18,6 +18,7 @@ import { TranslateModule } from '@ngx-translate/core'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
 import { TableComponent } from '../../../../../libs/ui/dataviz/src'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
+import { DropdownSelectorComponent } from '../../../../../libs/ui/inputs/src'
 
 @NgModule({
   imports: [
@@ -34,6 +35,7 @@ import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
     TranslateModule,
     TableComponent,
     NgIconsModule,
+    DropdownSelectorComponent,
   ],
   providers: [
     MdViewFacade,

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>