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

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,79 @@
+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, ['temporal', 'theme', 'other'])
+      .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,
+            },
+          },
+        ]
+      }
+    })
+  }
+}

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

@@ -5,12 +5,17 @@ import {
   OnInit,
 } from '@angular/core'
 import { FormControl } from '@angular/forms'
-import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
   CheckToggleComponent,
+  DropdownChoice,
   DropdownSelectorComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import {
+  UpdateFrequency,
+  UpdateFrequencyCustom,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { firstValueFrom } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-form-field-update-frequency',
@@ -21,26 +26,32 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core'
   imports: [CheckToggleComponent, DropdownSelectorComponent, TranslateModule],
 })
 export class FormFieldUpdateFrequencyComponent implements OnInit {
-  @Input() control: FormControl
+  @Input() control: FormControl<UpdateFrequency>
+
+  protected choices: DropdownChoice[] = []
 
   get planned() {
-    return this.control.value !== 'notPlanned'
+    return typeof this.control.value !== 'string'
   }
 
   constructor(private translateService: TranslateService) {}
 
-  ngOnInit() {
-    const updatedTimes = this.control.value?.updatedTimes
-    const per = this.control.value?.per
+  async ngOnInit() {
+    this.choices = await this.getInitialChoices()
+    if (typeof this.control.value === 'string') {
+      return
+    }
+    const updatedTimes = this.control.value.updatedTimes
+    const per = this.control.value.per
+    // the update frequency is not in the list; make it appear there
     if (updatedTimes && updatedTimes !== 1 && updatedTimes !== 2) {
       this.choices = [
         {
           value: `${per}.${updatedTimes}`,
-          label: this.translateService.instant(
-            `domain.record.updateFrequency.${per}`,
-            {
+          label: await firstValueFrom(
+            this.translateService.get(`domain.record.updateFrequency.${per}`, {
               count: updatedTimes,
-            }
+            })
           ),
         },
         ...this.choices,
@@ -56,88 +67,86 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
     }
   }
 
-  get selectedFrequency() {
+  get selectedFrequency(): string {
+    if (typeof this.control.value === 'string') return null
     const { updatedTimes, per } = this.control.value
     return `${per}.${updatedTimes}`
   }
 
   onSelectFrequencyValue(value: unknown) {
     const split = (value as string).split('.')
-    this.control.setValue({ updatedTimes: Number(split[1]), per: split[0] })
+    this.control.setValue({
+      updatedTimes: Number(split[1]),
+      per: split[0] as UpdateFrequencyCustom['per'],
+    })
   }
 
-  choices = [
-    {
-      value: 'day.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.day',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'day.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.day',
-        {
-          count: 2,
-        }
-      ),
-    },
-    {
-      value: 'week.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.week',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'week.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.week',
-        {
-          count: 2,
-        }
-      ),
-    },
-    {
-      value: 'month.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.month',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'month.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.month',
-        {
-          count: 2,
-        }
-      ),
-    },
-    {
-      value: 'year.1',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.year',
-        {
-          count: 1,
-        }
-      ),
-    },
-    {
-      value: 'year.2',
-      label: this.translateService.instant(
-        'domain.record.updateFrequency.year',
-        {
-          count: 2,
-        }
-      ),
-    },
-  ]
+  private async getInitialChoices() {
+    return [
+      {
+        value: 'day.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.day', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'day.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.day', {
+            count: 2,
+          })
+        ),
+      },
+      {
+        value: 'week.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.week', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'week.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.week', {
+            count: 2,
+          })
+        ),
+      },
+      {
+        value: 'month.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.month', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'month.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.month', {
+            count: 2,
+          })
+        ),
+      },
+      {
+        value: 'year.1',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.year', {
+            count: 1,
+          })
+        ),
+      },
+      {
+        value: 'year.2',
+        label: await firstValueFrom(
+          this.translateService.get('domain.record.updateFrequency.year', {
+            count: 2,
+          })
+        ),
+      },
+    ]
+  }
 }