geonetwork-ui 2.4.0-dev.a2f3bb9f → 2.4.0-dev.e1bb65c4

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

@@ -1,16 +1,22 @@
 import { inject, Injectable } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
-import { of, withLatestFrom } from 'rxjs'
+import { debounceTime, filter, of, withLatestFrom } from 'rxjs'
 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 {
+  selectRecord,
+  selectRecordAlreadySavedOnce,
+  selectRecordFieldsConfig,
+} from './editor.selectors'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable()
 export class EditorEffects {
   private actions$ = inject(Actions)
   private editorService = inject(EditorService)
+  private recordsRepository = inject(RecordsRepositoryInterface)
   private store = inject(Store)
 
   saveRecord$ = createEffect(() =>
@@ -18,24 +24,31 @@ export class EditorEffects {
       ofType(EditorActions.saveRecord),
       withLatestFrom(
         this.store.select(selectRecord),
-        this.store.select(selectRecordFieldsConfig)
+        this.store.select(selectRecordFieldsConfig),
+        this.store.select(selectRecordAlreadySavedOnce)
       ),
-      switchMap(([, record, fieldsConfig]) =>
-        this.editorService.saveRecord(record, fieldsConfig).pipe(
-          switchMap((newRecord) =>
-            of(
-              EditorActions.saveRecordSuccess(),
-              EditorActions.openRecord({ record: newRecord })
-            )
-          ),
-          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,
+                })
+              )
             )
           )
-        )
       )
     )
   )
@@ -46,4 +59,25 @@ export class EditorEffects {
       map(() => EditorActions.markRecordAsChanged())
     )
   )
+
+  saveRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.updateRecordField),
+      debounceTime(1000),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.saveRecordAsDraft(record)),
+      map(() => EditorActions.draftSaveSuccess())
+    )
+  )
+
+  checkHasChangesOnOpen$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.openRecord),
+      map(({ record }) =>
+        this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
+      ),
+      filter((hasDraft) => hasDraft),
+      map(() => EditorActions.markRecordAsChanged())
+    )
+  )
 }

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

@@ -3,7 +3,7 @@ import { select, Store } from '@ngrx/store'
 import * as EditorActions from './editor.actions'
 import * as EditorSelectors from './editor.selectors'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { filter, Observable } from 'rxjs'
+import { filter } from 'rxjs'
 import { Actions, ofType } from '@ngrx/effects'
 
 @Injectable()
@@ -12,6 +12,10 @@ export class EditorFacade {
   private actions$ = inject(Actions)
 
   record$ = this.store.pipe(select(EditorSelectors.selectRecord))
+  recordSource$ = this.store.pipe(select(EditorSelectors.selectRecordSource))
+  alreadySavedOnce$ = this.store.pipe(
+    select(EditorSelectors.selectRecordAlreadySavedOnce)
+  )
   saving$ = this.store.pipe(select(EditorSelectors.selectRecordSaving))
   saveError$ = this.store.pipe(
     select(EditorSelectors.selectRecordSaveError),
@@ -22,9 +26,16 @@ export class EditorFacade {
     select(EditorSelectors.selectRecordChangedSinceSave)
   )
   recordFields$ = this.store.pipe(select(EditorSelectors.selectRecordFields))
+  draftSaveSuccess$ = this.actions$.pipe(ofType(EditorActions.draftSaveSuccess))
 
-  openRecord(record: CatalogRecord) {
-    this.store.dispatch(EditorActions.openRecord({ record }))
+  openRecord(
+    record: CatalogRecord,
+    recordSource: string,
+    alreadySavedOnce: boolean
+  ) {
+    this.store.dispatch(
+      EditorActions.openRecord({ record, recordSource, alreadySavedOnce })
+    )
   }
 
   saveRecord() {

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

@@ -7,8 +7,18 @@ import { DEFAULT_FIELDS } from '../fields.config'
 
 export const EDITOR_FEATURE_KEY = 'editor'
 
+/**
+ * @property record The record being edited
+ * @property recordSource Original representation of the record as text, used as a reference; null means the record hasn't be serialized yet
+ * @property saving
+ * @property saveError
+ * @property changedSinceSave
+ * @property fieldsConfig Configuration for the fields in the editor
+ */
 export interface EditorState {
   record: CatalogRecord | null
+  recordSource: string | null
+  alreadySavedOnce: boolean
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
@@ -21,6 +31,8 @@ export interface EditorPartialState {
 
 export const initialEditorState: EditorState = {
   record: null,
+  recordSource: null,
+  alreadySavedOnce: false,
   saving: false,
   saveError: null,
   changedSinceSave: false,
@@ -29,11 +41,16 @@ export const initialEditorState: EditorState = {
 
 const reducer = createReducer(
   initialEditorState,
-  on(EditorActions.openRecord, (state, { record }) => ({
-    ...state,
-    changedSinceSave: false,
-    record,
-  })),
+  on(
+    EditorActions.openRecord,
+    (state, { record, recordSource, alreadySavedOnce }) => ({
+      ...state,
+      changedSinceSave: false,
+      recordSource: recordSource ?? null,
+      alreadySavedOnce,
+      record,
+    })
+  ),
   on(EditorActions.saveRecord, (state) => ({
     ...state,
     saving: true,

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

@@ -9,6 +9,11 @@ export const selectRecord = createSelector(
   (state: EditorState) => state.record
 )
 
+export const selectRecordSource = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.recordSource
+)
+
 export const selectRecordSaving = createSelector(
   selectEditorState,
   (state: EditorState) => state.saving
@@ -24,6 +29,11 @@ export const selectRecordChangedSinceSave = createSelector(
   (state: EditorState) => state.changedSinceSave
 )
 
+export const selectRecordAlreadySavedOnce = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.alreadySavedOnce
+)
+
 export const selectRecordFieldsConfig = createSelector(
   selectEditorState,
   (state: EditorState) => state.fieldsConfig
@@ -34,6 +44,6 @@ export const selectRecordFields = createSelector(
   (state: EditorState) =>
     state.fieldsConfig.map((fieldConfig) => ({
       config: fieldConfig,
-      value: state.record?.[fieldConfig.model] || null,
+      value: state.record?.[fieldConfig.model] ?? null,
     }))
 )

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html

@@ -0,0 +1,19 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="'Search for keywords in all thesaurus'"
+    [displayWithFn]="displayWithFn"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleItemSelection($event)"
+    [clearOnSelection]="true"
+    [minCharacterCount]="0"
+    [allowSubmit]="false"
+  ></gn-ui-autocomplete>
+  <div class="flex gap-2 flex-wrap">
+    <gn-ui-badge
+      *ngFor="let keyword of control.value; let index = index"
+      [removable]="true"
+      (badgeRemoveClicked)="removeKeyword(index)"
+      >{{ keyword.label }}</gn-ui-badge
+    >
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import {
+  AutocompleteComponent,
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
+import { map } from 'rxjs'
+import { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+
+type AutocompleteItem = { title: string; value: Keyword }
+
+@Component({
+  selector: 'gn-ui-form-field-keywords',
+  templateUrl: './form-field-keywords.component.html',
+  styleUrls: ['./form-field-keywords.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+  ],
+})
+export class FormFieldKeywordsComponent {
+  @Input() control: FormControl<Keyword[]>
+
+  displayWithFn = (item: AutocompleteItem) => {
+    return `${item.title} (${item.value.thesaurus?.name})`
+  }
+
+  autoCompleteAction = (query: string) => {
+    return this.platformService.searchKeywords(query).pipe(
+      map((keywords) =>
+        keywords.map((keyword) => {
+          return { title: keyword.label, value: keyword }
+        })
+      )
+    )
+  }
+
+  constructor(private platformService: PlatformServiceInterface) {}
+
+  handleItemSelection(item: AutocompleteItem) {
+    this.addKeyword(item.value)
+  }
+
+  addKeyword(keyword: Keyword) {
+    const addedKeywords = [...this.control.value, keyword]
+
+    // remove duplicates from keyword
+    const filteredKeywords = addedKeywords.filter((value, index, self) => {
+      return (
+        index ===
+        self.findIndex(
+          (t) =>
+            t?.label === value?.label &&
+            t?.thesaurus?.id === value?.thesaurus?.id &&
+            t?.type === value?.type
+        )
+      )
+    })
+
+    this.control.setValue(filteredKeywords)
+  }
+
+  removeKeyword(index: number) {
+    const removeKeywords = this.control.value.filter((_, i) => i !== index)
+
+    this.control.setValue(removeKeywords)
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-date/form-field-temporal-extents-date.component.html

@@ -0,0 +1,7 @@
+<div class="border rounded-lg px-4 pb-4">
+  <p class="my-2" translate>editor.record.form.temporalExtents.date</p>
+  <gn-ui-date-picker
+    [date]="control.value?.start"
+    (dateChange)="control.setValue({ start: $event })"
+  ></gn-ui-date-picker>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-date/form-field-temporal-extents-date.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { DatePickerComponent } from '../../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents-date',
+  templateUrl: './form-field-temporal-extents-date.component.html',
+  styleUrls: ['./form-field-temporal-extents-date.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DatePickerComponent, TranslateModule],
+})
+export class FormFieldTemporalExtentsDateComponent {
+  @Input() control!: FormControl
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-range/form-field-temporal-extents-range.component.html

@@ -0,0 +1,13 @@
+<div class="border rounded-lg px-4 pb-4">
+  <p class="my-2" translate>editor.record.form.temporalExtents.range</p>
+  <gn-ui-date-range-picker
+    [startDate]="control.value?.start"
+    [endDate]="control.value?.end"
+    (startDateChange)="
+      control.setValue({ start: $event, end: control.value?.end })
+    "
+    (endDateChange)="
+      control.setValue({ start: control.value?.start, end: $event })
+    "
+  ></gn-ui-date-range-picker>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-range/form-field-temporal-extents-range.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { DateRangePickerComponent } from '../../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents-range',
+  templateUrl: './form-field-temporal-extents-range.component.html',
+  styleUrls: ['./form-field-temporal-extents-range.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DateRangePickerComponent, TranslateModule],
+})
+export class FormFieldTemporalExtentsRangeComponent {
+  @Input() control!: FormControl
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html

@@ -0,0 +1,6 @@
+<gn-ui-sortable-list
+  [elements]="elements"
+  (elementsChange)="onElementsChange($event)"
+  [addOptions]="addOptions$ | async"
+  (add)="onAdd($event)"
+></gn-ui-sortable-list>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.ts

@@ -0,0 +1,130 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  Type,
+} from '@angular/core'
+import { FormArray, FormControl } from '@angular/forms'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/elements/src'
+import { Subscription, combineLatest, map } from 'rxjs'
+import { FormFieldTemporalExtentsDateComponent } from './form-field-temporal-extents-date/form-field-temporal-extents-date.component'
+import { FormFieldTemporalExtentsRangeComponent } from './form-field-temporal-extents-range/form-field-temporal-extents-range.component'
+import { TranslateService } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents',
+  templateUrl: './form-field-temporal-extents.component.html',
+  styleUrls: ['./form-field-temporal-extents.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, SortableListComponent],
+})
+export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
+  @Input() control!: FormControl
+
+  subscription: Subscription
+
+  array: FormArray = new FormArray([])
+  elements: Array<{
+    component: Type<any>
+    inputs: Record<string, any>
+  }>
+
+  addOptions$ = combineLatest([
+    this.translateService
+      .get('editor.record.form.temporalExtents.addDate')
+      .pipe(map((buttonLabel) => ({ buttonLabel, eventName: 'date' }))),
+    this.translateService
+      .get('editor.record.form.temporalExtents.addRange')
+      .pipe(map((buttonLabel) => ({ buttonLabel, eventName: 'range' }))),
+  ])
+
+  constructor(private translateService: TranslateService) {}
+
+  ngOnInit() {
+    this.resetValueFromInput(this.control.value)
+
+    this.subscription = new Subscription()
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((value) => {
+        this.resetValueFromInput(value)
+      })
+    )
+
+    this.subscription.add(
+      this.array.valueChanges.subscribe((value) => {
+        this.control.setValue(value)
+      })
+    )
+  }
+
+  onElementsChange(elements: any) {
+    this.array.clear({ emitEvent: false })
+    elements.forEach((e: any, i: number) =>
+      this.array.push(e.inputs.control, {
+        emitEvent: i === elements.length - 1,
+      })
+    )
+  }
+
+  onAdd(eventName: string) {
+    switch (eventName) {
+      case 'date': {
+        const dateControl = new FormControl({ start: new Date() })
+        this.array.push(dateControl)
+        break
+      }
+      case 'range': {
+        const rangeControl = new FormControl({
+          start: new Date(),
+          end: new Date(),
+        })
+        this.array.push(rangeControl)
+        break
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+
+  private resetValueFromInput(value) {
+    this.array.clear({ emitEvent: false })
+    this.elements = []
+    value.forEach((v: any) => {
+      if ('start' in v && 'end' in v) {
+        const rangeControl = new FormControl({
+          start: v.start,
+          end: v.end,
+        })
+        this.array.push(rangeControl, { emitEvent: false })
+        this.elements = [
+          ...this.elements,
+          {
+            component: FormFieldTemporalExtentsRangeComponent,
+            inputs: {
+              control: rangeControl,
+            },
+          },
+        ]
+      } else {
+        const dateControl = new FormControl({ start: v.start })
+        this.array.push(dateControl, { emitEvent: false })
+        this.elements = [
+          ...this.elements,
+          {
+            component: FormFieldTemporalExtentsDateComponent,
+            inputs: {
+              control: dateControl,
+            },
+          },
+        ]
+      }
+    })
+  }
+}