geonetwork-ui 2.8.0-dev.0c9b29721 → 2.8.0-dev.27e1de86f

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

@@ -108,6 +108,7 @@ export class ChartViewComponent {
   chartType$ = new BehaviorSubject<InputChartType>('bar')
 
   @Input() set userChartConfig(config: DatavizChartConfigModel) {
+    if (!config) return
     this.aggregation$.next(config.aggregation)
     this.xProperty$.next(config.xProperty)
     this.yProperty$.next(config.yProperty)

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

@@ -7,6 +7,9 @@ import {
   WfsEndpoint,
   WfsVersion,
   TmsEndpoint,
+  StacEndpoint,
+  GetCollectionItemsOptions,
+  StacItemsDocument,
 } from '@camptocamp/ogc-client'
 import {
   BaseReader,
@@ -97,16 +100,27 @@ export class DataService {
         if (!featureType) {
           throw new Error('wfs.featuretype.notfound')
         }
+
+        const wfsVersion = endpoint.getVersion()
+        const addSrsName = wfsVersion === '1.1.0' || wfsVersion === '2.0.0'
+        const defaultCrs = featureType.defaultCrs
+
+        const shouldAddOutputCrs = addSrsName && defaultCrs
+
         return {
-          all: featureType.outputFormats.reduce(
-            (prev, curr) => ({
+          all: featureType.outputFormats.reduce((prev, curr) => {
+            const isJsonFormat = curr.toLowerCase().includes('json')
+            return {
               ...prev,
               [curr]: endpoint.getFeatureUrl(featureType.name, {
                 outputFormat: curr,
+                ...(shouldAddOutputCrs &&
+                  !isJsonFormat && {
+                    outputCrs: defaultCrs,
+                  }),
               }),
-            }),
-            {}
-          ),
+            }
+          }, {}),
           geojson: endpoint.supportsJson(featureType.name)
             ? endpoint.getFeatureUrl(featureType.name, {
                 asJson: true,
@@ -233,6 +247,17 @@ export class DataService {
       })
   }
 
+  async getItemsFromStacApi(
+    url: string,
+    options: GetCollectionItemsOptions
+  ): Promise<StacItemsDocument> {
+    return await StacEndpoint.getItemsFromUrl(url, options)
+      .then((response) => response)
+      .catch(() => {
+        throw new Error(`ogc.unreachable.unknown`)
+      })
+  }
+
   async getGeodataLinksFromTms(
     tmsLink: DatasetServiceDistribution,
     keepOriginalLink = false

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.html

@@ -40,6 +40,7 @@
         <div
           class="flex flex-col gap-2 w-full px-2"
           data-test="langAvailable"
+          [attr.data-test-lang]="lang"
           *ngFor="let lang of languages"
         >
           <gn-ui-button

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

@@ -69,11 +69,11 @@
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-overviews>
     </ng-container>
-    <ng-container *ngSwitchCase="'resourceIdentifier'">
+    <ng-container *ngSwitchCase="'resourceIdentifiers'">
       <gn-ui-form-field-simple
         [type]="'text'"
-        [value]="valueAsString"
-        (valueChange)="valueChange.emit($event)"
+        [value]="valueAsResourceIdentifierCode"
+        (valueChange)="handleResourceIdentifierChange($event)"
       ></gn-ui-form-field-simple>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceCreated'">

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

@@ -142,4 +142,34 @@ export class FormFieldComponent {
   get valueAsOnlineResources() {
     return this.value as Array<OnlineResource>
   }
+  get valueAsResourceIdentifierCode() {
+    const identifiers = this.value as Array<{
+      code: string
+      codeSpace?: string
+      url?: string
+    }>
+    return identifiers?.[0]?.code || ''
+  }
+
+  handleResourceIdentifierChange(code: string) {
+    const identifiers = this.value as Array<{
+      code: string
+      codeSpace?: string
+      url?: string
+    }>
+
+    if (!code) {
+      this.valueChange.emit(identifiers?.slice(1) || [])
+      return
+    }
+
+    if (identifiers?.[0]) {
+      this.valueChange.emit([
+        { ...identifiers[0], code },
+        ...identifiers.slice(1),
+      ])
+    } else {
+      this.valueChange.emit([{ code }])
+    }
+  }
 }

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

@@ -81,7 +81,7 @@ export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
 }
 
 export const RESOURCE_IDENTIFIER_FIELD: EditorField = {
-  model: 'resourceIdentifier',
+  model: 'resourceIdentifiers',
   formFieldConfig: {
     labelKey: marker('editor.record.form.field.resourceIdentifier'),
   },

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

@@ -8,3 +8,4 @@ export * from './lib/external-viewer-button/external-viewer-button.component'
 export * from './lib/gpf-api-dl/gpf-api-dl.component'
 export * from './lib/map-view/map-view.component'
 export * from './lib/record-meta/record-meta.component'
+export * from './lib/stac-view/stac-view.component'

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

@@ -56,7 +56,11 @@ export class DataViewComponent {
       this.linkSelected.emit(this.selectedLink$.value)
     }
   }
-  @Input() set datavizConfig(value: any) {
+  @Input() set datavizConfig(value: {
+    view?: string
+    source?: DatasetOnlineResource
+    chartConfig?: DatavizChartConfigModel
+  }) {
     if ((value && value.view === 'table') || value.view === 'chart') {
       this._selectedView = value.view
     }

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

@@ -12,7 +12,7 @@ import { MdViewFacade } from '../state'
 import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
 import { TranslatePipe } from '@ngx-translate/core'
-import { GEONETWORK_UI_TAG_NAME } from '../../../../../../libs/util/shared/src'
+import { GEONETWORK_UI_TAG_NAME, PROXY_PATH } from '../../../../../../libs/util/shared/src'
 
 export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   'webComponentEmbedderUrl'
@@ -60,6 +60,9 @@ export class DataViewPermalinkComponent {
         url.searchParams.append('e', `gn-dataset-view-map`)
       }
       url.searchParams.append('a', `api-url=${this.config.basePath}`)
+      if (this.proxyPath) {
+        url.searchParams.append('a', `proxy-path=${this.proxyPath}`)
+      }
       url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
       url.searchParams.append('a', `primary-color=#0f4395`)
       url.searchParams.append('a', `secondary-color=#8bc832`)
@@ -72,6 +75,9 @@ export class DataViewPermalinkComponent {
   constructor(
     @Inject(Configuration) private config: Configuration,
     @Optional()
+    @Inject(PROXY_PATH)
+    private proxyPath: string,
+    @Optional()
     @Inject(WEB_COMPONENT_EMBEDDER_URL)
     protected wcEmbedderBaseUrl: string,
     private facade: MdViewFacade

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

@@ -3,6 +3,7 @@ import {
   Component,
   Inject,
   Input,
+  Optional,
 } from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
 import { MdViewFacade } from '../state'
@@ -10,7 +11,7 @@ import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
 import { TranslatePipe } from '@ngx-translate/core'
-import { GEONETWORK_UI_TAG_NAME } from '../../../../../../libs/util/shared/src'
+import { GEONETWORK_UI_TAG_NAME, PROXY_PATH } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-data-view-web-component',
@@ -42,7 +43,12 @@ export class DataViewWebComponentComponent {
           api-url="${new URL(
             this.config.basePath,
             window.location.origin
-          ).toString()}"
+          ).toString()}"${
+            this.proxyPath
+              ? `
+          proxy-path="${this.proxyPath}"`
+              : ''
+          }
           dataset-id="${metadata.uniqueIdentifier}"
           aggregation="${aggregation}"
           x-property="${xProperty}"
@@ -65,7 +71,12 @@ export class DataViewWebComponentComponent {
           api-url="${new URL(
             this.config.basePath,
             window.location.origin
-          ).toString()}"
+          ).toString()}"${
+            this.proxyPath
+              ? `
+          proxy-path="${this.proxyPath}"`
+              : ''
+          }
           dataset-id="${metadata.uniqueIdentifier}"
           primary-color="#0f4395"
           secondary-color="#8bc832"
@@ -82,7 +93,12 @@ export class DataViewWebComponentComponent {
         api-url="${new URL(
           this.config.basePath,
           window.location.origin
-        ).toString()}"
+        ).toString()}"${
+          this.proxyPath
+            ? `
+        proxy-path="${this.proxyPath}"`
+            : ''
+        }
         dataset-id="${metadata.uniqueIdentifier}"
         primary-color="#0f4395"
         secondary-color="#8bc832"
@@ -97,6 +113,9 @@ export class DataViewWebComponentComponent {
 
   constructor(
     @Inject(Configuration) private config: Configuration,
+    @Optional()
+    @Inject(PROXY_PATH)
+    private proxyPath: string,
     private facade: MdViewFacade
   ) {}
 }

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

@@ -45,8 +45,8 @@ export interface TermBucket {
 }
 
 export interface Field {
-  entry: Array<any>
-  link: any
+  entry: Array<unknown>
+  link: Record<string, unknown>
 }
 
 @Component({
@@ -75,7 +75,7 @@ export class GpfApiDlComponent implements OnInit {
   page$ = new BehaviorSubject(1)
   url =
     'https://data.geopf.fr/telechargement/capabilities?outputFormat=application/json'
-  choices: any
+  choices: { zone: TermBucket[]; format: TermBucket[]; category: TermBucket[] }
   bucketPromisesZone: Choice[]
   bucketPromisesFormat: Choice[]
   bucketPromisesCrs: Choice[]
@@ -144,8 +144,10 @@ export class GpfApiDlComponent implements OnInit {
     })
   )
 
-  getFilteredProduct$(url): Observable<any> {
-    return this.http.get(url)
+  getFilteredProduct$(
+    url
+  ): Observable<{ entry: unknown[]; totalentries: number }> {
+    return this.http.get<{ entry: unknown[]; totalentries: number }>(url)
   }
 
   getLinkFormat(produit): string {
@@ -224,7 +226,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempZone = this.choices.zone.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempZone.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempZone.unshift({ value: 'null', label: 'ZONE' })
@@ -233,7 +235,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempFormat = this.choices.format.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempFormat.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempFormat.unshift({ value: 'null', label: 'FORMAT' })
@@ -242,7 +244,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempCrs = this.choices.category.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempCrs.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempCrs.unshift({ value: 'null', label: 'CRS' })

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

@@ -28,7 +28,7 @@ export class GpfApiDlListItemComponent implements OnInit {
   @Input() isFromWfs: boolean
 
   constructor(protected http: HttpClient) {}
-  liste$: Observable<any>
+  liste$: Observable<{ entry: unknown[] }>
 
   ngOnInit(): void {
     this.liste$ = this.http

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

@@ -27,7 +27,6 @@ import {
   map,
   shareReplay,
   switchMap,
-  take,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
@@ -114,10 +113,15 @@ export class MapViewComponent implements AfterViewInit {
   _styleFromConfig = null
 
   linkMap: Map<string, DatasetOnlineResource> = new Map()
+  // FIXME the map view component should not need a selectedView
   @Input() set selectedView(value: string) {
     this.selectedView$.next(value)
   }
-  @Input() set datavizConfig(value: any) {
+  @Input() set datavizConfig(value: {
+    view?: string
+    styleTMSIndex?: number
+    source?: DatasetOnlineResource
+  }) {
     if (value && value.view === 'map') {
       this.selectedView$.next(value.view)
       if (value.styleTMSIndex) {

package/src/libs/feature/record/src/lib/stac-view/stac-view.component.css

@@ -0,0 +1,8 @@
+:host {
+  --gn-ui-button-padding: 7px 8px;
+}
+
+/* Ensure OpenLayers controls are above the custom toggle */
+::ng-deep .ol-overlaycontainer-stopevent {
+  z-index: 11 !important;
+}

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

@@ -0,0 +1,87 @@
+<div class="mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg">
+  <div
+    class="w-full h-[700px] md:h-[366px] flex md:flex-row flex-col border-b border-gray-300"
+  >
+    @let filterState = filterState$ | async;
+
+    <div class="w-full md:w-5/12 h-[366px] flex flex-col">
+      <gn-ui-date-range-inputs
+        [temporalExtent]="filterState.temporalExtent"
+        (temporalExtentChange)="onTemporalExtentChange($event)"
+      ></gn-ui-date-range-inputs>
+
+      <div class="mt-auto mb-8 mx-8" *ngIf="isFilterModified$ | async">
+        <gn-ui-button
+          id="reset-filters-button"
+          type="light"
+          (buttonClick)="onResetFilters()"
+        >
+          <span translate>stac.filter.reset</span>
+          <ng-icon name="matDeleteOutline" class="ml-2"></ng-icon>
+        </gn-ui-button>
+      </div>
+    </div>
+
+    <div class="w-full md:w-7/12 h-[334px] md:h-[366px] flex flex-col">
+      <gn-ui-map-container
+        #mapContainer
+        [context]="mapContext$ | async"
+        (extentChange)="onSpatialExtentChange($event)"
+        (resolvedExtentChange)="onResolvedMapExtentChange($event)"
+        class="w-full h-full"
+      >
+        <div
+          class="bg-white rounded-xl shadow-xl absolute left-1/2 transform -translate-x-1/2 bottom-0 mb-2.5 px-4 py-2 z-10 max-w-[90%] w-max"
+        >
+          <gn-ui-check-toggle
+            [value]="filterState.isSpatialExtentFilterEnabled"
+            (toggled)="onSpatialFilterToggle($event)"
+            [label]="'stac.filter.enable' | translate"
+            [color]="'primary'"
+          ></gn-ui-check-toggle>
+        </div>
+      </gn-ui-map-container>
+    </div>
+  </div>
+  <div
+    class="relative mx-5 my-[30px] min-h-[274px] flex items-center justify-center flex-col"
+  >
+    <!-- Keep grid outside ngIf to keep items$ observable alive -->
+    <gn-ui-stac-items-result-grid
+      [items]="items$ | async"
+    ></gn-ui-stac-items-result-grid>
+    <div
+      *ngIf="(items$ | async)?.length > 0; else noResultsOrError"
+      class="mt-[20px] mx-auto flex justify-center"
+    >
+      <gn-ui-previous-next-buttons
+        [listComponent]="this"
+        [displayLabels]="true"
+      ></gn-ui-previous-next-buttons>
+    </div>
+    <ng-template #noResultsOrError>
+      <gn-ui-popup-alert
+        *ngIf="error$ | async as error"
+        type="warning"
+        icon="matErrorOutlineOutline"
+        class="absolute left-0 top-0 w-full block"
+      >
+        <span translate>{{ error }}</span>
+      </gn-ui-popup-alert>
+      <div
+        *ngIf="(error$ | async) === null"
+        class="flex items-center justify-center flex-col h-full gap-[10px]"
+      >
+        <h2 class="text-center text-xl" translate>stac.results.noResults</h2>
+        <gn-ui-button
+          id="no-results-button"
+          type="secondary"
+          (buttonClick)="onResetFilters()"
+        >
+          <span translate>stac.filter.reset</span>
+          <ng-icon name="matDeleteOutline" class="ml-2"></ng-icon>
+        </gn-ui-button>
+      </div>
+    </ng-template>
+  </div>
+</div>