geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.4e8752d34

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

@@ -1,318 +0,0 @@
-import { Injectable } from '@angular/core'
-import { MapStyleService } from '../style/map-style.service'
-import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextLayerXyzModel,
-  MapContextModel,
-  MapContextViewModel,
-} from './map-context.model'
-import Map from 'ol/Map'
-import View from 'ol/View'
-import Layer from 'ol/layer/Base'
-import VectorLayer from 'ol/layer/Vector'
-import TileWMS from 'ol/source/TileWMS'
-import TileLayer from 'ol/layer/Tile'
-import XYZ from 'ol/source/XYZ'
-import VectorSource from 'ol/source/Vector'
-import GeoJSON from 'ol/format/GeoJSON'
-import { MapUtilsService } from '../utils/map-utils.service'
-import { bbox as bboxStrategy } from 'ol/loadingstrategy'
-import { LayerConfig, MapConfig } from '../../../../../../libs/util/app-config/src'
-import { FeatureCollection } from 'geojson'
-import { fromLonLat } from 'ol/proj'
-import WMTS from 'ol/source/WMTS'
-import { Geometry } from 'ol/geom'
-import Feature from 'ol/Feature'
-import { WfsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
-import OGCVectorTile from 'ol/source/OGCVectorTile.js'
-import { MVT } from 'ol/format'
-import VectorTileLayer from 'ol/layer/VectorTile'
-import OGCMapTile from 'ol/source/OGCMapTile.js'
-import ImageLayer from 'ol/layer/Image'
-import ImageWMS from 'ol/source/ImageWMS'
-
-export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = {
-  type: MapContextLayerTypeEnum.XYZ,
-  urls: [
-    `https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-    `https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-    `https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-  ],
-  attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
-}
-
-export const DEFAULT_VIEW: MapContextViewModel = {
-  center: [0, 15],
-  zoom: 2,
-}
-
-export const WFS_MAX_FEATURES = 10000
-
-@Injectable({
-  providedIn: 'root',
-})
-export class MapContextService {
-  constructor(
-    private mapUtils: MapUtilsService,
-    private styleService: MapStyleService
-  ) {}
-
-  resetMapFromContext(
-    map: Map,
-    mapContext: MapContextModel,
-    mapConfig?: MapConfig
-  ): Map {
-    if (mapConfig) {
-      mapContext = this.mergeMapConfigWithContext(mapContext, mapConfig)
-    } else {
-      mapContext.layers = this.addDefaultBaselayerContext(mapContext.layers)
-    }
-    if (
-      !mapContext.view?.extent &&
-      (!mapContext.view?.center || !mapContext.view?.zoom)
-    ) {
-      mapContext.view = this.getFallbackView(mapConfig)
-    }
-    map.setView(this.createView(mapContext.view, map))
-    map.getLayers().clear()
-    mapContext.layers.forEach((layer) =>
-      map.addLayer(this.createLayer(layer, mapConfig))
-    )
-    return map
-  }
-
-  createLayer(layerModel: MapContextLayerModel, mapConfig?: MapConfig): Layer {
-    const { type } = layerModel
-    const style = this.styleService.styles.default
-    switch (type) {
-      case MapContextLayerTypeEnum.OGCAPI:
-        if (layerModel.layerType === 'vectorTiles') {
-          return new VectorTileLayer({
-            source: new OGCVectorTile({
-              url: layerModel.url,
-              format: new MVT(),
-              attributions: layerModel.attributions,
-            }),
-          })
-        } else if (layerModel.layerType === 'mapTiles') {
-          return new TileLayer({
-            source: new OGCMapTile({
-              url: layerModel.url,
-              attributions: layerModel.attributions,
-            }),
-          })
-        } else {
-          return new VectorLayer({
-            source: new VectorSource({
-              format: new GeoJSON(),
-              url: layerModel.url,
-              attributions: layerModel.attributions,
-            }),
-            style,
-          })
-        }
-      case MapContextLayerTypeEnum.XYZ:
-        return new TileLayer({
-          source: new XYZ({
-            url: 'url' in layerModel ? layerModel.url : undefined,
-            urls: 'urls' in layerModel ? layerModel.urls : undefined,
-            attributions: layerModel.attributions,
-          }),
-        })
-      case MapContextLayerTypeEnum.WMS:
-        if (mapConfig?.DO_NOT_TILE_WMS) {
-          return new ImageLayer({
-            source: new ImageWMS({
-              url: layerModel.url,
-              params: { LAYERS: layerModel.name },
-              attributions: layerModel.attributions,
-            }),
-          })
-        } else {
-          return new TileLayer({
-            source: new TileWMS({
-              url: layerModel.url,
-              params: { LAYERS: layerModel.name, TILED: true },
-              attributions: layerModel.attributions,
-            }),
-          })
-        }
-
-      case MapContextLayerTypeEnum.WMTS: {
-        // TODO: isolate this in utils service
-        const olLayer = new TileLayer({})
-        const endpoint = new WmtsEndpoint(layerModel.url)
-        endpoint.isReady().then(async (endpoint) => {
-          const layerName = endpoint.getSingleLayerName() ?? layerModel.name
-          const layer = endpoint.getLayerByName(layerName)
-          const matrixSet = layer.matrixSets[0]
-          const tileGrid = await endpoint.getOpenLayersTileGrid(layer.name)
-          const resourceUrl = layer.resourceLinks[0]
-          const dimensions = endpoint.getDefaultDimensions(layer.name)
-          olLayer.setSource(
-            new WMTS({
-              layer: layer.name,
-              style: layer.defaultStyle,
-              matrixSet: matrixSet.identifier,
-              format: resourceUrl.format,
-              url: resourceUrl.url,
-              requestEncoding: resourceUrl.encoding,
-              tileGrid,
-              projection: matrixSet.crs,
-              dimensions,
-              attributions: layerModel.attributions,
-            })
-          )
-        })
-        return olLayer
-      }
-      case MapContextLayerTypeEnum.WFS: {
-        const olLayer = new VectorLayer({
-          style,
-        })
-        new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
-          const featureType =
-            endpoint.getSingleFeatureTypeName() ?? layerModel.name
-          olLayer.setSource(
-            new VectorSource({
-              format: new GeoJSON(),
-              url: function (extent: [number, number, number, number]) {
-                return endpoint.getFeatureUrl(featureType, {
-                  maxFeatures: WFS_MAX_FEATURES,
-                  asJson: true,
-                  outputCrs: 'EPSG:3857',
-                  extent,
-                  extentCrs: 'EPSG:3857',
-                })
-              },
-              strategy: bboxStrategy,
-              attributions: layerModel.attributions,
-            })
-          )
-        })
-        return olLayer
-      }
-      case MapContextLayerTypeEnum.GEOJSON: {
-        if ('url' in layerModel) {
-          return new VectorLayer({
-            source: new VectorSource({
-              format: new GeoJSON(),
-              url: layerModel.url,
-            }),
-            style,
-          })
-        } else {
-          let geojson = layerModel.data
-          if (typeof geojson === 'string') {
-            try {
-              geojson = JSON.parse(geojson)
-            } catch (e) {
-              console.warn('A layer could not be created', layerModel, e)
-              geojson = { type: 'FeatureCollection', features: [] }
-            }
-          }
-          const features = this.mapUtils.readFeatureCollection(
-            geojson as FeatureCollection
-          ) as Feature<Geometry>[]
-          return new VectorLayer({
-            source: new VectorSource({
-              features,
-            }),
-            style,
-          })
-        }
-      }
-      default:
-        throw new Error(`Unrecognized layer type: ${layerModel.type}`)
-    }
-  }
-
-  createView(viewModel: MapContextViewModel, map?: Map): View {
-    const { center: centerInViewProj, zoom, maxZoom, maxExtent } = viewModel
-    const center = centerInViewProj
-      ? fromLonLat(centerInViewProj, 'EPSG:3857')
-      : [0, 0]
-    const view = new View({
-      center,
-      zoom,
-      maxZoom,
-      extent: maxExtent,
-      multiWorld: false,
-      constrainResolution: true,
-    })
-    if (viewModel.extent && map) {
-      view.fit(viewModel.extent, {
-        size: map.getSize(),
-      })
-    }
-    return view
-  }
-
-  addDefaultBaselayerContext(
-    layers: MapContextLayerModel[]
-  ): MapContextLayerModel[] {
-    return layers.includes(DEFAULT_BASELAYER_CONTEXT)
-      ? layers
-      : [DEFAULT_BASELAYER_CONTEXT, ...layers]
-  }
-
-  mergeMapConfigWithContext(
-    mapContext: MapContextModel,
-    mapConfig: MapConfig
-  ): MapContextModel {
-    return {
-      ...mapContext,
-      view: {
-        ...mapContext.view,
-        ...(mapConfig.MAX_ZOOM && {
-          maxZoom: mapConfig.MAX_ZOOM,
-        }),
-        ...(mapConfig.MAX_EXTENT && {
-          maxExtent: mapConfig.MAX_EXTENT,
-        }),
-      },
-      layers: [
-        ...(mapConfig.DO_NOT_USE_DEFAULT_BASEMAP
-          ? []
-          : [DEFAULT_BASELAYER_CONTEXT]),
-        ...mapConfig.MAP_LAYERS.map(this.getContextLayerFromConfig),
-        ...mapContext.layers,
-      ],
-    }
-  }
-
-  getFallbackView(mapConfig: MapConfig): MapContextViewModel {
-    return mapConfig?.MAX_EXTENT
-      ? { extent: mapConfig.MAX_EXTENT }
-      : DEFAULT_VIEW
-  }
-
-  getContextLayerFromConfig(config: LayerConfig): MapContextLayerModel {
-    switch (config.TYPE) {
-      case 'wms':
-        return {
-          type: 'wms',
-          url: config.URL,
-          name: config.NAME,
-        }
-      case 'wfs':
-        return {
-          type: 'wfs',
-          url: config.URL,
-          name: config.NAME,
-        }
-      case 'xyz':
-        return {
-          type: config.TYPE,
-          url: config.URL,
-          name: config.NAME,
-        }
-      case 'geojson':
-        return {
-          type: config.TYPE,
-          ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
-        }
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { CatalogTitleComponent } from './catalog-title/catalog-title.component'
-import { OrganisationPreviewComponent } from './organisation-preview/organisation-preview.component'
-import { TranslateModule } from '@ngx-translate/core'
-import { MatIconModule } from '@angular/material/icon'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { OrganisationsFilterComponent } from './organisations-filter/organisations-filter.component'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
-import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
-import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
-import { RouterLink } from '@angular/router'
-
-@NgModule({
-  declarations: [
-    CatalogTitleComponent,
-    OrganisationPreviewComponent,
-    OrganisationsFilterComponent,
-    LanguageSwitcherComponent,
-    OrganisationsResultComponent,
-  ],
-  imports: [
-    CommonModule,
-    TranslateModule.forChild(),
-    UiElementsModule,
-    UiInputsModule,
-    MatIconModule,
-    RouterLink,
-  ],
-  exports: [
-    CatalogTitleComponent,
-    OrganisationPreviewComponent,
-    OrganisationsFilterComponent,
-    LanguageSwitcherComponent,
-    OrganisationsResultComponent,
-  ],
-})
-export class UiCatalogModule {}

package/src/libs/ui/elements/src/lib/pagination/pagination.component.ts

@@ -1,50 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-} from '@angular/core'
-
-@Component({
-  selector: 'gn-ui-pagination',
-  templateUrl: './pagination.component.html',
-  styleUrls: ['./pagination.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginationComponent implements OnChanges {
-  @Input() currentPage = 1
-  @Input() nPages = 1
-  @Input() hideButton = false
-  @Output() newCurrentPageEvent = new EventEmitter<number>()
-
-  private applyPageBounds() {
-    // make sure this works with NaN inputs as well by adding `|| 1`
-    this.nPages = Math.max(1, this.nPages || 1)
-    this.currentPage = Math.max(1, Math.min(this.nPages, this.currentPage || 1))
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    // make sure the inputs are valid
-    if ('currentPage' in changes || 'nPages' in changes) {
-      this.applyPageBounds()
-    }
-  }
-
-  setPage(newPage) {
-    if (!Number.isInteger(newPage)) return
-    this.currentPage = newPage
-    this.applyPageBounds()
-    this.newCurrentPageEvent.emit(this.currentPage)
-  }
-
-  nextPage() {
-    this.setPage(this.currentPage + 1)
-  }
-
-  previousPage() {
-    this.setPage(this.currentPage - 1)
-  }
-}

package/src/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html

@@ -1,33 +0,0 @@
-<div class="relative">
-  <div class="flex flex-row gap-[5px] items-center">
-    <gn-ui-button
-      type="light"
-      [disabled]="currentPage === 1"
-      (buttonClick)="previousPage()"
-      extraClass="!px-[3px]"
-    >
-      <mat-icon class="material-symbols-outlined">chevron_left</mat-icon>
-    </gn-ui-button>
-    <ng-container *ngFor="let page of visiblePages">
-      <ng-container *ngIf="page === '...'">
-        <span class="mx-[5px]">{{ page }}</span>
-      </ng-container>
-      <ng-container *ngIf="page !== '...'">
-        <gn-ui-button
-          [type]="page === currentPage ? 'primary' : 'light'"
-          [disabled]="page === currentPage"
-          (buttonClick)="changePage(page)"
-          >{{ page }}</gn-ui-button
-        >
-      </ng-container>
-    </ng-container>
-    <gn-ui-button
-      type="light"
-      [disabled]="currentPage === totalPages"
-      (buttonClick)="nextPage()"
-      extraClass="!px-[3px]"
-    >
-      <mat-icon class="material-symbols-outlined">chevron_right</mat-icon>
-    </gn-ui-button>
-  </div>
-</div>

package/src/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.ts

@@ -1,68 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-} from '@angular/core'
-
-@Component({
-  selector: 'gn-ui-pagination-buttons',
-  templateUrl: './pagination-buttons.component.html',
-  styleUrls: ['./pagination-buttons.component.css'],
-})
-export class PaginationButtonsComponent implements OnChanges {
-  @Input() currentPage: number
-  @Input() totalPages: number
-  visiblePages: (number | '...')[] = []
-  @Output() newCurrentPageEvent = new EventEmitter<number>()
-
-  ngOnChanges(): void {
-    this.calculateVisiblePages()
-  }
-
-  calculateVisiblePages(): void {
-    const maxVisiblePages = 5
-    const halfVisible = Math.floor(maxVisiblePages / 2)
-    const startPage = Math.max(this.currentPage - halfVisible, 1)
-    const endPage = Math.min(this.currentPage + halfVisible, this.totalPages)
-
-    const visiblePages: (number | '...')[] = []
-    if (startPage > 1) {
-      visiblePages.push(1)
-      if (startPage > 2) {
-        visiblePages.push('...')
-      }
-    }
-    for (let page = startPage; page <= endPage; page++) {
-      visiblePages.push(page)
-    }
-    if (endPage < this.totalPages) {
-      if (endPage < this.totalPages - 1) {
-        visiblePages.push('...')
-      }
-      visiblePages.push(this.totalPages)
-    }
-
-    this.visiblePages = visiblePages
-  }
-
-  changePage(page) {
-    this.setPage(page)
-  }
-
-  nextPage() {
-    this.setPage(this.currentPage + 1)
-  }
-
-  previousPage() {
-    this.setPage(this.currentPage - 1)
-  }
-
-  setPage(newPage) {
-    if (!Number.isInteger(newPage)) return
-    this.currentPage = newPage
-    this.calculateVisiblePages()
-    this.newCurrentPageEvent.emit(this.currentPage)
-  }
-}

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.html

@@ -1,36 +0,0 @@
-<div class="flex gap-2 mb-2">
-  <gn-ui-button
-    *ngFor="let addOption of addOptions"
-    (buttonClick)="add.emit(addOption.eventName)"
-  >
-    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
-    &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
-  >
-</div>
-<div
-  cdkDropList
-  class="sortable-list flex flex-col gap-3 p-2"
-  (cdkDropListDropped)="drop($event)"
->
-  <ng-container *ngFor="let element of elements; index as index">
-    <div class="sortable-box bg-white flex items-center" cdkDrag>
-      <span
-        cdkDragHandle
-        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
-      >
-        drag_handle
-      </span>
-      <div class="flex-1">
-        <ng-container
-          *ngComponentOutlet="element.component; inputs: element.inputs"
-        ></ng-container>
-      </div>
-      <span
-        (click)="removeElement(index)"
-        class="material-symbols-outlined mx-[10px] cursor-pointer gn-ui-icon-medium flex-none"
-      >
-        close
-      </span>
-    </div>
-  </ng-container>
-</div>

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts

@@ -1,56 +0,0 @@
-import {
-  CdkDrag,
-  CdkDragDrop,
-  CdkDragHandle,
-  CdkDropList,
-  moveItemInArray,
-} from '@angular/cdk/drag-drop'
-import { NgComponentOutlet, NgFor } from '@angular/common'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  Type,
-} from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
-import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
-
-type DynamicElement = {
-  component: Type<any>
-  inputs: Record<string, any>
-}
-
-@Component({
-  selector: 'gn-ui-sortable-list',
-  templateUrl: 'sortable-list.component.html',
-  styleUrls: ['sortable-list.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    NgFor,
-    NgComponentOutlet,
-    CdkDropList,
-    CdkDrag,
-    CdkDragHandle,
-    MatIconModule,
-    ButtonComponent,
-  ],
-})
-export class SortableListComponent {
-  @Input() elements: Array<DynamicElement>
-  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
-  @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
-  @Output() add = new EventEmitter<string>()
-
-  drop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
-    this.elementsChange.emit(this.elements)
-  }
-
-  removeElement(index: number) {
-    this.elements = this.elements.filter((_, i) => i !== index)
-    this.elementsChange.emit(this.elements)
-  }
-}