geonetwork-ui 2.4.0-dev.e7ff1d25 → 2.4.0-dev.e97caaf2

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts

@@ -1,17 +1,21 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
-import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import {
   AutocompleteComponent,
   DropdownSelectorComponent,
   UiInputsModule,
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
-import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
-
-type AutocompleteItem = { title: string; value: Keyword }
+import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { KeywordType } from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 @Component({
   selector: 'gn-ui-form-field-keywords',
@@ -25,55 +29,18 @@ type AutocompleteItem = { title: string; value: Keyword }
     CommonModule,
     UiWidgetsModule,
     AutocompleteComponent,
+    GenericKeywordsComponent,
+    TranslateModule,
   ],
 })
 export class FormFieldKeywordsComponent {
-  @Input() control: FormControl<Keyword[]>
-
-  displayWithFn = (item: AutocompleteItem) => {
-    return `${item.title} (${item.value.thesaurus?.name})`
-  }
-
-  autoCompleteAction = (query: string) => {
-    return this.platformService
-      .searchKeywords(query, ['temporal', 'theme', 'other'])
-      .pipe(
-        map((keywords) =>
-          keywords.map((keyword) => {
-            return { title: keyword.label, value: keyword }
-          })
-        )
-      )
-  }
-
-  constructor(private platformService: PlatformServiceInterface) {}
-
-  handleItemSelection(item: AutocompleteItem) {
-    this.addKeyword(item.value)
-  }
-
-  addKeyword(keyword: Keyword) {
-    const addedKeywords = [...this.control.value, keyword]
-
-    // remove duplicates from keyword
-    const filteredKeywords = addedKeywords.filter((value, index, self) => {
-      return (
-        index ===
-        self.findIndex(
-          (t) =>
-            t?.label === value?.label &&
-            t?.thesaurus?.id === value?.thesaurus?.id &&
-            t?.type === value?.type
-        )
-      )
-    })
-
-    this.control.setValue(filteredKeywords)
-  }
+  @Input() value: Keyword[]
+  @Output() valueChange: EventEmitter<Keyword[]> = new EventEmitter()
 
-  removeKeyword(index: number) {
-    const removeKeywords = this.control.value.filter((_, i) => i !== index)
+  keywordTypes = ['temporal', 'theme', 'other'] as KeywordType[]
+  placeholder = 'editor.form.keywords.placeholder'
 
-    this.control.setValue(removeKeywords)
+  handleKeywordsChange(keywords: Keyword[]) {
+    this.valueChange.emit(keywords)
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-license/form-field-license.component.ts

@@ -1,6 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { Constraint } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { DropdownSelectorComponent } from '../../../../../../../../../libs/ui/inputs/src'
 
 @Component({
@@ -12,15 +18,17 @@ import { DropdownSelectorComponent } from '../../../../../../../../../libs/ui/in
   imports: [DropdownSelectorComponent],
 })
 export class FormFieldLicenseComponent {
-  @Input() control!: FormControl
   @Input() label: string
+  @Input() value: Array<Constraint>
+
+  @Output() valueChange: EventEmitter<Array<Constraint>> = new EventEmitter()
 
   get selected() {
-    return this.control.value[0]?.text
+    return this.value[0]?.text
   }
 
   onSelectValue(value: unknown) {
-    this.control.setValue([{ text: value }])
+    this.valueChange.emit([{ text: value as string }])
   }
 
   choices = [

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-map-container/form-field-map-container.component.html

@@ -0,0 +1,4 @@
+<gn-ui-map-context
+  [context]="mapContext$ | async"
+  [mapConfig]="mapConfig"
+></gn-ui-map-context>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-map-container/form-field-map-container.component.ts

@@ -0,0 +1,128 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { catchError, from, map, Observable, of, switchMap } from 'rxjs'
+import {
+  DEFAULT_BASELAYER_CONTEXT,
+  FeatureMapModule,
+  MapContextLayerTypeEnum,
+  MapContextModel,
+  MapFacade,
+  MapStyleService,
+  MapUtilsService,
+} from '../../../../../../../../../libs/feature/map/src'
+import { Fill, Stroke, Style } from 'ol/style'
+import { getOptionalMapConfig, MapConfig } from '../../../../../../../../../libs/util/app-config/src'
+import { Geometry } from 'geojson'
+import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
+import { DatasetSpatialExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { Polygon } from 'ol/geom'
+import GeoJSON from 'ol/format/GeoJSON'
+
+@Component({
+  selector: 'gn-ui-form-field-map-container',
+  standalone: true,
+  imports: [CommonModule, FeatureMapModule],
+  templateUrl: './form-field-map-container.component.html',
+  styleUrls: ['./form-field-map-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldMapContainerComponent implements OnChanges {
+  @Input() spatialExtents: DatasetSpatialExtent[]
+
+  error = ''
+  mapContext$: Observable<MapContextModel> = this.mapFacade.layers$.pipe(
+    switchMap((layers) =>
+      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
+        catchError(() => {
+          this.error = 'The layer has no extent'
+          return of(undefined)
+        }),
+        map((extent) => {
+          return {
+            layers: [DEFAULT_BASELAYER_CONTEXT, ...layers],
+            view: {
+              extent: extent,
+            },
+          } as MapContextModel
+        })
+      )
+    )
+  )
+
+  mapConfig: MapConfig = getOptionalMapConfig()
+
+  constructor(
+    private mapFacade: MapFacade,
+    private mapUtils: MapUtilsService,
+    private styleService: MapStyleService
+  ) {
+    const fill = new Fill({
+      color: 'transparent',
+    })
+    const stroke = new Stroke({
+      color: 'black',
+      width: 2,
+    })
+    const styles = [
+      new Style({
+        fill: fill,
+        stroke: stroke,
+      }),
+    ]
+    this.styleService.styles.default = this.styleService.createStyleFunction({
+      ...this.styleService.createGeometryStyles({ color: 'black' }),
+      polygon: styles,
+    })
+  }
+
+  ngOnChanges(): void {
+    this.mapFacade.removeLayer(0)
+
+    if (this.spatialExtents) {
+      const featureCollection: GeoJSONFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      }
+
+      this.spatialExtents.forEach((extent) => {
+        if (extent.geometry) {
+          featureCollection.features.push({
+            type: 'Feature',
+            properties: {},
+            geometry: extent.geometry,
+          })
+        } else if (extent.bbox?.length >= 0) {
+          featureCollection.features.push({
+            type: 'Feature',
+            properties: {},
+            geometry: this.bboxCoordsToGeometry(extent.bbox),
+          })
+        }
+      })
+      this.mapFacade.addLayer({
+        type: MapContextLayerTypeEnum.GEOJSON,
+        data: featureCollection,
+        title: 'Spatial extents',
+      })
+    }
+  }
+  bboxCoordsToGeometry(bbox: [number, number, number, number]): Geometry {
+    const geometry = new Polygon([
+      [
+        [bbox[0], bbox[1]],
+        [bbox[0], bbox[3]],
+        [bbox[2], bbox[3]],
+        [bbox[2], bbox[1]],
+        [bbox[0], bbox[1]],
+      ],
+    ])
+
+    const geoJSONGeom = new GeoJSON().writeGeometryObject(geometry)
+    return geoJSONGeom
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-open-data/form-field-open-data.component.html

@@ -1,6 +1,6 @@
 <gn-ui-check-toggle
   [label]="'editor.record.form.classification.opendata' | translate"
-  [value]="value"
+  [value]="openData"
   (toggled)="onOpenDataToggled($event)"
   data-cy="openDataToggle"
 ></gn-ui-check-toggle>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-open-data/form-field-open-data.component.ts

@@ -4,15 +4,12 @@ import {
   EventEmitter,
   Input,
   OnChanges,
-  OnInit,
   Output,
-  SimpleChanges,
 } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import { Constraint } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { CheckToggleComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { OPEN_DATA_LICENSES } from './../../../../fields.config'
-import { Subscription } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-form-field-open-data',
@@ -22,38 +19,30 @@ import { Subscription } from 'rxjs'
   imports: [CheckToggleComponent, TranslateModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FormFieldOpenDataComponent implements OnInit {
-  @Input() control: FormControl
-  value = false
-  @Output() visibilityChange = new EventEmitter<boolean>()
-  subscription: Subscription
+export class FormFieldOpenDataComponent implements OnChanges {
+  @Input() value: Array<Constraint>
+  @Output() valueChange = new EventEmitter<Array<Constraint>>()
+  @Output() openDataChange = new EventEmitter<boolean>()
+
+  openData = false
 
   get config() {
     return OPEN_DATA_LICENSES
   }
 
-  ngOnInit() {
-    this.initToggle()
-    this.subscription = new Subscription()
-
-    this.subscription.add(
-      this.control.valueChanges.subscribe((value) => {
-        this.value = this.config.includes(value[0].text)
-        this.visibilityChange.emit(this.value)
-      })
-    )
-  }
-
-  initToggle() {
-    this.value = this.config.includes(this.control.value[0].text)
-    this.visibilityChange.emit(this.value)
+  ngOnChanges() {
+    if (this.value && this.value.length > 0) {
+      this.openData = this.config.includes(this.value[0].text)
+    } else {
+      this.openData = false
+    }
+    this.openDataChange.emit(this.openData)
   }
 
-  onOpenDataToggled(boolean) {
-    if (boolean) {
-      this.control.setValue([{ text: this.config[0] }])
+  onOpenDataToggled(openData: boolean) {
+    this.openDataChange.emit(openData)
+    if (openData) {
+      this.valueChange.emit([{ text: this.config[0] }])
     }
-    this.value = !this.value
-    this.visibilityChange.emit(boolean)
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.html

@@ -1,5 +1,5 @@
 <gn-ui-overview-upload
   [metadataUuid]="metadataUuid"
-  [formControl]="control"
+  [overview]="firstOverview"
   (overviewChange)="handleOverviewChange($event)"
 ></gn-ui-overview-upload>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts

@@ -1,8 +1,13 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { OverviewUploadComponent } from '../../../overview-upload/overview-upload.component'
-import { FormControl } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { OverviewUploadComponent } from '../../../overview-upload/overview-upload.component'
 
 @Component({
   selector: 'gn-ui-form-field-overviews',
@@ -14,9 +19,15 @@ import { GraphicOverview } from '../../../../../../../../../libs/common/domain/s
 })
 export class FormFieldOverviewsComponent {
   @Input() metadataUuid: string
-  @Input() control!: FormControl
+  @Input() value: Array<GraphicOverview>
+  @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
+    new EventEmitter()
+
+  get firstOverview() {
+    return this.value[0]
+  }
 
   handleOverviewChange(overView: GraphicOverview | null) {
-    this.control.setValue(overView ? [overView] : [])
+    this.valueChange.emit(overView ? [overView] : [])
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.html

@@ -1,4 +1,4 @@
 <gn-ui-date-picker
-  [date]="control.value"
-  (dateChange)="control.setValue($event)"
+  [date]="value"
+  (dateChange)="valueChange.emit($event)"
 ></gn-ui-date-picker>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.ts

@@ -1,5 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/src'
 
 @Component({
@@ -11,5 +16,6 @@ import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/s
   imports: [DatePickerComponent],
 })
 export class FormFieldResourceUpdatedComponent {
-  @Input() control!: FormControl
+  @Input() value: Date
+  @Output() valueChange: EventEmitter<Date> = new EventEmitter()
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html

@@ -14,7 +14,7 @@
     [preview]="preview"
     [helperText]="helperText"
     [placeholder]="placeholder"
-    [textContent]="control.value"
-    (textContentChanged)="handleTextContentChanged($event)"
+    [textContent]="value"
+    (textContentChanged)="valueChange.emit($event)"
   ></gn-ui-markdown-editor>
 </gn-ui-form-field-wrapper>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts

@@ -1,6 +1,14 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
 import { MarkdownEditorComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
@@ -20,11 +28,13 @@ import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/la
   ],
 })
 export class FormFieldRichComponent {
-  @Input() control!: FormControl
   @Input() label: string
   @Input() hint: string
   @Input() helperText: string
   @Input() placeholder = 'Votre texte ici' //TODO: translate
+  @Input() value: string
+
+  @Output() valueChange: EventEmitter<string> = new EventEmitter()
 
   preview = false
 
@@ -37,8 +47,4 @@ export class FormFieldRichComponent {
   togglePreview() {
     this.preview = !this.preview
   }
-
-  handleTextContentChanged(textContent: string) {
-    this.control.setValue(textContent)
-  }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-simple/form-field-simple.component.html

@@ -2,8 +2,9 @@
   *ngIf="!isSelect"
   [type]="inputType"
   [readonly]="readonly"
-  [formControl]="control"
   [placeholder]="placeholder"
+  [value]="value"
+  (valueChange)="valueChange.emit($event)"
   class="border rounded-md p-3 w-full bg-white transition-colors"
   [ngClass]="{
     'border-pink-500': invalid,
@@ -13,7 +14,8 @@
 />
 <select
   *ngIf="isSelect"
-  [formControl]="control"
+  [value]="value"
+  (valueChange)="valueChange.emit($event)"
   class="border rounded-md p-3 w-full bg-white transition-colors"
   [ngClass]="{
     'border-pink-500': invalid,
@@ -21,7 +23,7 @@
     'text-gray-600': readonly
   }"
 >
-  <option *ngFor="let option of options" [ngValue]="option.value">
+  <option *ngFor="let option of options" [value]="option.value">
     {{ option.label }}
   </option>
 </select>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-simple/form-field-simple.component.ts

@@ -1,6 +1,11 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 
 @Component({
   selector: 'gn-ui-form-field-simple',
@@ -8,15 +13,17 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms'
   styleUrls: ['./form-field-simple.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [CommonModule],
 })
 export class FormFieldSimpleComponent {
   @Input() type: 'date' | 'url' | 'text' | 'number' | 'list' | 'toggle'
-  @Input() control!: FormControl
   @Input() readonly = false
   @Input() invalid = false
   @Input() placeholder = ''
   @Input() options?: { label: string; value: unknown }[]
+  @Input() value: unknown
+
+  @Output() valueChange: EventEmitter<unknown> = new EventEmitter()
 
   get inputType() {
     switch (this.type) {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -1 +1,15 @@
-<p>form-field-spatial-extent works!</p>
+<div class="flex flex-col gap-3">
+  <gn-ui-generic-keywords
+    [placeholder]="'Search for place keywords'"
+    [keywords]="shownKeywords$ | async"
+    [keywordTypes]="['place']"
+    (deletedKeyword)="handleKeywordDelete($event)"
+    (addedKeyword)="handleKeywordAdd($event)"
+  >
+  </gn-ui-generic-keywords>
+</div>
+<div class="w-full h-96">
+  <gn-ui-form-field-map-container
+    [spatialExtents]="spatialExtents$ | async"
+  ></gn-ui-form-field-map-container>
+</div>