geonetwork-ui 2.4.0-dev.e1bb65c4 → 2.4.0-dev.e550c0b3

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>

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

@@ -0,0 +1,74 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { MatDialog, MatDialogModule } from '@angular/material/dialog'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
+import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-action-menu',
+  templateUrl: './action-menu.component.html',
+  styleUrls: ['./action-menu.component.css'],
+  standalone: true,
+  imports: [
+    MatIconModule,
+    ButtonComponent,
+    MatMenuModule,
+    MatDialogModule,
+    ConfirmationDialogComponent,
+    TranslateModule,
+  ],
+})
+export class ActionMenuComponent {
+  @Input() canDuplicate: boolean
+  @Input() canDelete: boolean
+  @Output() duplicate = new EventEmitter<void>()
+  @Output() delete = new EventEmitter<void>()
+
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
+
+  constructor(
+    public dialog: MatDialog,
+    private translateService: TranslateService
+  ) {}
+
+  openMenu() {
+    this.trigger.openMenu()
+  }
+
+  openDeleteConfirmationDialog() {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        title: this.translateService.instant(
+          'editor.record.delete.confirmation.title'
+        ),
+        message: this.translateService.instant(
+          'editor.record.delete.confirmation.message'
+        ),
+        confirmText: this.translateService.instant(
+          'editor.record.delete.confirmation.confirmText'
+        ),
+        cancelText: this.translateService.instant(
+          'editor.record.delete.confirmation.cancelText'
+        ),
+      },
+      restoreFocus: false,
+    })
+
+    // Manually restore focus to the menu trigger since the element that
+    // opens the dialog won't be in the DOM any more when the dialog closes.
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      this.trigger.focus()
+      if (confirmed) {
+        this.delete.emit()
+      }
+    })
+  }
+}

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

@@ -27,6 +27,7 @@
   <!-- TITLE COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
+    [grow]="true"
     [activeSort]="isSortedBy('resourceTitleObject.default.keyword')"
     (sortChange)="setSortBy('resourceTitleObject.default.keyword', $event)"
   >
@@ -34,11 +35,12 @@
       <span translate>record.metadata.title</span>
     </ng-template>
     <ng-template #cell let-item>
-      <div class="flex flex-row items-center gap-2 max-w-full">
+      <div class="flex flex-row items-center gap-2 max-w-full font-semibold">
         <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
         <gn-ui-badge
-          *ngIf="recordHasDraft(item)"
-          [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
+          *ngIf="hasDraft(item)"
+          [style.--gn-ui-badge-padding]="'0.2em 0.6em'"
+          [style.--gn-ui-badge-text-size]="'12px'"
           [style.--gn-ui-badge-text-color]="'#3d2006'"
           [style.--gn-ui-badge-background-color]="'#ffbc7b'"
           [style.--gn-ui-badge-rounded]="'4px'"
@@ -56,25 +58,25 @@
     </ng-template>
     <ng-template #cell let-item>
       <div
-        class="flex justify-start items-center gap-2"
+        class="flex justify-start items-center gap-2 font-medium"
         *ngIf="getRecordFormats(item) as formats"
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[0])"
           *ngIf="formats[0]"
         >
           {{ formats[0] }}
         </span>
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
           {{ formats[1] }}
         </span>
-        <div class="shrink-0" *ngIf="formats.slice(2).length > 0">
+        <div class="shrink-0 text-xs" *ngIf="formats.slice(2).length > 0">
           <span>+{{ formats.slice(2).length }}</span>
         </div>
       </div>
@@ -93,7 +95,7 @@
     </ng-template>
     <ng-template #cell let-item>
       <mat-icon class="material-symbols-outlined">person</mat-icon>
-      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
+      <span class="text-xs">{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -103,7 +105,14 @@
       <span translate>record.metadata.status</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ item.status }}
+      <span class="text-xs">
+        {{
+          (isUnsavedDraft(item)
+            ? 'record.metadata.status.notPublished'
+            : 'record.metadata.status.published'
+          ) | translate
+        }}</span
+      >
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -117,7 +126,23 @@
       <span translate>record.metadata.updatedOn</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ dateToString(item.recordUpdated) }}
+      <div class="flex justify-center w-full text-xs">
+        {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
+      </div>
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- ACTION MENU COLUMN -->
+  <gn-ui-interactive-table-column>
+    <ng-template #header> </ng-template>
+    <ng-template #cell let-item>
+      <gn-ui-action-menu
+        [canDuplicate]="canDuplicate(item)"
+        [canDelete]="canDelete(item)"
+        (duplicate)="handleDuplicate(item)"
+        (delete)="handleDelete(item)"
+      >
+      </gn-ui-action-menu>
     </ng-template>
   </gn-ui-interactive-table-column>
 </gn-ui-interactive-table>

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

@@ -1,23 +1,24 @@
+import { CommonModule } from '@angular/common'
 import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
-  FileFormat,
-  getBadgeColor,
-  getFileFormat,
-  getFormatPriority,
-} from '../../../../../../libs/util/shared/src'
+  FieldSort,
+  SortByField,
+} from '../../../../../../libs/common/domain/src/lib/model/search'
 import { BadgeComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 import {
   InteractiveTableColumnComponent,
   InteractiveTableComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { MatIconModule } from '@angular/material/icon'
-import { TranslateModule } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
 import {
-  FieldSort,
-  SortByField,
-} from '../../../../../../libs/common/domain/src/lib/model/search'
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { ActionMenuComponent } from './action-menu/action-menu.component'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -32,17 +33,23 @@ import {
     MatIconModule,
     TranslateModule,
     BadgeComponent,
+    ActionMenuComponent,
   ],
 })
 export class ResultsTableComponent {
   @Input() records: CatalogRecord[] = []
   @Input() selectedRecordsIdentifiers: string[] = []
   @Input() sortOrder: SortByField = null
-  @Input() recordHasDraft: (record: CatalogRecord) => boolean = () => false
+  @Input() hasDraft: (record: CatalogRecord) => boolean = () => false
+  @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
+  @Input() isUnsavedDraft: (record: CatalogRecord) => boolean = () => true
+  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
 
   // emits the column (field) as well as the order
   @Output() sortByChange = new EventEmitter<[string, 'asc' | 'desc']>()
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+  @Output() deleteRecord = new EventEmitter<CatalogRecord>()
   @Output() recordsSelectedChange = new EventEmitter<
     [CatalogRecord[], boolean]
   >()
@@ -56,17 +63,15 @@ export class ResultsTableComponent {
     })
   }
 
-  getStatus(isPublishedToAll: boolean | unknown) {
-    return isPublishedToAll ? 'published' : 'not published'
-  }
-
   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))
@@ -89,6 +94,14 @@ export class ResultsTableComponent {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicate(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
+  handleDelete(item: unknown) {
+    this.deleteRecord.emit(item as CatalogRecord)
+  }
+
   setSortBy(col: string, order: 'asc' | 'desc') {
     this.sortByChange.emit([col, order])
   }

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

@@ -1,5 +1,6 @@
 export * from './lib/ui-widgets.module'
 export * from './lib/progress-bar/progress-bar.component'
+export * from './lib/popover/popover.component'
 export * from './lib/loading-mask/loading-mask.component'
 export * from './lib/color-scale/color-scale.component'
 export * from './lib/popup-alert/popup-alert.component'

package/src/libs/ui/widgets/src/lib/popover/popover.component.html

@@ -0,0 +1,3 @@
+<span #popoverContent>
+  <ng-content></ng-content>
+</span>