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

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

@@ -0,0 +1,214 @@
+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 { 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'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matSwipeOutline } from '@ng-icons/material-icons/outline'
+
+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, TranslateModule, NgIconComponent],
+  providers: [
+    provideIcons({ matSwipeOutline }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+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/components/map-legend/map-legend.component.css

@@ -0,0 +1,5 @@
+.geosdk--legend-container {
+  overflow: auto;
+  white-space: normal;
+  word-wrap: break-word;
+}

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

@@ -0,0 +1 @@
+<div *ngIf="legendHTML" [innerHTML]="legendHTML.outerHTML"></div>

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

@@ -0,0 +1,39 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core'
+import { MapContext } from '@geospatial-sdk/core'
+import { createLegendFromLayer } from '@geospatial-sdk/legend'
+import { NgIf } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-map-legend',
+  templateUrl: './map-legend.component.html',
+  standalone: true,
+  styleUrls: ['./map-legend.component.css'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [NgIf],
+})
+export class MapLegendComponent implements OnChanges {
+  @Input() context: MapContext | null
+  @Output() legendStatusChange = new EventEmitter<boolean>()
+  legendHTML: HTMLElement | false
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes) {
+      const mapContext = changes['context'].currentValue
+      if (mapContext.layers && mapContext.layers.length > 0) {
+        const mapContextLayer = mapContext.layers[0]
+        this.legendHTML = await createLegendFromLayer(mapContextLayer)
+        if (this.legendHTML) {
+          this.legendStatusChange.emit(true)
+        }
+      }
+    }
+  }
+}

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/record-preview-feed/record-preview-feed.component.html

@@ -16,12 +16,12 @@
       <div
         class="record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0"
       >
-        <mat-icon
+        <ng-icon
           *ngIf="!hasLogo"
-          class="material-symbols-outlined text-gray-200"
+          class="text-gray-200"
+          name="{{ hasOnlyPerson ? 'matFace' : 'matHomeWorkOutline' }}"
           style="width: 42px; height: 42px; font-size: 42px; margin: 10px"
-          >{{ hasOnlyPerson ? 'face' : 'home_work' }}</mat-icon
-        >
+        ></ng-icon>
         <gn-ui-thumbnail
           *ngIf="hasLogo"
           [thumbnailUrl]="record.ownerOrganization?.logoUrl?.toString()"
@@ -61,23 +61,27 @@
       >
         {{ record.title }}
       </h1>
-      <p class="line-clamp-3">{{ abstract }}</p>
+      <p class="line-clamp-3">
+        <gn-ui-markdown-parser [textContent]="abstract" whitoutStyles="true" />
+      </p>
       <gn-ui-thumbnail
         *ngIf="record.overviews?.[0]"
         class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
         [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
       ></gn-ui-thumbnail>
       <div class="flex flex-row mt-3" *ngIf="isDownloadable || isViewable">
-        <mat-icon
+        <ng-icon
           *ngIf="isDownloadable"
-          class="material-symbols-outlined text-primary opacity-45 mr-3"
-          >cloud_download
-        </mat-icon>
-        <mat-icon
+          class="text-primary opacity-45 mr-3"
+          name="matCloudDownloadOutline"
+        >
+        </ng-icon>
+        <ng-icon
           *ngIf="isViewable"
-          class="material-symbols-outlined text-primary opacity-45 mr-3"
-          >map
-        </mat-icon>
+          class="text-primary opacity-45 mr-3"
+          name="matMapOutline"
+        >
+        </ng-icon>
       </div>
     </div>
   </a>

package/src/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -9,7 +9,10 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full object-cover object-left-top"
-        [thumbnailUrl]="[record.overviews?.[0]?.url?.toString(), organization?.logoUrl?.toString()]"
+        [thumbnailUrl]="[
+          record.overviews?.[0]?.url?.toString(),
+          organization?.logoUrl?.toString(),
+        ]"
         [fit]="['cover', 'contain']"
       ></gn-ui-thumbnail>
     </div>
@@ -30,7 +33,10 @@
       class="abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0"
       data-cy="recordAbstract"
     >
-      {{ abstract }}
+      <gn-ui-markdown-parser
+        [textContent]="abstract"
+        whitoutStyles="true"
+      ></gn-ui-markdown-parser>
     </div>
     <div
       class="text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1"
@@ -42,16 +48,16 @@
     <div
       class="icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]"
     >
-      <mat-icon
+      <ng-icon
         *ngIf="isDownloadable"
-        class="material-symbols-outlined text-primary opacity-45 mx-1"
-        >cloud_download</mat-icon
-      >
-      <mat-icon
+        class="text-primary opacity-45 mx-1"
+        name="matCloudDownloadOutline"
+      ></ng-icon>
+      <ng-icon
         *ngIf="isViewable"
-        class="material-symbols-outlined text-primary opacity-45 mx-1"
-        >map</mat-icon
-      >
+        class="text-primary opacity-45 mx-1"
+        name="matMapOutline"
+      ></ng-icon>
     </div>
     <div
       *ngIf="metadataQualityDisplay"

package/src/libs/ui/search/src/lib/results-list/results-layout.config.ts

@@ -14,7 +14,7 @@ export class ResultsLayoutConfigItem {
   constructor(
     public component: Type<RecordPreviewComponent>,
     public itemClass: string = DEFAULT_ITEM_CLS,
-    public itemStyle: string = '',
+    public itemStyle = '',
     public containerClass: string = DEFAULT_CONTAINER_CLS
   ) {}
 }

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

@@ -0,0 +1,59 @@
+<ng-container [ngSwitch]="sectionDisplayed">
+  <ng-container *ngSwitchCase="'mainMenu'">
+    <div
+      data-test="mainMenuSection"
+      class="mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl"
+    >
+      <ul class="flex flex-col gap-2 w-full">
+        <gn-ui-button
+          type="light"
+          extraClass="flex flex-row items-center gap-2 w-full justify-start"
+          (buttonClick)="duplicate.emit()"
+          [disabled]="!canDuplicate"
+          data-test="record-menu-duplicate-button"
+          ><span translate>record.action.duplicate</span></gn-ui-button
+        >
+        <gn-ui-button
+          type="light"
+          extraClass="flex flex-row items-center gap-2 w-full justify-start"
+          (buttonClick)="displayDeleteMenu()"
+          [disabled]="!canDelete"
+          data-test="record-menu-delete-button"
+          ><span translate>record.action.delete</span></gn-ui-button
+        >
+      </ul>
+    </div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'deleteMenu'">
+    <div
+      data-test="deleteMenuSection"
+      class="w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl"
+    >
+      <span class="text-lg font-bold text-center">{{
+        'editor.record.delete.confirmation.title' | translate
+      }}</span>
+      <span class="text-center">{{
+        'editor.record.delete.confirmation.message' | translate
+      }}</span>
+      <div class="flex flex-row gap-8 justify-center">
+        <gn-ui-button
+          (buttonClick)="delete.emit()"
+          cdkFocusInitial
+          type="primary"
+          data-cy="confirm-button"
+          [style.--gn-ui-button-width]="'100px'"
+          >{{
+            'editor.record.delete.confirmation.confirmText' | translate
+          }}</gn-ui-button
+        >
+        <gn-ui-button
+          [style.--gn-ui-button-width]="'100px'"
+          (buttonClick)="closeActionMenu.emit()"
+          >{{
+            'editor.record.delete.confirmation.cancelText' | translate
+          }}</gn-ui-button
+        >
+      </div>
+    </div>
+  </ng-container>
+</ng-container>

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

@@ -0,0 +1,61 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { MatDialog, MatDialogModule } from '@angular/material/dialog'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
+import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+type ActionMenuPage = 'mainMenu' | 'deleteMenu'
+
+@Component({
+  selector: 'gn-ui-action-menu',
+  templateUrl: './action-menu.component.html',
+  styleUrls: ['./action-menu.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    MatMenuModule,
+    MatDialogModule,
+    ConfirmationDialogComponent,
+    TranslateModule,
+  ],
+})
+export class ActionMenuComponent {
+  @Input() canDuplicate: boolean
+  @Input() canDelete: boolean
+  @Output() duplicate = new EventEmitter<void>()
+  @Output() delete = new EventEmitter<void>()
+  @Output() closeActionMenu = new EventEmitter<void>()
+
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
+
+  sectionDisplayed: ActionMenuPage = 'mainMenu'
+
+  constructor(
+    public dialog: MatDialog,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  openMenu() {
+    this.trigger.openMenu()
+  }
+
+  displayMainMenu() {
+    this.sectionDisplayed = 'mainMenu'
+    this.cdr.markForCheck()
+  }
+
+  displayDeleteMenu() {
+    this.sectionDisplayed = 'deleteMenu'
+    this.cdr.markForCheck()
+  }
+}