wip store current page in state

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

@@ -1,27 +1,31 @@
 <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"
+    *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]="selectedPage === index ? 'primary' : 'default'"
+          [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]="
-              selectedPage === index ? 'bg-primary font-bold' : 'bg-gray-200'
+              (facade.currentPage$ | async) === index
+                ? 'bg-primary font-bold'
+                : 'bg-gray-200'
             "
           >
             {{ index }}
           </div>
           <div
             class="ms-4"
             [ngClass]="
-              selectedPage === index
+              (facade.currentPage$ | async) === index
                 ? 'text-center text-black font-bold'
                 : 'text-gray-400'
             "

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

@@ -1,14 +1,9 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core'
+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 { EditorFieldPage } from '@geonetwork-ui/feature/editor'
+import { EditorFacade } from '@geonetwork-ui/feature/editor'
+import { map } from 'rxjs/operators'
 
 @Component({
   selector: 'md-editor-page-selector',
@@ -19,12 +14,11 @@ import { EditorFieldPage } from '@geonetwork-ui/feature/editor'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PageSelectorComponent {
-  @Input() selectedPage = 0
-  @Input() pages: EditorFieldPage[]
+  pages$ = this.facade.editorConfig$.pipe(map((config) => config.pages))
 
-  @Output() selectedPageChange = new EventEmitter<number>()
+  constructor(public facade: EditorFacade) {}
 
   pageSectionClickHandler(index: number) {
-    this.selectedPageChange.emit(index)
+    this.facade.setCurrentPage(index) // TODO
   }
 }

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

@@ -2,19 +2,13 @@
   <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>
+      <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
-        [page]="getSelectedPageFields(fields.pages)"
-      ></gn-ui-record-form>
+      <gn-ui-record-form></gn-ui-record-form>
     </div>
     <div class="p-8 mt-auto flex flex-row justify-between">
       <gn-ui-button
@@ -23,7 +17,7 @@
         translate
       >
         {{
-          selectedPage === 0
+          (currentPage$ | async) === 0
             ? ('editor.record.form.bottomButtons.comeBackLater' | translate)
             : ('editor.record.form.bottomButtons.previous' | translate)
         }}

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

@@ -3,7 +3,6 @@ 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'
@@ -15,9 +14,10 @@ import {
   NotificationsService,
 } from '@geonetwork-ui/feature/notifications'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
-import { filter, Subscription, take } from 'rxjs'
+import { filter, firstValueFrom, Subscription, take } from 'rxjs'
 import { PageSelectorComponent } from './components/breadcrumbs/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')
@@ -43,23 +43,19 @@ marker('editor.record.form.bottomButtons.next')
 export class EditPageComponent implements OnInit, OnDestroy {
   subscription = new Subscription()
 
-  fields$ = this.facade.recordFields$
-  totalPages = 0
-  selectedPage = 0
+  fields$ = this.facade.currentSections$
+  currentPage$ = this.facade.currentPage$
+  pagesLength$ = this.facade.editorConfig$.pipe(
+    map((config) => config.pages.length)
+  )
 
   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] =
@@ -129,24 +125,20 @@ export class EditPageComponent implements OnInit, OnDestroy {
     this.subscription.unsubscribe()
   }
 
-  getSelectedPageFields(pages: EditorFieldPage[]) {
-    return pages[this.selectedPage]
-  }
-
-  previousPageButtonHandler() {
-    if (this.selectedPage === 0) {
+  async previousPageButtonHandler() {
+    const currentPage = await firstValueFrom(this.currentPage$)
+    if (currentPage === 0) {
       this.router.navigate(['catalog', 'search'])
     } else {
-      this.selectedPage--
+      this.facade.setCurrentPage(currentPage - 1) // TODO
     }
   }
 
-  nextPageButtonHandler() {
-    if (this.selectedPage === this.totalPages - 1) return
-    this.selectedPage++
-  }
-
-  selectedPageChange(index: number) {
-    this.selectedPage = index
+  async nextPageButtonHandler() {
+    const currentPage = await firstValueFrom(this.currentPage$)
+    const pagesCount = await firstValueFrom(this.pagesLength$)
+    if (currentPage < pagesCount - 1) {
+      this.facade.setCurrentPage(currentPage + 1)
+    }
   }
 }

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 }>()
+)

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 '@geonetwork-ui/common/domain/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]) =>

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 }))
+  }
 }

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[]
+}

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

@@ -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: EditorConfig
+  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_FIELDS,
+  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,
   }))
 )
 

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

@@ -51,13 +51,13 @@ describe('Editor Selectors', () => {
     })
 
     it('selectRecordFieldsConfig() should return the current "fieldsConfig" state', () => {
-      const result = EditorSelectors.selectRecordFieldsConfig(state)
+      const result = EditorSelectors.selectEditorConfig(state)
       expect(result).toEqual(DEFAULT_FIELDS)
     })
 
     describe('selectRecordFields', () => {
       it('should return the config and value for each field', () => {
-        const result = EditorSelectors.selectRecordFields(state)
+        const result = EditorSelectors.selectRecordSections(state)
 
         const actualSections = result.pages.map((page) => page.sections).flat()
 
@@ -79,7 +79,7 @@ describe('Editor Selectors', () => {
       })
 
       it('should not coerce falsy values to null', () => {
-        const result = EditorSelectors.selectRecordFields({
+        const result = EditorSelectors.selectRecordSections({
           ...state,
           editor: {
             ...state.editor,

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,25 +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.currentPage
+)
+
+export const selectRecordSections = createSelector(
   selectEditorState,
   (state: EditorState) => {
-    const fieldsConfig = state.fieldsConfig
-    fieldsConfig.pages.forEach((page) => {
-      page.sections.forEach((section) => {
-        section.fields.forEach((field) => {
-          if (state.record) {
-            field.value = state.record[field.model]
-          }
-        })
-      })
-    })
-
-    return fieldsConfig
+    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[]
   }
 )