geonetwork-ui 2.4.0-dev.cd525aa1 → 2.4.0-dev.d000fb89

package/src/libs/data-access/datafeeder/src/openapi/model/datasetUploadStatus.api.model.ts

@@ -34,4 +34,6 @@ export interface DatasetUploadStatusApiModel {
    * detected charset
    */
   encoding?: string
+  format?: 'CSV' | 'SHAPEFILE'
+  options?: any
 }

package/src/libs/data-access/gn4/src/fixtures/site.fixtures.ts

@@ -1,12 +1,12 @@
-export const SITE_FIXTURES = {
+export const siteFixture = () => ({
   'system/platform/subVersion': 'alpha.2',
   'system/platform/version': '4.0.0',
   'system/site/name': 'GeoNetwork 4',
   'system/site/organization': 'titellus',
   'system/site/siteId': '04fe602b-fc46-4e6b-ac5a-138c6153eceb',
-}
+})
 
-export const SETTINGS_FIXTURES = {
+export const settingsFixture = () => ({
   'system/site/name': 'GeoNetwork 4',
   'system/site/siteId': '04fe602b-fc46-4e6b-ac5a-138c6153eceb',
   'system/site/organization': 'titellus',
@@ -62,4 +62,4 @@ export const SETTINGS_FIXTURES = {
   'system/publication/doi/doilandingpagetemplate':
     'http://localhost:8080/geonetwork/srv/resources/records/{{uuid}}',
   'system/feedback/mailServer/hostIsDefined': false,
-}
+})

package/src/libs/data-access/gn4/src/fixtures/ui.fixtures.ts

@@ -1,5 +1,5 @@
-export const UI_FIXTURES = {
+export const uiFixture = () => ({
   id: 'srv',
   configuration:
     '{"langDetector":{"fromHtmlTag":false,"regexp":"^(?:/.+)?/.+/([a-z]{2,3})/.+","default":"eng"},"nodeDetector":{"regexp":"^(?:/.+)?/(.+)/[a-z]{2,3}/.+","default":"srv"},"serviceDetector":{"regexp":"^(?:/.+)?/.+/[a-z]{2,3}/(.+)","default":"catalog.search"},"baseURLDetector":{"regexp":"^((?:/.+)?)+/.+/[a-z]{2,3}/.+","default":"/geonetwork"},"mods":{"global":{"humanizeDates":true},"footer":{"enabled":true,"showSocialBarInFooter":true},"header":{"enabled":true,"languages":{"eng":"en","dut":"nl","fre":"fr","ger":"de","kor":"ko","spa":"es","cze":"cs","cat":"ca","fin":"fi","ice":"is","ita":"it","por":"pt","rus":"ru","chi":"zh","slo":"sk"},"isLogoInHeader":false,"logoInHeaderPosition":"left","fluidHeaderLayout":true,"showGNName":true,"isHeaderFixed":false},"cookieWarning":{"enabled":true,"cookieWarningMoreInfoLink":"","cookieWarningRejectLink":""},"home":{"enabled":true,"appUrl":"../../{{node}}/{{lang}}/catalog.search#/home","showSocialBarInFooter":true,"fluidLayout":true,"facetConfig":{"inspireThemeUri":{"terms":{"field":"inspireThemeUri","size":34}},"topic_text":{"terms":{"field":"topic_text","size":20}},"codelist_hierarchyLevel_text":{"terms":{"field":"codelist_hierarchyLevel_text","size":10}}}},"search":{"enabled":true,"appUrl":"../../{{node}}/{{lang}}/catalog.search#/search","hitsperpageValues":[30,60,120],"paginationInfo":{"hitsPerPage":30},"queryBase":"${any} resourceTitleObject.default:(${any})^2","scoreConfig":{"boost":"5","functions":[{"filter":{"exists":{"field":"parentUuid"}},"weight":0.3},{"filter":{"match":{"codelist_status":"obsolete"}},"weight":0.3},{"gauss":{"dateStamp":{"scale":"365d","offset":"90d","decay":0.5}}}],"score_mode":"multiply"},"autocompleteConfig":{"query":{"bool":{"must":[{"multi_match":{"query":"","type":"bool_prefix","fields":["resourceTitleObject.*","resourceAbstractObject.*","tag","resourceIdentifier"]}}]}},"_source":["resourceTitleObject"],"from":0,"size":20},"moreLikeThisConfig":{"more_like_this":{"fields":["resourceTitleObject.default","resourceAbstractObject.default","tag.raw"],"like":null,"min_term_freq":1,"max_query_terms":12}},"facetTabField":"","facetConfig":{"codelist_hierarchyLevel_text":{"terms":{"field":"codelist_hierarchyLevel_text"},"aggs":{"format":{"terms":{"field":"format"}}}},"codelist_spatialRepresentationType":{"terms":{"field":"codelist_spatialRepresentationType","size":10}},"availableInServices":{"filters":{"filters":{"availableInViewService":{"query_string":{"query":"+linkProtocol:/OGC:WMS.*/"}},"availableInDownloadService":{"query_string":{"query":"+linkProtocol:/OGC:WFS.*/"}}}}},"thesaurus_geonetworkthesaurusexternalthemegemet_tree":{"terms":{"field":"thesaurus_geonetworkthesaurusexternalthemegemet_tree","size":100,"order":{"_key":"asc"},"include":"[^/]+/?[^/]+"}},"tag":{"terms":{"field":"tag","include":".*","size":10}},"thesaurus_geonetworkthesaurusexternalplaceregions_tree":{"terms":{"field":"thesaurus_geonetworkthesaurusexternalplaceregions_tree","size":100,"order":{"_key":"asc"}}},"resolutionScaleDenominator":{"collapsed":true,"terms":{"field":"resolutionScaleDenominator","size":10,"order":{"_key":"asc"}}},"creationYearForResource":{"collapsed":true,"terms":{"field":"creationYearForResource","size":10,"order":{"_key":"desc"}}},"OrgForResource":{"terms":{"field":"OrgForResource","size":15}},"codelist_maintenanceAndUpdateFrequency_text":{"collapsed":true,"terms":{"field":"codelist_maintenanceAndUpdateFrequency_text","size":10}},"codelist_status_text":{"terms":{"field":"codelist_status_text","size":10}},"dateStamp":{"userHasRole":"isReviewerOrMore","auto_date_histogram":{"field":"dateStamp","buckets":50}}},"filters":null,"sortbyValues":[{"sortBy":"relevance","sortOrder":""},{"sortBy":"dateStamp","sortOrder":"desc"},{"sortBy":"createDate","sortOrder":"desc"},{"sortBy":"resourceTitleObject.default.keyword","sortOrder":""},{"sortBy":"rating","sortOrder":"desc"},{"sortBy":"popularity","sortOrder":"desc"}],"sortBy":"relevance","resultViewTpls":[{"tplUrl":"../../catalog/components/search/resultsview/partials/viewtemplates/grid.html","tooltip":"Grid","icon":"fa-th"},{"tplUrl":"../../catalog/components/search/resultsview/partials/viewtemplates/list.html","tooltip":"List","icon":"fa-bars"}],"resultTemplate":"../../catalog/components/search/resultsview/partials/viewtemplates/grid.html","formatter":{"list":[{"label":"defaultView","url":""},{"label":"full","url":"/formatters/xsl-view?root=div&view=advanced"}],"defaultUrl":""},"downloadFormatter":[{"label":"exportMEF","url":"/formatters/zip?withRelated=false","class":"fa-file-zip-o"},{"label":"exportPDF","url":"/formatters/xsl-view?output=pdf&language=${lang}","class":"fa-file-pdf-o"},{"label":"exportXML","url":"/formatters/xml","class":"fa-file-code-o"}],"grid":{"related":["parent","children","services","datasets"]},"linkTypes":{"links":["LINK","kml"],"downloads":["DOWNLOAD"],"layers":["OGC","ESRI:REST"],"maps":["ows"]},"isFilterTagsDisplayedInSearch":true,"usersearches":{"enabled":false,"displayFeaturedSearchesPanel":false},"savedSelection":{"enabled":false}},"map":{"enabled":true,"appUrl":"../../{{node}}/{{lang}}/catalog.search#/map","externalViewer":{"enabled":false,"enabledViewAction":false,"baseUrl":"http://www.example.com/viewer","urlTemplate":"http://www.example.com/viewer?url=${service.url}&type=${service.type}&layer=${service.title}&lang=${iso2lang}&title=${md.defaultTitle}","openNewWindow":false,"valuesSeparator":","},"is3DModeAllowed":false,"isSaveMapInCatalogAllowed":true,"isExportMapAsImageEnabled":false,"storage":"sessionStorage","bingKey":"","listOfServices":{"wms":[],"wmts":[]},"projection":"EPSG:3857","projectionList":[{"code":"urn:ogc:def:crs:EPSG:6.6:4326","label":"WGS84 (EPSG:4326)"},{"code":"EPSG:3857","label":"Google mercator (EPSG:3857)"}],"switcherProjectionList":[{"code":"EPSG:3857","label":"Google mercator (EPSG:3857)"}],"disabledTools":{"processes":false,"addLayers":false,"projectionSwitcher":false,"layers":false,"legend":false,"filter":false,"contexts":false,"print":false,"mInteraction":false,"graticule":false,"mousePosition":true,"syncAllLayers":false,"drawVector":false},"graticuleOgcService":{},"map-viewer":{"context":"../../map/config-viewer.xml","extent":[0,0,0,0],"layers":[]},"map-search":{"context":"../../map/config-viewer.xml","extent":[0,0,0,0],"layers":[]},"map-editor":{"context":"","extent":[0,0,0,0],"layers":[{"type":"osm"}]},"autoFitOnLayer":false},"geocoder":{"enabled":true,"appUrl":"https://secure.geonames.org/searchJSON"},"recordview":{"enabled":true,"isSocialbarEnabled":true},"editor":{"enabled":true,"appUrl":"../../{{node}}/{{lang}}/catalog.edit","isUserRecordsOnly":false,"minUserProfileToCreateTemplate":"","isFilterTagsDisplayed":false,"fluidEditorLayout":true,"createPageTpl":"../../catalog/templates/editor/new-metadata-horizontal.html","editorIndentType":"","allowRemoteRecordLink":true,"facetConfig":{"resourceType":{"terms":{"field":"resourceType","size":20}},"codelist_status_text":{"terms":{"field":"codelist_status_text","size":15}},"sourceCatalogue":{"terms":{"field":"sourceCatalogue","size":15}},"isValid":{"terms":{"field":"isValid","size":10}},"isValidInspire":{"terms":{"field":"isValidInspire","size":10}},"groupOwner":{"terms":{"field":"groupOwner","size":10}},"recordOwner":{"terms":{"field":"recordOwner","size":10}},"groupPublished":{"terms":{"field":"groupPublished","size":10}},"documentStandard":{"terms":{"field":"documentStandard","size":10}},"isHarvested":{"terms":{"field":"isHarvested","size":2}},"isTemplate":{"terms":{"field":"isTemplate","size":5}},"isPublishedToAll":{"terms":{"field":"isPublishedToAll","size":2}}}},"admin":{"enabled":true,"appUrl":"../../{{node}}/{{lang}}/admin.console"},"signin":{"enabled":true,"appUrl":"../../{{node}}/{{lang}}/catalog.signin"},"signout":{"appUrl":"../../signout"},"page":{"enabled":true,"appUrl":"../../{{node}}/{{lang}}/catalog.search#/page"}}}',
-}
+})

package/src/libs/data-access/gn4/src/openapi/api/records.api.service.ts

@@ -7201,11 +7201,7 @@ export class RecordsApiService {
     }
 
     // to determine the Content-Type header
-    const consumes: string[] = [
-      'application/xml',
-      'application/json',
-      'application/x-www-form-urlencoded',
-    ]
+    const consumes: string[] = ['application/xml']
     const httpContentTypeSelected: string | undefined =
       this.configuration.selectHeaderContentType(consumes)
     if (httpContentTypeSelected !== undefined) {

package/src/libs/data-access/gn4/src/openapi/model/user.api.model.ts

@@ -21,7 +21,7 @@ export interface UserApiModel {
   emailAddresses?: Set<string>
   addresses?: Set<AddressApiModel>
   primaryAddress?: AddressApiModel
-  organisation?: string
+  organization?: string
   kind?: string
   lastLoginDate?: string
   authorities?: Array<GrantedAuthorityApiModel>

package/src/libs/data-access/gn4/src/spec.yaml

@@ -1832,14 +1832,6 @@ paths:
             schema:
               type: string
               description: XML fragment.
-          application/json:
-            schema:
-              type: string
-              description: XML fragment.
-          application/x-www-form-urlencoded:
-            schema:
-              type: string
-              description: XML fragment.
       responses:
         default:
           description: default response

package/src/libs/feature/catalog/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/feature-catalog.module'
+export * from './lib/organization-url.token'
 export * from './lib/sources/sources.service'
 export * from './lib/sources/sources.model'
 export * from './lib/records/records.service'

package/src/libs/feature/catalog/src/lib/feature-catalog.module.ts

@@ -4,7 +4,6 @@ import { UiCatalogModule } from '../../../../../libs/ui/catalog/src'
 import {
   GroupsApiService,
   SearchApiService,
-  SiteApiService,
 } from '../../../../../libs/data-access/gn4/src'
 import { CommonModule } from '@angular/common'
 import { SourceLabelComponent } from './source-label/source-label.component'

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.html

@@ -19,7 +19,7 @@
     [showContent]="!!organisation.name"
   >
     <gn-ui-organisation-preview
-      [organisation]="organisation"
+      [organization]="organisation"
       [organisationUrl]="getOrganisationUrl(organisation)"
       (clickedOrganisation)="orgSelect.emit($event)"
     ></gn-ui-organisation-preview>

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.ts

@@ -10,10 +10,10 @@ import {
 import { Organization } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs'
 import { map, startWith, tap } from 'rxjs/operators'
-import { ORGANIZATION_URL_TOKEN } from '../feature-catalog.module'
 import { OrganizationsServiceInterface } from '../../../../../../libs/common/domain/src/lib/organizations.service.interface'
 import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { ORGANIZATION_PAGE_URL_TOKEN } from '../organization-url.token'
 
 @Component({
   selector: 'gn-ui-organisations',
@@ -28,7 +28,7 @@ export class OrganisationsComponent {
   constructor(
     private organisationsService: OrganizationsServiceInterface,
     @Optional()
-    @Inject(ORGANIZATION_URL_TOKEN)
+    @Inject(ORGANIZATION_PAGE_URL_TOKEN)
     private urlTemplate: string
   ) {}
 

package/src/libs/feature/catalog/src/lib/organization-url.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core'
+
+// expects the replacement key ${name}
+export const ORGANIZATION_PAGE_URL_TOKEN = new InjectionToken<string>(
+  'organization-page-url-token'
+)

package/src/libs/feature/catalog/src/lib/records/records.service.ts

@@ -1,18 +1,16 @@
 import { Injectable } from '@angular/core'
-import { Observable, of } from 'rxjs'
-import { catchError, shareReplay } from 'rxjs/operators'
+import { Observable, of, switchMap } from 'rxjs'
+import { shareReplay } from 'rxjs/operators'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable({
   providedIn: 'root',
 })
 export class RecordsService {
-  recordsCount$: Observable<number> = this.recordsRepository
-    .getMatchesCount({})
-    .pipe(
-      shareReplay(1),
-      catchError(() => of(0))
-    )
+  recordsCount$: Observable<number> = of(true).pipe(
+    switchMap(() => this.recordsRepository.getMatchesCount({})),
+    shareReplay(1)
+  )
 
   constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }

package/src/libs/feature/catalog/src/lib/sources/sources.fixture.ts

@@ -1,4 +1,4 @@
-export const SOURCES_FIXTURE = [
+export const someSourcesFixture = () => [
   {
     type: 'harvester',
     logo: null,

package/src/libs/feature/dataviz/src/lib/feature-dataviz.module.ts

@@ -12,7 +12,7 @@ import {
 import { TableViewComponent } from './table-view/table-view.component'
 import { ChartViewComponent } from './chart-view/chart-view.component'
 import { TranslateModule } from '@ngx-translate/core'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { PopupAlertComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 
 @NgModule({
@@ -26,6 +26,7 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     TranslateModule,
     ChartComponent,
     UiInputsModule,
+    PopupAlertComponent,
   ],
   declarations: [
     GeoTableViewComponent,

package/src/libs/feature/dataviz/src/lib/figure/figure.fixtures.ts

@@ -1,4 +1,4 @@
-export const FIGURE_ITEM_FIXTURE = [
+export const someFigureItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -16,7 +16,7 @@ export const FIGURE_ITEM_FIXTURE = [
   },
 ]
 
-export const FIGURE_ITEM_FIXTURE_HAB = [
+export const someHabFigureItemFixture = () => [
   {
     name: 'France',
     id: '1',

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

@@ -26,3 +26,12 @@ export const saveRecordFailure = createAction(
   '[Editor] Save record failure',
   props<{ error: SaveRecordError }>()
 )
+
+export const draftSaveSuccess = createAction('[Editor] Draft save success')
+
+export const undoRecordDraft = createAction('[Editor] Undo record draft')
+
+export const setCurrentPage = createAction(
+  '[Editor] Set current page',
+  props<{ page: number }>()
+)

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

@@ -5,7 +5,11 @@ import { catchError, map, switchMap } from 'rxjs/operators'
 import * as EditorActions from './editor.actions'
 import { EditorService } from '../services/editor.service'
 import { Store } from '@ngrx/store'
-import { selectRecord, selectRecordFieldsConfig } from './editor.selectors'
+import {
+  selectEditorConfig,
+  selectRecord,
+  selectRecordAlreadySavedOnce,
+} from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable()
@@ -20,28 +24,31 @@ 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]) =>
-        this.editorService.saveRecord(record, fieldsConfig).pipe(
-          switchMap(([record, recordSource]) =>
-            of(
-              EditorActions.saveRecordSuccess(),
-              EditorActions.openRecord({
-                record,
-                alreadySavedOnce: true,
-                recordSource,
-              })
-            )
-          ),
-          catchError((error) =>
-            of(
-              EditorActions.saveRecordFailure({
-                error: error.message,
-              })
+      switchMap(([, record, fieldsConfig, alreadySavedOnce]) =>
+        this.editorService
+          .saveRecord(record, fieldsConfig, !alreadySavedOnce)
+          .pipe(
+            switchMap(([record, recordSource]) =>
+              of(
+                EditorActions.saveRecordSuccess(),
+                EditorActions.openRecord({
+                  record,
+                  alreadySavedOnce: true,
+                  recordSource,
+                })
+              )
+            ),
+            catchError((error) =>
+              of(
+                EditorActions.saveRecordFailure({
+                  error: error.message,
+                })
+              )
             )
           )
-        )
       )
     )
   )
@@ -53,15 +60,29 @@ export class EditorEffects {
     )
   )
 
-  saveRecordDraft$ = createEffect(
-    () =>
-      this.actions$.pipe(
-        ofType(EditorActions.updateRecordField),
-        debounceTime(1000),
-        withLatestFrom(this.store.select(selectRecord)),
-        switchMap(([, record]) => this.editorService.saveRecordAsDraft(record))
-      ),
-    { dispatch: false }
+  saveRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.updateRecordField),
+      debounceTime(1000),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.saveRecordAsDraft(record)),
+      map(() => EditorActions.draftSaveSuccess())
+    )
+  )
+
+  undoRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.undoRecordDraft),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.undoRecordDraft(record)),
+      map(([record, recordSource, alreadySavedOnce]) =>
+        EditorActions.openRecord({
+          record,
+          alreadySavedOnce,
+          recordSource,
+        })
+      )
+    )
   )
 
   checkHasChangesOnOpen$ = createEffect(() =>

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

@@ -25,7 +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,
@@ -41,7 +46,15 @@ export class EditorFacade {
     this.store.dispatch(EditorActions.saveRecord())
   }
 
+  undoRecordDraft() {
+    this.store.dispatch(EditorActions.undoRecordDraft())
+  }
+
   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/contact-card/contact-card.component.html

@@ -0,0 +1,27 @@
+<div class="flex flex-row gap-4 items-center">
+  <div class="flex flex-row border border-gray-200 rounded-xl p-4 gap-4 w-full">
+    <gn-ui-thumbnail
+      class="w-[56px] h-[56px] rounded-[4px]"
+      [thumbnailUrl]="contact.organization.logoUrl?.href"
+      [fit]="'contain'"
+    ></gn-ui-thumbnail>
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-between">
+        <span
+          class="flex flex-wrap font-bold w-full"
+          data-test="contactCardName"
+          >{{ contact.firstName }} {{ contact.lastName }}</span
+        >
+      </div>
+      <div data-test="contactCardEmail">{{ contact.email }}</div>
+    </div>
+  </div>
+  <gn-ui-button
+    *ngIf="removable"
+    data-test="removeContactButton"
+    type="light"
+    extraClass="w-[20px] h-[20px] flex items-center justify-center"
+    (buttonClick)="removeContact(contact)"
+    ><span class="material-symbols-outlined"> close </span>
+  </gn-ui-button>
+</div>

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { Individual } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+
+@Component({
+  selector: 'gn-ui-contact-card',
+  templateUrl: './contact-card.component.html',
+  styleUrls: ['./contact-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent, ThumbnailComponent],
+})
+export class ContactCardComponent {
+  @Input() contact: Individual
+  @Input() removable = true
+  @Output() contactRemoved = new EventEmitter<Individual>()
+
+  removeContact(contact: Individual) {
+    this.contactRemoved.emit(contact)
+  }
+}

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="placeholder"
+    [displayWithFn]="displayWithFn"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleItemSelection($event)"
+    [preventCompleteOnSelection]="true"
+    [minCharacterCount]="0"
+    [allowSubmit]="false"
+  ></gn-ui-autocomplete>
+  <div class="flex gap-2 flex-wrap">
+    <gn-ui-badge
+      *ngFor="let keyword of keywords"
+      [removable]="true"
+      (badgeRemoveClicked)="removeKeyword(keyword)"
+      >{{ keyword.label }}
+
+      <mat-icon
+        *ngIf="isPlaceWithoutExtent(keyword)"
+        [title]="'editor.form.placeKeywordWithoutExtent' | translate"
+        class="material-symbols-outlined"
+        >warning</mat-icon
+      >
+    </gn-ui-badge>
+  </div>
+</div>