geonetwork-ui 2.4.0-dev.e8fc61cb → 2.4.0-dev.f5019723

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -1,12 +1,26 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { MapConfig } from '../../../../../../libs/util/app-config/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  InjectionToken,
+  Input,
+  Optional,
+} from '@angular/core'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
 
 marker('externalviewer.dataset.unnamed')
 
+export const EXTERNAL_VIEWER_URL_TEMPLATE = new InjectionToken<string>(
+  'externalViewerUrlTemplate'
+)
+export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
+  'externalViewerOpenNewTab',
+  { factory: () => false }
+)
+
 @Component({
   selector: 'gn-ui-external-viewer-button',
   templateUrl: './external-viewer-button.component.html',
@@ -14,17 +28,10 @@ marker('externalviewer.dataset.unnamed')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExternalViewerButtonComponent {
-  @Input() link: DatasetDistribution
-  @Input() mapConfig: MapConfig
+  @Input() link: DatasetOnlineResource
 
   get externalViewer() {
-    if (this.link && this.mapConfig) {
-      return (
-        !!this.mapConfig.EXTERNAL_VIEWER_URL_TEMPLATE &&
-        !!this.supportedLinkLayerType
-      )
-    }
-    return false
+    return !!this.urlTemplate && !!this.supportedLinkLayerType
   }
 
   get supportedLinkLayerType() {
@@ -45,10 +52,17 @@ export class ExternalViewerButtonComponent {
     return null
   }
 
-  constructor(private translateService: TranslateService) {}
+  constructor(
+    private translateService: TranslateService,
+    @Inject(EXTERNAL_VIEWER_URL_TEMPLATE)
+    @Optional()
+    private urlTemplate: string,
+    @Inject(EXTERNAL_VIEWER_OPEN_NEW_TAB)
+    private openinNewTab: boolean
+  ) {}
 
   openInExternalViewer() {
-    const templateUrl = this.mapConfig.EXTERNAL_VIEWER_URL_TEMPLATE
+    const templateUrl = this.urlTemplate
     const layerName = this.link.name
       ? this.link.name
       : this.translateService.instant('externalviewer.dataset.unnamed')
@@ -59,11 +73,6 @@ export class ExternalViewerButtonComponent {
         `${encodeURIComponent(this.link.url.toString())}`
       )
       .replace('${service_type}', `${this.supportedLinkLayerType}`)
-    window
-      .open(
-        url,
-        this.mapConfig.EXTERNAL_VIEWER_OPEN_NEW_TAB ? '_blank' : '_self'
-      )
-      .focus()
+    window.open(url, this.openinNewTab ? '_blank' : '_self').focus()
   }
 }

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -1,10 +1,16 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { UiMapModule } from '../../../../../libs/ui/map/src'
+import {
+  FeatureDetailComponent,
+  MapContainerComponent,
+} from '../../../../../libs/ui/map/src'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
-import { FeatureMapModule } from '../../../../../libs/feature/map/src'
+import {
+  FeatureMapModule,
+  MapStateContainerComponent,
+} from '../../../../../libs/feature/map/src'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { MdViewFacade } from './state'
@@ -43,7 +49,6 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     UiLayoutModule,
     FeatureMapModule,
     FeatureCatalogModule,
-    UiMapModule,
     UiInputsModule,
     UiElementsModule,
     MatTabsModule,
@@ -53,6 +58,9 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     TableComponent,
     FeatureDatavizModule,
     PopupAlertComponent,
+    FeatureDetailComponent,
+    MapStateContainerComponent,
+    MapContainerComponent,
   ],
   providers: [MdViewFacade],
   exports: [

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -10,17 +10,17 @@
     <gn-ui-external-viewer-button
       class="shrink-0 py-1 place-self-end"
       [link]="selectedLink$ | async"
-      [mapConfig]="mapConfig"
     >
     </gn-ui-external-viewer-button>
   </div>
   <div
     class="relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden"
   >
-    <gn-ui-map-context
+    <gn-ui-map-container
+      #mapContainer
       [context]="mapContext$ | async"
-      [mapConfig]="mapConfig"
-    ></gn-ui-map-context>
+      (featuresClick)="onMapFeatureSelect($event)"
+    ></gn-ui-map-container>
     <div
       class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
       [class.hidden]="!selection"

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -1,31 +1,19 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
-  OnInit,
+  ViewChild,
 } from '@angular/core'
-import {
-  FeatureInfoService,
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapManagerService,
-  MapStyleService,
-  MapUtilsService,
-} from '../../../../../../libs/feature/map/src'
-import { getOptionalMapConfig, MapConfig } from '../../../../../../libs/util/app-config/src'
+import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { getLinkLabel } from '../../../../../../libs/util/shared/src'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
-import { StyleLike } from 'ol/style/Style'
 import {
   BehaviorSubject,
   combineLatest,
   from,
   Observable,
   of,
-  Subscription,
+  startWith,
   throwError,
   withLatestFrom,
 } from 'rxjs'
@@ -34,13 +22,22 @@ import {
   distinctUntilChanged,
   finalize,
   map,
-  startWith,
   switchMap,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  createViewFromLayer,
+  MapContext,
+  MapContextLayer,
+} from '@geospatial-sdk/core'
+import {
+  MapContainerComponent,
+  prioritizePageScroll,
+} from '../../../../../../libs/ui/map/src'
+import { Feature } from 'geojson'
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -48,11 +45,10 @@ import { DatasetDistribution } from '../../../../../../libs/common/domain/src/li
   styleUrls: ['./map-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MapViewComponent implements OnInit, OnDestroy {
-  mapConfig: MapConfig = getOptionalMapConfig()
-  selection: Feature<Geometry>
-  private subscription = new Subscription()
-  private selectionStyle: StyleLike
+export class MapViewComponent implements AfterViewInit {
+  @ViewChild('mapContainer') mapContainer: MapContainerComponent
+
+  selection: Feature
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,
@@ -102,93 +98,70 @@ export class MapViewComponent implements OnInit, OnDestroy {
     })
   )
 
-  mapContext$ = this.currentLayers$.pipe(
+  mapContext$: Observable<MapContext> = this.currentLayers$.pipe(
     switchMap((layers) =>
-      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
-        catchError(() => {
-          this.error = 'The layer has no extent'
-          return of(undefined)
-        }),
-        map(
-          (extent) =>
-            ({
-              layers,
-              view: {
-                extent,
-              },
-            } as MapContextModel)
-        ),
-        tap((res) => {
+      from(createViewFromLayer(layers[0])).pipe(
+        catchError(() => of(null)), // could not zoom on the layer: use the record extent
+        map((view) => ({
+          layers,
+          view,
+        })),
+        tap(() => {
           this.resetSelection()
         })
       )
     ),
     startWith({
       layers: [],
-      view: {},
-    } as MapContextModel),
+      view: null,
+    }),
     withLatestFrom(this.mdViewFacade.metadata$),
     map(([context, metadata]) => {
-      if (context.view.extent) return context
+      if (context.view) return context
       const extent = this.mapUtils.getRecordExtent(metadata)
+      const view = extent ? { extent } : null
       return {
         ...context,
-        view: {
-          ...context.view,
-          extent,
-        },
+        view,
       }
     })
   )
 
   constructor(
     private mdViewFacade: MdViewFacade,
-    private mapManager: MapManagerService,
     private mapUtils: MapUtilsService,
     private dataService: DataService,
-    private featureInfo: FeatureInfoService,
-    private changeRef: ChangeDetectorRef,
-    private styleService: MapStyleService
+    private changeRef: ChangeDetectorRef
   ) {}
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe()
-  }
-
-  ngOnInit(): void {
-    this.mapUtils.prioritizePageScroll(this.mapManager.map.getInteractions())
-    this.selectionStyle = this.styleService.styles.defaultHL
-    this.featureInfo.handleFeatureInfo()
-    this.subscription.add(
-      this.featureInfo.features$.subscribe((features) => {
-        this.onMapFeatureSelect(features)
-      })
-    )
+  async ngAfterViewInit() {
+    const map = await this.mapContainer.openlayersMap
+    prioritizePageScroll(map.getInteractions())
   }
 
-  onMapFeatureSelect(features: Feature<Geometry>[]): void {
+  onMapFeatureSelect(features: Feature[]): void {
     this.resetSelection()
     this.selection = features?.length > 0 && features[0]
     if (this.selection) {
-      this.selection.setStyle(this.selectionStyle)
+      // FIXME: restore styling of selected feature
+      // this.selection.setStyle(this.selectionStyle)
     }
     this.changeRef.detectChanges()
   }
 
   resetSelection(): void {
     if (this.selection) {
-      this.selection.setStyle(null)
+      // FIXME: restore styling of selected feature
+      // this.selection.setStyle(null)
     }
     this.selection = null
   }
 
-  getLayerFromLink(
-    link: DatasetDistribution
-  ): Observable<MapContextLayerModel> {
+  getLayerFromLink(link: DatasetOnlineResource): Observable<MapContextLayer> {
     if (link.type === 'service' && link.accessServiceProtocol === 'wms') {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMS,
+        type: 'wms',
         name: link.name,
       })
     } else if (
@@ -197,7 +170,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
     ) {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMTS,
+        type: 'wmts',
         name: link.name,
       })
     } else if (
@@ -209,7 +182,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
     ) {
       return this.dataService.readAsGeoJson(link).pipe(
         map((data) => ({
-          type: MapContextLayerTypeEnum.GEOJSON,
+          type: 'geojson',
           data,
         }))
       )

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -1,6 +1,14 @@
 import { Injectable } from '@angular/core'
 import { select, Store } from '@ngrx/store'
-import { defaultIfEmpty, filter, map, mergeMap, scan } from 'rxjs/operators'
+import {
+  catchError,
+  defaultIfEmpty,
+  filter,
+  map,
+  mergeMap,
+  switchMap,
+  toArray,
+} from 'rxjs/operators'
 import * as MdViewActions from './mdview.actions'
 import * as MdViewSelectors from './mdview.selectors'
 import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
@@ -55,7 +63,11 @@ export class MdViewFacade {
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 
   allLinks$ = this.metadata$.pipe(
-    map((record) => ('distributions' in record ? record.distributions : []))
+    map((record) =>
+      record.kind === 'dataset' && 'onlineResources' in record
+        ? record.onlineResources
+        : []
+    )
   )
 
   apiLinks$ = this.allLinks$.pipe(
@@ -95,36 +107,39 @@ export class MdViewFacade {
   )
 
   geoDataLinksWithGeometry$ = this.allLinks$.pipe(
-    mergeMap((links) => {
-      return from(links)
-    }),
-    mergeMap((link) => {
-      if (this.linkClassifier.hasUsage(link, LinkUsage.GEODATA)) {
-        if (
-          link.type === 'service' &&
-          link.accessServiceProtocol === 'ogcFeatures'
-        ) {
-          return from(this.dataService.getItemsFromOgcApi(link.url.href)).pipe(
-            map((collectionRecords: OgcApiRecord) => {
-              return collectionRecords && collectionRecords.geometry
-                ? link
-                : null
-            }),
-            defaultIfEmpty(null)
-          )
-        } else {
-          return of(link)
-        }
-      } else {
-        return of(null)
-      }
-    }),
-    scan((acc, val) => {
-      if (val !== null && !acc.includes(val)) {
-        acc.push(val)
-      }
-      return acc
-    }, [])
+    switchMap((links) =>
+      from(links).pipe(
+        mergeMap((link) => {
+          if (this.linkClassifier.hasUsage(link, LinkUsage.GEODATA)) {
+            if (
+              link.type === 'service' &&
+              link.accessServiceProtocol === 'ogcFeatures'
+            ) {
+              return from(
+                this.dataService.getItemsFromOgcApi(link.url.href)
+              ).pipe(
+                map((collectionRecords: OgcApiRecord) => {
+                  return collectionRecords && collectionRecords.geometry
+                    ? link
+                    : null
+                }),
+                defaultIfEmpty(null),
+                catchError((e) => {
+                  console.error(e)
+                  return of(null)
+                })
+              )
+            } else {
+              return of(link)
+            }
+          } else {
+            return of(null)
+          }
+        }),
+        toArray(),
+        map((links) => links.filter((link) => link !== null))
+      )
+    )
   )
 
   landingPageLinks$ = this.metadata$.pipe(

package/src/libs/feature/router/src/lib/default/constants.ts

@@ -2,6 +2,7 @@ export const ROUTER_STATE_KEY = 'router'
 
 export const ROUTER_ROUTE_SEARCH = 'search'
 export const ROUTER_ROUTE_DATASET = 'dataset'
+export const ROUTER_ROUTE_ORGANIZATION = 'organization'
 
 export enum ROUTE_PARAMS {
   SORT = '_sort',

package/src/libs/feature/router/src/lib/default/router.config.ts

@@ -4,6 +4,7 @@ export interface RouterConfigModel {
   searchStateId: string
   searchRouteComponent: Type<any>
   recordRouteComponent: Type<any>
+  organizationRouteComponent: Type<any>
 }
 
 export const ROUTER_CONFIG = new InjectionToken<RouterConfigModel>(

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -1,5 +1,9 @@
 import { Inject, Injectable } from '@angular/core'
-import { ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH } from '.'
+import {
+  ROUTER_ROUTE_DATASET,
+  ROUTER_ROUTE_ORGANIZATION,
+  ROUTER_ROUTE_SEARCH,
+} from '.'
 import { Router, Routes } from '@angular/router'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
 
@@ -30,10 +34,18 @@ export class RouterService {
         path: `${ROUTER_ROUTE_DATASET}/:metadataUuid`,
         component: this.routerConfig.recordRouteComponent,
       },
+      {
+        path: `${ROUTER_ROUTE_ORGANIZATION}/:name`,
+        component: this.routerConfig.organizationRouteComponent,
+      },
     ]
   }
 
   getSearchRoute(): string {
     return ROUTER_ROUTE_SEARCH
   }
+
+  getOrganizationPageRoute(): string {
+    return ROUTER_ROUTE_ORGANIZATION
+  }
 }

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -51,6 +51,14 @@ export class RouterFacade {
       })
   }
 
+  goToOrganization(organizationName: string) {
+    const path = `${this.routerService.getOrganizationPageRoute()}/${organizationName}`
+    this.go({
+      path,
+      queryParamsHandling: '',
+    })
+  }
+
   updateSearch(query?: SearchRouteParams) {
     this.go({
       path: this.routerService.getSearchRoute(),

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -6,6 +6,7 @@
   (inputSubmitted)="handleInputSubmission($event)"
   (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
-  [clearOnSelection]="true"
+  [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
+  [allowSubmit]="true"
 ></gn-ui-autocomplete>

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

@@ -1,9 +1,15 @@
 <gn-ui-results-table
-  [records]="records$ | async"
-  [recordHasDraft]="hasDraft"
+  *ngIf="searchFacade.results$ | async as records"
+  [records]="records"
+  [hasDraft]="hasDraft"
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
+  [isUnsavedDraft]="isUnsavedDraft"
+  [canDelete]="canDelete"
+  [canDuplicate]="canDuplicate"
   (recordClick)="handleRecordClick($event)"
+  (duplicateRecord)="handleDuplicateRecord($event)"
+  (deleteRecord)="handleDeleteRecord($event)"
   (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
   (sortByChange)="handleSortByChange($event[0], $event[1])"
 ></gn-ui-results-table>

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

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
 import { SelectionService } from '../../../../../../libs/api/repository/src'
@@ -6,6 +12,9 @@ import { SearchService } from '../utils/service/search.service'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
 import { CommonModule } from '@angular/common'
+import { Subscription } from 'rxjs'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-results-table-container',
@@ -14,27 +23,79 @@ import { CommonModule } from '@angular/common'
   standalone: true,
   imports: [CommonModule, ResultsTableComponent],
 })
-export class ResultsTableContainerComponent {
+export class ResultsTableContainerComponent implements OnDestroy {
+  @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
+  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
+
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+
+  subscription = new Subscription()
 
-  records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
   sortBy$ = this.searchFacade.sortBy$
 
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  isUnsavedDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.isRecordNotYetSaved(record.uniqueIdentifier)
+
   constructor(
-    private searchFacade: SearchFacade,
+    protected searchFacade: SearchFacade,
     private searchService: SearchService,
     private selectionService: SelectionService,
-    private recordsRepository: RecordsRepositoryInterface
+    private recordsRepository: RecordsRepositoryInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
   handleRecordClick(item: unknown) {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicateRecord(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
+  async handleDeleteRecord(item: unknown) {
+    const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    this.subscription.add(
+      this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
+        next: () => {
+          this.recordsRepository.clearRecordDraft(uniqueIdentifier)
+          this.searchFacade.requestNewResults()
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.deleteSuccess.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteSuccess.body'
+              )}`,
+            },
+            2500
+          )
+        },
+        error: (error) => {
+          this.notificationsService.showNotification({
+            type: 'error',
+            title: this.translateService.instant(
+              'editor.record.deleteError.title'
+            ),
+            text: `${this.translateService.instant(
+              'editor.record.deleteError.body'
+            )} ${error}`,
+            closeMessage: this.translateService.instant(
+              'editor.record.deleteError.closeMessage'
+            ),
+          })
+        },
+      })
+    )
+  }
+
   handleSortByChange(col: string, order: 'asc' | 'desc') {
     this.searchService.setSortBy([order, col])
   }
@@ -46,4 +107,8 @@ export class ResultsTableContainerComponent {
       this.selectionService.selectRecords(records)
     }
   }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
 }

package/src/libs/feature/search/src/lib/state/fixtures/search-state.fixtures.ts

@@ -1,4 +1,4 @@
-export const SEARCH_STATE_FILTERS_FIXTURE = {
+export const searchStateFiltersFixture = () => ({
   recursiveTerms: {
     resourceType: {
       service: {
@@ -26,4 +26,4 @@ export const SEARCH_STATE_FILTERS_FIXTURE = {
       availableInViewService: '+linkProtocol:/OGC:WMS.*/',
     },
   },
-}
+})