geonetwork-ui 2.2.0-dev.c15a456d → 2.2.0-dev.cbcafed5

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

@@ -13,6 +13,7 @@ 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/model/search'
+import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-organisations',
@@ -84,23 +85,8 @@ export class OrganisationsComponent {
 
   private filterOrganisations(organisations: Organization[], filterBy: string) {
     if (!filterBy) return organisations
-    const filterRegex = new RegExp(
-      this.normalizeString(filterBy) //ignore accents and case
-        .replace(/[^a-z0-9\s]/g, ' ') //ignore special characters (also without spaces like l')
-        .replace(/\s(?=.)/g, '.*') //replace whitespaces by "AND" separator
-        .replace(/\s/g, ''), //remove potential whitespaces left
-      'i'
-    )
-    return [...organisations].filter((org) => {
-      return this.normalizeString(org.name).match(filterRegex)
-    })
-  }
-
-  private normalizeString(str: string) {
-    return str
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .toLowerCase()
+    const filter = createFuzzyFilter(filterBy)
+    return organisations.filter((org) => filter(org.name))
   }
 
   private sortOrganisations(

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

@@ -9,8 +9,8 @@ import {
   SupportedTypes,
 } from '../../../../../../libs/util/data-fetcher/src'
 import {
-  extensionToFormat,
   getFileFormat,
+  getFileFormatFromServiceOutput,
   getMimeTypeForFormat,
   ProxyService,
 } from '../../../../../../libs/util/shared/src'
@@ -45,7 +45,7 @@ interface WfsDownloadUrls {
 export class DataService {
   constructor(private proxy: ProxyService) {}
 
-  private getDownloadUrlsFromWfs(
+  getDownloadUrlsFromWfs(
     wfsUrl: string,
     featureTypeName: string
   ): Observable<WfsDownloadUrls> {
@@ -120,7 +120,7 @@ export class DataService {
     )
   }
 
-  private getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
+  getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
     return this.proxy.getProxiedUrl(
       `${apiUrl}/query?f=${format}&where=1=1&outFields=*`
     )
@@ -138,8 +138,11 @@ export class DataService {
       map((urls) =>
         Object.keys(urls).map((format) => ({
           ...wfsLink,
+          type: 'download',
           url: new URL(urls[format]),
-          mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+          mimeType: getMimeTypeForFormat(
+            getFileFormatFromServiceOutput(format)
+          ),
         }))
       )
     )
@@ -153,7 +156,7 @@ export class DataService {
       url: new URL(
         this.getDownloadUrlFromEsriRest(esriRestLink.url.toString(), format)
       ),
-      mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+      mimeType: getMimeTypeForFormat(getFileFormatFromServiceOutput(format)),
     }))
   }
 

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

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorService, FormField } from '../services/editor.service'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -8,7 +9,7 @@ import { EditorService, FormField } from '../services/editor.service'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, UiInputsModule],
 })
 export class RecordFormComponent {
   constructor(public editorService: EditorService) {}

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

@@ -17,3 +17,4 @@ export * from './lib/layers-panel/layers-panel.component'
 export * from './lib/add-layer-from-catalog/add-layer-from-catalog.component'
 export * from './lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
 export * from './lib/map-container/map-container.component'
+export * from './lib/geocoding/geocoding.component'

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

@@ -0,0 +1,21 @@
+<div class="flex flex-col gap-2 my-2">
+  <div class="flex items-center gap-4">
+    <div class="flex-grow rounded-md border-2 border-gray-200">
+      <gn-ui-drag-and-drop-file-input
+        (fileChange)="handleFileChange($event)"
+        [accept]="acceptedMimeType.join(',')"
+        [placeholder]="'map.addFromFile.placeholder' | translate"
+        class="placeholder-grey"
+      ></gn-ui-drag-and-drop-file-input>
+    </div>
+  </div>
+  <p class="text-sm text-gray-600" translate>map.help.addFromFile</p>
+</div>
+
+<div *ngIf="errorMessage" class="text-red-500 mt-2">
+  {{ errorMessage }}
+</div>
+
+<div *ngIf="successMessage" class="text-green-500 mt-2">
+  {{ successMessage }}
+</div>

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

@@ -0,0 +1,107 @@
+import { ChangeDetectorRef, Component } from '@angular/core'
+import { MapContextLayerModel } from '../map-context/map-context.model'
+import { MapFacade } from '../+state/map.facade'
+
+const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-file',
+  templateUrl: './add-layer-from-file.component.html',
+  styleUrls: ['./add-layer-from-file.component.css'],
+})
+export class AddLayerFromFileComponent {
+  errorMessage: string | null = null
+  successMessage: string | null = null
+  loading = false
+  readonly acceptedMimeType = ['.geojson']
+  readonly maxFileSize = 5000000
+
+  constructor(
+    private mapFacade: MapFacade,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  async handleFileChange(file: File) {
+    if (!file) {
+      this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error')
+      return
+    }
+    if (file.size > this.maxFileSize) {
+      this.displayMessage('File size exceeds the limit of 5MB', 'error')
+      return
+    }
+    await this.addLayer(file)
+  }
+
+  private async addLayer(file: File) {
+    this.errorMessage = null
+    this.loading = true
+    try {
+      if (!this.isFileFormatValid(file)) {
+        this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error')
+        return
+      }
+
+      const fileExtension = this.getFileExtension(file)
+      switch (fileExtension) {
+        case 'geojson':
+          await this.addGeoJsonLayer(file)
+          break
+        default:
+          this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error')
+          break
+      }
+    } catch (error) {
+      const err = error as Error
+      this.displayMessage('Error loading file: ' + err.message, 'error')
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private addGeoJsonLayer(file: File) {
+    return new Promise<void>((resolve, reject) => {
+      try {
+        const reader = new FileReader()
+        reader.onload = () => {
+          const result = reader.result as string
+          const title = file.name.split('.').slice(0, -1).join('.')
+          const layerToAdd: MapContextLayerModel = {
+            type: 'geojson',
+            data: result,
+          }
+          this.mapFacade.addLayer({ ...layerToAdd, title: title })
+          this.displayMessage('File successfully added to map', 'success')
+          resolve()
+        }
+        reader.onerror = reject
+        reader.readAsText(file)
+      } catch (error) {
+        reject(error)
+      }
+    })
+  }
+
+  private isFileFormatValid(file: File): boolean {
+    const fileExtension = this.getFileExtension(file)
+    return this.acceptedMimeType.includes(`.${fileExtension}`)
+  }
+
+  private getFileExtension(file: File): string | undefined {
+    return file.name.split('.').pop()
+  }
+
+  private displayMessage(message: string, type: 'success' | 'error') {
+    if (type === 'success') {
+      this.successMessage = message
+    } else if (type === 'error') {
+      this.errorMessage = message
+    }
+
+    setTimeout(() => {
+      this.successMessage = null
+      this.errorMessage = null
+      this.changeDetectorRef.detectChanges()
+    }, 5000)
+  }
+}

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/constant/index.ts

@@ -1 +1,2 @@
 export * from './map-options'
+export * from './projections'

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

@@ -20,6 +20,11 @@ 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 { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-file.component'
+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'
 
 @NgModule({
   declarations: [
@@ -29,6 +34,10 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     AddLayerFromCatalogComponent,
     MapContainerComponent,
     AddLayerRecordPreviewComponent,
+    AddLayerFromWmsComponent,
+    AddLayerFromFileComponent,
+    AddLayerFromWfsComponent,
+    GeocodingComponent,
   ],
   exports: [
     MapContextComponent,
@@ -36,6 +45,7 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     LayersPanelComponent,
     AddLayerFromCatalogComponent,
     MapContainerComponent,
+    GeocodingComponent,
   ],
   imports: [
     CommonModule,
@@ -56,6 +66,10 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
       useValue: defaultMapOptions,
     },
     MapFacade,
+    {
+      provide: GEOCODING_PROVIDER,
+      useValue: ['geonames', { maxRows: 5 }] as GeocodingProvider,
+    },
   ],
 })
 export class FeatureMapModule {}

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.html

@@ -0,0 +1,39 @@
+<gn-ui-search-input
+  [(value)]="searchText"
+  (valueChange)="onSearchChange($event)"
+  (keyup.enter)="onEnterPress()"
+  [placeholder]="'map.geocoding.placeholder' | translate"
+>
+</gn-ui-search-input>
+<ul
+  class="bg-gray-50 border border-gray-200 w-full mt-2 shadow-sm rounded-lg"
+  *ngIf="results && results.length"
+>
+  <li
+    *ngFor="let result of results"
+    (click)="zoomToLocation(result)"
+    class="flex items-center pl-8 pr-4 py-2 border-b border-gray-200 relative cursor-pointer hover:bg-blue-100 hover:text-gray-800 transition duration-300 ease-in-out"
+  >
+    <svg
+      class="stroke-current text-blue-500 absolute w-5 h-5 left-3 top-3"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+    <span class="font-sans font-semibold ml-4">{{ result.label }}</span>
+  </li>
+</ul>

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.ts

@@ -0,0 +1,99 @@
+import { Component, OnDestroy } from '@angular/core'
+import { catchError, from, Subject, takeUntil } from 'rxjs'
+import { debounceTime, switchMap } from 'rxjs/operators'
+import { MapManagerService } from '../manager/map-manager.service'
+import { fromLonLat } from 'ol/proj'
+import { Polygon } from 'ol/geom'
+import { GeocodingService } from '../geocoding.service'
+
+@Component({
+  selector: 'gn-ui-geocoding',
+  templateUrl: './geocoding.component.html',
+  styleUrls: ['./geocoding.component.css'],
+})
+export class GeocodingComponent implements OnDestroy {
+  searchText = ''
+  results: any[] = []
+  searchTextChanged = new Subject<string>()
+  destroy$ = new Subject<void>()
+  errorMessage: string | null = null
+
+  constructor(
+    private mapManager: MapManagerService,
+    private geocodingService: GeocodingService
+  ) {
+    this.searchTextChanged
+      .pipe(
+        debounceTime(300),
+        switchMap((searchText) => {
+          return from(this.geocodingService.query(searchText)).pipe(
+            catchError((error) => {
+              this.errorMessage =
+                'An error occurred while searching. Please try again.'
+              console.error(error)
+              return []
+            })
+          )
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((results) => {
+        this.results = results
+      })
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
+
+  onSearchChange(searchText: string) {
+    if (!searchText) {
+      this.clearSearch()
+      return
+    } else {
+      this.searchTextChanged.next(searchText)
+    }
+  }
+
+  clearSearch() {
+    this.searchText = ''
+    this.results = []
+    this.errorMessage = null
+  }
+
+  zoomToLocation(result: any) {
+    const map = this.mapManager.map
+    const view = map.getView()
+    const geometry = result.geom
+
+    if (geometry.type === 'Point') {
+      this.zoomToPoint(geometry.coordinates, view)
+    } else if (geometry.type === 'Polygon') {
+      this.zoomToPolygon(geometry.coordinates, view)
+    } else {
+      console.error(`Unsupported geometry type: ${geometry.type}`)
+    }
+  }
+
+  zoomToPoint(pointCoords: [number, number], view: any) {
+    const transformedCoords = fromLonLat(pointCoords)
+    view.setCenter(transformedCoords)
+    view.setZoom(12)
+  }
+
+  zoomToPolygon(polygonCoords: [[number, number][]], view: any) {
+    const transformedCoords = polygonCoords[0].map((coord) => fromLonLat(coord))
+    const polygon = new Polygon([transformedCoords])
+    view.fit(polygon, {
+      duration: 100,
+      maxZoom: 12,
+    })
+  }
+
+  onEnterPress() {
+    if (this.results && this.results.length > 0) {
+      this.zoomToLocation(this.results[0])
+    }
+  }
+}