From 24df228ab935e99bdef5223d8734b208098a9475 Mon Sep 17 00:00:00 2001 From: Olivia Guyot Date: Thu, 18 Jul 2024 10:10:06 +0200 Subject: [PATCH] wip store current page in state --- .../breadcrumbs/page-selector.component.html | 12 +++-- .../breadcrumbs/page-selector.component.ts | 18 +++----- .../src/app/edit/edit-page.component.html | 12 ++--- .../src/app/edit/edit-page.component.ts | 44 ++++++++----------- .../editor/src/lib/+state/editor.actions.ts | 5 +++ .../editor/src/lib/+state/editor.effects.ts | 4 +- .../editor/src/lib/+state/editor.facade.ts | 10 ++++- .../editor/src/lib/+state/editor.models.ts | 11 +++++ .../editor/src/lib/+state/editor.reducer.ts | 12 +++-- .../src/lib/+state/editor.selectors.spec.ts | 6 +-- .../editor/src/lib/+state/editor.selectors.ts | 35 ++++++++------- .../record-form/record-form.component.html | 22 +++++++--- .../record-form/record-form.component.ts | 21 ++++----- .../src/lib/models/editor-config.model.ts | 2 +- 14 files changed, 119 insertions(+), 95 deletions(-) diff --git a/apps/metadata-editor/src/app/edit/components/breadcrumbs/page-selector.component.html b/apps/metadata-editor/src/app/edit/components/breadcrumbs/page-selector.component.html index b38938f323..3085adc2f5 100644 --- a/apps/metadata-editor/src/app/edit/components/breadcrumbs/page-selector.component.html +++ b/apps/metadata-editor/src/app/edit/components/breadcrumbs/page-selector.component.html @@ -1,19 +1,23 @@
{{ index }} @@ -21,7 +25,7 @@
config.pages)) - @Output() selectedPageChange = new EventEmitter() + constructor(public facade: EditorFacade) {} pageSectionClickHandler(index: number) { - this.selectedPageChange.emit(index) + this.facade.setCurrentPage(index) // TODO } } diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html index d93d4aab53..a71413574e 100644 --- a/apps/metadata-editor/src/app/edit/edit-page.component.html +++ b/apps/metadata-editor/src/app/edit/edit-page.component.html @@ -2,19 +2,13 @@
- +
- +
{{ - selectedPage === 0 + (currentPage$ | async) === 0 ? ('editor.record.form.bottomButtons.comeBackLater' | translate) : ('editor.record.form.bottomButtons.previous' | translate) }} diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.ts b/apps/metadata-editor/src/app/edit/edit-page.component.ts index 8586f05362..16d2ecc7d3 100644 --- a/apps/metadata-editor/src/app/edit/edit-page.component.ts +++ b/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,9 +43,11 @@ 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, @@ -53,13 +55,7 @@ export class EditPageComponent implements OnInit, OnDestroy { 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) + } } } diff --git a/libs/feature/editor/src/lib/+state/editor.actions.ts b/libs/feature/editor/src/lib/+state/editor.actions.ts index f2c6b3f93d..47152c22e6 100644 --- a/libs/feature/editor/src/lib/+state/editor.actions.ts +++ b/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 }>() +) diff --git a/libs/feature/editor/src/lib/+state/editor.effects.ts b/libs/feature/editor/src/lib/+state/editor.effects.ts index 7c28a2890f..4b07925dac 100644 --- a/libs/feature/editor/src/lib/+state/editor.effects.ts +++ b/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]) => diff --git a/libs/feature/editor/src/lib/+state/editor.facade.ts b/libs/feature/editor/src/lib/+state/editor.facade.ts index d6d0992df9..861cb03f1f 100644 --- a/libs/feature/editor/src/lib/+state/editor.facade.ts +++ b/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 })) + } } diff --git a/libs/feature/editor/src/lib/+state/editor.models.ts b/libs/feature/editor/src/lib/+state/editor.models.ts index 903988428c..e59136767b 100644 --- a/libs/feature/editor/src/lib/+state/editor.models.ts +++ b/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[] +} diff --git a/libs/feature/editor/src/lib/+state/editor.reducer.ts b/libs/feature/editor/src/lib/+state/editor.reducer.ts index 506f3436fb..0006741a46 100644 --- a/libs/feature/editor/src/lib/+state/editor.reducer.ts +++ b/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, })) ) diff --git a/libs/feature/editor/src/lib/+state/editor.selectors.spec.ts b/libs/feature/editor/src/lib/+state/editor.selectors.spec.ts index e3ee07bfd9..1b94e59ca0 100644 --- a/libs/feature/editor/src/lib/+state/editor.selectors.spec.ts +++ b/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, diff --git a/libs/feature/editor/src/lib/+state/editor.selectors.ts b/libs/feature/editor/src/lib/+state/editor.selectors.ts index 3661ace5f1..886daa909a 100644 --- a/libs/feature/editor/src/lib/+state/editor.selectors.ts +++ b/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(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[] } ) diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.html b/libs/feature/editor/src/lib/components/record-form/record-form.component.html index ed64b72b3a..277b79d049 100644 --- a/libs/feature/editor/src/lib/components/record-form/record-form.component.html +++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.html @@ -1,7 +1,10 @@ - +
@@ -25,14 +28,19 @@
- + diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts index 06863d04b7..54d4e59b87 100644 --- a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts +++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts @@ -1,14 +1,13 @@ import { CommonModule } from '@angular/common' -import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { ChangeDetectionStrategy, Component } from '@angular/core' import { EditorFacade } from '../../+state/editor.facade' -import { - EditorField, - EditorFieldPage, - EditorFieldValue, - EditorSection, -} from '../../models' +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', @@ -19,8 +18,6 @@ import { TranslateModule } from '@ngx-translate/core' imports: [CommonModule, FormFieldComponent, TranslateModule], }) export class RecordFormComponent { - @Input() page: EditorFieldPage - constructor(public facade: EditorFacade) {} handleFieldValueChange(model: string, newValue: EditorFieldValue) { @@ -30,11 +27,11 @@ export class RecordFormComponent { this.facade.updateRecordField(model, newValue) } - fieldTracker(index: number, field: EditorField): any { - return field.model + fieldTracker(index: number, field: EditorFieldWithValue): any { + return field.config.model } - sectionTracker(index: number, section: EditorSection): any { + sectionTracker(index: number, section: EditorSectionWithValues): any { return section.labelKey } } diff --git a/libs/feature/editor/src/lib/models/editor-config.model.ts b/libs/feature/editor/src/lib/models/editor-config.model.ts index 8530049354..1380ebe9d0 100644 --- a/libs/feature/editor/src/lib/models/editor-config.model.ts +++ b/libs/feature/editor/src/lib/models/editor-config.model.ts @@ -30,7 +30,7 @@ export interface EditorField { // the result of this expression will replace the field value on save onSaveProcess?: EditorFieldExpression - value?: EditorFieldValue + // value?: EditorFieldValue } export interface EditorSection {