geonetwork-ui 2.2.0 → 2.3.0-dev.179fba83

package/src/libs/api/repository/src/lib/gn4/gn4-repository.ts

@@ -14,7 +14,7 @@ import {
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { map } from 'rxjs/operators'
 import {
-  Gn4MetadataMapper,
+  Gn4Converter,
   Gn4SearchResults,
 } from '../../../../../../libs/api/metadata-converter/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
@@ -24,7 +24,7 @@ export class Gn4Repository implements RecordsRepositoryInterface {
   constructor(
     private gn4SearchApi: SearchApiService,
     private gn4SearchHelper: ElasticsearchService,
-    private gn4Mapper: Gn4MetadataMapper
+    private gn4Mapper: Gn4Converter
   ) {}
 
   search({

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -83,8 +83,8 @@ export interface BaseRecord {
   title: string
   abstract: string
   recordCreated?: Date
-  recordUpdated: Date
   recordPublished?: Date
+  recordUpdated: Date
   languages: Array<LanguageCode>
   kind: RecordKind
   topics: Array<string> // TODO: handle codelists
@@ -98,6 +98,12 @@ export interface BaseRecord {
   landingPage?: URL
   updateFrequency?: UpdateFrequency
 
+  // information related to the resource (dataset, service)
+  contactsForResource: Array<Individual>
+  resourceCreated?: Date
+  resourcePublished?: Date
+  resourceUpdated?: Date
+
   // to add: canonical url
   // to add: source catalog (??)
   // to add: is open data ?
@@ -173,10 +179,7 @@ export interface DatasetTemporalExtent {
 
 export interface DatasetRecord extends BaseRecord {
   kind: 'dataset'
-  contactsForResource: Array<Individual>
   status: RecordStatus
-  datasetCreated?: Date
-  datasetUpdated?: Date
   lineage: string // Explanation of the origin of this record (e.g: how, why)"
   distributions: Array<DatasetDistribution>
   spatialExtents: Array<DatasetSpatialExtent>
@@ -203,3 +206,5 @@ export interface ServiceRecord extends BaseRecord {
 }
 
 export type CatalogRecord = ServiceRecord | DatasetRecord
+
+export type CatalogRecordKeys = keyof ServiceRecord | keyof DatasetRecord

package/src/libs/data-access/gn4/src/openapi/api/records.api.service.ts

@@ -30,7 +30,6 @@ import {
 import { ExtentDtoApiModel } from '../model/models'
 import { FeatureResponseApiModel } from '../model/models'
 import { IProcessingReportApiModel } from '../model/models'
-import { InlineObject3ApiModel } from '../model/models'
 import { MetadataBatchApproveParameterApiModel } from '../model/models'
 import { MetadataBatchSubmitParameterApiModel } from '../model/models'
 import { MetadataCategoryApiModel } from '../model/models'
@@ -75,6 +74,20 @@ export class RecordsApiService {
     this.encoder = this.configuration.encoder || new CustomHttpParameterCodec()
   }
 
+  /**
+   * @param consumes string[] mime-types
+   * @return true: consumes contains 'multipart/form-data', false: otherwise
+   */
+  private canConsumeForm(consumes: string[]): boolean {
+    const form = 'multipart/form-data'
+    for (const consume of consumes) {
+      if (form === consume) {
+        return true
+      }
+    }
+    return false
+  }
+
   private addToHttpParams(
     httpParams: HttpParams,
     value: any,
@@ -8290,44 +8303,44 @@ export class RecordsApiService {
   /**
    * Create a new resource for a given metadata
    * @param metadataUuid The metadata UUID
+   * @param file The file to upload
    * @param visibility The sharing policy
    * @param approved Use approved version or not
-   * @param inlineObject3ApiModel
    * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
    * @param reportProgress flag to report request and response progress.
    */
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'body',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<MetadataResourceApiModel>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'response',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<HttpResponse<MetadataResourceApiModel>>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'events',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<HttpEvent<MetadataResourceApiModel>>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe: any = 'body',
     reportProgress: boolean = false,
     options?: { httpHeaderAccept?: 'application/json' }
@@ -8337,6 +8350,11 @@ export class RecordsApiService {
         'Required parameter metadataUuid was null or undefined when calling putResource.'
       )
     }
+    if (file === null || file === undefined) {
+      throw new Error(
+        'Required parameter file was null or undefined when calling putResource.'
+      )
+    }
 
     let queryParameters = new HttpParams({ encoder: this.encoder })
     if (visibility !== undefined && visibility !== null) {
@@ -8369,11 +8387,24 @@ export class RecordsApiService {
     }
 
     // to determine the Content-Type header
-    const consumes: string[] = ['application/json']
-    const httpContentTypeSelected: string | undefined =
-      this.configuration.selectHeaderContentType(consumes)
-    if (httpContentTypeSelected !== undefined) {
-      headers = headers.set('Content-Type', httpContentTypeSelected)
+    const consumes: string[] = ['multipart/form-data']
+
+    const canConsumeForm = this.canConsumeForm(consumes)
+
+    let formParams: { append(param: string, value: any): any }
+    let useForm = false
+    let convertFormParamsToString = false
+    // use FormData to transmit files using content-type "multipart/form-data"
+    // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
+    useForm = canConsumeForm
+    if (useForm) {
+      formParams = new FormData()
+    } else {
+      formParams = new HttpParams({ encoder: this.encoder })
+    }
+
+    if (file !== undefined) {
+      formParams = (formParams.append('file', <any>file) as any) || formParams
     }
 
     let responseType_: 'text' | 'json' = 'json'
@@ -8388,7 +8419,7 @@ export class RecordsApiService {
       `${this.configuration.basePath}/records/${encodeURIComponent(
         String(metadataUuid)
       )}/attachments`,
-      inlineObject3ApiModel,
+      convertFormParamsToString ? formParams.toString() : formParams,
       {
         params: queryParameters,
         responseType: <any>responseType_,

package/src/libs/data-access/gn4/src/openapi/model/models.ts

@@ -33,7 +33,6 @@ export * from './iProcessingReport.api.model'
 export * from './iSODate.api.model'
 export * from './infoReport.api.model'
 export * from './inlineObject1.api.model'
-export * from './inlineObject3.api.model'
 export * from './inlineObject4.api.model'
 export * from './isoLanguage.api.model'
 export * from './jSONObject.api.model'

package/src/libs/data-access/gn4/src/spec.yaml

@@ -7390,7 +7390,7 @@ paths:
           example: true
       requestBody:
         content:
-          application/json:
+          multipart/form-data:
             schema:
               required:
                 - file

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

@@ -94,7 +94,7 @@ export class DataService {
           ),
           geojson: endpoint.supportsJson(featureType.name)
             ? endpoint.getFeatureUrl(featureType.name, {
-                outputFormat: 'application/json',
+                asJson: true,
                 outputCrs: 'EPSG:4326',
               })
             : null,

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -0,0 +1,8 @@
+<gn-ui-image-input
+  [maxSizeMB]="5"
+  [previewUrl]="resourceUrl"
+  [altText]="resourceFileName"
+  (fileChange)="handleFileChange($event)"
+  (urlChange)="handleUrlChange($event)"
+  (delete)="handleDelete()"
+></gn-ui-image-input>

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts

@@ -0,0 +1,70 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RecordsApiService } from '../../../../../../../libs/data-access/gn4/src'
+import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-overview-upload',
+  standalone: true,
+  imports: [CommonModule, UiInputsModule],
+  templateUrl: './overview-upload.component.html',
+  styleUrls: ['./overview-upload.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OverviewUploadComponent implements OnInit {
+  @Input() metadataUuid: string
+
+  resourceFileName: string
+  resourceUrl: string
+
+  constructor(
+    private recordsApiService: RecordsApiService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.recordsApiService
+      .getAllResources(this.metadataUuid)
+      .subscribe((resources) => {
+        this.resourceFileName = resources[0]?.filename
+        this.resourceUrl = resources[0]?.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleFileChange(file: File) {
+    this.recordsApiService
+      .putResource(this.metadataUuid, file, 'public')
+      .subscribe((resource) => {
+        this.resourceFileName = resource.filename
+        this.resourceUrl = resource.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleUrlChange(url: string) {
+    this.recordsApiService
+      .putResourceFromURL(this.metadataUuid, url, 'public')
+      .subscribe((resource) => {
+        this.resourceFileName = resource.filename
+        this.resourceUrl = resource.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleDelete() {
+    this.recordsApiService
+      .delResource(this.metadataUuid, this.resourceFileName)
+      .subscribe(() => {
+        this.resourceFileName = null
+        this.resourceUrl = null
+        this.cd.markForCheck()
+      })
+  }
+}

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,8 +1,11 @@
 import { Inject, Injectable, Optional } from '@angular/core'
-import { toModel, toXml } from '../../../../../../libs/api/metadata-converter/src'
+import {
+  findConverterForDocument,
+  Iso19139Converter,
+} from '../../../../../../libs/api/metadata-converter/src'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
-import { Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { from, Observable } from 'rxjs'
+import { map, switchMap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { EditorFieldsConfig } from '../models/fields.model'
@@ -30,7 +33,11 @@ export class EditorService {
           Accept: 'application/xml',
         },
       })
-      .pipe(map((response) => toModel(response.toString())))
+      .pipe(
+        switchMap((response) =>
+          findConverterForDocument(response).readRecord(response.toString())
+        )
+      )
   }
 
   // returns the record as it was when saved
@@ -52,17 +59,21 @@ export class EditorService {
     }
 
     // TODO: use the catalog repository instead
-    return this.http
-      .put(
-        `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
-        toXml(savedRecord),
-        {
-          headers: {
-            'Content-Type': 'application/xml',
-          },
-          withCredentials: true,
-        }
-      )
-      .pipe(map(() => savedRecord))
+    // TODO: use converter based on the format of the record before change
+    return from(new Iso19139Converter().writeRecord(savedRecord)).pipe(
+      switchMap((recordXml) =>
+        this.http.put(
+          `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
+          recordXml,
+          {
+            headers: {
+              'Content-Type': 'application/xml',
+            },
+            withCredentials: true,
+          }
+        )
+      ),
+      map(() => savedRecord)
+    )
   }
 }

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -59,7 +59,11 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
         name: link.name,
       })
     } else if (link.accessServiceProtocol === 'wmts') {
-      return this.mapUtils.getWmtsLayerFromCapabilities(link)
+      return of({
+        url: link.url.toString(),
+        type: MapContextLayerTypeEnum.WMTS,
+        name: link.name,
+      })
     }
     return throwError(() => 'protocol not supported')
   }

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

@@ -0,0 +1,36 @@
+<div class="flex items-center mb-5">
+  <gn-ui-text-input
+    [(value)]="ogcUrl"
+    (valueChange)="urlChange.next($event)"
+    [hint]="'map.ogc.urlInput.hint' | translate"
+    class="w-96"
+  >
+  </gn-ui-text-input>
+</div>
+
+<div *ngIf="errorMessage" class="text-red-500 mt-2">
+  {{ errorMessage }}
+</div>
+
+<div *ngIf="loading">
+  <p class="loading-message" translate>map.loading.service</p>
+</div>
+
+<div *ngIf="!loading && layers.length > 0">
+  <h2 class="font-bold" translate>map.layers.available</h2>
+  <ng-container *ngFor="let layer of layers">
+    <div class="flex items-center justify-between my-2 layer-item-tree">
+      <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {{ layer }}
+      </p>
+      <gn-ui-button
+        class="layer-add-btn"
+        type="primary"
+        (buttonClick)="addLayer(layer)"
+        extraClass="text-sm !px-2 !py-1"
+        translate
+        ><span translate> map.layer.add </span></gn-ui-button
+      >
+    </div>
+  </ng-container>
+</div>

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -0,0 +1,80 @@
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  Input,
+  ChangeDetectorRef,
+} from '@angular/core'
+import { OgcApiEndpoint } from '@camptocamp/ogc-client'
+import { Subject, debounceTime } from 'rxjs'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+} from '../map-context/map-context.model'
+import { TranslateModule } from '@ngx-translate/core'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { MapLayer } from '../+state/map.models'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-ogc-api',
+  templateUrl: './add-layer-from-ogc-api.component.html',
+  styleUrls: ['./add-layer-from-ogc-api.component.css'],
+  standalone: true,
+  imports: [CommonModule, TranslateModule, UiInputsModule],
+})
+export class AddLayerFromOgcApiComponent implements OnInit {
+  @Input() ogcUrl: string
+  @Output() layerAdded = new EventEmitter<MapLayer>()
+
+  urlChange = new Subject<string>()
+  layerUrl = ''
+  loading = false
+  layers: string[] = []
+  ogcEndpoint: OgcApiEndpoint = null
+  errorMessage: string | null = null
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.urlChange.pipe(debounceTime(700)).subscribe(() => {
+      this.loadLayers()
+      this.changeDetectorRef.detectChanges() // manually trigger change detection
+    })
+  }
+
+  async loadLayers() {
+    this.errorMessage = null
+    try {
+      this.loading = true
+      if (this.ogcUrl.trim() === '') {
+        this.layers = []
+        return
+      }
+      this.ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+
+      // Currently only supports feature collections
+      this.layers = await this.ogcEndpoint.featureCollections
+    } catch (error) {
+      const err = error as Error
+      this.layers = []
+      this.errorMessage = 'Error loading layers: ' + err.message
+    } finally {
+      this.loading = false
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
+  async addLayer(layer: string) {
+    this.layerUrl = await this.ogcEndpoint.getCollectionItemsUrl(layer)
+
+    const layerToAdd: MapContextLayerModel = {
+      name: layer,
+      url: this.layerUrl,
+      type: MapContextLayerTypeEnum.OGCAPI,
+    }
+    this.layerAdded.emit({ ...layerToAdd, title: layer })
+  }
+}

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

@@ -25,6 +25,7 @@ import { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-
 import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wfs.component'
 import { GeocodingComponent } from './geocoding/geocoding.component'
 import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
+import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api/add-layer-from-ogc-api.component'
 
 @NgModule({
   declarations: [
@@ -59,6 +60,7 @@ import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
     EffectsModule.forFeature([MapEffects]),
     UiElementsModule,
     UiInputsModule,
+    AddLayerFromOgcApiComponent,
   ],
   providers: [
     {

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.html

@@ -40,6 +40,14 @@
           <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>
         </div>
       </mat-tab>
+      <mat-tab [label]="'map.add.layer.ogc.api' | translate" bodyClass="h-full">
+        <div class="p-3">
+          <gn-ui-add-layer-from-ogc-api
+            [ogcUrl]="ogcUrl"
+            (layerAdded)="addLayer($event)"
+          ></gn-ui-add-layer-from-ogc-api>
+        </div>
+      </mat-tab>
       <mat-tab [label]="'map.add.layer.file' | translate" bodyClass="h-full">
         <div class="p-3">
           <gn-ui-add-layer-from-file></gn-ui-add-layer-from-file>

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts

@@ -9,9 +9,14 @@ import { MapFacade } from '../+state/map.facade'
 })
 export class LayersPanelComponent {
   layers$ = this.mapFacade.layers$
+  ogcUrl = ''
   constructor(private mapFacade: MapFacade) {}
 
   deleteLayer(index: number) {
     this.mapFacade.removeLayer(index)
   }
+
+  addLayer(layer) {
+    this.mapFacade.addLayer(layer)
+  }
 }

package/src/libs/feature/map/src/lib/map-context/map-context.model.ts

@@ -1,7 +1,6 @@
 import type { FeatureCollection } from 'geojson'
 import { Coordinate } from 'ol/coordinate'
 import type { Extent } from 'ol/extent'
-import { Options } from 'ol/source/WMTS'
 
 export enum MapContextLayerTypeEnum {
   XYZ = 'xyz',
@@ -9,6 +8,7 @@ export enum MapContextLayerTypeEnum {
   WMTS = 'wmts',
   WFS = 'wfs',
   GEOJSON = 'geojson',
+  OGCAPI = 'ogcapi',
 }
 
 export interface MapContextModel {
@@ -24,8 +24,8 @@ export interface MapContextLayerWmsModel {
 
 export interface MapContextLayerWmtsModel {
   type: 'wmts'
-  options: Options
-  extent?: Extent
+  url: string
+  name: string
 }
 
 interface MapContextLayerWfsModel {
@@ -34,6 +34,12 @@ interface MapContextLayerWfsModel {
   name: string
 }
 
+export interface MapContextLayerOgcapiModel {
+  type: 'ogcapi'
+  url: string
+  name: string
+}
+
 interface LayerXyzModel {
   type: 'xyz'
   name?: string
@@ -71,6 +77,7 @@ export type MapContextLayerModel =
   | MapContextLayerWfsModel
   | MapContextLayerXyzModel
   | MapContextLayerGeojsonModel
+  | MapContextLayerOgcapiModel
 
 export interface MapContextViewModel {
   center?: Coordinate // expressed in long/lat (EPSG:4326)