geonetwork-ui 2.4.0-dev.656babc7 → 2.4.0-dev.66a33793

package/src/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts

@@ -1,36 +1,21 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Inject,
   Input,
   OnDestroy,
   OnInit,
   ViewChild,
 } from '@angular/core'
-import {
-  FEATURE_MAP_OPTIONS,
-  FeatureInfoService,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapManagerService,
-  MapOptionsModel,
-} from '../../../../../../libs/feature/map/src'
 import {
   TableComponent,
   TableItemId,
   TableItemModel,
 } from '../../../../../../libs/ui/dataviz/src'
-import type { FeatureCollection } from 'geojson'
-import Map from 'ol/Map'
-import View from 'ol/View'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import Style from 'ol/style/Style'
+import type { Feature, FeatureCollection } from 'geojson'
 import { Subscription } from 'rxjs'
+import { MapContext } from '@geospatial-sdk/core'
+import { MapContainerComponent } from '../../../../../../libs/ui/map/src'
 
 @Component({
   selector: 'gn-ui-geo-table-view',
@@ -38,50 +23,26 @@ import { Subscription } from 'rxjs'
   styleUrls: ['./geo-table-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class GeoTableViewComponent implements OnInit, OnDestroy {
   @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] }
-  @ViewChild(TableComponent) uiTable: TableComponent
-
-  private map: Map
-  private view: View
-  private vectorLayer: VectorLayer<VectorSource<Feature<Geometry>>>
-  private vectorSource: VectorSource<Feature<Geometry>>
-  private features: Feature<Geometry>[]
+  @ViewChild('table') uiTable: TableComponent
+  @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   tableData: TableItemModel[]
-  mapContext: MapContextModel
+  mapContext: MapContext
   selectionId: TableItemId
-  selection: Feature<Geometry>
+  selection: Feature
   private subscription = new Subscription()
 
-  constructor(
-    private manager: MapManagerService,
-    private featureInfo: FeatureInfoService,
-    private changeRef: ChangeDetectorRef,
-    @Inject(FEATURE_MAP_OPTIONS) private mapOptions: MapOptionsModel
-  ) {}
+  get features() {
+    return this.data.features
+  }
+
+  constructor(private changeRef: ChangeDetectorRef) {}
 
   ngOnInit(): void {
     this.tableData = this.geojsonToTableData(this.data)
     this.mapContext = this.initMapContext()
-    this.featureInfo.handleFeatureInfo()
-    this.subscription.add(
-      this.featureInfo.features$.subscribe((features) => {
-        this.onMapFeatureSelect(features)
-      })
-    )
-  }
-
-  ngAfterViewInit(): void {
-    const map = (this.map = this.manager.map)
-    this.view = map.getView()
-    this.vectorLayer = this.manager.map.getLayers().item(1) as VectorLayer<
-      VectorSource<Feature<Geometry>>
-    >
-    this.vectorLayer.setStyle(this.styleFn.bind(this))
-    this.vectorSource = this.vectorLayer.getSource()
-    this.features = this.vectorSource.getFeatures()
-    this.view.fit(this.vectorSource.getExtent())
   }
 
   onTableSelect(tableEntry: TableItemModel) {
@@ -93,12 +54,13 @@ export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  onMapFeatureSelect(features: Feature<Geometry>[]): void {
+  onMapFeatureSelect(features: Feature[]): void {
     this.selection = features?.length > 0 && features[0]
     if (this.selection) {
-      this.selectionId = this.selection.getId()
+      // FIXME: show styling for selection
+      this.selectionId = this.selection.id
       this.changeRef.detectChanges()
-      this.vectorLayer.changed()
+      // this.vectorLayer.changed()
       this.uiTable.scrollToItem(this.selectionId)
     }
   }
@@ -110,44 +72,42 @@ export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
     }))
   }
 
-  private initMapContext(): MapContextModel {
+  private initMapContext(): MapContext {
     return {
       layers: [
         {
-          type: MapContextLayerTypeEnum.XYZ,
+          type: 'xyz',
           url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         },
         {
-          type: MapContextLayerTypeEnum.GEOJSON,
+          type: 'geojson',
           data: this.data,
         },
       ],
+      view: {
+        center: [0, 0],
+        zoom: 2,
+      },
     }
   }
 
-  private animateToFeature(feature: Feature<Geometry>): void {
-    this.view.fit(feature.getGeometry().getExtent(), {
-      duration: 1000,
-      maxZoom: 11,
-    })
+  private animateToFeature(feature: Feature): void {
+    this.mapContext = {
+      ...this.mapContext,
+      view: {
+        geometry: feature.geometry,
+        maxZoom: 13,
+      },
+    }
+    // FIXME: animate the view
+    // this.view.fit(feature.getGeometry().getExtent(), {
+    //   duration: 1000,
+    //   maxZoom: 11,
+    // })
   }
 
   private getFeatureFromId(id: TableItemId) {
-    return this.features.find((feature) => feature.getId() === id)
-  }
-
-  private styleFn(
-    feature: Feature<Geometry>,
-    resolution: number
-  ): void | Style | Style[] {
-    if (
-      this.selectionId !== undefined &&
-      this.selectionId === feature.getId()
-    ) {
-      return this.mapOptions.hlStyle(feature, resolution)
-    } else {
-      return this.mapOptions.defaultStyle(feature, resolution)
-    }
+    return this.features.find((feature) => feature.id === id)
   }
 
   ngOnDestroy(): void {

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -24,7 +24,7 @@ import type { FeatureCollection } from 'geojson'
 import { from, Observable, throwError } from 'rxjs'
 import { catchError, map, switchMap, tap } from 'rxjs/operators'
 import {
-  DatasetDistribution,
+  DatasetOnlineResource,
   DatasetServiceDistribution,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -135,7 +135,7 @@ export class DataService {
 
   getDownloadLinksFromWfs(
     wfsLink: DatasetServiceDistribution
-  ): Observable<DatasetDistribution[]> {
+  ): Observable<DatasetOnlineResource[]> {
     // Pour DL toutes les données
     return this.getDownloadUrlsFromWfs(
       wfsLink.url.toString(),
@@ -157,7 +157,7 @@ export class DataService {
 
   async getDownloadLinksFromOgcApiFeatures(
     ogcApiLink: DatasetServiceDistribution
-  ): Promise<DatasetDistribution[]> {
+  ): Promise<DatasetOnlineResource[]> {
     const collectionInfo = await this.getDownloadUrlsFromOgcApi(
       ogcApiLink.url.href
     )
@@ -199,7 +199,7 @@ export class DataService {
 
   getDownloadLinksFromEsriRest(
     esriRestLink: DatasetServiceDistribution
-  ): DatasetDistribution[] {
+  ): DatasetOnlineResource[] {
     return ['json', 'geojson'].map((format) => ({
       ...esriRestLink,
       url: new URL(
@@ -209,7 +209,7 @@ export class DataService {
     }))
   }
 
-  readAsGeoJson(link: DatasetDistribution): Observable<FeatureCollection> {
+  readAsGeoJson(link: DatasetOnlineResource): Observable<FeatureCollection> {
     return this.getDataset(link).pipe(
       switchMap((dataset) => dataset.selectAll().read()),
       map((features) => ({
@@ -219,7 +219,7 @@ export class DataService {
     )
   }
 
-  getDataset(link: DatasetDistribution): Observable<BaseReader> {
+  getDataset(link: DatasetOnlineResource): Observable<BaseReader> {
     if (link.type === 'service' && link.accessServiceProtocol === 'wfs') {
       return this.getDownloadUrlsFromWfs(link.url.toString(), link.name).pipe(
         switchMap((urls) => {

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.ts

@@ -11,7 +11,7 @@ import {
 import { DataItem, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
 import { TableItemModel } from '../../../../../../libs/ui/dataviz/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateService } from '@ngx-translate/core'
 
 @Component({
@@ -21,10 +21,10 @@ import { TranslateService } from '@ngx-translate/core'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableViewComponent {
-  @Input() set link(value: DatasetDistribution) {
+  @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
   }
-  private currentLink$ = new BehaviorSubject<DatasetDistribution>(null)
+  private currentLink$ = new BehaviorSubject<DatasetOnlineResource>(null)
 
   loading = false
   error = null
@@ -59,7 +59,7 @@ export class TableViewComponent {
     private translateService: TranslateService
   ) {}
 
-  fetchData(link: DatasetDistribution): Observable<DataItem[]> {
+  fetchData(link: DatasetOnlineResource): Observable<DataItem[]> {
     return this.dataService
       .getDataset(link)
       .pipe(switchMap((dataset) => dataset.read()))

package/src/libs/feature/editor/src/index.ts

@@ -5,6 +5,7 @@ export * from './lib/+state/editor.reducer'
 export * from './lib/+state/editor.actions'
 export * from './lib/feature-editor.module'
 export * from './lib/services/editor.service'
+export * from './lib/components/import-record/import-record.component'
 export * from './lib/components/record-form/record-form.component'
 export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'

package/src/libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -26,3 +26,12 @@ export const saveRecordFailure = createAction(
   '[Editor] Save record failure',
   props<{ error: SaveRecordError }>()
 )
+
+export const draftSaveSuccess = createAction('[Editor] Draft save success')
+
+export const undoRecordDraft = createAction('[Editor] Undo record draft')
+
+export const setCurrentPage = createAction(
+  '[Editor] Set current page',
+  props<{ page: number }>()
+)

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -5,7 +5,11 @@ import { catchError, map, switchMap } from 'rxjs/operators'
 import * as EditorActions from './editor.actions'
 import { EditorService } from '../services/editor.service'
 import { Store } from '@ngrx/store'
-import { selectRecord, selectRecordFieldsConfig } from './editor.selectors'
+import {
+  selectEditorConfig,
+  selectRecord,
+  selectRecordAlreadySavedOnce,
+} from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable()
@@ -20,28 +24,31 @@ export class EditorEffects {
       ofType(EditorActions.saveRecord),
       withLatestFrom(
         this.store.select(selectRecord),
-        this.store.select(selectRecordFieldsConfig)
+        this.store.select(selectEditorConfig),
+        this.store.select(selectRecordAlreadySavedOnce)
       ),
-      switchMap(([, record, fieldsConfig]) =>
-        this.editorService.saveRecord(record, fieldsConfig).pipe(
-          switchMap(([record, recordSource]) =>
-            of(
-              EditorActions.saveRecordSuccess(),
-              EditorActions.openRecord({
-                record,
-                alreadySavedOnce: true,
-                recordSource,
-              })
-            )
-          ),
-          catchError((error) =>
-            of(
-              EditorActions.saveRecordFailure({
-                error: error.message,
-              })
+      switchMap(([, record, fieldsConfig, alreadySavedOnce]) =>
+        this.editorService
+          .saveRecord(record, fieldsConfig, !alreadySavedOnce)
+          .pipe(
+            switchMap(([record, recordSource]) =>
+              of(
+                EditorActions.saveRecordSuccess(),
+                EditorActions.openRecord({
+                  record,
+                  alreadySavedOnce: true,
+                  recordSource,
+                })
+              )
+            ),
+            catchError((error) =>
+              of(
+                EditorActions.saveRecordFailure({
+                  error: error.message,
+                })
+              )
             )
           )
-        )
       )
     )
   )
@@ -53,15 +60,29 @@ export class EditorEffects {
     )
   )
 
-  saveRecordDraft$ = createEffect(
-    () =>
-      this.actions$.pipe(
-        ofType(EditorActions.updateRecordField),
-        debounceTime(1000),
-        withLatestFrom(this.store.select(selectRecord)),
-        switchMap(([, record]) => this.editorService.saveRecordAsDraft(record))
-      ),
-    { dispatch: false }
+  saveRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.updateRecordField),
+      debounceTime(1000),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.saveRecordAsDraft(record)),
+      map(() => EditorActions.draftSaveSuccess())
+    )
+  )
+
+  undoRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.undoRecordDraft),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.undoRecordDraft(record)),
+      map(([record, recordSource, alreadySavedOnce]) =>
+        EditorActions.openRecord({
+          record,
+          alreadySavedOnce,
+          recordSource,
+        })
+      )
+    )
   )
 
   checkHasChangesOnOpen$ = createEffect(() =>

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -25,7 +25,12 @@ export class EditorFacade {
   changedSinceSave$ = this.store.pipe(
     select(EditorSelectors.selectRecordChangedSinceSave)
   )
-  recordFields$ = this.store.pipe(select(EditorSelectors.selectRecordFields))
+  currentSections$ = this.store.pipe(
+    select(EditorSelectors.selectRecordSections)
+  )
+  draftSaveSuccess$ = this.actions$.pipe(ofType(EditorActions.draftSaveSuccess))
+  currentPage$ = this.store.pipe(select(EditorSelectors.selectCurrentPage))
+  editorConfig$ = this.store.pipe(select(EditorSelectors.selectEditorConfig))
 
   openRecord(
     record: CatalogRecord,
@@ -41,7 +46,15 @@ export class EditorFacade {
     this.store.dispatch(EditorActions.saveRecord())
   }
 
+  undoRecordDraft() {
+    this.store.dispatch(EditorActions.undoRecordDraft())
+  }
+
   updateRecordField(field: string, value: unknown) {
     this.store.dispatch(EditorActions.updateRecordField({ field, value }))
   }
+
+  setCurrentPage(page: number) {
+    this.store.dispatch(EditorActions.setCurrentPage({ page }))
+  }
 }

package/src/libs/feature/editor/src/lib/+state/editor.models.ts

@@ -1 +1,12 @@
+import { EditorField, EditorFieldValue, EditorSection } from '../models'
+
 export type SaveRecordError = string
+
+export interface EditorFieldWithValue {
+  config: EditorField
+  value: EditorFieldValue
+}
+
+export type EditorSectionWithValues = EditorSection & {
+  fieldsWithValues: EditorFieldWithValue[]
+}

package/src/libs/feature/editor/src/lib/+state/editor.reducer.ts

@@ -2,8 +2,8 @@ import { Action, createReducer, on } from '@ngrx/store'
 import * as EditorActions from './editor.actions'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SaveRecordError } from './editor.models'
-import { EditorFieldsConfig } from '../models/fields.model'
-import { DEFAULT_FIELDS } from '../fields.config'
+import { EditorConfig } from '../models'
+import { DEFAULT_CONFIGURATION } from '../fields.config'
 
 export const EDITOR_FEATURE_KEY = 'editor'
 
@@ -13,7 +13,7 @@ export const EDITOR_FEATURE_KEY = 'editor'
  * @property saving
  * @property saveError
  * @property changedSinceSave
- * @property fieldsConfig Configuration for the fields in the editor
+ * @property editorConfig Configuration for the fields in the editor
  */
 export interface EditorState {
   record: CatalogRecord | null
@@ -22,7 +22,8 @@ export interface EditorState {
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
-  fieldsConfig: EditorFieldsConfig
+  editorConfig: EditorConfig
+  currentPage: number
 }
 
 export interface EditorPartialState {
@@ -36,7 +37,8 @@ export const initialEditorState: EditorState = {
   saving: false,
   saveError: null,
   changedSinceSave: false,
-  fieldsConfig: DEFAULT_FIELDS,
+  editorConfig: DEFAULT_CONFIGURATION,
+  currentPage: 0,
 }
 
 const reducer = createReducer(
@@ -77,6 +79,10 @@ const reducer = createReducer(
   on(EditorActions.markRecordAsChanged, (state) => ({
     ...state,
     changedSinceSave: true,
+  })),
+  on(EditorActions.setCurrentPage, (state, { page }) => ({
+    ...state,
+    currentPage: page,
   }))
 )
 

package/src/libs/feature/editor/src/lib/+state/editor.selectors.ts

@@ -1,5 +1,6 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store'
 import { EDITOR_FEATURE_KEY, EditorState } from './editor.reducer'
+import { EditorSectionWithValues } from './editor.models'
 
 export const selectEditorState =
   createFeatureSelector<EditorState>(EDITOR_FEATURE_KEY)
@@ -34,16 +35,29 @@ export const selectRecordAlreadySavedOnce = createSelector(
   (state: EditorState) => state.alreadySavedOnce
 )
 
-export const selectRecordFieldsConfig = createSelector(
+export const selectEditorConfig = createSelector(
   selectEditorState,
-  (state: EditorState) => state.fieldsConfig
+  (state: EditorState) => state.editorConfig
 )
 
-export const selectRecordFields = createSelector(
+export const selectCurrentPage = createSelector(
   selectEditorState,
-  (state: EditorState) =>
-    state.fieldsConfig.map((fieldConfig) => ({
-      config: fieldConfig,
-      value: state.record?.[fieldConfig.model] || null,
-    }))
+  (state: EditorState) => state.currentPage
+)
+
+export const selectRecordSections = createSelector(
+  selectEditorState,
+  (state: EditorState) => {
+    const currentPage = state.editorConfig.pages[state.currentPage]
+    if (!currentPage) {
+      return [] as EditorSectionWithValues[]
+    }
+    return currentPage.sections.map((section) => ({
+      ...section,
+      fieldsWithValues: section.fields.map((fieldConfig) => ({
+        config: fieldConfig,
+        value: state.record?.[fieldConfig.model] ?? null,
+      })),
+    })) as EditorSectionWithValues[]
+  }
 )

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html

@@ -0,0 +1,15 @@
+<div class="gn-ui-card">
+  <gn-ui-thumbnail
+    class="w-[56px] h-[56px] rounded-[4px] overflow-hidden shrink-0"
+    [thumbnailUrl]="contact.organization.logoUrl?.href"
+    [fit]="'contain'"
+  ></gn-ui-thumbnail>
+  <div class="flex flex-col w-full overflow-hidden leading-snug">
+    <div class="text-[16px] font-bold text-main" data-test="contactCardName">
+      {{ contact.firstName }} {{ contact.lastName }}
+    </div>
+    <div class="text-[14px] text-gray-900" data-test="contactCardEmail">
+      {{ contact.email }}
+    </div>
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Individual } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+
+@Component({
+  selector: 'gn-ui-contact-card',
+  templateUrl: './contact-card.component.html',
+  styleUrls: ['./contact-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent, ThumbnailComponent],
+})
+export class ContactCardComponent {
+  @Input() contact: Individual
+}

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="placeholder"
+    [displayWithFn]="displayWithFn"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleItemSelection($event)"
+    [preventCompleteOnSelection]="true"
+    [minCharacterCount]="0"
+    [allowSubmit]="false"
+  ></gn-ui-autocomplete>
+  <div class="flex gap-2 flex-wrap">
+    <gn-ui-badge
+      *ngFor="let keyword of keywords"
+      [removable]="true"
+      (badgeRemoveClicked)="removeKeyword(keyword)"
+      >{{ keyword.label }}
+
+      <mat-icon
+        *ngIf="isPlaceWithoutExtent(keyword)"
+        [title]="'editor.form.placeKeywordWithoutExtent' | translate"
+        class="material-symbols-outlined"
+        >warning</mat-icon
+      >
+    </gn-ui-badge>
+  </div>
+</div>