geonetwork-ui 2.4.2-dev.ff0aab388 → 2.4.2

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -5,8 +5,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnChanges,
-  OnInit,
   Output,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
@@ -23,23 +21,27 @@ import {
   TextInputComponent,
   UrlInputComponent,
 } from '../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { createFuzzyFilter, getLayers } from '../../../../../../../libs/util/shared/src'
 import {
   NgIconComponent,
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
-import { iconoirCloudUpload } from '@ng-icons/iconoir'
-import { createFuzzyFilter, getLayers } from '../../../../../../../libs/util/shared/src'
+import { iconoirRefresh } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
 import {
   BehaviorSubject,
   debounceTime,
   distinctUntilChanged,
-  map,
   Observable,
   switchMap,
 } from 'rxjs'
 
+marker('editor.record.form.field.onlineResource.edit.identifier.placeholder')
+marker(
+  'editor.record.form.field.onlineResource.edit.identifier.placeholder.wps'
+)
+
 @Component({
   selector: 'gn-ui-online-service-resource-input',
   templateUrl: './online-service-resource-input.component.html',
@@ -59,26 +61,25 @@ import {
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirCloudUpload }),
+    provideIcons({ iconoirRefresh }),
     provideNgIconsConfig({
       size: '1.5em',
     }),
   ],
 })
-export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
-  @Input() service: DatasetServiceDistribution
+export class OnlineServiceResourceInputComponent {
+  _service: DatasetServiceDistribution
+  @Input() set service(service: DatasetServiceDistribution) {
+    this._service = { ...service }
+  }
   @Input() protocolHint?: string
   @Input() disabled? = false
   @Input() modifyMode? = false
-  @Output() urlChange: EventEmitter<string> = new EventEmitter()
-  @Output() identifierSubmit: EventEmitter<{
-    url: string
-    identifier: string
-  }> = new EventEmitter()
+  @Output() serviceChange: EventEmitter<DatasetServiceDistribution> =
+    new EventEmitter()
 
   errorMessage = false
-  selectedProtocol: ServiceProtocol
-  url = ''
+
   layersSubject = new BehaviorSubject<{ name: string; title: string }[]>([])
   layers$: Observable<{ name: string; title: string }[]> =
     this.layersSubject.asObservable()
@@ -121,35 +122,18 @@ export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
 
   get activeLayerSuggestion() {
     return !['wps', 'GPFDL', 'esriRest', 'other'].includes(
-      this.service.accessServiceProtocol
+      this._service.accessServiceProtocol
     )
   }
 
-  ngOnChanges() {
-    this.selectedProtocol =
-      this.protocolOptions.find(
-        (option) => option.value === this.service.accessServiceProtocol
-      )?.value ?? 'other'
-  }
-
-  ngOnInit() {
-    if (this.service.url) {
-      this.url = this.service.url.toString()
-    }
-  }
-
   handleUrlValueChange(url: string) {
-    this.url = url
-    this.service.url = url ? new URL(url) : undefined
+    this._service.url = url ? new URL(url) : undefined
     this.resetLayersSuggestion()
-    this.urlChange.emit(this.url)
   }
 
   async handleUploadClick(url: string) {
-    this.url = url
-
     try {
-      const layers = await getLayers(url, this.service.accessServiceProtocol)
+      const layers = await getLayers(url, this._service.accessServiceProtocol)
 
       if (layers.length === 0) {
         throw new Error('No layers found')
@@ -165,27 +149,29 @@ export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
   }
 
   resetAllFormFields() {
-    this.url = ''
-    this.service.url = null
+    this._service.url = null
     this.resetLayersSuggestion()
   }
 
   resetLayersSuggestion() {
     this.errorMessage = false
     this.layersSubject.next([])
-    this.service.identifierInService = null
+    this._service.identifierInService = null
   }
 
-  submitIdentifier(identifier: string) {
-    if (!identifier) return
-    this.identifierSubmit.emit({ url: this.url, identifier })
-    this.service.identifierInService = null
+  submit() {
+    this.serviceChange.emit({
+      ...this._service,
+      name: this._service.identifierInService, // should we keep the identifierInService? read-write duplicate with name
+    })
+    this._service.accessServiceProtocol = 'ogcFeatures'
+    this.resetAllFormFields()
   }
 
   getIdentifierPlaceholder(): string {
     const baseKey =
       'editor.record.form.field.onlineResource.edit.identifier.placeholder'
-    return this.service.accessServiceProtocol === 'wps'
+    return this._service.accessServiceProtocol === 'wps'
       ? `${baseKey}.wps`
       : baseKey
   }
@@ -217,6 +203,7 @@ export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
    * gn-ui-autocomplete
    */
   handleSelectValue(val: { name: string; title: string }) {
-    this.service.identifierInService = val.name
+    this._service.identifierInService = val.name // should we keep the identifierInService? read-write duplicate with name
+    this._service.description = val.title
   }
 }

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

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-3">
   <gn-ui-autocomplete
-    [placeholder]="'Choose a contact'"
+    [placeholder]="'editor.record.form.field.contacts.placeholder' | translate"
     [action]="autoCompleteAction"
     (itemSelected)="addContact($event)"
     [displayWithFn]="displayWithFn"

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

@@ -31,7 +31,9 @@
       </div>
 
       <gn-ui-autocomplete
-        [placeholder]="'Choose a contact'"
+        [placeholder]="
+          'editor.record.form.field.contactsForResource.placeholder' | translate
+        "
         [action]="autoCompleteAction"
         (itemSelected)="addContact($event, role)"
         [displayWithFn]="displayWithFn"

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

@@ -2,7 +2,7 @@
   <gn-ui-generic-keywords
     [keywords]="filteredKeywords"
     [keywordTypes]="keywordTypes"
-    [placeholder]="'editor.form.keywords.placeholder' | translate"
+    [placeholder]="'editor.record.form.keywords.placeholder' | translate"
     (changedKeywords)="handleKeywordsChange($event)"
     [allowSubmit]="false"
   >

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

@@ -41,7 +41,6 @@
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [disabled]="disabled$ | async"
         [showValidateButton]="false"
       ></gn-ui-url-input>
     </div>

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -8,28 +9,27 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
 import {
   OnlineLinkResource,
   OnlineResource,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
 import {
   FileInputComponent,
   TextAreaComponent,
   TextInputComponent,
   UrlInputComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
-import { CommonModule } from '@angular/common'
-import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
 import {
   ModalDialogComponent,
   SortableListComponent,
 } from '../../../../../../../../../libs/ui/layout/src'
-import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
-import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { map, Subscription } from 'rxjs'
-import { MatDialog } from '@angular/material/dialog'
+import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
 
 @Component({
   selector: 'gn-ui-form-field-online-link-resources',

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

@@ -20,8 +20,7 @@
   >
     <gn-ui-online-service-resource-input
       [service]="newService"
-      [disabled]="disabled$ | async"
-      (identifierSubmit)="handleIdentifierSubmit($event)"
+      (serviceChange)="handleServiceChange($event)"
     ></gn-ui-online-service-resource-input>
   </div>
   <div class="h-[8px]"></div>
@@ -40,28 +39,36 @@
 
   <ng-template #dialogTemplate let-onlineResource>
     <div class="flex flex-col gap-[16px]">
-      <div>
-        <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-          editor.record.form.field.onlineResource.edit.title
-        </h3>
-        <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
-      </div>
-      <div>
-        <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-          editor.record.form.field.onlineResource.edit.description
-        </h3>
-        <gn-ui-text-area
-          [(value)]="onlineResource.description"
-        ></gn-ui-text-area>
-      </div>
       <ng-container *ngIf="onlineResource.type === 'service'; else urlInput">
-        <span class="w-full border-b border-gray-300"></span>
         <gn-ui-online-service-resource-input
           [service]="onlineResource"
           [modifyMode]="true"
+          [disabled]="true"
         ></gn-ui-online-service-resource-input>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.description
+          </h3>
+          <gn-ui-text-area
+            [(value)]="onlineResource.description"
+          ></gn-ui-text-area>
+        </div>
       </ng-container>
       <ng-template #urlInput>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.title
+          </h3>
+          <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
+        </div>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.description
+          </h3>
+          <gn-ui-text-area
+            [(value)]="onlineResource.description"
+          ></gn-ui-text-area>
+        </div>
         <span class="w-full border-b border-gray-300"></span>
         <gn-ui-url-input
           class="w-full"

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

@@ -159,33 +159,8 @@ export class FormFieldOnlineResourcesComponent {
     }
   }
 
-  handleServiceUrlChange(url: string) {
-    this.valueChange.emit([
-      ...this.allResources,
-      {
-        ...this.newService,
-        url: new URL(url),
-      },
-    ])
-  }
-
-  handleIdentifierSubmit(payload: { url: string; identifier: string }) {
-    this.valueChange.emit([
-      ...this.allResources,
-      {
-        ...this.newService,
-        url: new URL(payload.url),
-      },
-    ])
-  }
-
-  handleServiceModify(
-    oldService: DatasetServiceDistribution,
-    newService: DatasetServiceDistribution
-  ) {
-    oldService.accessServiceProtocol = newService.accessServiceProtocol
-    oldService.identifierInService = newService.identifierInService
-    oldService.url = newService.url
+  handleServiceChange(service: DatasetServiceDistribution) {
+    this.valueChange.emit([...this.allResources, service])
   }
 
   handleResourcesChange(items: unknown[]) {

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

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-3">
   <gn-ui-generic-keywords
-    [placeholder]="'Search for place keywords'"
+    [placeholder]="'editor.record.form.keywords.place.placeholder' | translate"
     [keywords]="shownKeywords$ | async"
     [keywordTypes]="['place']"
     (deletedKeyword)="handleKeywordDelete($event)"

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

@@ -10,7 +10,7 @@ import { firstValueFrom, map, shareReplay } from 'rxjs'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { switchMap } from 'rxjs/operators'
 import { FormFieldMapContainerComponent } from '../form-field-map-container/form-field-map-container.component'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { SPATIAL_SCOPES } from '../../../../fields.config'
 
 // This intermediary type will let us keep track of which keyword is bound to
@@ -36,6 +36,7 @@ type KeywordWithExtent = Keyword & {
     CommonModule,
     GenericKeywordsComponent,
     FormFieldMapContainerComponent,
+    TranslateModule,
   ],
 })
 export class FormFieldSpatialExtentComponent {

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

@@ -5,7 +5,7 @@
     (toggled)="onPlannedToggled()"
   ></gn-ui-check-toggle>
   <gn-ui-dropdown-selector
-    title="updateFrequency"
+    [title]="'editor.record.form.field.updateFrequency' | translate"
     [showTitle]="false"
     [choices]="choices"
     [selected]="selectedFrequency"

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

@@ -63,6 +63,8 @@ export const RECORD_KEYWORDS_FIELD: EditorField = {
   model: 'keywords',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.keywords')
 
 export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
   model: 'resourceCreated',
@@ -156,18 +158,24 @@ export const RECORD_SPATIAL_EXTENTS_FIELD: EditorField = {
   model: 'spatialExtents',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.spatialExtents')
 
 export const RECORD_ONLINE_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:!link',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.onlineResources')
 
 export const RECORD_ONLINE_LINK_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:link',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.onlineLinkResources')
 
 /************************************************************
  ***************          SECTIONS          *****************
@@ -273,7 +281,7 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
       ],
     },
     {
-      labelKey: marker('editor.record.form.page.ressources'),
+      labelKey: marker('editor.record.form.page.resources'),
       sections: [ASSOCIATED_RESOURCES_SECTION, ANNEXES_SECTION],
     },
     {

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

@@ -1,6 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
   <gn-ui-dropdown-selector
     *ngIf="dropdownChoices$ | async as choices"
+    [ngClass]="{ hidden: !displaySource }"
     [title]="'table.select.data' | translate"
     class="truncate p-1 -mx-1 self-end mb-1"
     extraBtnClass="!text-primary font-sans font-medium"

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

@@ -34,6 +34,7 @@ import { TranslateModule } from '@ngx-translate/core'
 })
 export class DataViewComponent {
   @Input() mode: 'table' | 'chart'
+  @Input() displaySource = true
   @Output() chartConfig$ = new BehaviorSubject<DatavizConfigurationModel>(null)
   compatibleDataLinks$ = combineLatest([
     this.mdViewFacade.dataLinks$,

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

@@ -1,4 +1,4 @@
-<div class="container-lg px-5 my-1 lg:mx-auto">
+<div class="px-5 my-1">
   <mat-tab-group
     [selectedIndex]="0"
     animationDuration="0ms"

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

@@ -1,6 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
   <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
+      [ngClass]="{ hidden: !displaySource }"
       class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"

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

@@ -85,6 +85,7 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set excludeWfs(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  @Input() displaySource = true
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts

@@ -2,6 +2,9 @@ import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 import { TranslateService } from '@ngx-translate/core'
 import Duration from 'duration-relativetimeformat'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+marker('record.was.created.time')
 
 @Component({
   selector: 'gn-ui-record-preview-feed',

package/src/libs/ui/search/src/lib/results-table/results-table.component.html

@@ -85,7 +85,7 @@
 
   <!-- OWNER COLUMN -->
   <gn-ui-interactive-table-column
-    [width]="'9rem'"
+    [width]="'12rem'"
     [sortable]="true"
     [activeSort]="isSortedBy('recordOwner')"
     (sortChange)="setSortBy('recordOwner', $event)"

package/src/libs/util/data-fetcher/src/lib/data-fetcher.ts

@@ -8,11 +8,16 @@ import { inferDatasetType } from './utils'
 import { BaseReader } from './readers/base'
 import { GmlReader } from './readers/gml'
 import { WfsVersion } from '@camptocamp/ogc-client'
+import { WfsReader } from './readers/wfs'
 
 export async function openDataset(
   url: string,
   typeHint?: SupportedType,
-  options?: { namespace: string; wfsVersion: WfsVersion }
+  options?: {
+    namespace?: string
+    wfsVersion?: WfsVersion
+    wfsFeatureType?: string
+  }
 ): Promise<BaseReader> {
   const fileType = await inferDatasetType(url, typeHint)
   let reader: BaseReader
@@ -33,6 +38,9 @@ export async function openDataset(
       case 'gml':
         reader = new GmlReader(url, options.namespace, options.wfsVersion)
         break
+      case 'wfs':
+        reader = await WfsReader.createReader(url, options.wfsFeatureType)
+        break
     }
     reader.load()
     return reader

package/src/libs/util/data-fetcher/src/lib/headers.ts

@@ -5,9 +5,10 @@ export function parseHeaders(httpHeaders: Headers): DatasetHeaders {
   if (httpHeaders.has('Content-Type')) {
     result.mimeType = httpHeaders.get('Content-Type').split(';')[0]
     const supported =
-      SupportedTypes.filter(
-        (type) => AllMimeTypes[type].indexOf(result.mimeType as never) > -1
-      )[0] || null
+      SupportedTypes.filter((type) => type !== 'wfs') // Ignore wfs type as it is not a file type
+        .filter(
+          (type) => AllMimeTypes[type].indexOf(result.mimeType as never) > -1
+        )[0] || null
     if (supported !== null) result.supportedType = supported
   }
   if (httpHeaders.has('Content-Length')) {

package/src/libs/util/data-fetcher/src/lib/model.ts

@@ -60,6 +60,7 @@ export const SupportedTypes = [
   'geojson',
   'excel',
   'gml',
+  'wfs',
 ] as const
 export type SupportedType = (typeof SupportedTypes)[number]
 

package/src/libs/util/data-fetcher/src/lib/readers/wfs.ts

@@ -0,0 +1,112 @@
+import { WfsEndpoint, WfsVersion } from '@camptocamp/ogc-client'
+import { DataItem, DatasetInfo, PropertyInfo } from '../model'
+import { fetchDataAsText } from '../utils'
+import { BaseReader } from './base'
+import { GmlReader, parseGml } from './gml'
+import { GeojsonReader, parseGeojson } from './geojson'
+
+export class WfsReader extends BaseReader {
+  endpoint: WfsEndpoint
+  featureTypeName: string
+  version: WfsVersion
+
+  constructor(url: string, wfsEndpoint: WfsEndpoint, featureTypeName: string) {
+    super(url)
+    this.endpoint = wfsEndpoint
+    this.featureTypeName = featureTypeName
+    this.version = this.endpoint.getVersion()
+  }
+
+  get properties(): Promise<PropertyInfo[]> {
+    return this.getData().then((result) => result.properties)
+  }
+
+  get info(): Promise<DatasetInfo> {
+    return this.endpoint.getFeatureTypeFull(this.featureTypeName).then(
+      (result) =>
+        ({
+          itemsCount: result.objectCount,
+        }) as DatasetInfo
+    )
+  }
+
+  static async createReader(wfsUrlEndpoint: string, featureTypeName?: string) {
+    const wfsEndpoint = await new WfsEndpoint(wfsUrlEndpoint).isReady()
+    const featureTypes = wfsEndpoint.getFeatureTypes()
+    const featureType = wfsEndpoint.getFeatureTypeSummary(
+      featureTypes.length === 1 && !featureTypeName
+        ? featureTypes[0].name
+        : featureTypeName
+    )
+    if (!featureType) {
+      throw new Error('wfs.featuretype.notfound')
+    }
+
+    if (wfsEndpoint.supportsStartIndex()) {
+      return new WfsReader(wfsUrlEndpoint, wfsEndpoint, featureType.name)
+    } else if (wfsEndpoint.supportsJson(featureType.name)) {
+      return new GeojsonReader(
+        wfsEndpoint.getFeatureUrl(featureType.name, {
+          asJson: true,
+          outputCrs: 'EPSG:4326',
+        })
+      )
+    } else {
+      if (
+        featureType.outputFormats.find((f) =>
+          f.toLowerCase().includes('gml')
+        ) &&
+        (featureType.defaultCrs === 'EPSG:4326' ||
+          featureType.otherCrs?.includes('EPSG:4326'))
+      ) {
+        return new GmlReader(
+          wfsEndpoint.getFeatureUrl(featureType.name, {
+            outputFormat: featureType.outputFormats.find((f) =>
+              f.toLowerCase().includes('gml')
+            ),
+            outputCrs: 'EPSG:4326',
+          }),
+          featureType.name,
+          wfsEndpoint.getVersion()
+        )
+      }
+      throw new Error('wfs.geojsongml.notsupported')
+    }
+  }
+
+  protected getData() {
+    const asJson = this.endpoint.supportsJson(this.featureTypeName)
+    let url = this.endpoint.getFeatureUrl(this.featureTypeName, {
+      ...(this.startIndex !== null && { startIndex: this.startIndex }),
+      ...(this.count !== null && { maxFeatures: this.count }),
+      asJson,
+      outputCrs: 'EPSG:4326',
+      // sortBy: this.sort // TODO: no sort in ogc-client?
+    })
+
+    if (Array.isArray(this.sort) && this.sort.length > 0) {
+      const finalUrl = new URL(url)
+      const sorts = this.sort
+        .map(
+          (fieldSort) => `${fieldSort[1]}+${fieldSort[0] === 'asc' ? 'A' : 'D'}`
+        )
+        .join(',')
+      // Direct update on string url to prevent encoding of +A and +D
+      url = `${url}${finalUrl.search ? '&' : ''}SORTBY=${sorts}`
+    }
+
+    return fetchDataAsText(url).then((text) =>
+      asJson
+        ? parseGeojson(text)
+        : parseGml(text, this.featureTypeName, this.version)
+    )
+  }
+
+  load() {
+    // Nothing to load for Wfs
+  }
+
+  async read(): Promise<DataItem[]> {
+    return (await this.getData()).items
+  }
+}