geonetwork-ui 2.4.0-dev.656babc7 → 2.4.0-dev.6f312e64

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

@@ -1,4 +1,29 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
+import {
+  DatasetSpatialExtent,
+  Keyword,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { firstValueFrom, map, shareReplay } from 'rxjs'
+import { EditorFacade } from '../../../../+state/editor.facade'
+import { switchMap } from 'rxjs/operators'
+import { FormFieldMapContainerComponent } from '../form-field-map-container/form-field-map-container.component'
+import { TranslateService } from '@ngx-translate/core'
+
+// This intermediary type will let us keep track of which keyword is bound to
+// which extent; these properties will not be persisted
+type KeywordWithExtent = Keyword & {
+  _linkedExtent: DatasetSpatialExtent
+  _doNotSave: boolean
+}
+
+/**
+ * This form field is not like the others, as it will read directly from the state to handle both spatial extents
+ * and place keywords.
+ * Other types of keywords will not be touched by this field.
+ */
 
 @Component({
   selector: 'gn-ui-form-field-spatial-extent',
@@ -6,5 +31,135 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   styleUrls: ['./form-field-spatial-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [
+    CommonModule,
+    GenericKeywordsComponent,
+    FormFieldMapContainerComponent,
+  ],
 })
-export class FormFieldSpatialExtentComponent {}
+export class FormFieldSpatialExtentComponent {
+  spatialExtents$ = this.editorFacade.record$.pipe(
+    map((record) => ('spatialExtents' in record ? record?.spatialExtents : []))
+  )
+
+  shownKeywords$ = this.editorFacade.record$.pipe(
+    map((record) => record?.keywords.filter((k) => k.type === 'place')),
+    // look for full keywords in the thesauri
+    switchMap((keywords) =>
+      Promise.all(
+        keywords.map(async (keyword) => {
+          if (!keyword.thesaurus) return keyword
+          const allKeywords = await firstValueFrom(
+            this.platformService.searchKeywordsInThesaurus(
+              keyword.label,
+              keyword.thesaurus.id
+            )
+          )
+          const found = allKeywords.find((k) => k.label === keyword.label)
+          return found ?? keyword
+        })
+      )
+    ),
+    // add additional "unnamed" keywords for extents without a matching keyword
+    switchMap(async (keywords) => {
+      const spatialExtents = await firstValueFrom(this.spatialExtents$)
+      const keywordsFromExtents = await Promise.all(
+        spatialExtents.map(async (extent) => {
+          const existingKeyword =
+            extent.description &&
+            (keywords.find(
+              (k) => k.key === extent.description
+            ) as KeywordWithExtent)
+          if (existingKeyword) {
+            existingKeyword._linkedExtent = extent
+            return null
+          }
+          let bbox = null
+          if ('geometry' in extent) {
+            bbox = extent.geometry // FIXME: this should be a bbox too but for now it works...
+          } else if ('bbox' in extent) {
+            bbox = extent.bbox
+          }
+          const label = await firstValueFrom(
+            this.translateService.get('editor.record.placeKeywordWithoutLabel')
+          )
+          return {
+            label,
+            type: 'place',
+            ...(bbox && { bbox }),
+            _linkedExtent: extent,
+            _doNotSave: true,
+          } as KeywordWithExtent
+        })
+      ).then((keywords) => keywords.filter((k) => !!k))
+
+      return [...keywords, ...keywordsFromExtents]
+    }),
+    shareReplay(1)
+  )
+
+  constructor(
+    private platformService: PlatformServiceInterface,
+    private editorFacade: EditorFacade,
+    private translateService: TranslateService
+  ) {}
+
+  async handleKeywordDelete(keyword: Keyword) {
+    const spatialExtents = await firstValueFrom(this.spatialExtents$)
+    const shownKeywords = (await firstValueFrom(
+      this.shownKeywords$
+    )) as KeywordWithExtent[]
+    const newKeywords = shownKeywords.filter((k) => k !== keyword)
+    const linkedExtent =
+      '_linkedExtent' in keyword ? keyword._linkedExtent : null
+    const newExtents = linkedExtent
+      ? spatialExtents.filter((extent) => linkedExtent !== extent)
+      : spatialExtents
+    return this.emitChanges(newKeywords, newExtents)
+  }
+
+  async handleKeywordAdd(keyword: Keyword) {
+    const spatialExtents = await firstValueFrom(this.spatialExtents$)
+    const shownKeywords = await firstValueFrom(this.shownKeywords$)
+    const newKeywords = [...shownKeywords, keyword] as KeywordWithExtent[]
+    let newExtents = spatialExtents
+    if (keyword.bbox) {
+      newExtents = [
+        ...spatialExtents,
+        {
+          bbox: keyword.bbox,
+          description: keyword.key ?? undefined,
+        },
+      ]
+    }
+    return this.emitChanges(newKeywords, newExtents)
+  }
+
+  async emitChanges(
+    placeKeywords: KeywordWithExtent[],
+    spatialExtents: DatasetSpatialExtent[]
+  ) {
+    // some keywords are only present to allow control over extents; they **should not** be saved!
+    const filteredPlaceKeywords = placeKeywords
+      .filter((keyword) => !keyword._doNotSave)
+      .map(
+        ({ label, thesaurus, type }) =>
+          ({
+            label,
+            type,
+            ...(thesaurus && { thesaurus }),
+          } as Keyword)
+      )
+    const notPlaceKeywords = await firstValueFrom(
+      this.editorFacade.record$.pipe(
+        map((record) => record.keywords.filter((k) => k.type !== 'place'))
+      )
+    )
+
+    this.editorFacade.updateRecordField('keywords', [
+      ...notPlaceKeywords,
+      ...filteredPlaceKeywords,
+    ])
+    this.editorFacade.updateRecordField('spatialExtents', spatialExtents)
+  }
+}

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

@@ -1,6 +1,32 @@
+<div class="flex gap-2 mb-2">
+  <gn-ui-button
+    *ngFor="let addOption of addOptions$ | async"
+    (buttonClick)="onAdd(addOption.eventName)"
+  >
+    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
+    &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
+  >
+</div>
 <gn-ui-sortable-list
-  [elements]="elements"
-  (elementsChange)="onElementsChange($event)"
-  [addOptions]="addOptions$ | async"
-  (add)="onAdd($event)"
+  [items]="extents"
+  (itemsOrderChange)="onItemsOrderChange($event)"
+  [elementTemplate]="template"
 ></gn-ui-sortable-list>
+<ng-template #template let-extent let-index="index">
+  <div class="border rounded-lg px-4 pb-4" *ngIf="extent.end === undefined">
+    <p class="my-2" translate>editor.record.form.temporalExtents.date</p>
+    <gn-ui-date-picker
+      [date]="extent.start"
+      (dateChange)="onExtentChange({ start: $event }, index)"
+    ></gn-ui-date-picker>
+  </div>
+  <div class="border rounded-lg px-4 pb-4" *ngIf="extent.end !== undefined">
+    <p class="my-2" translate>editor.record.form.temporalExtents.range</p>
+    <gn-ui-date-range-picker
+      [startDate]="extent.start"
+      [endDate]="extent.end"
+      (startDateChange)="onExtentChange({ start: $event }, index)"
+      (endDateChange)="onExtentChange({ end: $event }, index)"
+    ></gn-ui-date-range-picker>
+  </div>
+</ng-template>

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

@@ -1,18 +1,20 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
-  OnDestroy,
-  OnInit,
-  Type,
+  Output,
 } from '@angular/core'
-import { FormArray, FormControl } from '@angular/forms'
-import { SortableListComponent } from '../../../../../../../../../libs/ui/elements/src'
-import { Subscription, combineLatest, map } from 'rxjs'
-import { FormFieldTemporalExtentsDateComponent } from './form-field-temporal-extents-date/form-field-temporal-extents-date.component'
-import { FormFieldTemporalExtentsRangeComponent } from './form-field-temporal-extents-range/form-field-temporal-extents-range.component'
-import { TranslateService } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
+import { DatasetTemporalExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
+import {
+  ButtonComponent,
+  DatePickerComponent,
+  DateRangePickerComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { combineLatest, map } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-form-field-temporal-extents',
@@ -20,18 +22,21 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./form-field-temporal-extents.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, SortableListComponent],
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    SortableListComponent,
+    DatePickerComponent,
+    DateRangePickerComponent,
+    TranslateModule,
+  ],
 })
-export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
-  @Input() control!: FormControl
-
-  subscription: Subscription
-
-  array: FormArray = new FormArray([])
-  elements: Array<{
-    component: Type<any>
-    inputs: Record<string, any>
-  }>
+export class FormFieldTemporalExtentsComponent {
+  extents: DatasetTemporalExtent[] = []
+  @Input() set value(v: Array<DatasetTemporalExtent>) {
+    this.extents = v
+  }
+  @Output() valueChange = new EventEmitter<Array<DatasetTemporalExtent>>()
 
   addOptions$ = combineLatest([
     this.translateService
@@ -44,87 +49,37 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
 
   constructor(private translateService: TranslateService) {}
 
-  ngOnInit() {
-    this.resetValueFromInput(this.control.value)
-
-    this.subscription = new Subscription()
-
-    this.subscription.add(
-      this.control.valueChanges.subscribe((value) => {
-        this.resetValueFromInput(value)
-      })
-    )
-
-    this.subscription.add(
-      this.array.valueChanges.subscribe((value) => {
-        this.control.setValue(value)
-      })
-    )
-  }
-
-  onElementsChange(elements: any) {
-    this.array.clear({ emitEvent: false })
-    elements.forEach((e: any, i: number) =>
-      this.array.push(e.inputs.control, {
-        emitEvent: i === elements.length - 1,
-      })
-    )
+  onItemsOrderChange(extents: unknown[]) {
+    this.extents = extents as DatasetTemporalExtent[]
+    this.emitValue()
   }
 
   onAdd(eventName: string) {
     switch (eventName) {
       case 'date': {
-        const dateControl = new FormControl({ start: new Date() })
-        this.array.push(dateControl)
+        const instant = { start: new Date() }
+        this.extents = [...this.extents, instant]
         break
       }
       case 'range': {
-        const rangeControl = new FormControl({
+        const range = {
           start: new Date(),
           end: new Date(),
-        })
-        this.array.push(rangeControl)
+        }
+        this.extents = [...this.extents, range]
         break
       }
     }
+    this.emitValue()
   }
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe()
+  onExtentChange(extent: Partial<DatasetTemporalExtent>, index: number) {
+    this.extents = [...this.extents]
+    this.extents[index] = { ...this.extents[index], ...extent }
+    this.emitValue()
   }
 
-  private resetValueFromInput(value) {
-    this.array.clear({ emitEvent: false })
-    this.elements = []
-    value.forEach((v: any) => {
-      if ('start' in v && 'end' in v) {
-        const rangeControl = new FormControl({
-          start: v.start,
-          end: v.end,
-        })
-        this.array.push(rangeControl, { emitEvent: false })
-        this.elements = [
-          ...this.elements,
-          {
-            component: FormFieldTemporalExtentsRangeComponent,
-            inputs: {
-              control: rangeControl,
-            },
-          },
-        ]
-      } else {
-        const dateControl = new FormControl({ start: v.start })
-        this.array.push(dateControl, { emitEvent: false })
-        this.elements = [
-          ...this.elements,
-          {
-            component: FormFieldTemporalExtentsDateComponent,
-            inputs: {
-              control: dateControl,
-            },
-          },
-        ]
-      }
-    })
+  emitValue() {
+    this.valueChange.emit(this.extents)
   }
 }

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

@@ -1,16 +1,22 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
 } from '@angular/core'
-import { FormControl } from '@angular/forms'
-import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  UpdateFrequency,
+  UpdateFrequencyCustom,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import {
   CheckToggleComponent,
+  DropdownChoice,
   DropdownSelectorComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { firstValueFrom } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-form-field-update-frequency',
@@ -21,26 +27,33 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core'
   imports: [CheckToggleComponent, DropdownSelectorComponent, TranslateModule],
 })
 export class FormFieldUpdateFrequencyComponent implements OnInit {
-  @Input() control: FormControl
+  @Input() value: UpdateFrequency
+  @Output() valueChange: EventEmitter<UpdateFrequency> = new EventEmitter()
+
+  protected choices: DropdownChoice[] = []
 
   get planned() {
-    return this.control.value !== 'notPlanned'
+    return typeof this.value !== 'string'
   }
 
   constructor(private translateService: TranslateService) {}
 
-  ngOnInit() {
-    const updatedTimes = this.control.value?.updatedTimes
-    const per = this.control.value?.per
+  async ngOnInit() {
+    this.choices = await this.getInitialChoices()
+    if (typeof this.value === 'string') {
+      return
+    }
+    const updatedTimes = this.value.updatedTimes
+    const per = this.value.per
+    // the update frequency is not in the list; make it appear there
     if (updatedTimes && updatedTimes !== 1 && updatedTimes !== 2) {
       this.choices = [
         {
           value: `${per}.${updatedTimes}`,
-          label: this.translateService.instant(
-            `domain.record.updateFrequency.${per}`,
-            {
+          label: await firstValueFrom(
+            this.translateService.get(`domain.record.updateFrequency.${per}`, {
               count: updatedTimes,
-            }
+            })
           ),
         },
         ...this.choices,
@@ -50,94 +63,92 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
 
   onPlannedToggled() {
     if (this.planned) {
-      this.control.setValue('notPlanned')
+      this.valueChange.emit('notPlanned')
     } else {
-      this.control.setValue({ updatedTimes: 1, per: 'day' })
+      this.valueChange.emit({ updatedTimes: 1, per: 'day' })
     }
   }
 
-  get selectedFrequency() {
-    const { updatedTimes, per } = this.control.value
+  get selectedFrequency(): string {
+    if (typeof this.value === 'string') return null
+    const { updatedTimes, per } = this.value
     return `${per}.${updatedTimes}`
   }
 
   onSelectFrequencyValue(value: unknown) {
     const split = (value as string).split('.')
-    this.control.setValue({ updatedTimes: Number(split[1]), per: split[0] })
+    this.valueChange.emit({
+      updatedTimes: Number(split[1]),
+      per: split[0] as UpdateFrequencyCustom['per'],
+    })
   }
 
-  choices = [
-    {
-      value: 'day.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.day',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'day.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.day',
-        {
-          count: 2,
-        }
-      ),
-    },
-    {
-      value: 'week.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.week',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'week.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.week',
-        {
-          count: 2,
-        }
-      ),
-    },
-    {
-      value: 'month.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.month',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'month.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.month',
-        {
-          count: 2,
-        }
-      ),
-    },
-    {
-      value: 'year.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.year',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'year.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.year',
-        {
-          count: 2,
-        }
-      ),
-    },
-  ]
+  private async getInitialChoices() {
+    return [
+      {
+        value: 'day.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.day', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'day.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.day', {
+            count: 2,
+          })
+        ),
+      },
+      {
+        value: 'week.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.week', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'week.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.week', {
+            count: 2,
+          })
+        ),
+      },
+      {
+        value: 'month.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.month', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'month.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.month', {
+            count: 2,
+          })
+        ),
+      },
+      {
+        value: 'year.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.year', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'year.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.year', {
+            count: 2,
+          })
+        ),
+      },
+    ]
+  }
 }