feat(metadata-editor): organize fields into pages and sections.

apps/metadata-editor/src/app/edit/components/breadcrumbs/page-selector.component.html

@@ -0,0 +1,39 @@
+<div class="w-full flex flex-row p-8 items-center gap-6">
+  <ng-container
+    *ngFor="let page of pages; let index = index; let isLast = last"
+  >
+    <div class="flex flex-row items-center gap-4">
+      <div class="flex flex-row items-center gap-4 hover:cursor-pointer">
+        <gn-ui-button
+          (buttonClick)="pageSectionClickHandler(index)"
+          class="flex flex-row items-center"
+          [type]="selectedPage === index ? 'primary' : 'default'"
+          extraClass="bg-transparent border-none"
+        >
+          <div
+            class="w-10 h-10 rounded-[8px] pt-3 text-center"
+            [ngClass]="
+              selectedPage === index ? 'bg-primary font-bold' : 'bg-gray-200'
+            "
+          >
+            {{ index }}
+          </div>
+          <div
+            class="ms-4"
+            [ngClass]="
+              selectedPage === index
+                ? 'text-center text-black font-bold'
+                : 'text-gray-400'
+            "
+            translate
+          >
+            {{ page.labelKey }}
+          </div>
+        </gn-ui-button>
+      </div>
+      <div *ngIf="!isLast" class="w-10">
+        <hr class="border-t-[2px]" />
+      </div>
+    </div>
+  </ng-container>
+</div>

apps/metadata-editor/src/app/edit/components/breadcrumbs/page-selector.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { TranslateModule } from '@ngx-translate/core'
+import { PageSelectorComponent } from './page-selector.component'
+import { EDITOR_CONFIG } from '@geonetwork-ui/feature/editor'
+
+describe('BreadcrumbsComponent', () => {
+  let component: PageSelectorComponent
+  let fixture: ComponentFixture<PageSelectorComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      providers: [],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(PageSelectorComponent)
+    component = fixture.componentInstance
+    component.pages = EDITOR_CONFIG().pages
+    component.selectedPage = 0
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/metadata-editor/src/app/edit/components/breadcrumbs/page-selector.component.ts

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { TranslateModule } from '@ngx-translate/core'
+import { EditorFieldPage } from '@geonetwork-ui/feature/editor'
+
+@Component({
+  selector: 'md-editor-page-selector',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, TranslateModule],
+  templateUrl: './page-selector.component.html',
+  styleUrls: ['./page-selector.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageSelectorComponent {
+  @Input() selectedPage = 0
+  @Input() pages: EditorFieldPage[]
+
+  @Output() selectedPageChange = new EventEmitter<number>()
+
+  pageSectionClickHandler(index: number) {
+    this.selectedPageChange.emit(index)
+  }
+}

apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html

@@ -1,4 +1,4 @@
-<div class="flex flex-row items-center w-full">
+<div class="flex flex-row items-center w-full border-b-[1px]">
   <gn-ui-button type="light">
     <mat-icon class="material-symbols-outlined">side_navigation</mat-icon>
   </gn-ui-button>

apps/metadata-editor/src/app/edit/edit-page.component.html

@@ -1,11 +1,38 @@
-<div class="flex flex-col h-full">
-  <div class="w-full h-auto shrink-0">
-    <md-editor-top-toolbar></md-editor-top-toolbar>
-  </div>
-  <div class="grow overflow-auto relative">
-    <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
-      <gn-ui-notifications-container></gn-ui-notifications-container>
+<ng-container *ngIf="fields$ | async as fields">
+  <div class="flex flex-col h-full">
+    <div class="w-full h-auto shrink-0">
+      <md-editor-top-toolbar></md-editor-top-toolbar>
+      <md-editor-page-selector
+        [pages]="fields.pages"
+        [selectedPage]="selectedPage"
+        (selectedPageChange)="selectedPageChange($event)"
+      ></md-editor-page-selector>
+    </div>
+    <div class="grow overflow-auto relative">
+      <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
+        <gn-ui-notifications-container></gn-ui-notifications-container>
+      </div>
+      <gn-ui-record-form
+        [page]="getSelectedPageFields(fields.pages)"
+      ></gn-ui-record-form>
+    </div>
+    <div class="p-8 mt-auto flex flex-row justify-between">
+      <gn-ui-button
+        type="secondary"
+        (buttonClick)="previousPageButtonHandler()"
+        translate
+      >
+        {{
+          selectedPage === 0
+            ? ('editor.record.form.bottomButtons.comeBackLater' | translate)
+            : ('editor.record.form.bottomButtons.previous' | translate)
+        }}
+      </gn-ui-button>
+      <gn-ui-button type="primary" (buttonClick)="nextPageButtonHandler()"
+        ><span translate
+          >editor.record.form.bottomButtons.next</span
+        ></gn-ui-button
+      >
     </div>
-    <gn-ui-record-form></gn-ui-record-form>
   </div>
-</div>
+</ng-container>

apps/metadata-editor/src/app/edit/edit-page.component.spec.ts

@@ -1,12 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { EditPageComponent } from './edit-page.component'
 import { ActivatedRoute, Router } from '@angular/router'
-import { EditorFacade } from '@geonetwork-ui/feature/editor'
+import { EDITOR_CONFIG, EditorFacade } from '@geonetwork-ui/feature/editor'
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
 import { BehaviorSubject, Subject } from 'rxjs'
 import { NotificationsService } from '@geonetwork-ui/feature/notifications'
 import { TranslateModule } from '@ngx-translate/core'
+import { FindPipe } from '../pipes/filter.pipe'
+import { PageSelectorComponent } from './components/breadcrumbs/page-selector.component'
 
 const getRoute = () => ({
   snapshot: {
@@ -25,6 +27,7 @@ class RouterMock {
 
 class EditorFacadeMock {
   record$ = new BehaviorSubject(DATASET_RECORDS[0])
+  recordFields$ = new BehaviorSubject(EDITOR_CONFIG())
   openRecord = jest.fn()
   saveError$ = new Subject<string>()
   saveSuccess$ = new Subject()
@@ -42,7 +45,12 @@ describe('EditPageComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [EditPageComponent, TranslateModule.forRoot()],
+      imports: [
+        EditPageComponent,
+        TranslateModule.forRoot(),
+        FindPipe,
+        PageSelectorComponent,
+      ],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         {

apps/metadata-editor/src/app/edit/edit-page.component.ts

@@ -3,6 +3,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   EditorFacade,
+  EditorFieldPage,
   RecordFormComponent,
 } from '@geonetwork-ui/feature/editor'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
@@ -13,8 +14,14 @@ import {
   NotificationsContainerComponent,
   NotificationsService,
 } from '@geonetwork-ui/feature/notifications'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { filter, Subscription, take } from 'rxjs'
+import { PageSelectorComponent } from './components/breadcrumbs/page-selector.component'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+marker('editor.record.form.bottomButtons.comeBackLater')
+marker('editor.record.form.bottomButtons.previous')
+marker('editor.record.form.bottomButtons.next')
 
 @Component({
   selector: 'md-editor-edit',
@@ -29,18 +36,30 @@ import { filter, Subscription, take } from 'rxjs'
     PublishButtonComponent,
     TopToolbarComponent,
     NotificationsContainerComponent,
+    PageSelectorComponent,
+    TranslateModule,
   ],
 })
 export class EditPageComponent implements OnInit, OnDestroy {
   subscription = new Subscription()
 
+  fields$ = this.facade.recordFields$
+  totalPages = 0
+  selectedPage = 0
+
   constructor(
     private route: ActivatedRoute,
     private facade: EditorFacade,
     private notificationsService: NotificationsService,
     private translateService: TranslateService,
     private router: Router
-  ) {}
+  ) {
+    this.subscription.add(
+      this.fields$.subscribe((fields) => {
+        this.totalPages = fields.pages.length
+      })
+    )
+  }
 
   ngOnInit(): void {
     const [currentRecord, currentRecordSource, currentRecordAlreadySaved] =
@@ -109,4 +128,25 @@ export class EditPageComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe()
   }
+
+  getSelectedPageFields(pages: EditorFieldPage[]) {
+    return pages[this.selectedPage]
+  }
+
+  previousPageButtonHandler() {
+    if (this.selectedPage === 0) {
+      this.router.navigate(['catalog', 'search'])
+    } else {
+      this.selectedPage--
+    }
+  }
+
+  nextPageButtonHandler() {
+    if (this.selectedPage === this.totalPages - 1) return
+    this.selectedPage++
+  }
+
+  selectedPageChange(index: number) {
+    this.selectedPage = index
+  }
 }

apps/metadata-editor/tsconfig.json

@@ -19,11 +19,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "target": "es2020",
-    "lib": [
-      "dom",
-      "es2020",
-      "dom.iterable"
-    ],
+    "lib": ["dom", "es2020", "dom.iterable"],
     "downlevelIteration": true
   },
   "angularCompilerOptions": {

libs/feature/editor/src/index.ts

@@ -9,3 +9,4 @@ export * from './lib/components/record-form/record-form.component'
 export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'
 export * from './lib/components/wizard-summarize/wizard-summarize.component'
+export * from './lib/fixtures'

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

@@ -2,7 +2,7 @@ import { Action, createReducer, on } from '@ngrx/store'
 import * as EditorActions from './editor.actions'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
 import { SaveRecordError } from './editor.models'
-import { EditorFieldsConfig } from '../models/fields.model'
+import { EditorConfig } from '../models'
 import { DEFAULT_FIELDS } from '../fields.config'
 
 export const EDITOR_FEATURE_KEY = 'editor'
@@ -22,7 +22,7 @@ export interface EditorState {
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
-  fieldsConfig: EditorFieldsConfig
+  fieldsConfig: EditorConfig
 }
 
 export interface EditorPartialState {