geonetwork-ui 2.4.0-dev.f6f2f023 → 2.4.0-dev.fdf8f64b

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,21 @@
+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'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-temporal-extents',
@@ -20,18 +23,22 @@ 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,
+    MatIconModule,
+  ],
 })
-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 +51,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.css

@@ -0,0 +1,4 @@
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}

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

@@ -1,14 +1,16 @@
-<gn-ui-check-toggle
-  [label]="'editor.record.form.updateFrequency.planned' | translate"
-  [value]="planned"
-  (toggled)="onPlannedToggled()"
-></gn-ui-check-toggle>
-<gn-ui-dropdown-selector
-  title="updateFrequency"
-  [showTitle]="false"
-  [choices]="choices"
-  [selected]="selectedFrequency"
-  (selectValue)="onSelectFrequencyValue($event)"
-  [disabled]="!planned"
->
-</gn-ui-dropdown-selector>
+<div class="flex flex-col gap-2">
+  <gn-ui-check-toggle
+    [label]="'editor.record.form.updateFrequency.planned' | translate"
+    [value]="planned"
+    (toggled)="onPlannedToggled()"
+  ></gn-ui-check-toggle>
+  <gn-ui-dropdown-selector
+    title="updateFrequency"
+    [showTitle]="false"
+    [choices]="choices"
+    [selected]="selectedFrequency"
+    (selectValue)="onSelectFrequencyValue($event)"
+    [disabled]="!planned"
+  >
+  </gn-ui-dropdown-selector>
+</div>

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

@@ -1,20 +1,21 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
 } from '@angular/core'
-import { FormControl } from '@angular/forms'
+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 {
-  UpdateFrequency,
-  UpdateFrequencyCustom,
-} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { firstValueFrom } from 'rxjs'
 
 @Component({
@@ -26,23 +27,24 @@ import { firstValueFrom } from 'rxjs'
   imports: [CheckToggleComponent, DropdownSelectorComponent, TranslateModule],
 })
 export class FormFieldUpdateFrequencyComponent implements OnInit {
-  @Input() control: FormControl<UpdateFrequency>
+  @Input() value: UpdateFrequency
+  @Output() valueChange: EventEmitter<UpdateFrequency> = new EventEmitter()
 
   protected choices: DropdownChoice[] = []
 
   get planned() {
-    return typeof this.control.value !== 'string'
+    return typeof this.value !== 'string'
   }
 
   constructor(private translateService: TranslateService) {}
 
   async ngOnInit() {
     this.choices = await this.getInitialChoices()
-    if (typeof this.control.value === 'string') {
+    if (typeof this.value === 'string') {
       return
     }
-    const updatedTimes = this.control.value.updatedTimes
-    const per = this.control.value.per
+    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 = [
@@ -61,21 +63,21 @@ 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(): string {
-    if (typeof this.control.value === 'string') return null
-    const { updatedTimes, per } = this.control.value
+    if (!this.value || 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({
+    this.valueChange.emit({
       updatedTimes: Number(split[1]),
       per: split[0] as UpdateFrequencyCustom['per'],
     })

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

@@ -1,11 +1,18 @@
-<div class="flex flex-col h-full">
+<ng-container *ngIf="model === 'licenses'">
+  <gn-ui-form-field-open-data
+    [value]="valueAsConstraints"
+    (valueChange)="valueChange.emit($event)"
+    (openDataChange)="isHidden = $event"
+  ></gn-ui-form-field-open-data>
+</ng-container>
+<div class="flex flex-col h-full" *ngIf="!isHidden">
   <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
     <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
   </ng-container>
   <ng-template #withGenericWrapper>
     <gn-ui-form-field-wrapper
-      [label]="config.labelKey | translate"
-      [hint]="config.hintKey | translate"
+      [label]="config.labelKey! | translate"
+      [hint]="config.hintKey! | translate"
     >
       <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
     </gn-ui-form-field-wrapper>
@@ -13,72 +20,122 @@
 </div>
 
 <ng-template #fieldContent>
-  <ng-container *ngIf="isTitle">
-    <div class="flex justify-between items-center gap-3">
-      <h2
-        #titleInput
-        class="grow text-3xl font-normal"
-        [gnUiEditableLabel]="true"
-        (editableLabelChanged)="formControl.setValue($event)"
-      >
-        {{ formControl.value }}
-      </h2>
-      <span
-        class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
-        (click)="focusTitleInput()"
-        >edit</span
-      >
-      <span
-        class="material-symbols-outlined gn-ui-icon-small m-2"
-        [matTooltip]="config.hintKey | translate"
-        matTooltipPosition="above"
-      >
-        help
-      </span>
-    </div>
-  </ng-container>
-  <ng-container *ngIf="isAbstract">
-    <gn-ui-form-field-rich
-      class="h-[8rem]"
-      [control]="formControl"
-      [label]="config.labelKey | translate"
-      [hint]="config.hintKey | translate"
-    ></gn-ui-form-field-rich>
-  </ng-container>
-  <ng-container *ngIf="isLicenses">
-    <gn-ui-form-field-license
-      [control]="formControl"
-      [label]="config.labelKey | translate"
-    ></gn-ui-form-field-license>
-  </ng-container>
-  <ng-container *ngIf="isResourceUpdated">
-    <gn-ui-form-field-resource-updated
-      [control]="formControl"
-    ></gn-ui-form-field-resource-updated>
-  </ng-container>
-  <ng-container *ngIf="isUpdateFrequency">
-    <gn-ui-form-field-update-frequency
-      [control]="formControl"
-    ></gn-ui-form-field-update-frequency>
-  </ng-container>
-  <ng-container *ngIf="isTemporalExtents">
-    <gn-ui-form-field-temporal-extents
-      [control]="formControl"
-    ></gn-ui-form-field-temporal-extents>
-  </ng-container>
-  <ng-container *ngIf="isSimpleField">
-    <gn-ui-form-field-simple
-      type="text"
-      [control]="formControl"
-      [readonly]="isReadOnly"
-    ></gn-ui-form-field-simple>
-  </ng-container>
-  <ng-container *ngIf="isSpatialExtentField">
-    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
-  </ng-container>
-  <ng-container *ngIf="isKeywords">
-    <gn-ui-form-field-keywords
-      [control]="formControl"
-    ></gn-ui-form-field-keywords>
+  <ng-container [ngSwitch]="model">
+    <ng-container *ngSwitchCase="'title'">
+      <div class="flex flex-row flex-start items-center gap-3 mb-[12px]">
+        <span
+          #titleInput
+          data-test="recordTitleInput"
+          class="grow font-title text-3xl font-normal"
+          [gnUiEditableLabel]="valueAsString"
+          (editableLabelChanged)="valueChange.emit($event)"
+        ></span>
+        <div class="flex flex-row justify-between">
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+            (click)="focusTitleInput()"
+            >edit</span
+          >
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2"
+            [matTooltip]="config.hintKey! | translate"
+            matTooltipPosition="above"
+          >
+            help
+          </span>
+        </div>
+      </div>
+    </ng-container>
+    <ng-container *ngSwitchCase="'abstract'">
+      <gn-ui-form-field-rich
+        [label]="config.labelKey! | translate"
+        [hint]="config.hintKey! | translate"
+        [value]="valueAsString"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-rich>
+    </ng-container>
+    <ng-container *ngSwitchCase="'overviews'">
+      <gn-ui-form-field-overviews
+        [metadataUuid]="uniqueIdentifier"
+        [value]="valueAsOverviews"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-overviews>
+    </ng-container>
+    <ng-container *ngSwitchCase="'uniqueIdentifier'">
+      <gn-ui-form-field-simple
+        type="text"
+        [readonly]="true"
+        [value]="valueAsString"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-simple>
+    </ng-container>
+    <ng-container *ngSwitchCase="'resourceUpdated'">
+      <gn-ui-form-field-date-updated
+        [value]="valueAsDate"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-date-updated>
+    </ng-container>
+    <ng-container *ngSwitchCase="'recordUpdated'">
+      <gn-ui-form-field-date-updated
+        [value]="valueAsDate"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-date-updated>
+    </ng-container>
+    <ng-container *ngSwitchCase="'updateFrequency'">
+      <gn-ui-form-field-update-frequency
+        [value]="valueAsUpdateFrequency"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-update-frequency>
+    </ng-container>
+    <ng-container *ngSwitchCase="'temporalExtents'">
+      <gn-ui-form-field-temporal-extents
+        [value]="valueAsTemporalExtents"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-temporal-extents>
+    </ng-container>
+    <ng-container *ngSwitchCase="'spatialExtents'">
+      <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
+    </ng-container>
+    <ng-container *ngSwitchCase="'keywords'">
+      <gn-ui-form-field-keywords
+        [value]="valueAsKeywords"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-keywords>
+    </ng-container>
+    <ng-container *ngSwitchCase="'licenses'">
+      <gn-ui-form-field-license
+        [label]="config.labelKey! | translate"
+        [value]="valueAsConstraints"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-license>
+    </ng-container>
+    <ng-container *ngSwitchCase="'contactsForResource'">
+      <gn-ui-form-field-contacts-for-resource
+        [value]="valueAsIndividuals"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-contacts-for-resource>
+    </ng-container>
+    <ng-container *ngSwitchCase="'contacts'">
+      <gn-ui-form-field-contacts
+        [value]="valueAsIndividuals"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-contacts>
+    </ng-container>
+    <ng-container *ngSwitchCase="'onlineResources'">
+      <gn-ui-form-field-online-resources
+        *ngIf="modelSpecifier === 'onlineResourceType:!link'"
+        [metadataUuid]="uniqueIdentifier"
+        [value]="valueAsOnlineResources"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-online-resources>
+    </ng-container>
+    <ng-container *ngSwitchCase="'onlineResources'">
+      <gn-ui-form-field-online-link-resources
+        *ngIf="modelSpecifier === 'onlineResourceType:link'"
+        [metadataUuid]="uniqueIdentifier"
+        [value]="valueAsOnlineResources"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-online-link-resources>
+    </ng-container>
   </ng-container>
 </ng-template>