geonetwork-ui 2.3.2 → 2.4.0-alpha.1

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 (!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({ 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,
+          })
+        ),
+      },
+    ]
+  }
 }

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,85 +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 [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-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="isSimpleField">
-    <gn-ui-form-field-simple
-      [type]="simpleType"
-      [control]="formControl"
-      [readonly]="isFieldLocked"
-      [invalid]="isFieldInvalid"
-    ></gn-ui-form-field-simple>
-  </ng-container>
-  <ng-container *ngIf="isFileField">
-    <gn-ui-form-field-file
-      [control]="formControl"
-      [readonly]="isFieldLocked"
-      [invalid]="isFieldInvalid"
-    ></gn-ui-form-field-file>
-  </ng-container>
-  <ng-container *ngIf="isArrayField">
-    <gn-ui-form-field-array></gn-ui-form-field-array>
-  </ng-container>
-  <ng-container *ngIf="isObjectField">
-    <gn-ui-form-field-object></gn-ui-form-field-object>
-  </ng-container>
-  <ng-container *ngIf="isSpatialExtentField">
-    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
-  </ng-container>
-  <ng-container *ngIf="isTemporalExtentField">
-    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>
-  </ng-container>
-  <div
-    *ngIf="isFieldInvalid && config.invalidHintKey"
-    class="mt-2 text-pink-500 text-sm field-invalid-hint"
-  >
-    {{ config.invalidHintKey | translate }}
-  </div>
 </ng-template>

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

@@ -3,27 +3,45 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
+  EventEmitter,
   Input,
   Output,
   ViewChild,
 } from '@angular/core'
-import { FormControl, ReactiveFormsModule } from '@angular/forms'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import {
+  CatalogRecordKeys,
+  Constraint,
+  DatasetTemporalExtent,
+  GraphicOverview,
+  Individual,
+  Keyword,
+  OnlineResource,
+  UpdateFrequency,
+} from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/src'
 import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
-import { Observable } from 'rxjs'
+import {
+  FormFieldDateUpdatedComponent,
+  FormFieldLicenseComponent,
+  FormFieldTemporalExtentsComponent,
+} from '.'
+import { FieldModelSpecifier, FormFieldConfig } from '../../../models'
 import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
+import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
+import { FormFieldContactsComponent } from './form-field-contacts/form-field-contacts.component'
 import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
-import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
+import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
 import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
-import { FormFieldResourceUpdatedComponent } from './form-field-resource-updated/form-field-resource-updated.component'
+import { FormFieldOnlineLinkResourcesComponent } from './form-field-online-link-resources/form-field-online-link-resources.component'
+import { FormFieldOnlineResourcesComponent } from './form-field-online-resources/form-field-online-resources.component'
+import { FormFieldOpenDataComponent } from './form-field-open-data/form-field-open-data.component'
+import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
-import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
-import { FormFieldConfig } from './form-field.model'
 import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 
 @Component({
@@ -34,109 +52,77 @@ import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency
   standalone: true,
   imports: [
     CommonModule,
-    ReactiveFormsModule,
+    TranslateModule,
     EditableLabelDirective,
     MatIconModule,
     MatTooltipModule,
     FormFieldWrapperComponent,
     FormFieldLicenseComponent,
-    FormFieldResourceUpdatedComponent,
+    FormFieldDateUpdatedComponent,
     FormFieldUpdateFrequencyComponent,
+    FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
     FormFieldSpatialExtentComponent,
-    FormFieldTemporalExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
-    TranslateModule,
+    FormFieldKeywordsComponent,
+    FormFieldOverviewsComponent,
+    FormFieldContactsForResourceComponent,
+    FormFieldOpenDataComponent,
+    FormFieldOnlineResourcesComponent,
+    FormFieldOnlineLinkResourcesComponent,
+    FormFieldContactsComponent,
   ],
 })
 export class FormFieldComponent {
-  @Input() model: string
+  @Input() uniqueIdentifier: string
+  @Input() model: CatalogRecordKeys
+  @Input() modelSpecifier: FieldModelSpecifier
   @Input() config: FormFieldConfig
-  @Input() set value(v: unknown) {
-    this.formControl.setValue(v, {
-      emitEvent: false,
-    })
-  }
-  @Output() valueChange: Observable<unknown>
+  @Input() value: unknown
 
-  @ViewChild('titleInput') titleInput: ElementRef
+  @Output() valueChange: EventEmitter<unknown> = new EventEmitter()
 
-  formControl = new FormControl()
+  @ViewChild('titleInput') titleInput: ElementRef
 
-  constructor() {
-    this.valueChange = this.formControl.valueChanges
-  }
+  isHidden = false
 
   focusTitleInput() {
     this.titleInput.nativeElement.children[0].focus()
   }
 
-  get simpleType() {
-    return this.config.type as
-      | 'date'
-      | 'url'
-      | 'text'
-      | 'number'
-      | 'list'
-      | 'toggle'
+  get withoutWrapper() {
+    return this.model === 'title' || this.model === 'abstract'
   }
 
-  get isSimpleField() {
-    return (
-      this.config.type === 'text' ||
-      this.config.type === 'number' ||
-      this.config.type === 'date' ||
-      this.config.type === 'list' ||
-      this.config.type === 'url' ||
-      this.config.type === 'toggle'
-    )
+  get valueAsString() {
+    return this.value as string
   }
-  get isFileField() {
-    return this.config.type === 'file'
-  }
-  get isSpatialExtentField() {
-    return this.config.type === 'spatial_extent'
-  }
-  get isTemporalExtentField() {
-    return this.config.type === 'temporal_extent'
-  }
-  get isArrayField() {
-    return this.config.type === 'array'
-  }
-  get isObjectField() {
-    return this.config.type === 'object'
+  get valueAsDate() {
+    return this.value as Date
   }
 
-  get isFieldOk() {
-    return !this.config.locked && !this.config.invalid
-  }
-  get isFieldLocked() {
-    return this.config.locked
+  get valueAsOverviews() {
+    return this.value as Array<GraphicOverview>
   }
-  get isFieldInvalid() {
-    return !this.config.locked && this.config.invalid
+  get valueAsUpdateFrequency() {
+    return this.value as UpdateFrequency
   }
-
-  get isTitle() {
-    return this.model === 'title'
-  }
-  get isAbstract() {
-    return this.model === 'abstract'
+  get valueAsTemporalExtents() {
+    return this.value as Array<DatasetTemporalExtent>
   }
-  get isLicenses() {
-    return this.model === 'licenses'
+  get valueAsKeywords() {
+    return this.value as Array<Keyword>
   }
-  get isResourceUpdated() {
-    return this.model === 'resourceUpdated'
+  get valueAsConstraints() {
+    return this.value as Array<Constraint>
   }
-  get isUpdateFrequency() {
-    return this.model === 'updateFrequency'
+  get valueAsIndividuals() {
+    return this.value as Array<Individual>
   }
-
-  get withoutWrapper() {
-    return this.model === 'title' || this.model === 'abstract'
+  get valueAsOnlineResources() {
+    return this.value as Array<OnlineResource>
   }
 }