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

package/src/libs/feature/map/src/lib/map-context/map-context.fixtures.ts

@@ -1,4 +1,4 @@
-import { FEATURE_COLLECTION_POLYGON_FIXTURE_4326 } from '../../../../../../libs/common/fixtures/src'
+import { polygonFeatureCollectionFixture } from '../../../../../../libs/common/fixtures/src'
 import { Extent } from 'ol/extent'
 import {
   MapContextLayerGeojsonModel,
@@ -8,44 +8,48 @@ import {
   MapContextViewModel,
 } from '../map-context/map-context.model'
 
-export const MAP_CTX_LAYER_XYZ_FIXTURE: MapContextLayerModel = {
+export const mapCtxLayerXyzFixture = (): MapContextLayerModel => ({
   type: MapContextLayerTypeEnum.XYZ,
   url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-}
-export const MAP_CTX_LAYER_WMS_FIXTURE: MapContextLayerModel = {
+})
+
+export const mapCtxLayerWmsFixture = (): MapContextLayerModel => ({
   type: MapContextLayerTypeEnum.WMS,
   url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WMS',
   name: 'commune_actuelle_3857',
-}
-export const MAP_CTX_LAYER_WFS_FIXTURE: MapContextLayerModel = {
+})
+
+export const mapCtxLayerWfsFixture = (): MapContextLayerModel => ({
   type: MapContextLayerTypeEnum.WFS,
   url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WFS&VERSION=1.1.0',
   name: 'ms:commune_actuelle_3857',
-}
-export const MAP_CTX_LAYER_GEOJSON_FIXTURE: MapContextLayerGeojsonModel = {
+})
+
+export const mapCtxLayerGeojsonFixture = (): MapContextLayerGeojsonModel => ({
   type: MapContextLayerTypeEnum.GEOJSON,
-  data: FEATURE_COLLECTION_POLYGON_FIXTURE_4326,
-}
-export const MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE: MapContextLayerGeojsonModel =
-  {
+  data: polygonFeatureCollectionFixture(),
+})
+
+export const mapCtxLayerGeojsonRemoteFixture =
+  (): MapContextLayerGeojsonModel => ({
     type: MapContextLayerTypeEnum.GEOJSON,
     url: 'https://my.host.com/data/regions.json',
-  }
+  })
 
-export const MAP_CTX_VIEW_FIXTURE: MapContextViewModel = {
+export const mapCtxViewFixture = (): MapContextViewModel => ({
   center: [7.75, 48.6],
   zoom: 9,
-}
+})
 
-export const MAP_CTX_FIXTURE: MapContextModel = {
+export const mapCtxFixture = (): MapContextModel => ({
   layers: [
-    MAP_CTX_LAYER_XYZ_FIXTURE,
-    MAP_CTX_LAYER_WMS_FIXTURE,
-    MAP_CTX_LAYER_GEOJSON_FIXTURE,
+    mapCtxLayerXyzFixture(),
+    mapCtxLayerWmsFixture(),
+    mapCtxLayerGeojsonFixture(),
   ],
-  view: MAP_CTX_VIEW_FIXTURE,
-}
+  view: mapCtxViewFixture(),
+})
 
-export const MAP_CTX_EXTENT_FIXTURE: Extent = [
+export const mapCtxExtentFixture = (): Extent => [
   171083.69713494915, 6246047.945419401, 476970.39956295764, 6631079.362882684,
 ]

package/src/libs/feature/map/src/lib/style/map-style.fixtures.ts

@@ -4,42 +4,44 @@ const colorPrimary = 'blue'
 const colorSecondary = 'red'
 const colorStroke = 'white'
 
-export const DEFAULT_STYLE_FIXTURE = new Style({
-  image: new Circle({
+export const defaultMapStyleFixture = (): Style =>
+  new Style({
+    image: new Circle({
+      fill: new Fill({
+        color: colorPrimary,
+      }),
+      stroke: new Stroke({
+        color: colorStroke,
+        width: 2,
+      }),
+      radius: 5,
+    }),
     fill: new Fill({
-      color: colorPrimary,
+      color: 'rgba(0,0,255,0.25)',
     }),
     stroke: new Stroke({
       color: colorStroke,
       width: 2,
     }),
-    radius: 5,
-  }),
-  fill: new Fill({
-    color: 'rgba(0,0,255,0.25)',
-  }),
-  stroke: new Stroke({
-    color: colorStroke,
-    width: 2,
-  }),
-})
+  })
 
-export const DEFAULT_STYLE_HL_FIXTURE = new Style({
-  image: new Circle({
+export const defaultMapStyleHlFixture = (): Style =>
+  new Style({
+    image: new Circle({
+      fill: new Fill({
+        color: colorSecondary,
+      }),
+      stroke: new Stroke({
+        color: colorStroke,
+        width: 3,
+      }),
+      radius: 6,
+    }),
     fill: new Fill({
-      color: colorSecondary,
+      color: 'rgba(255,0,0,0.25)',
     }),
     stroke: new Stroke({
-      color: colorStroke,
+      color: colorSecondary,
       width: 3,
     }),
-    radius: 6,
-  }),
-  fill: new Fill({
-    color: 'rgba(255,0,0,0.25)',
-  }),
-  stroke: new Stroke({
-    color: colorSecondary,
-    width: 3,
-  }),
-})
+  })

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -32,7 +32,7 @@ import { ProxyService } from '../../../../../../libs/util/shared/src'
 import { WmsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
 import { LONLAT_CRS_CODES } from '../constant/projections'
 import { fromEPSGCode, register } from 'ol/proj/proj4'
-import proj4 from 'proj4/dist/proj4'
+import proj4 from 'proj4'
 import { defaults as defaultControls } from 'ol/control/defaults'
 
 const FEATURE_PROJECTION = 'EPSG:3857'
@@ -220,11 +220,15 @@ export class MapUtilsService {
     if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
       return null
     }
-    // transform an array of geojson geometries into a bbox
+    // extend all the spatial extents into an including bbox
     const totalExtent = record.spatialExtents.reduce(
       (prev, curr) => {
-        const geom = GEOJSON.readGeometry(curr.geometry)
-        return extend(prev, geom.getExtent())
+        if ('bbox' in curr) return extend(prev, curr.bbox)
+        else if ('geometry' in curr) {
+          const geom = GEOJSON.readGeometry(curr.geometry)
+          return extend(prev, geom.getExtent())
+        }
+        return prev
       },
       [Infinity, Infinity, -Infinity, -Infinity]
     )

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

@@ -3,10 +3,11 @@ import {
   Component,
   Inject,
   InjectionToken,
+  Input,
   Optional,
 } from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
-import { combineLatest, map } from 'rxjs'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { MdViewFacade } from '../state'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
 
@@ -21,29 +22,45 @@ export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewPermalinkComponent {
+  viewType$ = new BehaviorSubject<string>('map')
+  @Input()
+  set viewType(value: string) {
+    this.viewType$.next(value)
+  }
+
   permalinkUrl$ = combineLatest([
+    this.viewType$,
     this.facade.chartConfig$,
     this.facade.metadata$,
   ]).pipe(
-    map(([config, metadata]) => {
-      if (config) {
-        const { aggregation, xProperty, yProperty, chartType } = config
-        const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
-        url.searchParams.set('v', `${this.version}`)
-        url.searchParams.append('e', `gn-dataset-view-chart`)
-        url.searchParams.append('a', `api-url=${this.config.basePath}`)
-        url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
-        url.searchParams.append('a', `primary-color=#0f4395`)
-        url.searchParams.append('a', `secondary-color=#8bc832`)
-        url.searchParams.append('a', `main-color=#555`)
-        url.searchParams.append('a', `background-color=#fdfbff`)
-        url.searchParams.append('a', `aggregation=${aggregation}`)
-        url.searchParams.append('a', `x-property=${xProperty}`)
-        url.searchParams.append('a', `y-property=${yProperty}`)
-        url.searchParams.append('a', `chart-type=${chartType}`)
-        return url.toString()
+    map(([viewType, config, metadata]) => {
+      const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
+      url.searchParams.set('v', `${this.version}`)
+      if (viewType === 'chart') {
+        if (config) {
+          const { aggregation, xProperty, yProperty, chartType } = config
+          url.searchParams.append('e', `gn-dataset-view-chart`)
+          url.searchParams.append('a', `aggregation=${aggregation}`)
+          url.searchParams.append('a', `x-property=${xProperty}`)
+          url.searchParams.append('a', `y-property=${yProperty}`)
+          url.searchParams.append('a', `chart-type=${chartType}`)
+        } else {
+          return ''
+        }
+      } else if (viewType === 'table') {
+        // table
+        url.searchParams.append('e', `gn-dataset-view-table`)
+      } else {
+        // map
+        url.searchParams.append('e', `gn-dataset-view-map`)
       }
-      return ''
+      url.searchParams.append('a', `api-url=${this.config.basePath}`)
+      url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
+      url.searchParams.append('a', `primary-color=#0f4395`)
+      url.searchParams.append('a', `secondary-color=#8bc832`)
+      url.searchParams.append('a', `main-color=#555`)
+      url.searchParams.append('a', `background-color=#fdfbff`)
+      return url.toString()
     })
   )
 

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

@@ -10,7 +10,9 @@
       <ng-template mat-tab-label>
         <span class="tab-header-label-gray" translate>share.tab.permalink</span>
       </ng-template>
-      <gn-ui-data-view-permalink></gn-ui-data-view-permalink>
+      <gn-ui-data-view-permalink
+        [viewType]="viewType"
+      ></gn-ui-data-view-permalink>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
@@ -24,7 +26,9 @@
           >share.tab.webComponent</span
         >
       </ng-template>
-      <gn-ui-data-view-web-component></gn-ui-data-view-web-component>
+      <gn-ui-data-view-web-component
+        [viewType]="viewType"
+      ></gn-ui-data-view-web-component>
     </mat-tab>
   </mat-tab-group>
 </div>

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

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   Inject,
+  Input,
   Optional,
 } from '@angular/core'
 import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-permalink.component'
@@ -13,6 +14,16 @@ import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-per
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewShareComponent {
+  private _viewType: string
+
+  @Input()
+  set viewType(value: string) {
+    this._viewType = value
+  }
+
+  get viewType(): string {
+    return this._viewType
+  }
   constructor(
     @Optional()
     @Inject(WEB_COMPONENT_EMBEDDER_URL)

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

@@ -1,7 +1,12 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+} from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
 import { MdViewFacade } from '../state'
-import { combineLatest, map } from 'rxjs'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
 
 @Component({
@@ -11,35 +16,77 @@ import { GN_UI_VERSION } from '../gn-ui-version.token'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewWebComponentComponent {
+  viewType$ = new BehaviorSubject<string>('map')
+  @Input()
+  set viewType(value: string) {
+    this.viewType$.next(value)
+  }
   webComponentHtml$ = combineLatest(
+    this.viewType$,
     this.facade.chartConfig$,
     this.facade.metadata$
   ).pipe(
-    map(([config, metadata]) => {
-      if (config) {
-        const { aggregation, xProperty, yProperty, chartType } = config
+    map(([viewType, config, metadata]) => {
+      if (viewType === 'chart') {
+        if (config) {
+          const { aggregation, xProperty, yProperty, chartType } = config
+          return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+            this.version
+          }/gn-wc.js"></script>
+  <gn-dataset-view-chart
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          aggregation="${aggregation}"
+          x-property="${xProperty}"
+          y-property="${yProperty}"
+          chart-type="${chartType}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-chart>`
+        }
+        return ''
+      } else if (viewType === 'table') {
         return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
           this.version
         }/gn-wc.js"></script>
-<gn-dataset-view-chart
+  <gn-dataset-view-table
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-table>`
+      } else {
+        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+          this.version
+        }/gn-wc.js"></script>
+<gn-dataset-view-map
         api-url="${new URL(
           this.config.basePath,
           window.location.origin
         ).toString()}"
         dataset-id="${metadata.uniqueIdentifier}"
-        aggregation="${aggregation}"
-        x-property="${xProperty}"
-        y-property="${yProperty}"
-        chart-type="${chartType}"
         primary-color="#0f4395"
         secondary-color="#8bc832"
         main-color="#555"
         background-color="#fdfbff"
         main-font="'Inter', sans-serif"
         title-font="'DM Serif Display', serif"
-></gn-dataset-view-chart>`
+></gn-dataset-view-map>`
       }
-      return ''
     })
   )
 

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

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

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

@@ -1,9 +1,12 @@
 <gn-ui-results-table
   [records]="records$ | async"
-  [recordHasDraft]="hasDraft"
+  [hasDraft]="hasDraft"
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
+  [isUnsavedDraft]="isUnsavedDraft"
   (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,8 +23,11 @@ import { CommonModule } from '@angular/common'
   standalone: true,
   imports: [CommonModule, ResultsTableComponent],
 })
-export class ResultsTableContainerComponent {
+export class ResultsTableContainerComponent implements OnDestroy {
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+
+  subscription = new Subscription()
 
   records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
@@ -24,17 +36,64 @@ export class ResultsTableContainerComponent {
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  isUnsavedDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.isRecordNotYetSaved(record.uniqueIdentifier)
+
   constructor(
     private 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 +105,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.*/',
     },
   },
-}
+})

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -8,6 +8,7 @@ import {
   Paginate,
   RequestMoreOnAggregation,
   RequestMoreResults,
+  RequestNewResults,
   SetConfigAggregations,
   SetConfigFilters,
   SetConfigRequestFields,
@@ -151,6 +152,11 @@ export class SearchFacade {
     return this
   }
 
+  requestNewResults(): SearchFacade {
+    this.store.dispatch(new RequestNewResults(this.searchId))
+    return this
+  }
+
   requestMoreOnAggregation(key: string, increment: number): SearchFacade {
     this.store.dispatch(
       new RequestMoreOnAggregation(key, increment, this.searchId)

package/src/libs/ui/dataviz/src/lib/chart/chart.fixtures.ts

@@ -1,4 +1,4 @@
-export const CHART_ITEM_FIXTURE = [
+export const charItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -19,7 +19,7 @@ export const CHART_ITEM_FIXTURE = [
   },
 ]
 
-export const CHART_ITEM_FIXTURE_HAB = [
+export const chartItemHabFixture = () => [
   {
     name: 'France',
     id: '1',

package/src/libs/ui/dataviz/src/lib/table/table.fixtures.ts

@@ -1,4 +1,4 @@
-export const TABLE_ITEM_FIXTURE = [
+export const tableItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -16,7 +16,7 @@ export const TABLE_ITEM_FIXTURE = [
   },
 ]
 
-export const TABLE_ITEM_FIXTURE_HAB = [
+export const someHabTableItemFixture = () => [
   {
     name: 'France',
     id: '1',

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

@@ -1,5 +1,6 @@
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.component'
+export * from './lib/confirmation-dialog/confirmation-dialog.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'