geonetwork-ui 2.4.0-dev.cec60ff1 → 2.4.0-dev.db93b4c4

package/src/libs/common/fixtures/src/lib/editor/editor.fixtures.ts

@@ -0,0 +1,156 @@
+export const EDITOR_CONFIG = () => ({
+  pages: [
+    {
+      labelKey: 'Resource description',
+      sections: [EDITOR_SECTION_ABOUT()],
+    },
+    {
+      labelKey: 'Resources',
+      sections: [EDITOR_SECTION_CLASSIFICATION()],
+    },
+    {
+      labelKey: 'Access and contact',
+      sections: [
+        EDITOR_SECTION_USE_AND_ACCESS_CONDITIONS(),
+        EDITOR_SECTION_DATA_MANAGER(),
+      ],
+    },
+  ],
+})
+
+export const EDITOR_SECTION_ABOUT = () => ({
+  labelKey: 'About the resource',
+  descriptionKey: 'This section describes the resource.',
+  hidden: false,
+  fields: [
+    EDITOR_FIELD_TITLE(),
+    EDITOR_FIELD_ABSTRACT(),
+    EDITOR_FIELD_RESOURCE_UPDATED(),
+    EDITOR_FIELD_RECORD_UPDATED(),
+    EDITOR_FIELD_UPDATE_FREQUENCY(),
+    EDITOR_FIELD_TEMPORAL_EXTENTS(),
+  ],
+})
+
+export const EDITOR_SECTION_DATA_MANAGER = () => ({
+  labelKey: 'Data manager',
+  descriptionKey: '',
+  hidden: false,
+  fields: [],
+})
+
+export const EDITOR_SECTION_USE_AND_ACCESS_CONDITIONS = () => ({
+  labelKey: 'Data manager',
+  descriptionKey: '',
+  hidden: false,
+  fields: [EDITOR_FIELD_LICENSE()],
+})
+
+export const EDITOR_SECTION_CLASSIFICATION = () => ({
+  labelKey: 'Classification',
+  descriptionKey: 'The classification has an impact on the access to the data.',
+  hidden: false,
+  fields: [EDITOR_FIELD_KEYWORDS(), EDITOR_FIELD_UNIQUE_IDENTIFIER()],
+})
+
+export const EDITOR_FIELD_TITLE = () => ({
+  model: 'title',
+  hidden: false,
+  value: 'Accroches vélos MEL',
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.title',
+  },
+})
+
+export const EDITOR_FIELD_ABSTRACT = () => ({
+  model: 'abstract',
+  hidden: false,
+  value: 'Abstract',
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.abstract',
+  },
+})
+
+export const EDITOR_FIELD_RESOURCE_UPDATED = () => ({
+  model: 'resourceUpdated',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.resourceUpdated',
+  },
+})
+
+export const EDITOR_FIELD_RECORD_UPDATED = () => ({
+  model: 'recordUpdated',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.recordUpdated',
+    locked: true,
+  },
+  value: '2024-07-16T05:18:53.000Z',
+  onSaveProcess: '${dateNow()}',
+})
+
+export const EDITOR_FIELD_UPDATE_FREQUENCY = () => ({
+  model: 'updateFrequency',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.updateFrequency',
+  },
+  value: 'unknown',
+})
+
+export const EDITOR_FIELD_TEMPORAL_EXTENTS = () => ({
+  model: 'temporalExtents',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.temporalExtents',
+  },
+  value: [],
+})
+
+export const EDITOR_FIELD_SPATIAL_EXTENTS = () => ({
+  model: 'spatialExtents',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.spatialExtents',
+  },
+})
+
+export const EDITOR_FIELD_KEYWORDS = () => ({
+  model: 'keywords',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.keywords',
+  },
+})
+
+export const EDITOR_FIELD_UNIQUE_IDENTIFIER = () => ({
+  model: 'uniqueIdentifier',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.uniqueIdentifier',
+    locked: true,
+  },
+  value: 'accroche_velos',
+})
+
+export const EDITOR_FIELD_LICENSE = () => ({
+  model: 'licenses',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.license',
+    locked: true,
+  },
+})
+
+export const EDITOR_FIELDS = () => [
+  EDITOR_FIELD_TITLE(),
+  EDITOR_FIELD_ABSTRACT(),
+  EDITOR_FIELD_RESOURCE_UPDATED(),
+  EDITOR_FIELD_RECORD_UPDATED(),
+  EDITOR_FIELD_UPDATE_FREQUENCY(),
+  EDITOR_FIELD_TEMPORAL_EXTENTS(),
+  EDITOR_FIELD_SPATIAL_EXTENTS(),
+  EDITOR_FIELD_KEYWORDS(),
+  EDITOR_FIELD_UNIQUE_IDENTIFIER(),
+]

package/src/libs/common/fixtures/src/lib/editor/index.ts

@@ -0,0 +1 @@
+export * from './editor.fixtures'

package/src/libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -28,3 +28,8 @@ export const saveRecordFailure = createAction(
 )
 
 export const draftSaveSuccess = createAction('[Editor] Draft save success')
+
+export const setCurrentPage = createAction(
+  '[Editor] Set current page',
+  props<{ page: number }>()
+)

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -6,9 +6,9 @@ import * as EditorActions from './editor.actions'
 import { EditorService } from '../services/editor.service'
 import { Store } from '@ngrx/store'
 import {
+  selectEditorConfig,
   selectRecord,
   selectRecordAlreadySavedOnce,
-  selectRecordFieldsConfig,
 } from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
@@ -24,7 +24,7 @@ export class EditorEffects {
       ofType(EditorActions.saveRecord),
       withLatestFrom(
         this.store.select(selectRecord),
-        this.store.select(selectRecordFieldsConfig),
+        this.store.select(selectEditorConfig),
         this.store.select(selectRecordAlreadySavedOnce)
       ),
       switchMap(([, record, fieldsConfig, alreadySavedOnce]) =>

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -25,8 +25,12 @@ export class EditorFacade {
   changedSinceSave$ = this.store.pipe(
     select(EditorSelectors.selectRecordChangedSinceSave)
   )
-  recordFields$ = this.store.pipe(select(EditorSelectors.selectRecordFields))
+  currentSections$ = this.store.pipe(
+    select(EditorSelectors.selectRecordSections)
+  )
   draftSaveSuccess$ = this.actions$.pipe(ofType(EditorActions.draftSaveSuccess))
+  currentPage$ = this.store.pipe(select(EditorSelectors.selectCurrentPage))
+  editorConfig$ = this.store.pipe(select(EditorSelectors.selectEditorConfig))
 
   openRecord(
     record: CatalogRecord,
@@ -45,4 +49,8 @@ export class EditorFacade {
   updateRecordField(field: string, value: unknown) {
     this.store.dispatch(EditorActions.updateRecordField({ field, value }))
   }
+
+  setCurrentPage(page: number) {
+    this.store.dispatch(EditorActions.setCurrentPage({ page }))
+  }
 }

package/src/libs/feature/editor/src/lib/+state/editor.models.ts

@@ -1 +1,12 @@
+import { EditorField, EditorFieldValue, EditorSection } from '../models'
+
 export type SaveRecordError = string
+
+export interface EditorFieldWithValue {
+  config: EditorField
+  value: EditorFieldValue
+}
+
+export type EditorSectionWithValues = EditorSection & {
+  fieldsWithValues: EditorFieldWithValue[]
+}

package/src/libs/feature/editor/src/lib/+state/editor.reducer.ts

@@ -2,8 +2,8 @@ import { Action, createReducer, on } from '@ngrx/store'
 import * as EditorActions from './editor.actions'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SaveRecordError } from './editor.models'
-import { EditorFieldsConfig } from '../models/fields.model'
-import { DEFAULT_FIELDS } from '../fields.config'
+import { EditorConfig } from '../models'
+import { DEFAULT_CONFIGURATION } from '../fields.config'
 
 export const EDITOR_FEATURE_KEY = 'editor'
 
@@ -13,7 +13,7 @@ export const EDITOR_FEATURE_KEY = 'editor'
  * @property saving
  * @property saveError
  * @property changedSinceSave
- * @property fieldsConfig Configuration for the fields in the editor
+ * @property editorConfig Configuration for the fields in the editor
  */
 export interface EditorState {
   record: CatalogRecord | null
@@ -22,7 +22,8 @@ export interface EditorState {
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
-  fieldsConfig: EditorFieldsConfig
+  editorConfig: EditorConfig
+  currentPage: number
 }
 
 export interface EditorPartialState {
@@ -36,7 +37,8 @@ export const initialEditorState: EditorState = {
   saving: false,
   saveError: null,
   changedSinceSave: false,
-  fieldsConfig: DEFAULT_FIELDS,
+  editorConfig: DEFAULT_CONFIGURATION,
+  currentPage: 0,
 }
 
 const reducer = createReducer(
@@ -77,6 +79,10 @@ const reducer = createReducer(
   on(EditorActions.markRecordAsChanged, (state) => ({
     ...state,
     changedSinceSave: true,
+  })),
+  on(EditorActions.setCurrentPage, (state, { page }) => ({
+    ...state,
+    currentPage: page,
   }))
 )
 

package/src/libs/feature/editor/src/lib/+state/editor.selectors.ts

@@ -1,5 +1,6 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store'
 import { EDITOR_FEATURE_KEY, EditorState } from './editor.reducer'
+import { EditorSectionWithValues } from './editor.models'
 
 export const selectEditorState =
   createFeatureSelector<EditorState>(EDITOR_FEATURE_KEY)
@@ -34,16 +35,29 @@ export const selectRecordAlreadySavedOnce = createSelector(
   (state: EditorState) => state.alreadySavedOnce
 )
 
-export const selectRecordFieldsConfig = createSelector(
+export const selectEditorConfig = createSelector(
   selectEditorState,
-  (state: EditorState) => state.fieldsConfig
+  (state: EditorState) => state.editorConfig
 )
 
-export const selectRecordFields = createSelector(
+export const selectCurrentPage = createSelector(
   selectEditorState,
-  (state: EditorState) =>
-    state.fieldsConfig.map((fieldConfig) => ({
-      config: fieldConfig,
-      value: state.record?.[fieldConfig.model] ?? null,
-    }))
+  (state: EditorState) => state.currentPage
+)
+
+export const selectRecordSections = createSelector(
+  selectEditorState,
+  (state: EditorState) => {
+    const currentPage = state.editorConfig.pages[state.currentPage]
+    if (!currentPage) {
+      return [] as EditorSectionWithValues[]
+    }
+    return currentPage.sections.map((section) => ({
+      ...section,
+      fieldsWithValues: section.fields.map((fieldConfig) => ({
+        config: fieldConfig,
+        value: state.record?.[fieldConfig.model] ?? null,
+      })),
+    })) as EditorSectionWithValues[]
+  }
 )

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">

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

@@ -25,10 +25,10 @@ import { FormFieldObjectComponent } from './form-field-object/form-field-object.
 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 { 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',
@@ -65,6 +65,7 @@ export class FormFieldComponent {
       emitEvent: false,
     })
   }
+
   @Output() valueChange: Observable<unknown>
 
   @ViewChild('titleInput') titleInput: ElementRef

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

@@ -9,4 +9,3 @@ 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.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