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

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectorRef, Component, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../button/button.component'
+import { MatIconModule } from '@angular/material/icon'
+import { filter } from 'rxjs/operators'
+import { Subject } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-url-input',
+  templateUrl: './url-input.component.html',
+  styleUrls: ['./url-input.component.css'],
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, MatIconModule],
+})
+export class UrlInputComponent {
+  @Input() value = ''
+  @Input() extraClass = ''
+  @Input() placeholder = 'https://'
+  @Input() disabled: boolean
+  rawChange = new Subject<string>()
+  @Output() valueChange = this.rawChange.pipe(filter((v) => !!v))
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  handleInput() {
+    this.cd.markForCheck()
+  }
+
+  handleChange(element: HTMLInputElement) {
+    const value = element.value
+    this.rawChange.next(value)
+  }
+}

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

@@ -8,4 +8,6 @@ export * from './lib/interactive-table/interactive-table-column/interactive-tabl
 export * from './lib/interactive-table/interactive-table.component'
 export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
+export * from './lib/sortable-list/sortable-list.component'
+export * from './lib/modal-dialog/modal-dialog.component'
 export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -1,9 +1,10 @@
-<div class="h-full flex flex-col">
+<div class="h-full flex flex-col" *ngIf="label; else onlyContent">
   <div class="flex-none w-full flex flex-row items-center">
     <span class="flex-none font-bold">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
       <span
+        *ngIf="hint"
         class="material-symbols-outlined m-2 gn-ui-icon-small"
         [matTooltip]="hint"
         matTooltipPosition="above"
@@ -12,7 +13,11 @@
       </span>
     </div>
   </div>
-  <div class="flex-1">
-    <ng-content></ng-content>
+  <div class="flex-1 mt-2">
+    <ng-container *ngTemplateOutlet="onlyContent"> </ng-container>
   </div>
 </div>
+
+<ng-template #onlyContent>
+  <ng-content></ng-content>
+</ng-template>

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -8,9 +9,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatTooltipModule],
+  imports: [MatIconModule, MatTooltipModule, CommonModule],
 })
 export class FormFieldWrapperComponent {
-  @Input() label: string
-  @Input() hint: string
+  @Input() label?: string
+  @Input() hint?: string
 }

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -30,6 +30,7 @@
     class="contents text-gray-900 cursor-pointer group"
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
+    data-cy="table-row"
   >
     <div
       class="relative h-0"

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>
+  <ng-container
+    *ngTemplateOutlet="data.body; context: { $implicit: data.bodyContext }"
+  ></ng-container>
+</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.ts

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  TemplateRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ModalDialogData {
+  title: string
+  body: TemplateRef<unknown>
+  bodyContext: unknown
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-modal-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, ButtonComponent],
+  templateUrl: './modal-dialog.component.html',
+  styleUrls: ['./modal-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ModalDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ModalDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

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

@@ -0,0 +1,37 @@
+<div
+  cdkDropList
+  class="sortable-list flex flex-col gap-3 p-2"
+  (cdkDropListDropped)="drop($event)"
+>
+  <ng-container *ngFor="let item of items; index as index; trackBy: trackByFn">
+    <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
+          *ngTemplateOutlet="
+            elementTemplate;
+            context: { $implicit: item, index }
+          "
+        ></ng-container>
+      </div>
+
+      <gn-ui-button
+        type="light"
+        style="
+          --gn-ui-button-padding: 0px;
+          --gn-ui-button-width: 24px;
+          --gn-ui-button-height: 24px;
+        "
+        class="ml-[8px] mr-[10px]"
+        (buttonClick)="removeItem(index)"
+        data-test="remove-item"
+        ><span class="material-symbols-outlined gn-ui-icon-medium">close</span>
+      </gn-ui-button>
+    </div>
+  </ng-container>
+</div>

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

@@ -5,23 +5,18 @@ 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'
 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',
@@ -29,8 +24,7 @@ type DynamicElement = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
-    NgComponentOutlet,
+    CommonModule,
     CdkDropList,
     CdkDrag,
     CdkDragHandle,
@@ -39,18 +33,21 @@ type DynamicElement = {
   ],
 })
 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>()
+  @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])
+  }
+
+  removeItem(index: number) {
+    this.items = this.items.filter((_, i) => i !== index)
+    this.itemsOrderChange.emit(this.items)
   }
 
-  removeElement(index: number) {
-    this.elements = this.elements.filter((_, i) => i !== index)
-    this.elementsChange.emit(this.elements)
+  trackByFn(index: number) {
+    return index
   }
 }

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/facets/fixtures/aggregations-model-response.ts

@@ -1,6 +1,6 @@
 import { ModelBlock, ModelItem } from '../facets.model'
 
-export const BLOCK_MODEL_FIXTURE: ModelBlock = {
+export const blockModelFixture = (): ModelBlock => ({
   key: 'tag',
   items: [
     { value: 'Hungary', count: 20, path: ['tag', 'Hungary'] },
@@ -31,8 +31,9 @@ export const BLOCK_MODEL_FIXTURE: ModelBlock = {
   more: true,
   includeFilter: true,
   excludeFilter: false,
-}
-export const EMPTY_BLOCK_MODEL_FIXTURE: ModelBlock = {
+})
+
+export const emptyBlockModelFixture = (): ModelBlock => ({
   key: 'emptytag',
   items: [],
   path: ['emptytag'],
@@ -41,12 +42,12 @@ export const EMPTY_BLOCK_MODEL_FIXTURE: ModelBlock = {
   more: true,
   includeFilter: false,
   excludeFilter: false,
-}
+})
 
-export const FACET_ITEM_FIXTURE: ModelItem = {
+export const itemModelFixture = (): ModelItem => ({
   path: ['tag.default', 'land use'],
   value: 'land use',
   count: 500,
   selected: true,
   inverted: false,
-}
+})

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

@@ -0,0 +1,26 @@
+<gn-ui-button
+  type="light"
+  [matMenuTriggerFor]="menu"
+  (buttonClick)="openMenu()"
+  data-test="record-menu-button"
+>
+  <mat-icon class="material-symbols-outlined">more_vert</mat-icon>
+</gn-ui-button>
+<mat-menu #menu="matMenu">
+  <button
+    mat-menu-item
+    [disabled]="!canDuplicate"
+    (click)="duplicate.emit()"
+    data-test="record-menu-duplicate-button"
+  >
+    <span translate>record.action.duplicate</span>
+  </button>
+  <button
+    mat-menu-item
+    [disabled]="!canDelete"
+    (click)="openDeleteConfirmationDialog()"
+    data-test="record-menu-delete-button"
+  >
+    <span translate>record.action.delete</span>
+  </button>
+</mat-menu>