geonetwork-ui 2.4.0-dev.d000fb89 → 2.4.0-dev.d3529f01

package/src/libs/ui/{elements → layout}/src/lib/sortable-list/sortable-list.component.ts

@@ -5,21 +5,17 @@ import {
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { NgComponentOutlet, NgFor } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
   Output,
-  Type,
+  TemplateRef,
 } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
-
-export type DynamicElement = {
-  component: Type<unknown>
-  inputs: Record<string, unknown>
-}
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 
 @Component({
   selector: 'gn-ui-sortable-list',
@@ -28,26 +24,27 @@ export type DynamicElement = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
-    NgComponentOutlet,
+    CommonModule,
     CdkDropList,
     CdkDrag,
     CdkDragHandle,
     MatIconModule,
+    ButtonComponent,
   ],
 })
 export class SortableListComponent {
-  @Input() elements: Array<DynamicElement>
-  @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
+  @Input() elementTemplate: TemplateRef<unknown>
+  @Input() items: unknown[]
+  @Output() itemsOrderChange = new EventEmitter<unknown[]>()
 
   drop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
-    this.elementsChange.emit(this.elements)
+    moveItemInArray(this.items, event.previousIndex, event.currentIndex)
+    this.itemsOrderChange.emit([...this.items])
   }
 
-  removeElement(index: number) {
-    this.elements = this.elements.filter((_, i) => i !== index)
-    this.elementsChange.emit(this.elements)
+  removeItem(index: number) {
+    this.items = this.items.filter((_, i) => i !== index)
+    this.itemsOrderChange.emit(this.items)
   }
 
   trackByFn(index: number) {

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

@@ -1,3 +1,4 @@
-export * from './lib/ui-map.module'
-export * from './lib/components/map/map.component'
+export * from './lib/components/map-container/map-container.component'
+export * from './lib/components/map-container/map-settings.token'
 export * from './lib/components/feature-detail/feature-detail.component'
+export * from './lib/map-utils'

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="feature" class="root">
   <div class="property" *ngFor="let propName of properties">
     <div>{{ propName }}</div>
-    <div class="font-bold">{{ feature.get(propName) }}</div>
+    <div class="font-bold">{{ feature.properties[propName] }}</div>
   </div>
 </div>

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.ts

@@ -1,6 +1,6 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import type { Feature } from 'geojson'
 
 const geometryKeys = ['geometry', 'the_geom']
 
@@ -9,12 +9,15 @@ const geometryKeys = ['geometry', 'the_geom']
   templateUrl: './feature-detail.component.html',
   styleUrls: ['./feature-detail.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class FeatureDetailComponent {
-  @Input() feature: Feature<Geometry>
+  @Input() feature: Feature
 
   get properties() {
-    return Object.keys(this.feature.getProperties()).filter(
+    if (!this.feature) return []
+    return Object.keys(this.feature.properties).filter(
       (prop) => !geometryKeys.includes(prop)
     )
   }

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -0,0 +1,203 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core'
+import { fromEvent, merge, Observable, of, timer } from 'rxjs'
+import { delay, map, startWith, switchMap } from 'rxjs/operators'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  computeMapContextDiff,
+  Extent,
+  FeaturesClickEvent,
+  FeaturesClickEventType,
+  FeaturesHoverEvent,
+  FeaturesHoverEventType,
+  MapClickEvent,
+  MapClickEventType,
+  MapContext,
+  MapContextLayer,
+  MapContextLayerXyz,
+  MapContextView,
+} from '@geospatial-sdk/core'
+import {
+  applyContextDiffToMap,
+  createMapFromContext,
+  listen,
+} from '@geospatial-sdk/openlayers'
+import type OlMap from 'ol/Map'
+import type { Feature } from 'geojson'
+import {
+  BASEMAP_LAYERS,
+  DO_NOT_USE_DEFAULT_BASEMAP,
+  MAP_VIEW_CONSTRAINTS,
+} from './map-settings.token'
+
+const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
+  type: 'xyz',
+  url: `https://{a-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>`,
+}
+
+const DEFAULT_VIEW: MapContextView = {
+  center: [0, 15],
+  zoom: 2,
+}
+
+@Component({
+  selector: 'gn-ui-map-container',
+  templateUrl: './map-container.component.html',
+  styleUrls: ['./map-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule, TranslateModule],
+})
+export class MapContainerComponent implements AfterViewInit, OnChanges {
+  @Input() context: MapContext | null
+
+  // these events only get registered on the map if they are used
+  _featuresClick: EventEmitter<Feature[]>
+  @Output() get featuresClick() {
+    if (!this._featuresClick) {
+      this.openlayersMap.then((olMap) => {
+        listen(
+          olMap,
+          FeaturesClickEventType,
+          ({ features }: FeaturesClickEvent) =>
+            this._featuresClick.emit(features)
+        )
+      })
+      this._featuresClick = new EventEmitter<Feature[]>()
+    }
+    return this._featuresClick
+  }
+  _featuresHover: EventEmitter<Feature[]>
+  @Output() get featuresHover() {
+    if (!this._featuresHover) {
+      this.openlayersMap.then((olMap) => {
+        listen(
+          olMap,
+          FeaturesHoverEventType,
+          ({ features }: FeaturesHoverEvent) =>
+            this._featuresHover.emit(features)
+        )
+      })
+      this._featuresHover = new EventEmitter<Feature[]>()
+    }
+    return this._featuresHover
+  }
+  _mapClick: EventEmitter<[number, number]>
+  @Output() get mapClick() {
+    if (!this._mapClick) {
+      this.openlayersMap.then((olMap) => {
+        listen(olMap, MapClickEventType, ({ coordinate }: MapClickEvent) =>
+          this._mapClick.emit(coordinate)
+        )
+      })
+      this._mapClick = new EventEmitter<[number, number]>()
+    }
+    return this._mapClick
+  }
+
+  @ViewChild('map') container: ElementRef
+  displayMessage$: Observable<boolean>
+  olMap: OlMap
+
+  constructor(
+    @Inject(DO_NOT_USE_DEFAULT_BASEMAP) private doNotUseDefaultBasemap: boolean,
+    @Inject(BASEMAP_LAYERS) private basemapLayers: MapContextLayer[],
+    @Inject(MAP_VIEW_CONSTRAINTS)
+    private mapViewConstraints: {
+      maxZoom?: number
+      maxExtent?: Extent
+    }
+  ) {}
+
+  private olMapResolver
+  openlayersMap = new Promise<OlMap>((resolve) => {
+    this.olMapResolver = resolve
+  })
+
+  async ngAfterViewInit() {
+    this.olMap = await createMapFromContext(
+      this.processContext(this.context),
+      this.container.nativeElement
+    )
+    this.displayMessage$ = merge(
+      fromEvent(this.olMap, 'mapmuted').pipe(map(() => true)),
+      fromEvent(this.olMap, 'movestart').pipe(map(() => false)),
+      fromEvent(this.olMap, 'singleclick').pipe(map(() => false))
+    ).pipe(
+      switchMap((muted) =>
+        muted
+          ? timer(2000).pipe(
+              map(() => false),
+              startWith(true),
+              delay(400)
+            )
+          : of(false)
+      )
+    )
+    this.olMapResolver(this.olMap)
+  }
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes && !changes['context'].isFirstChange()) {
+      const diff = computeMapContextDiff(
+        this.processContext(changes['context'].currentValue),
+        this.processContext(changes['context'].previousValue)
+      )
+      await applyContextDiffToMap(this.olMap, diff)
+    }
+  }
+
+  // This will apply basemap layers & view constraints
+  processContext(context: MapContext): MapContext {
+    const processed = context
+      ? { ...context, view: context.view ?? DEFAULT_VIEW }
+      : { layers: [], view: DEFAULT_VIEW }
+    if (this.basemapLayers.length) {
+      processed.layers = [...this.basemapLayers, ...processed.layers]
+    }
+    if (!this.doNotUseDefaultBasemap) {
+      processed.layers = [DEFAULT_BASEMAP_LAYER, ...processed.layers]
+    }
+    if (this.mapViewConstraints.maxZoom) {
+      processed.view = {
+        maxZoom: this.mapViewConstraints.maxZoom,
+        ...processed.view,
+      }
+    }
+    if (this.mapViewConstraints.maxExtent) {
+      processed.view = {
+        maxExtent: this.mapViewConstraints.maxExtent,
+        ...processed.view,
+      }
+    }
+    if (
+      processed.view &&
+      !('zoom' in processed.view) &&
+      !('center' in processed.view)
+    ) {
+      if (this.mapViewConstraints.maxExtent) {
+        processed.view = {
+          extent: this.mapViewConstraints.maxExtent,
+          ...processed.view,
+        }
+      } else {
+        processed.view = { ...DEFAULT_VIEW, ...processed.view }
+      }
+    }
+    return processed
+  }
+}

package/src/libs/ui/map/src/lib/components/map-container/map-settings.token.ts

@@ -0,0 +1,23 @@
+import { InjectionToken } from '@angular/core'
+import { Extent, MapContextLayer } from '@geospatial-sdk/core'
+
+export const DO_NOT_USE_DEFAULT_BASEMAP = new InjectionToken(
+  'doNotUseDefaultBasemap',
+  { factory: () => false }
+)
+export const BASEMAP_LAYERS = new InjectionToken<MapContextLayer[]>(
+  'basemapLayers',
+  { factory: () => [] }
+)
+export const MAP_VIEW_CONSTRAINTS = new InjectionToken<{
+  maxZoom?: number
+  maxExtent?: Extent
+}>('mapViewConstraints', {
+  factory: () => ({}),
+})
+export const VECTOR_STYLE_DEFAULT = new InjectionToken('vectorStyleDefault', {
+  factory: () => ({
+    fill: { color: 'rgba(255, 255, 255, 0.2)' },
+    stroke: { color: '#ffcc33', width: 2 },
+  }),
+})

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -0,0 +1,54 @@
+import Collection from 'ol/Collection'
+import { defaults, DragPan, Interaction, MouseWheelZoom } from 'ol/interaction'
+import MapBrowserEvent from 'ol/MapBrowserEvent'
+import {
+  mouseOnly,
+  noModifierKeys,
+  platformModifierKeyOnly,
+  primaryAction,
+} from 'ol/events/condition'
+
+export function prioritizePageScroll(interactions: Collection<Interaction>) {
+  interactions.clear()
+  interactions.extend(
+    defaults({
+      // remove rotate interactions
+      altShiftDragRotate: false,
+      pinchRotate: false,
+      // replace drag and zoom interactions
+      dragPan: false,
+      mouseWheelZoom: false,
+    })
+      .extend([
+        new DragPan({
+          condition: dragPanCondition,
+        }),
+        new MouseWheelZoom({
+          condition: mouseWheelZoomCondition,
+        }),
+      ])
+      .getArray()
+  )
+}
+
+export function dragPanCondition(
+  this: DragPan,
+  event: MapBrowserEvent<PointerEvent>
+) {
+  const dragPanCondition = this.getPointerCount() === 2 || mouseOnly(event)
+  if (!dragPanCondition) {
+    this.getMap().dispatchEvent('mapmuted')
+  }
+  // combine the condition with the default DragPan conditions
+  return dragPanCondition && noModifierKeys(event) && primaryAction(event)
+}
+
+export function mouseWheelZoomCondition(
+  this: MouseWheelZoom,
+  event: MapBrowserEvent<UIEvent>
+) {
+  if (!platformModifierKeyOnly(event) && event.type === 'wheel') {
+    this.getMap().dispatchEvent('mapmuted')
+  }
+  return platformModifierKeyOnly(event)
+}

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

@@ -64,12 +64,14 @@ export class ResultsTableComponent {
   }
 
   getRecordFormats(record: CatalogRecord): FileFormat[] {
-    if (record.kind === 'service' || !('distributions' in record)) {
+    if (record.kind === 'service' || !('onlineResources' in record)) {
       return []
     }
     const formats = Array.from(
       new Set(
-        record.distributions.map((distribution) => getFileFormat(distribution))
+        record.onlineResources.map((onlineResource) =>
+          getFileFormat(onlineResource)
+        )
       )
     ).filter((format) => !!format)
     formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a))

package/src/libs/util/app-config/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/app-config'
 export * from './lib/fixtures'
 export * from './lib/model'
+export * from './lib/map-layers'

package/src/libs/util/app-config/src/lib/map-layers.ts

@@ -0,0 +1,31 @@
+import { LayerConfig } from './model'
+import { MapContextLayer } from '@geospatial-sdk/core'
+
+export function getMapContextLayerFromConfig(
+  config: LayerConfig
+): MapContextLayer {
+  switch (config.TYPE) {
+    case 'wms':
+      return {
+        type: 'wms',
+        url: config.URL,
+        name: config.NAME,
+      }
+    case 'wfs':
+      return {
+        type: 'wfs',
+        url: config.URL,
+        featureType: config.NAME,
+      }
+    case 'xyz':
+      return {
+        type: config.TYPE,
+        url: config.URL,
+      }
+    case 'geojson':
+      return {
+        type: config.TYPE,
+        ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
+      }
+  }
+}

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getFileFormat } from './link-utils'
+
 export enum LinkUsage {
   API = 'api',
   MAP_API = 'mapapi',
@@ -15,7 +16,7 @@ export enum LinkUsage {
   providedIn: 'root',
 })
 export class LinkClassifierService {
-  getUsagesForLink(link: DatasetDistribution): LinkUsage[] {
+  getUsagesForLink(link: DatasetOnlineResource): LinkUsage[] {
     switch (link.type) {
       case 'service': {
         switch (link.accessServiceProtocol) {
@@ -51,7 +52,7 @@ export class LinkClassifierService {
     }
   }
 
-  hasUsage(link: DatasetDistribution, usage: LinkUsage) {
+  hasUsage(link: DatasetOnlineResource, usage: LinkUsage) {
     return this.getUsagesForLink(link).indexOf(usage) > -1
   }
 }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -1,5 +1,5 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('downloads.wfs.featuretype.not.found')
 
@@ -131,7 +131,7 @@ export function getFormatPriority(linkFormat: FileFormat): number {
   return 0
 }
 
-export function getLinkPriority(link: DatasetDistribution): number {
+export function getLinkPriority(link: DatasetOnlineResource): number {
   return getFormatPriority(getFileFormat(link))
 }
 
@@ -155,7 +155,7 @@ export function getFileFormatFromServiceOutput(
   return null
 }
 
-export function getFileFormat(link: DatasetDistribution): FileFormat {
+export function getFileFormat(link: DatasetOnlineResource): FileFormat {
   if ('mimeType' in link) {
     const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
     if (mimeTypeFormat !== null) {
@@ -172,7 +172,7 @@ export function getFileFormat(link: DatasetDistribution): FileFormat {
 }
 
 export function isFormatInQueryParam(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
@@ -194,7 +194,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
 }
 
 export function checkFileFormat(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   format: FileFormat
 ): boolean {
   return (
@@ -214,7 +214,7 @@ export function getBadgeColor(linkFormat: FileFormat): string {
   return 'var(--color-gray-700)' // Default color ?
 }
 
-export function getLinkLabel(link: DatasetDistribution): string {
+export function getLinkLabel(link: DatasetOnlineResource): string {
   let format = ''
   switch (link.type) {
     case 'service':

package/src/libs/util/shared/src/lib/services/theme.service.ts

@@ -109,6 +109,7 @@ export class ThemeService {
     applyColor('gray-700', scale(0.7))
     applyColor('gray-800', scale(0.8))
     applyColor('gray-900', scale(0.9))
+    applyColor('gray-950', scale(0.95))
 
     if (mainFont) {
       document.documentElement.style.setProperty(`--font-family-main`, mainFont)

package/src/libs/util/shared/src/lib/utils/bytes-convert.ts

@@ -1,3 +1,6 @@
-export function megabytesToBytes(megabytes) {
+export function megabytesToBytes(megabytes: number) {
   return megabytes * 1048576
 }
+export function bytesToMegabytes(bytes: number) {
+  return bytes / 1048576
+}

package/tailwind.base.config.js

@@ -30,6 +30,7 @@ module.exports = {
           700: 'var(--color-gray-700)',
           800: 'var(--color-gray-800)',
           900: 'var(--color-gray-900)',
+          950: 'var(--color-gray-950)',
         },
         orange: {
           50: '#fff8f1',

package/tailwind.base.css

@@ -4,6 +4,16 @@
 
 /* PLEASE NOTE: all Tailwind components should be prefixed by `gn-ui` */
 @layer components {
+  .container-sm {
+    max-width: 640px;
+  }
+  .container-md {
+    max-width: 768px;
+  }
+  .container-lg {
+    max-width: 1024px;
+  }
+
   /* TODO: add prefix */
   .card-shadow {
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
@@ -65,8 +75,10 @@
       text-[length:--font-size] leading-none
       p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
       bg-[--background] transition-all duration-100
-      focus:outline-none
-      disabled:opacity-50 disabled:pointer-events-none;
+      outline-none
+      relative
+      disabled:opacity-50 disabled:pointer-events-none
+      focus:z-10 active:z-10 hover:z-10;
   }
   /* makes sure icons will not make the buttons grow vertically */
   .gn-ui-btn mat-icon.mat-icon {
@@ -93,6 +105,18 @@
       border border-secondary focus:ring-4 focus:ring-secondary-lightest;
   }
 
+  .gn-ui-btn-gray {
+    @apply gn-ui-btn text-black
+    bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 active:bg-gray-300
+    border border-gray-100 focus:ring-4 focus:ring-gray-50;
+  }
+
+  .gn-ui-btn-black {
+    @apply gn-ui-btn text-white
+    bg-black hover:bg-gray-950 focus:bg-gray-950 active:bg-gray-900
+    border border-black focus:ring-4 focus:ring-gray-300;
+  }
+
   .gn-ui-btn-outline {
     @apply gn-ui-btn text-main
     hover:text-primary-darker focus:text-primary-darker active:text-primary-black
@@ -135,12 +159,19 @@
   .gn-ui-text-input {
     --rounded: var(--gn-ui-text-input-rounded, 0.25em);
     --padding: var(--gn-ui-text-input-padding, 0.6em);
-    @apply appearance-none border-2 p-[--padding] rounded-[--rounded] w-full transition-colors duration-75
-    text-[14px] leading-none border-gray-300 text-main placeholder-gray-800
+    --font-size: var(--gn-ui-text-input-font-size, 1em);
+    --border-size: var(--gn-ui-text-input-border-size, 2px);
+    @apply appearance-none border-[length:--border-size] p-[--padding] rounded-[--rounded] w-full transition-colors duration-75
+    text-[length:--font-size] leading-none border-gray-300 text-main placeholder-gray-800
     focus:outline-none focus:border-main hover:border-main
     disabled:cursor-not-allowed disabled:border-gray-100 disabled:placeholder-gray-300 disabled:text-gray-700 disabled:bg-white;
   }
 
+  /* GENERIC CARD */
+  .gn-ui-card {
+    @apply flex flex-row border border-gray-200 rounded-xl p-4 gap-2 w-full;
+  }
+
   /* TODO: add prefix */
   .card-icon {
     @apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;