geonetwork-ui 2.3.1 → 2.4.0-dev.00c93bef

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

@@ -4,8 +4,8 @@
   </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>
@@ -15,14 +15,14 @@
 <ng-template #fieldContent>
   <ng-container *ngIf="isTitle">
     <div class="flex justify-between items-center gap-3">
-      <h2
+      <span
         #titleInput
-        class="grow text-3xl font-normal"
+        class="grow font-title text-3xl font-normal"
         [gnUiEditableLabel]="true"
         (editableLabelChanged)="formControl.setValue($event)"
       >
         {{ formControl.value }}
-      </h2>
+      </span>
       <span
         class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
         (click)="focusTitleInput()"
@@ -30,7 +30,7 @@
       >
       <span
         class="material-symbols-outlined gn-ui-icon-small m-2"
-        [matTooltip]="config.hintKey | translate"
+        [matTooltip]="config.hintKey! | translate"
         matTooltipPosition="above"
       >
         help
@@ -41,14 +41,14 @@
     <gn-ui-form-field-rich
       class="h-[8rem]"
       [control]="formControl"
-      [label]="config.labelKey | translate"
-      [hint]="config.hintKey | translate"
+      [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"
+      [label]="config.labelKey! | translate"
     ></gn-ui-form-field-license>
   </ng-container>
   <ng-container *ngIf="isResourceUpdated">
@@ -61,37 +61,24 @@
       [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]="simpleType"
+      type="text"
       [control]="formControl"
-      [readonly]="isFieldLocked"
-      [invalid]="isFieldInvalid"
+      [readonly]="isReadOnly"
     ></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 *ngIf="isKeywords">
+    <gn-ui-form-field-keywords
+      [control]="formControl"
+    ></gn-ui-form-field-keywords>
   </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

@@ -14,17 +14,21 @@ import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/s
 import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { Observable } from 'rxjs'
+import {
+  FormFieldLicenseComponent,
+  FormFieldResourceUpdatedComponent,
+  FormFieldTemporalExtentsComponent,
+} from '.'
 import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
 import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
-import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
 import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
-import { FormFieldResourceUpdatedComponent } from './form-field-resource-updated/form-field-resource-updated.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'
+import { CatalogRecordKeys } from '../../../../../../../../libs/common/domain/src/lib/model/record'
+import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
+import { FormFieldConfig } from '../../../models'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -42,24 +46,26 @@ import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency
     FormFieldLicenseComponent,
     FormFieldResourceUpdatedComponent,
     FormFieldUpdateFrequencyComponent,
+    FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
     FormFieldSpatialExtentComponent,
-    FormFieldTemporalExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
+    FormFieldKeywordsComponent,
     TranslateModule,
   ],
 })
 export class FormFieldComponent {
-  @Input() model: string
+  @Input() model: CatalogRecordKeys
   @Input() config: FormFieldConfig
   @Input() set value(v: unknown) {
     this.formControl.setValue(v, {
       emitEvent: false,
     })
   }
+
   @Output() valueChange: Observable<unknown>
 
   @ViewChild('titleInput') titleInput: ElementRef
@@ -74,52 +80,6 @@ export class FormFieldComponent {
     this.titleInput.nativeElement.children[0].focus()
   }
 
-  get simpleType() {
-    return this.config.type as
-      | 'date'
-      | 'url'
-      | 'text'
-      | 'number'
-      | 'list'
-      | 'toggle'
-  }
-
-  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 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 isFieldOk() {
-    return !this.config.locked && !this.config.invalid
-  }
-  get isFieldLocked() {
-    return this.config.locked
-  }
-  get isFieldInvalid() {
-    return !this.config.locked && this.config.invalid
-  }
-
   get isTitle() {
     return this.model === 'title'
   }
@@ -135,6 +95,21 @@ export class FormFieldComponent {
   get isUpdateFrequency() {
     return this.model === 'updateFrequency'
   }
+  get isTemporalExtents() {
+    return this.model === 'temporalExtents'
+  }
+  get isSpatialExtentField() {
+    return this.model === 'spatialExtents'
+  }
+  get isSimpleField() {
+    return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated'
+  }
+  get isReadOnly() {
+    return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated'
+  }
+  get isKeywords() {
+    return this.model === 'keywords'
+  }
 
   get withoutWrapper() {
     return this.model === 'title' || this.model === 'abstract'

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

@@ -1,9 +1,11 @@
+export * from './form-field-keywords/form-field-keywords.component'
+export * from './form-field-license/form-field-license.component'
+export * from './form-field-resource-updated/form-field-resource-updated.component'
+export * from './form-field-temporal-extents/form-field-temporal-extents.component'
 export * from './form-field-simple/form-field-simple.component'
 export * from './form-field-file/form-field-file.component'
 export * from './form-field-rich/form-field-rich.component'
 export * from './form-field-object/form-field-object.component'
 export * from './form-field-array/form-field-array.component'
 export * from './form-field-spatial-extent/form-field-spatial-extent.component'
-export * from './form-field-temporal-extent/form-field-temporal-extent.component'
 export * from './form-field.component'
-export * from './form-field.model'

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

@@ -1,11 +1,51 @@
-<div class="flex flex-col gap-6 p-6">
-  <ng-container *ngFor="let field of fields$ | async; trackBy: fieldTracker">
-    <gn-ui-form-field
-      *ngIf="field.config.formFieldConfig && !field.config.hidden"
-      [model]="field.config.model"
-      [config]="field.config.formFieldConfig"
-      [value]="field.value"
-      (valueChange)="handleFieldValueChange(field, $event)"
-    ></gn-ui-form-field>
-  </ng-container>
-</div>
+<ng-container>
+  <div class="flex flex-col gap-6 p-8">
+    <ng-container
+      *ngFor="
+        let section of facade.currentSections$ | async;
+        trackBy: sectionTracker
+      "
+    >
+      <ng-container *ngIf="!section.hidden">
+        <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+          <div
+            class="flex flex-col gap-2"
+            [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+          >
+            <div
+              *ngIf="section.labelKey"
+              class="text-2xl font-petrona text-secondary"
+              translate
+            >
+              {{ section.labelKey }}
+            </div>
+            <div
+              *ngIf="section.descriptionKey"
+              class="text-secondary-lightest"
+              translate
+            >
+              {{ section.descriptionKey }}
+            </div>
+          </div>
+          <ng-container
+            *ngFor="
+              let field of section.fieldsWithValues;
+              trackBy: fieldTracker
+            "
+          >
+            <ng-container *ngIf="!field.config.hidden">
+              <gn-ui-form-field
+                [model]="field.config.model!"
+                [config]="field.config.formFieldConfig"
+                [value]="field.value"
+                (valueChange)="
+                  handleFieldValueChange(field.config.model!, $event)
+                "
+              ></gn-ui-form-field>
+            </ng-container>
+          </ng-container>
+        </div>
+      </ng-container>
+    </ng-container>
+  </div>
+</ng-container>

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

@@ -1,8 +1,13 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
-import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
+import { EditorFieldValue } from '../../models'
 import { FormFieldComponent } from './form-field'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  EditorFieldWithValue,
+  EditorSectionWithValues,
+} from '../../+state/editor.models'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -10,21 +15,23 @@ import { FormFieldComponent } from './form-field'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, FormFieldComponent],
+  imports: [CommonModule, FormFieldComponent, TranslateModule],
 })
 export class RecordFormComponent {
-  fields$ = this.facade.recordFields$
-
   constructor(public facade: EditorFacade) {}
 
-  handleFieldValueChange(field: EditorFieldState, newValue: EditorFieldValue) {
-    if (!field.config.model) {
+  handleFieldValueChange(model: string, newValue: EditorFieldValue) {
+    if (!model) {
       return
     }
-    this.facade.updateRecordField(field.config.model, newValue)
+    this.facade.updateRecordField(model, newValue)
   }
 
-  fieldTracker(index: number, field: EditorFieldState) {
+  fieldTracker(index: number, field: EditorFieldWithValue): any {
     return field.config.model
   }
+
+  sectionTracker(index: number, section: EditorSectionWithValues): any {
+    return section.labelKey
+  }
 }

package/src/libs/feature/editor/src/lib/expressions.ts

@@ -1,4 +1,4 @@
-import { EditorFieldState, EditorFieldValue } from './models/fields.model'
+import { EditorFieldState, EditorFieldValue } from './models/'
 
 export type ExpressionEvaluator = (field: EditorFieldState) => EditorFieldValue
 

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -15,6 +15,7 @@ import * as fromEditor from './+state/editor.reducer'
 import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
 import { WizardComponent } from './components/wizard/wizard.component'
+import { Gn4PlatformService } from '../../../../../libs/api/repository/src'
 
 @NgModule({
   declarations: [
@@ -39,7 +40,7 @@ import { WizardComponent } from './components/wizard/wizard.component'
     EffectsModule.forFeature([EditorEffects]),
   ],
   exports: [WizardComponent, WizardSummarizeComponent],
-  providers: [EditorFacade],
+  providers: [EditorFacade, Gn4PlatformService],
 })
 export class FeatureEditorModule {}
 export * from './models/index'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -1,57 +1,185 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { EditorFieldsConfig } from './models/fields.model'
-
-export const DEFAULT_FIELDS: EditorFieldsConfig = [
-  {
-    model: 'title',
-    formFieldConfig: {
-      labelKey: 'Metadata title',
-      type: 'text',
-    },
+import {
+  EditorConfig,
+  EditorField,
+  EditorSection,
+} from './models/editor-config.model'
+
+/**
+ * This file contains the configuration of the fields that will be displayed in the editor.
+ * To add a new field, you need to create a new EditorField object in the fields part of this file.
+ * Then add it to the corresponding section in the sections part of this file.
+ * Finally, add the section to the corresponding page in the pages part of this file.
+ */
+
+/************************************************************
+ ***************           FIELDS           *****************
+ ************************************************************
+ */
+
+export const RECORD_LICENSE_FIELD: EditorField = {
+  model: 'licenses',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.license'),
   },
-  {
-    model: 'abstract',
-    formFieldConfig: {
-      labelKey: 'Abstract',
-      type: 'rich',
-    },
+}
+
+export const RECORD_KEYWORDS_FIELD: EditorField = {
+  model: 'keywords',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.keywords'),
   },
-  {
-    model: 'uniqueIdentifier',
-    formFieldConfig: {
-      labelKey: 'Unique identifier',
-      type: 'text',
-      locked: true,
-    },
+}
+
+export const RECORD_UNIQUE_IDENTIFIER_FIELD: EditorField = {
+  model: 'uniqueIdentifier',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.uniqueIdentifier'),
+    locked: true,
   },
-  {
-    model: 'recordUpdated',
-    formFieldConfig: {
-      labelKey: 'Record Updated',
-      type: 'text',
-      locked: true,
-    },
-    onSaveProcess: '${dateNow()}',
+}
+
+export const RECORD_RESOURCE_UPDATED_FIELD: EditorField = {
+  model: 'resourceUpdated',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.resourceUpdated'),
   },
-  {
-    model: 'licenses',
-    formFieldConfig: {
-      labelKey: marker('editor.record.form.license'),
-      type: 'list',
-    },
+}
+
+export const RECORD_UPDATED_FIELD: EditorField = {
+  model: 'recordUpdated',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.recordUpdated'),
+    locked: true,
   },
-  {
-    model: 'resourceUpdated',
-    formFieldConfig: {
-      labelKey: marker('editor.record.form.resourceUpdated'),
-      type: 'date',
-    },
+  onSaveProcess: '${dateNow()}',
+}
+
+export const RECORD_UPDATE_FREQUENCY_FIELD: EditorField = {
+  model: 'updateFrequency',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.updateFrequency'),
   },
-  {
-    model: 'updateFrequency',
-    formFieldConfig: {
-      labelKey: marker('editor.record.form.updateFrequency'),
-      type: 'text',
-    },
+}
+
+export const RECORD_TEMPORAL_EXTENTS_FIELD: EditorField = {
+  model: 'temporalExtents',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.temporalExtents'),
+  },
+}
+
+export const RECORD_TITLE_FIELD: EditorField = {
+  model: 'title',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.title'),
+  },
+}
+
+export const RECORD_ABSTRACT_FIELD: EditorField = {
+  model: 'abstract',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.abstract'),
   },
-]
+}
+
+/************************************************************
+ ***************          SECTIONS          *****************
+ ************************************************************
+ */
+
+export const TITLE_SECTION: EditorSection = {
+  hidden: false,
+  fields: [RECORD_TITLE_FIELD, RECORD_ABSTRACT_FIELD],
+}
+
+export const ABOUT_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.about.label'),
+  descriptionKey: marker('editor.record.form.section.about.description'),
+  hidden: false,
+  fields: [
+    RECORD_UNIQUE_IDENTIFIER_FIELD,
+    RECORD_RESOURCE_UPDATED_FIELD,
+    RECORD_UPDATED_FIELD,
+    RECORD_UPDATE_FREQUENCY_FIELD,
+    RECORD_TEMPORAL_EXTENTS_FIELD,
+  ],
+}
+
+export const GEOGRAPHICAL_COVERAGE_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.geographicalCoverage.label'),
+  hidden: false,
+  fields: [],
+}
+
+export const ASSOCIATED_RESOURCES_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.associatedResources.label'),
+  descriptionKey: marker(
+    'editor.record.form.section.associatedResources.description'
+  ),
+  hidden: false,
+  fields: [],
+}
+
+export const ANNEXES_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.annexes.label'),
+  hidden: false,
+  fields: [],
+}
+
+export const CLASSIFICATION_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.classification.label'),
+  descriptionKey: marker(
+    'editor.record.form.section.classification.description'
+  ),
+  hidden: false,
+  fields: [RECORD_KEYWORDS_FIELD],
+}
+
+export const USE_AND_ACCESS_CONDITIONS_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.useAndAccessConditions.label'),
+  hidden: false,
+  fields: [RECORD_LICENSE_FIELD],
+}
+
+export const DATA_MANAGERS_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.dataManagers.label'),
+  descriptionKey: marker('editor.record.form.section.dataManagers.description'),
+  hidden: false,
+  fields: [],
+}
+
+export const DATA_POINT_OF_CONTACT_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.dataPointOfContact.label'),
+  descriptionKey: marker(
+    'editor.record.form.section.dataPointOfContact.description'
+  ),
+  hidden: false,
+  fields: [],
+}
+
+/************************************************************
+ ***************           PAGES            *****************
+ ************************************************************
+ */
+export const DEFAULT_CONFIGURATION: EditorConfig = {
+  pages: [
+    {
+      labelKey: marker('editor.record.form.page.description'),
+      sections: [TITLE_SECTION, ABOUT_SECTION, GEOGRAPHICAL_COVERAGE_SECTION],
+    },
+    {
+      labelKey: marker('editor.record.form.page.ressources'),
+      sections: [ASSOCIATED_RESOURCES_SECTION, ANNEXES_SECTION],
+    },
+    {
+      labelKey: marker('editor.record.form.page.accessAndContact'),
+      sections: [
+        CLASSIFICATION_SECTION,
+        USE_AND_ACCESS_CONDITIONS_SECTION,
+        DATA_MANAGERS_SECTION,
+        DATA_POINT_OF_CONTACT_SECTION,
+      ],
+    },
+  ],
+}

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -0,0 +1,53 @@
+import { CatalogRecordKeys } from '../../../../../../libs/common/domain/src/lib/model/record'
+
+// Expressions should be enclosed in `${}` to be recognized as such
+// eg. ${dateNow()}
+export type EditorFieldExpression = `$\{${string}}`
+
+export type EditorFieldValue = string | number | boolean | unknown
+
+export interface FormFieldConfig {
+  labelKey?: string
+  hintKey?: string
+  tooltipKey?: string
+  required?: boolean
+  locked?: boolean
+  invalid?: boolean
+  invalidHintKey?: string
+}
+
+export interface EditorField {
+  // configuration of the form field used as presentation
+  formFieldConfig: FormFieldConfig
+
+  // name of the target field in the record; will not change the record directly if not defined
+  model?: CatalogRecordKeys
+
+  // a hidden field won't show but can still be used to modify the record
+  // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity
+  hidden?: boolean
+
+  // the result of this expression will replace the field value on save
+  onSaveProcess?: EditorFieldExpression
+}
+
+export interface EditorSection {
+  labelKey?: string
+  descriptionKey?: string
+  hidden: boolean
+  fields: EditorField[]
+}
+
+export interface EditorFieldPage {
+  labelKey?: string
+  sections: EditorSection[]
+}
+
+export interface EditorConfig {
+  pages: EditorFieldPage[]
+}
+
+export interface EditorFieldState {
+  model: string
+  value: EditorFieldValue
+}

package/src/libs/feature/editor/src/lib/models/index.ts

@@ -1,2 +1,3 @@
 export * from './wizard-field.model'
 export * from './wizard-field.type'
+export * from './editor-config.model'