geonetwork-ui 2.4.0-dev.8f04e899 → 2.4.0-dev.9075aa64

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

@@ -0,0 +1,122 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { ImageInputComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
+import { Subscription } from 'rxjs'
+import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+
+@Component({
+  selector: 'gn-ui-form-field-overviews',
+  templateUrl: './form-field-overviews.component.html',
+  styleUrls: ['./form-field-overviews.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ImageInputComponent],
+})
+export class FormFieldOverviewsComponent {
+  @Input() metadataUuid: string
+  @Input() value: Array<GraphicOverview>
+  @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
+    new EventEmitter()
+
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+
+  protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
+
+  get firstOverview() {
+    return (
+      this.value[0] ?? {
+        url: null,
+        description: '',
+      }
+    )
+  }
+
+  constructor(
+    private platformService: PlatformServiceInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            this.emitOverview({
+              url: event.attachment.url,
+              description: event.attachment.fileName,
+            })
+          }
+        },
+        error: this.errorHandle,
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
+  }
+
+  handleUrlChange(url: string) {
+    try {
+      const filename = url.split('/').pop()
+      this.emitOverview({
+        url: new URL(url),
+        description: filename,
+      })
+    } catch (e) {
+      this.errorHandle(e)
+    }
+  }
+
+  handleAltTextChange(newAltText: string) {
+    this.emitOverview({
+      url: this.firstOverview.url,
+      description: newAltText,
+    })
+  }
+
+  handleDelete() {
+    this.emitOverview(null)
+  }
+
+  emitOverview(overView: GraphicOverview | null) {
+    this.valueChange.emit(overView ? [overView] : [])
+  }
+
+  private errorHandle = (error) => {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant('editor.record.resourceError.title'),
+      text: `${this.translateService.instant(
+        'editor.record.resourceError.body'
+      )} ${error.message}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.resourceError.closeMessage'
+      ),
+    })
+  }
+}

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,20 @@
-<p>form-field-spatial-extent works!</p>
+<div class="flex flex-col gap-8">
+  <gn-ui-switch-toggle
+    [options]="switchToggleOptions$ | async"
+    (selectedValue)="onSpatialScopeChange($event)"
+    extraClasses="grow"
+  ></gn-ui-switch-toggle>
+  <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>

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,34 @@
+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, Observable, 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'
+import {
+  SwitchToggleComponent,
+  SwitchToggleOption,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { SPATIAL_SCOPES } from '../../../../fields.config'
+
+// 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 +36,175 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   styleUrls: ['./form-field-spatial-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [
+    CommonModule,
+    GenericKeywordsComponent,
+    FormFieldMapContainerComponent,
+    SwitchToggleComponent,
+  ],
 })
-export class FormFieldSpatialExtentComponent {}
+export class FormFieldSpatialExtentComponent {
+  spatialExtents$ = this.editorFacade.record$.pipe(
+    map((record) => ('spatialExtents' in record ? record?.spatialExtents : []))
+  )
+
+  allKeywords$ = this.editorFacade.record$.pipe(
+    map((record) => record?.keywords)
+  )
+
+  switchToggleOptions$: Observable<SwitchToggleOption[]> =
+    this.allKeywords$.pipe(
+      map((keywords) =>
+        SPATIAL_SCOPES.map((scope) => {
+          const isChecked = keywords.some(
+            (keyword) => keyword.label === scope.label
+          )
+          return {
+            label: scope.label,
+            checked: isChecked,
+          }
+        })
+      )
+    )
+
+  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)
+  }
+
+  async onSpatialScopeChange(selectedOption: SwitchToggleOption) {
+    // remove all existing spatial scope keywords
+    const allKeywords = await firstValueFrom(this.allKeywords$)
+    const filteredKeywords = allKeywords.filter((keyword) => {
+      const spatialScopeLabels = SPATIAL_SCOPES.map((scope) => scope.label)
+      return !spatialScopeLabels.includes(keyword.label)
+    })
+
+    const selectedOptionLabel = selectedOption.label
+    const selectedKeyword = SPATIAL_SCOPES.find(
+      (scopes) => scopes.label === selectedOptionLabel
+    )
+
+    // add the selected spatial scope keyword
+    this.editorFacade.updateRecordField('keywords', [
+      ...filteredKeywords,
+      { ...selectedKeyword },
+    ])
+  }
+}

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>