EDITOR - Organize fields into pages and sections

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

@@ -0,0 +1,43 @@
+<div class="w-full flex flex-row p-8 items-center gap-6">
+  <ng-container
+    *ngFor="let page of pages$ | async; 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]="
+            (facade.currentPage$ | async) === index ? 'primary' : 'default'
+          "
+          extraClass="bg-transparent border-none"
+        >
+          <div
+            class="w-10 h-10 rounded-[8px] pt-3 text-center"
+            [ngClass]="
+              (facade.currentPage$ | async) === index
+                ? 'bg-primary font-bold'
+                : 'bg-gray-200'
+            "
+          >
+            {{ index + 1 }}
+          </div>
+          <div
+            class="ms-4"
+            [ngClass]="
+              (facade.currentPage$ | async) === 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/page-selector/page-selector.component.spec.ts

@@ -0,0 +1,67 @@
+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/common/fixtures'
+import { BehaviorSubject } from 'rxjs'
+import { EditorFacade } from '@geonetwork-ui/feature/editor'
+import { By } from '@angular/platform-browser'
+
+class EditorFacadeMock {
+  editorConfig$ = new BehaviorSubject(EDITOR_CONFIG())
+  currentPage$ = new BehaviorSubject(0)
+  setCurrentPage = jest.fn()
+}
+
+describe('PageSelectorComponent', () => {
+  let component: PageSelectorComponent
+  let fixture: ComponentFixture<PageSelectorComponent>
+  let facade: EditorFacadeMock
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), PageSelectorComponent],
+      providers: [
+        {
+          provide: EditorFacade,
+          useClass: EditorFacadeMock,
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(PageSelectorComponent)
+    component = fixture.componentInstance
+    facade = TestBed.inject(EditorFacade) as unknown as EditorFacadeMock
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should render the correct number of pages', () => {
+    const pages = fixture.debugElement.queryAll(By.css('.w-10.h-10'))
+    expect(pages.length).toBe(EDITOR_CONFIG().pages.length)
+  })
+
+  it('should highlight the current page', () => {
+    const currentPageIndex = facade.currentPage$.getValue()
+    const currentPageElement = fixture.debugElement.queryAll(
+      By.css('.w-10.h-10')
+    )[currentPageIndex]
+    expect(currentPageElement.nativeElement.classList).toContain('bg-primary')
+  })
+
+  it('should call pageSectionClickHandler with the correct index', () => {
+    jest.spyOn(component, 'pageSectionClickHandler')
+    const button = fixture.debugElement.queryAll(By.css('gn-ui-button'))[1]
+    button.triggerEventHandler('buttonClick', null)
+    fixture.detectChanges()
+    expect(component.pageSectionClickHandler).toHaveBeenCalledWith(1)
+  })
+
+  it('should call facade.setCurrentPage with the correct index', () => {
+    const index = 1
+    component.pageSectionClickHandler(index)
+    expect(facade.setCurrentPage).toHaveBeenCalledWith(index)
+  })
+})

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

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { TranslateModule } from '@ngx-translate/core'
+import { EditorFacade } from '@geonetwork-ui/feature/editor'
+import { map } from 'rxjs/operators'
+
+@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 {
+  pages$ = this.facade.editorConfig$.pipe(map((config) => config.pages))
+
+  constructor(public facade: EditorFacade) {}
+
+  pageSectionClickHandler(index: number) {
+    this.facade.setCurrentPage(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,30 @@
 <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></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></gn-ui-record-form>
   </div>
+  <div class="p-8 mt-auto flex flex-row justify-between">
+    <gn-ui-button
+      type="secondary"
+      (buttonClick)="previousPageButtonHandler()"
+      translate
+    >
+      {{
+        (currentPage$ | async) === 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>
 </div>

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

@@ -1,12 +1,13 @@
 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 { NO_ERRORS_SCHEMA } from '@angular/core'
-import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { DATASET_RECORDS, EDITOR_CONFIG } from '@geonetwork-ui/common/fixtures'
 import { BehaviorSubject, Subject } from 'rxjs'
 import { NotificationsService } from '@geonetwork-ui/feature/notifications'
 import { TranslateModule } from '@ngx-translate/core'
+import { PageSelectorComponent } from './components/page-selector/page-selector.component'
+import { EditorFacade } from '@geonetwork-ui/feature/editor'
 
 const getRoute = () => ({
   snapshot: {
@@ -29,6 +30,7 @@ class EditorFacadeMock {
   saveError$ = new Subject<string>()
   saveSuccess$ = new Subject()
   draftSaveSuccess$ = new Subject()
+  editorConfig$ = new BehaviorSubject(EDITOR_CONFIG())
 }
 class NotificationsServiceMock {
   showNotification = jest.fn()
@@ -42,7 +44,11 @@ describe('EditPageComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [EditPageComponent, TranslateModule.forRoot()],
+      imports: [
+        EditPageComponent,
+        TranslateModule.forRoot(),
+        PageSelectorComponent,
+      ],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         {

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

@@ -13,8 +13,15 @@ import {
   NotificationsContainerComponent,
   NotificationsService,
 } from '@geonetwork-ui/feature/notifications'
-import { TranslateService } from '@ngx-translate/core'
-import { filter, Subscription, take } from 'rxjs'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { filter, firstValueFrom, Subscription, take } from 'rxjs'
+import { PageSelectorComponent } from './components/page-selector/page-selector.component'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { map } from 'rxjs/operators'
+
+marker('editor.record.form.bottomButtons.comeBackLater')
+marker('editor.record.form.bottomButtons.previous')
+marker('editor.record.form.bottomButtons.next')
 
 @Component({
   selector: 'md-editor-edit',
@@ -29,11 +36,18 @@ import { filter, Subscription, take } from 'rxjs'
     PublishButtonComponent,
     TopToolbarComponent,
     NotificationsContainerComponent,
+    PageSelectorComponent,
+    TranslateModule,
   ],
 })
 export class EditPageComponent implements OnInit, OnDestroy {
   subscription = new Subscription()
 
+  currentPage$ = this.facade.currentPage$
+  pagesLength$ = this.facade.editorConfig$.pipe(
+    map((config) => config.pages.length)
+  )
+
   constructor(
     private route: ActivatedRoute,
     private facade: EditorFacade,
@@ -109,4 +123,21 @@ export class EditPageComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe()
   }
+
+  async previousPageButtonHandler() {
+    const currentPage = await firstValueFrom(this.currentPage$)
+    if (currentPage === 0) {
+      this.router.navigate(['catalog', 'search'])
+    } else {
+      this.facade.setCurrentPage(currentPage - 1)
+    }
+  }
+
+  async nextPageButtonHandler() {
+    const currentPage = await firstValueFrom(this.currentPage$)
+    const pagesCount = await firstValueFrom(this.pagesLength$)
+    if (currentPage < pagesCount - 1) {
+      this.facade.setCurrentPage(currentPage + 1)
+    }
+  }
 }

apps/metadata-editor/tsconfig.json

@@ -18,7 +18,8 @@
     "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "target": "es2020"
+    "target": "es2020",
+    "lib": ["dom", "es2020", "dom.iterable"]
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,

libs/common/fixtures/src/index.ts

@@ -11,3 +11,5 @@ export * from './lib/records.fixtures'
 export * from './lib/repository.fixtures'
 export * from './lib/user.fixtures'
 export * from './lib/user-feedbacks.fixtures'
+
+export * from './lib/editor'