geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.4e8752d34

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

@@ -1,29 +1,8 @@
 <input
-  *ngIf="!isSelect"
-  [type]="inputType"
+  [type]="type"
   [readonly]="readonly"
   [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,
-    'border-gray-200': !invalid,
-    'text-gray-600': readonly
-  }"
+  [ngModel]="value"
+  (ngModelChange)="valueChange.emit($event)"
+  class="gn-ui-text-input"
 />
-<select
-  *ngIf="isSelect"
-  [value]="value"
-  (valueChange)="valueChange.emit($event)"
-  class="border rounded-md p-3 w-full bg-white transition-colors"
-  [ngClass]="{
-    'border-pink-500': invalid,
-    'border-gray-200': !invalid,
-    'text-gray-600': readonly
-  }"
->
-  <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

@@ -6,6 +6,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-form-field-simple',
@@ -13,35 +14,14 @@ import {
   styleUrls: ['./form-field-simple.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
 })
 export class FormFieldSimpleComponent {
-  @Input() type: 'date' | 'url' | 'text' | 'number' | 'list' | 'toggle'
+  @Input() type: 'text' | 'number'
   @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) {
-      case 'url':
-      case 'text':
-        return 'text'
-      case 'date':
-        return 'datetime-local'
-      case 'number':
-        return 'number'
-      case 'toggle':
-        return 'checkbox'
-      default:
-        return ''
-    }
-  }
-
-  get isSelect() {
-    return this.type === 'list'
-  }
 }

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

@@ -1,9 +1,4 @@
 <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"

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

@@ -6,15 +6,11 @@ import {
 } 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 { 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'
-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
@@ -40,7 +36,6 @@ type KeywordWithExtent = Keyword & {
     CommonModule,
     GenericKeywordsComponent,
     FormFieldMapContainerComponent,
-    SwitchToggleComponent,
   ],
 })
 export class FormFieldSpatialExtentComponent {
@@ -52,21 +47,6 @@ export class FormFieldSpatialExtentComponent {
     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
@@ -173,7 +153,7 @@ export class FormFieldSpatialExtentComponent {
             label,
             type,
             ...(thesaurus && { thesaurus }),
-          } as Keyword)
+          }) as Keyword
       )
 
     const notPlaceKwAndSpatialScopeKw = await firstValueFrom(
@@ -198,24 +178,4 @@ export class FormFieldSpatialExtentComponent {
     this.editorFacade.updateRecordField('keywords', allKeywords)
     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-spatial-toggle/form-field-spatial-toggle.component.html

@@ -0,0 +1,5 @@
+<gn-ui-switch-toggle
+  [options]="switchToggleOptions$ | async"
+  (selectedValue)="onSpatialScopeChange($event)"
+  extraClasses="grow text-sm"
+></gn-ui-switch-toggle>

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

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  SwitchToggleComponent,
+  SwitchToggleOption,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { EditorFacade } from '../../../../+state/editor.facade'
+import { firstValueFrom, map, Observable } from 'rxjs'
+import { SPATIAL_SCOPES } from '../../../../fields.config'
+
+@Component({
+  selector: 'gn-ui-form-field-spatial-toggle',
+  standalone: true,
+  imports: [CommonModule, SwitchToggleComponent],
+  templateUrl: './form-field-spatial-toggle.component.html',
+  styleUrls: ['./form-field-spatial-toggle.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldSpatialToggleComponent {
+  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,
+          }
+        })
+      )
+    )
+
+  constructor(private editorFacade: EditorFacade) {}
+
+  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

@@ -4,8 +4,9 @@
     *ngFor="let addOption of addOptions$ | async"
     (buttonClick)="onAdd(addOption.eventName)"
   >
-    <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
-    &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
+    <ng-icon name="iconoirPlus" class="text-primary"></ng-icon> &nbsp;{{
+      addOption.buttonLabel
+    }}</gn-ui-button
   >
 </div>
 <gn-ui-sortable-list

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

@@ -15,7 +15,12 @@ import {
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { combineLatest, map } from 'rxjs'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirPlus } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-form-field-temporal-extents',
@@ -30,7 +35,13 @@ import { MatIconModule } from '@angular/material/icon'
     DatePickerComponent,
     DateRangePickerComponent,
     TranslateModule,
-    MatIconModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({ iconoirPlus }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class FormFieldTemporalExtentsComponent {

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

@@ -11,6 +11,7 @@
     [selected]="selectedFrequency"
     (selectValue)="onSelectFrequencyValue($event)"
     [disabled]="!planned"
+    [extraBtnClass]="'input-as-button gn-ui-text-input'"
   >
   </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

@@ -8,6 +8,8 @@ import {
 } from '@angular/core'
 import {
   UpdateFrequency,
+  UpdateFrequencyCode,
+  updateFrequencyCodeValues,
   UpdateFrequencyCustom,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import {
@@ -18,6 +20,10 @@ import {
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { firstValueFrom } from 'rxjs'
 
+const initialListValues = updateFrequencyCodeValues.filter(
+  (code) => !['unknown', 'notPlanned', 'asNeeded', 'irregular'].includes(code)
+)
+
 @Component({
   selector: 'gn-ui-form-field-update-frequency',
   templateUrl: './form-field-update-frequency.component.html',
@@ -33,20 +39,39 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
   protected choices: DropdownChoice[] = []
 
   get planned() {
-    return typeof this.value !== 'string'
+    return this.value && this.value !== 'notPlanned' && this.value !== 'unknown'
   }
 
   constructor(private translateService: TranslateService) {}
 
   async ngOnInit() {
     this.choices = await this.getInitialChoices()
+    if (!this.planned) {
+      return
+    }
+    if (
+      typeof this.value === 'string' &&
+      !this.choices.map((choice) => choice.value).includes(this.value)
+    ) {
+      this.choices = [
+        {
+          value: this.value,
+          label: await firstValueFrom(
+            this.translateService.get(
+              `domain.record.updateFrequency.${this.value}`
+            )
+          ),
+        },
+        ...this.choices,
+      ]
+    }
     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) {
+    if (updatedTimes) {
       this.choices = [
         {
           value: `${per}.${updatedTimes}`,
@@ -65,90 +90,37 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
     if (this.planned) {
       this.valueChange.emit('notPlanned')
     } else {
-      this.valueChange.emit({ updatedTimes: 1, per: 'day' })
+      this.valueChange.emit(this.choices[0].value as UpdateFrequencyCode)
     }
   }
 
   get selectedFrequency(): string {
-    if (!this.value || typeof this.value === 'string') return null
+    if (!this.value) return null
+    if (typeof this.value === 'string') return this.value
     const { updatedTimes, per } = this.value
     return `${per}.${updatedTimes}`
   }
 
-  onSelectFrequencyValue(value: unknown) {
-    const split = (value as string).split('.')
-    this.valueChange.emit({
-      updatedTimes: Number(split[1]),
-      per: split[0] as UpdateFrequencyCustom['per'],
-    })
+  onSelectFrequencyValue(value: string) {
+    if (!value.includes('.')) {
+      this.valueChange.emit(value as UpdateFrequencyCode)
+    } else {
+      const split = (value as string).split('.')
+      this.valueChange.emit({
+        updatedTimes: Number(split[1]),
+        per: split[0] as UpdateFrequencyCustom['per'],
+      })
+    }
   }
 
   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',
+    return Promise.all(
+      initialListValues.map(async (value) => ({
+        value,
         label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.year', {
-            count: 2,
-          })
+          this.translateService.get(`domain.record.updateFrequency.${value}`)
         ),
-      },
-    ]
+      }))
+    )
   }
 }

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

@@ -1,11 +1,12 @@
-<ng-container *ngIf="model === 'licenses'">
+<!-- TEMPORARY - disabling the open data switch -->
+<!-- <ng-container *ngIf="model === 'licenses'">
   <gn-ui-form-field-open-data
     [value]="valueAsConstraints"
     (valueChange)="valueChange.emit($event)"
-    (openDataChange)="isHidden = $event"
+    (openDataChange)="toggleIsOpenData($event)"
   ></gn-ui-form-field-open-data>
-</ng-container>
-<div class="flex flex-col h-full" *ngIf="!isHidden">
+</ng-container> -->
+<div class="flex flex-col h-full">
   <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
     <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
   </ng-container>
@@ -23,20 +24,27 @@
   <ng-container [ngSwitch]="model">
     <ng-container *ngSwitchCase="'title'">
       <div class="flex flex-row flex-start items-center gap-3 mb-[12px]">
-        <span
+        <textarea
           #titleInput
+          cdkTextareaAutosize
+          #autosize="cdkTextareaAutosize"
+          cdkAutosizeMinRows="1"
           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">
+          class="grow font-title text-3xl font-normal overflow-hidden"
+          (change)="valueChange.emit($event.target.value)"
+          [placeholder]="
+            'editor.record.form.field.title.placeholder' | translate
+          "
+          >{{ valueAsString }}</textarea
+        >
+        <div class="flex flex-row justify-between self-start mt-0.5">
           <span
             class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
             (click)="focusTitleInput()"
             >edit</span
           >
           <span
+            *ngIf="config.hintKey"
             class="material-symbols-outlined gn-ui-icon-small m-2"
             [matTooltip]="config.hintKey! | translate"
             matTooltipPosition="above"
@@ -61,25 +69,24 @@
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-overviews>
     </ng-container>
-    <ng-container *ngSwitchCase="'uniqueIdentifier'">
+    <ng-container *ngSwitchCase="'resourceIdentifier'">
       <gn-ui-form-field-simple
-        type="text"
-        [readonly]="true"
+        [type]="'text'"
         [value]="valueAsString"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-simple>
     </ng-container>
-    <ng-container *ngSwitchCase="'resourceUpdated'">
-      <gn-ui-form-field-date-updated
+    <ng-container *ngSwitchCase="'resourceCreated'">
+      <gn-ui-form-field-date
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-date-updated>
+      ></gn-ui-form-field-date>
     </ng-container>
-    <ng-container *ngSwitchCase="'recordUpdated'">
-      <gn-ui-form-field-date-updated
+    <ng-container *ngSwitchCase="'resourceUpdated'">
+      <gn-ui-form-field-date
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-date-updated>
+      ></gn-ui-form-field-date>
     </ng-container>
     <ng-container *ngSwitchCase="'updateFrequency'">
       <gn-ui-form-field-update-frequency
@@ -105,10 +112,29 @@
     <ng-container *ngSwitchCase="'licenses'">
       <gn-ui-form-field-license
         [label]="config.labelKey! | translate"
-        [value]="valueAsConstraints"
-        (valueChange)="valueChange.emit($event)"
+        [recordConstraints]="valueAsConstraints"
+        (recordConstraintsChange)="valueChange.emit($event)"
       ></gn-ui-form-field-license>
     </ng-container>
+
+    <ng-container *ngSwitchCase="'legalConstraints'">
+      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container>
+    </ng-container>
+    <ng-container *ngSwitchCase="'securityConstraints'">
+      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container>
+    </ng-container>
+    <ng-container *ngSwitchCase="'otherConstraints'">
+      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container
+    ></ng-container>
+    <ng-template #formFieldConstraints>
+      <gn-ui-form-field-constraints
+        [label]="config.labelKey"
+        [value]="valueAsConstraints"
+        [constraintType]="model"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-constraints
+    ></ng-template>
+
     <ng-container *ngSwitchCase="'contactsForResource'">
       <gn-ui-form-field-contacts-for-resource
         [value]="valueAsIndividuals"
@@ -138,4 +164,15 @@
       ></gn-ui-form-field-online-link-resources>
     </ng-container>
   </ng-container>
+
+  <ng-container *ngIf="!model">
+    <ng-container [ngSwitch]="componentName">
+      <ng-container *ngSwitchCase="'form-field-constraints-shortcuts'">
+        <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>
+      </ng-container>
+      <ng-container *ngSwitchCase="'form-field-spatial-toggle'">
+        <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>
+      </ng-container>
+    </ng-container>
+  </ng-container>
 </ng-template>