geonetwork-ui 2.1.0-initial → 2.2.0-dev.05d3ea32

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

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common'
 import {
   AvatarServiceInterface,
   GravatarService,
-} from '../../../../../libs/api/repository/src/lib/gn4'
+} from '../../../../../libs/api/repository/src'
 
 @NgModule({
   imports: [CommonModule],

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

@@ -5,3 +5,4 @@ export * from './lib/records/records.service'
 export * from './lib/organisations/organisations.component'
 export * from './lib/site-title/site-title.component'
 export * from './lib/source-label/source-label.component'
+export * from './lib/my-org/my-org.service'

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

@@ -20,7 +20,8 @@ import {
   OrganizationsFromGroupsService,
   OrganizationsFromMetadataService,
   OrganizationsStrategy,
-} from '../../../../../libs/api/repository/src/lib/gn4'
+} from '../../../../../libs/api/repository/src'
+import { PlatformServiceInterface } from '../../../../../libs/common/domain/src/lib/platform.service.interface'
 
 // expects the replacement key ${name}
 export const ORGANIZATION_URL_TOKEN = new InjectionToken<string>(
@@ -33,7 +34,7 @@ const organizationsServiceFactory = (
   searchApiService: SearchApiService,
   groupsApiService: GroupsApiService,
   translateService: TranslateService,
-  siteApiService: SiteApiService,
+  platformService: PlatformServiceInterface,
   langService: LangService
 ) =>
   strategy === 'groups'
@@ -47,7 +48,7 @@ const organizationsServiceFactory = (
         esService,
         searchApiService,
         groupsApiService,
-        siteApiService,
+        platformService,
         langService
       )
 
@@ -76,7 +77,7 @@ const organizationsServiceFactory = (
         SearchApiService,
         GroupsApiService,
         TranslateService,
-        SiteApiService,
+        PlatformServiceInterface,
         LangService,
       ],
     },

package/src/libs/feature/catalog/src/lib/my-org/my-org.service.ts

@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core'
+import { OrganizationsServiceInterface } from '../../../../../../libs/common/domain/src/lib/organizations.service.interface'
+import { BehaviorSubject, combineLatest, map, Observable } from 'rxjs'
+import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user/user.model'
+import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MyOrgService {
+  myOrgData$: Observable<{
+    orgName: string
+    logoUrl: string
+    recordCount: number
+    userCount: number
+    userList: UserModel[]
+  }>
+
+  private myOrgDataSubject = new BehaviorSubject<{
+    orgName: string
+    logoUrl: string
+    recordCount: number
+    userCount: number
+    userList: UserModel[]
+  }>({
+    orgName: '',
+    logoUrl: '',
+    recordCount: 0,
+    userCount: 0,
+    userList: [],
+  })
+
+  constructor(
+    private platformService: PlatformServiceInterface,
+    private orgService: OrganizationsServiceInterface
+  ) {
+    this.myOrgData$ = combineLatest([
+      this.platformService.getMe(),
+      this.platformService.getUsers(),
+      this.orgService.organisations$,
+    ]).pipe(
+      map(([user, allUsers, orgs]) => {
+        const orgName = user.organisation
+        const org = orgs.find((org) => org.name === orgName)
+        const logoUrl = org?.logoUrl?.toString()
+        const recordCount = org?.recordCount
+        const userList = allUsers.filter(
+          (user) => user.organisation === orgName
+        )
+        const userCount = userList.length
+        return {
+          orgName,
+          logoUrl,
+          recordCount,
+          userList,
+          userCount,
+        }
+      })
+    )
+  }
+}

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.html

@@ -1,6 +1,14 @@
-<gn-ui-organisations-sort
+<gn-ui-organisations-filter
   (sortBy)="setSortBy($event)"
-></gn-ui-organisations-sort>
+  (filterBy)="setFilterBy($event)"
+></gn-ui-organisations-filter>
+<div class="mt-6 rounded-lg text-gray-800 p-4 bg-slate-100">
+  <gn-ui-organisations-result
+    *ngIf="organisationsTotal$ | async"
+    [hits]="organisationResults"
+    [total]="organisationsTotal$ | async"
+  ></gn-ui-organisations-result>
+</div>
 <div
   class="grid grid-cols-1 mt-6 gap-x-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3"
 >

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.ts

@@ -7,12 +7,13 @@ import {
   Optional,
   Output,
 } from '@angular/core'
-import { Organization } from '../../../../../../libs/common/domain/src/lib/record'
+import { Organization } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs'
 import { map, startWith, tap } from 'rxjs/operators'
 import { ORGANIZATION_URL_TOKEN } from '../feature-catalog.module'
 import { OrganizationsServiceInterface } from '../../../../../../libs/common/domain/src/lib/organizations.service.interface'
-import { SortByField } from '../../../../../../libs/common/domain/src/lib/search'
+import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
+import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-organisations',
@@ -33,27 +34,34 @@ export class OrganisationsComponent {
 
   totalPages: number
   currentPage$ = new BehaviorSubject(1)
+  organisationResults: number
   sortBy$: BehaviorSubject<SortByField> = new BehaviorSubject(['asc', 'name'])
-
-  organisationsSorted$: Observable<Organization[]> = combineLatest([
+  filterBy$: BehaviorSubject<string> = new BehaviorSubject('')
+  organisationsTotal$ = this.organisationsService.organisationsCount$
+  organisationsFilteredAndSorted$: Observable<Organization[]> = combineLatest([
     this.organisationsService.organisations$.pipe(
       startWith(Array(this.itemsOnPage).fill({}))
     ),
     this.sortBy$,
+    this.filterBy$,
   ]).pipe(
-    map(([organisations, sortBy]) =>
-      this.sortOrganisations(organisations, sortBy)
-    )
+    map(([organisations, sortBy, filterBy]) => {
+      const filteredOrganisations = this.filterOrganisations(
+        organisations,
+        filterBy
+      )
+      return this.sortOrganisations(filteredOrganisations, sortBy)
+    })
   )
 
   organisations$: Observable<Organization[]> = combineLatest([
-    this.organisationsSorted$,
+    this.organisationsFilteredAndSorted$,
     this.currentPage$,
   ]).pipe(
-    tap(
-      ([organisations]) =>
-        (this.totalPages = Math.ceil(organisations.length / this.itemsOnPage))
-    ),
+    tap(([organisations]) => {
+      this.organisationResults = organisations.length
+      this.totalPages = Math.ceil(organisations.length / this.itemsOnPage)
+    }),
     map(([organisations, page]) =>
       organisations.slice(
         (page - 1) * this.itemsOnPage,
@@ -66,10 +74,21 @@ export class OrganisationsComponent {
     this.currentPage$.next(page)
   }
 
+  protected setFilterBy(value: string): void {
+    this.currentPage$.next(1)
+    this.filterBy$.next(value)
+  }
+
   protected setSortBy(value: SortByField): void {
     this.sortBy$.next(value)
   }
 
+  private filterOrganisations(organisations: Organization[], filterBy: string) {
+    if (!filterBy) return organisations
+    const filter = createFuzzyFilter(filterBy)
+    return organisations.filter((org) => filter(org.name))
+  }
+
   private sortOrganisations(
     organisations: Organization[],
     sortBy: SortByField

package/src/libs/feature/catalog/src/lib/records/records.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { Observable, of } from 'rxjs'
 import { catchError, shareReplay } from 'rxjs/operators'
-import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/records-repository.interface'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable({
   providedIn: 'root',

package/src/libs/feature/catalog/src/lib/sources/sources.service.ts

@@ -9,9 +9,9 @@ import { CatalogSource } from './sources.model'
   providedIn: 'root',
 })
 export class SourcesService {
-  sources$: Observable<CatalogSource[]> = this.sourcesApiService
-    .getSources1()
-    .pipe(shareReplay())
+  sources$: Observable<CatalogSource[]> = (
+    this.sourcesApiService.getSubPortals1() as Observable<CatalogSource[]>
+  ).pipe(shareReplay())
 
   constructor(
     private sourcesApiService: SourcesApiService,

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

@@ -24,8 +24,8 @@ import {
   tap,
 } from 'rxjs/operators'
 import { DataService } from '../service/data.service'
-import { InputChartType } from '../../../../../../libs/common/domain/src/lib/dataviz-configuration.model'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { InputChartType } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateService } from '@ngx-translate/core'
 
 marker('chart.type.bar')

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

@@ -44,8 +44,8 @@ export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private map: Map
   private view: View
-  private vectorLayer: VectorLayer<VectorSource<Geometry>>
-  private vectorSource: VectorSource<Geometry>
+  private vectorLayer: VectorLayer<VectorSource<Feature<Geometry>>>
+  private vectorSource: VectorSource<Feature<Geometry>>
   private features: Feature<Geometry>[]
 
   tableData: TableItemModel[]
@@ -76,7 +76,7 @@ export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
     const map = (this.map = this.manager.map)
     this.view = map.getView()
     this.vectorLayer = this.manager.map.getLayers().item(1) as VectorLayer<
-      VectorSource<Geometry>
+      VectorSource<Feature<Geometry>>
     >
     this.vectorLayer.setStyle(this.styleFn.bind(this))
     this.vectorSource = this.vectorLayer.getSource()

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

@@ -20,7 +20,7 @@ import { catchError, map, switchMap, tap } from 'rxjs/operators'
 import {
   DatasetDistribution,
   DatasetServiceDistribution,
-} from '../../../../../../libs/common/domain/src/lib/record'
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('wfs.unreachable.cors')
 marker('wfs.unreachable.http')

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

@@ -11,7 +11,7 @@ import {
 import { DataItem, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
 import { TableItemModel } from '../../../../../../libs/ui/dataviz/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateService } from '@ngx-translate/core'
 
 @Component({

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

@@ -1,5 +1,7 @@
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Input,
   OnDestroy,
@@ -66,6 +68,7 @@ export const MY_FORMATS = {
     },
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WizardFieldComponent implements AfterViewInit, OnDestroy {
   @Input() wizardFieldConfig: WizardFieldModel
@@ -108,10 +111,14 @@ export class WizardFieldComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  constructor(private wizardService: WizardService) {}
+  constructor(
+    private wizardService: WizardService,
+    private cdr: ChangeDetectorRef
+  ) {}
 
   ngAfterViewInit() {
     this.initializeListeners()
+    this.cdr.detectChanges()
   }
 
   ngOnDestroy() {
@@ -196,6 +203,17 @@ export class WizardFieldComponent implements AfterViewInit, OnDestroy {
   }
 
   private initializeDropdownListener() {
+    if (
+      this.wizardService.getWizardFieldData(this.wizardFieldConfig.id) ===
+        undefined &&
+      !!this.dropdown.selected
+    ) {
+      this.wizardService.setWizardFieldData(
+        this.wizardFieldConfig.id,
+        this.dropdown.selected
+      )
+    }
+
     this.subs.add(
       this.dropdown.selectValue.subscribe((value) => {
         this.wizardService.onWizardWizardFieldDataChanged(

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

@@ -5,7 +5,7 @@ import { BehaviorSubject, Observable } from 'rxjs'
 import { finalize, map, switchMap, take, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { FormFieldConfig } from '../../../../../../libs/ui/inputs/src'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export interface FormField {
   config: FormFieldConfig

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

@@ -16,7 +16,7 @@ import {
 import {
   DatasetDistribution,
   DatasetRecord,
-} from '../../../../../../../libs/common/domain/src/lib/record'
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-add-layer-record-preview',
@@ -59,12 +59,7 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
         name: link.name,
       })
     } else if (link.accessServiceProtocol === 'wmts') {
-      return this.mapUtils.getWmtsOptionsFromCapabilities(link).pipe(
-        map((options) => ({
-          type: MapContextLayerTypeEnum.WMTS,
-          options: options,
-        }))
-      )
+      return this.mapUtils.getWmtsLayerFromCapabilities(link)
     }
     return throwError(() => 'protocol not supported')
   }

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

@@ -0,0 +1,37 @@
+<div class="flex items-center mb-5">
+  <gn-ui-text-input
+    [(value)]="wfsUrl"
+    (valueChange)="urlChange.next($event)"
+    [hint]="'map.wfs.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.title }}
+      </p>
+      <gn-ui-button
+        *ngIf="layer.name"
+        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-wfs/add-layer-from-wfs.component.ts

@@ -0,0 +1,64 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
+import { WfsEndpoint, WfsFeatureTypeBrief } from '@camptocamp/ogc-client'
+import { Subject } from 'rxjs'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+} from '../map-context/map-context.model'
+import { MapFacade } from '../+state/map.facade'
+import { debounceTime } from 'rxjs/operators'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-wfs',
+  templateUrl: './add-layer-from-wfs.component.html',
+  styleUrls: ['./add-layer-from-wfs.component.css'],
+})
+export class AddLayerFromWfsComponent implements OnInit {
+  wfsUrl = ''
+  loading = false
+  layers: WfsFeatureTypeBrief[] = []
+  wfsEndpoint: WfsEndpoint | null = null
+  urlChange = new Subject<string>()
+  errorMessage: string | null = null
+
+  constructor(
+    private mapFacade: MapFacade,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    this.urlChange.pipe(debounceTime(700)).subscribe(() => this.loadLayers())
+  }
+
+  async loadLayers() {
+    this.errorMessage = null
+    try {
+      this.loading = true
+
+      if (this.wfsUrl.trim() === '') {
+        this.layers = []
+        return
+      }
+
+      this.wfsEndpoint = await new WfsEndpoint(this.wfsUrl).isReady()
+      this.layers = this.wfsEndpoint.getFeatureTypes()
+      console.log(this.layers)
+    } catch (error) {
+      const err = error as Error
+      this.layers = []
+      this.errorMessage = 'Error loading layers: ' + err.message
+    } finally {
+      this.loading = false
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
+  addLayer(layer: WfsFeatureTypeBrief) {
+    const layerToAdd: MapContextLayerModel = {
+      name: layer.name,
+      url: this.wfsUrl.toString(),
+      type: MapContextLayerTypeEnum.WFS,
+    }
+    this.mapFacade.addLayer({ ...layerToAdd, title: layer.title })
+  }
+}

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

@@ -0,0 +1,55 @@
+<div class="flex items-center mb-5">
+  <gn-ui-text-input
+    [(value)]="wmsUrl"
+    (valueChange)="urlChange.next($event)"
+    [hint]="'map.wms.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"
+    [ngTemplateOutlet]="layerTreeItem"
+    [ngTemplateOutletContext]="{
+      layer: layer
+    }"
+  ></ng-container>
+</div>
+
+<ng-template #layerTreeItem let-layer="layer">
+  <div class="flex items-center justify-between layer-tree-item my-2">
+    <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
+      {{ layer.title }}
+    </p>
+    <gn-ui-button
+      *ngIf="layer.name"
+      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>
+  <div *ngIf="layer.children?.length > 0" class="ml-4">
+    <ng-container
+      *ngFor="let child of layer.children"
+      [ngTemplateOutlet]="layerTreeItem"
+      [ngTemplateOutletContext]="{
+        layer: child
+      }"
+    >
+    </ng-container>
+  </div>
+</ng-template>

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

@@ -0,0 +1,63 @@
+import { Component, ChangeDetectorRef, OnInit } from '@angular/core'
+import { WmsEndpoint, WmsLayerSummary } from '@camptocamp/ogc-client'
+import { MapFacade } from '../+state/map.facade'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+} from '../map-context/map-context.model'
+import { Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-wms',
+  templateUrl: './add-layer-from-wms.component.html',
+  styleUrls: ['./add-layer-from-wms.component.css'],
+})
+export class AddLayerFromWmsComponent implements OnInit {
+  wmsUrl = ''
+  loading = false
+  layers: WmsLayerSummary[] = []
+  wmsEndpoint: WmsEndpoint | null = null
+  urlChange = new Subject<string>()
+  errorMessage: string | null = null
+
+  constructor(
+    private mapFacade: MapFacade,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    this.urlChange.pipe(debounceTime(700)).subscribe(() => this.loadLayers())
+  }
+
+  async loadLayers() {
+    this.errorMessage = null
+    try {
+      this.loading = true
+
+      if (this.wmsUrl.trim() === '') {
+        this.layers = []
+        return
+      }
+
+      this.wmsEndpoint = await new WmsEndpoint(this.wmsUrl).isReady()
+      this.layers = this.wmsEndpoint.getLayers()
+    } catch (error) {
+      const err = error as Error
+      this.layers = []
+      this.errorMessage = 'Error loading layers: ' + err.message
+    } finally {
+      this.loading = false
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
+  addLayer(layer: WmsLayerSummary) {
+    const layerToAdd: MapContextLayerModel = {
+      name: layer.name,
+      url: this.wmsUrl.toString(),
+      type: MapContextLayerTypeEnum.WMS,
+    }
+    this.mapFacade.addLayer({ ...layerToAdd, title: layer.title })
+  }
+}

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

@@ -20,6 +20,8 @@ import { MapContainerComponent } from './map-container/map-container.component'
 import { AddLayerRecordPreviewComponent } from './add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { AddLayerFromWmsComponent } from './add-layer-from-wms/add-layer-from-wms.component'
+import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wfs.component'
 
 @NgModule({
   declarations: [
@@ -29,6 +31,8 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     AddLayerFromCatalogComponent,
     MapContainerComponent,
     AddLayerRecordPreviewComponent,
+    AddLayerFromWmsComponent,
+    AddLayerFromWfsComponent,
   ],
   exports: [
     MapContextComponent,

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

@@ -31,10 +31,14 @@
         </div>
       </mat-tab>
       <mat-tab [label]="'map.add.layer.wms' | translate" bodyClass="h-full">
-        <div class="p-3 h-full">Add from WMS</div>
+        <div class="p-3">
+          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>
+        </div>
       </mat-tab>
       <mat-tab [label]="'map.add.layer.wfs' | translate" bodyClass="h-full">
-        <div class="p-3 h-full">Add from WFS</div>
+        <div class="p-3">
+          <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>
+        </div>
       </mat-tab>
       <mat-tab [label]="'map.add.layer.file' | translate" bodyClass="h-full">
         <div class="p-3 h-full">Add from file</div>

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

@@ -25,6 +25,7 @@ export interface MapContextLayerWmsModel {
 export interface MapContextLayerWmtsModel {
   type: 'wmts'
   options: Options
+  extent?: Extent
 }
 
 interface MapContextLayerWfsModel {