geonetwork-ui 2.4.0-dev.656babc7 → 2.4.0-dev.8f04e899

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 {
+  selectRecord,
+  selectRecordAlreadySavedOnce,
+  selectRecordFieldsConfig,
+} 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(selectRecordFieldsConfig),
+        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,14 @@ 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())
+    )
   )
 
   checkHasChangesOnOpen$ = createEffect(() =>

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

@@ -26,6 +26,7 @@ export class EditorFacade {
     select(EditorSelectors.selectRecordChangedSinceSave)
   )
   recordFields$ = this.store.pipe(select(EditorSelectors.selectRecordFields))
+  draftSaveSuccess$ = this.actions$.pipe(ofType(EditorActions.draftSaveSuccess))
 
   openRecord(
     record: CatalogRecord,

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

@@ -44,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

@@ -4,10 +4,9 @@
     [displayWithFn]="displayWithFn"
     [action]="autoCompleteAction"
     (itemSelected)="handleItemSelection($event)"
-    (inputSubmitted)="handleInputSubmission($event)"
-    (inputCleared)="handleInputCleared()"
-    [value]="searchInputValue$ | async"
     [clearOnSelection]="true"
+    [minCharacterCount]="0"
+    [allowSubmit]="false"
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     <gn-ui-badge

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

@@ -1,24 +1,17 @@
 import { CommonModule } from '@angular/common'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { FormControl } from '@angular/forms'
-import {
-  KeywordType,
-  ThesaurusModel,
-} from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 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 { Observable, map } from 'rxjs'
+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',
@@ -31,69 +24,34 @@ import { Observable, map } from 'rxjs'
     UiInputsModule,
     CommonModule,
     UiWidgetsModule,
+    AutocompleteComponent,
   ],
 })
-export class FormFieldKeywordsComponent implements OnInit {
-  @Input() control: FormControl<any>
-  @Output() itemSelected = new EventEmitter<string>()
-  @Output() inputSubmitted = new EventEmitter<string>()
-  searchInputValue$: Observable<void | { title: string }>
-  allThesaurus$: Observable<any[]>
+export class FormFieldKeywordsComponent {
+  @Input() control: FormControl<Keyword[]>
 
-  displayWithFn = (item) => {
-    if (item) {
-      return `${item?.title} (${item?.value?.name})`
-    }
-    return null
+  displayWithFn = (item: AutocompleteItem) => {
+    return `${item.title} (${item.value.thesaurus?.name})`
   }
 
   autoCompleteAction = (query: string) => {
-    const keywords$ = this.platformService.searchKeywords(query).pipe(
-      map((thesaurus) =>
-        thesaurus.map((thes) => {
-          return { title: thes.label, value: thes.thesaurus }
+    return this.platformService.searchKeywords(query).pipe(
+      map((keywords) =>
+        keywords.map((keyword) => {
+          return { title: keyword.label, value: keyword }
         })
       )
     )
-
-    return keywords$
   }
 
   constructor(private platformService: PlatformServiceInterface) {}
 
-  ngOnInit(): void {
-    this.searchInputValue$ = this.autoCompleteAction('')[0]
-  }
-
-  // type: { title: string; value: ThesaurusModel }
-  handleItemSelection(item) {
-    this.addKeyword({
-      label: item.title,
-      thesaurus: item.value,
-      type: item.value.type,
-    })
-  }
-
-  handleInputSubmission(any: string) {
-    // Should there be an input submission?
-
-    if (this.inputSubmitted.observers.length > 0) {
-      this.inputSubmitted.emit(any)
-    } else {
-      // this.searchService.updateFilters({ any })
-    }
-  }
-
-  async handleInputCleared() {
-    this.autoCompleteAction('')
+  handleItemSelection(item: AutocompleteItem) {
+    this.addKeyword(item.value)
   }
 
-  addKeyword(item: {
-    label: string
-    thesaurus: ThesaurusModel
-    type: KeywordType
-  }) {
-    const addedKeywords = [...this.control.value, item]
+  addKeyword(keyword: Keyword) {
+    const addedKeywords = [...this.control.value, keyword]
 
     // remove duplicates from keyword
     const filteredKeywords = addedKeywords.filter((value, index, self) => {

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

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

@@ -68,25 +68,11 @@
   </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
-      [type]="simpleType"
+      type="text"
       [control]="formControl"
-      [readonly]="isFieldLocked"
-      [invalid]="isFieldInvalid"
+      [readonly]="isReadOnly"
     ></gn-ui-form-field-simple>
   </ng-container>
-  <ng-container *ngIf="isFileField">
-    <gn-ui-form-field-file
-      [control]="formControl"
-      [readonly]="isFieldLocked"
-      [invalid]="isFieldInvalid"
-    ></gn-ui-form-field-file>
-  </ng-container>
-  <ng-container *ngIf="isArrayField">
-    <gn-ui-form-field-array></gn-ui-form-field-array>
-  </ng-container>
-  <ng-container *ngIf="isObjectField">
-    <gn-ui-form-field-object></gn-ui-form-field-object>
-  </ng-container>
   <ng-container *ngIf="isSpatialExtentField">
     <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
   </ng-container>
@@ -95,10 +81,4 @@
       [control]="formControl"
     ></gn-ui-form-field-keywords>
   </ng-container>
-  <div
-    *ngIf="isFieldInvalid && config.invalidHintKey"
-    class="mt-2 text-pink-500 text-sm field-invalid-hint"
-  >
-    {{ config.invalidHintKey | translate }}
-  </div>
 </ng-template>

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

@@ -27,6 +27,7 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
 import { FormFieldConfig } from './form-field.model'
 import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
+import { CatalogRecordKeys } from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
 
 @Component({
@@ -57,7 +58,7 @@ import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-key
   ],
 })
 export class FormFieldComponent {
-  @Input() model: string
+  @Input() model: CatalogRecordKeys
   @Input() config: FormFieldConfig
   @Input() set value(v: unknown) {
     this.formControl.setValue(v, {
@@ -78,49 +79,6 @@ export class FormFieldComponent {
     this.titleInput.nativeElement.children[0].focus()
   }
 
-  get simpleType() {
-    return this.config.type as
-      | 'date'
-      | 'url'
-      | 'text'
-      | 'number'
-      | 'list'
-      | 'toggle'
-  }
-
-  get isSimpleField() {
-    return (
-      this.config.type === 'text' ||
-      this.config.type === 'number' ||
-      this.config.type === 'date' ||
-      this.config.type === 'list' ||
-      this.config.type === 'url' ||
-      this.config.type === 'toggle'
-    )
-  }
-  get isFileField() {
-    return this.config.type === 'file'
-  }
-  get isSpatialExtentField() {
-    return this.config.type === 'spatial_extent'
-  }
-  get isArrayField() {
-    return this.config.type === 'array'
-  }
-  get isObjectField() {
-    return this.config.type === 'object'
-  }
-
-  get isFieldOk() {
-    return !this.config.locked && !this.config.invalid
-  }
-  get isFieldLocked() {
-    return this.config.locked
-  }
-  get isFieldInvalid() {
-    return !this.config.locked && this.config.invalid
-  }
-
   get isTitle() {
     return this.model === 'title'
   }
@@ -139,6 +97,15 @@ export class FormFieldComponent {
   get isTemporalExtents() {
     return this.model === 'temporalExtents'
   }
+  get isSpatialExtentField() {
+    return this.model === 'spatialExtents'
+  }
+  get isSimpleField() {
+    return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated'
+  }
+  get isReadOnly() {
+    return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated'
+  }
   get isKeywords() {
     return this.model === 'keywords'
   }

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
-import { Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { Observable, switchMap } from 'rxjs'
+import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { EditorFieldsConfig } from '../models/fields.model'
 import { evaluate } from '../expressions'
@@ -15,7 +15,8 @@ export class EditorService {
   // returns the record as it was when saved, alongside its source
   saveRecord(
     record: CatalogRecord,
-    fieldsConfig: EditorFieldsConfig
+    fieldsConfig: EditorFieldsConfig,
+    generateNewUniqueIdentifier = false
   ): Observable<[CatalogRecord, string]> {
     const savedRecord = { ...record }
 
@@ -29,9 +30,22 @@ export class EditorService {
         })
       }
     }
-    return this.recordsRepository
-      .saveRecord(savedRecord)
-      .pipe(map((recordSource) => [savedRecord, recordSource]))
+
+    // if we want a new unique identifier, clear the existing one
+    if (generateNewUniqueIdentifier) {
+      savedRecord.uniqueIdentifier = null
+    }
+
+    return this.recordsRepository.saveRecord(savedRecord).pipe(
+      switchMap((uniqueIdentifier) =>
+        this.recordsRepository.openRecordForEdition(uniqueIdentifier)
+      ),
+      tap(() => {
+        // if saving was successful, the original draft can be discarded
+        this.recordsRepository.clearRecordDraft(record.uniqueIdentifier)
+      }),
+      map(([record, recordSource]) => [record, recordSource])
+    )
   }
 
   // emits and completes once saving is done

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

@@ -1,4 +1,4 @@
-import { InjectionToken, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { UiMapModule } from '../../../../../libs/ui/map/src'
 import { StoreModule } from '@ngrx/store'
@@ -17,7 +17,7 @@ import {
 } from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatIconModule } from '@angular/material/icon'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { PopupAlertComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from './external-viewer-button/external-viewer-button.component'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
@@ -52,6 +52,7 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     TranslateModule,
     TableComponent,
     FeatureDatavizModule,
+    PopupAlertComponent,
   ],
   providers: [MdViewFacade],
   exports: [

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

@@ -14,7 +14,7 @@ import { SearchEffects } from './state/effects'
 import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
 import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { AutocompleteComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { NgModule } from '@angular/core'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
@@ -51,6 +51,7 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     FacetsModule,
     MatIconModule,
     UiWidgetsModule,
+    AutocompleteComponent,
   ],
   exports: [
     SortByComponent,