geonetwork-ui 2.4.0-dev.6c8dcba0 → 2.4.0-dev.71a43b38

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

@@ -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-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,32 +68,17 @@
   </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>
-  <div
-    *ngIf="isFieldInvalid && config.invalidHintKey"
-    class="mt-2 text-pink-500 text-sm field-invalid-hint"
-  >
-    {{ config.invalidHintKey | translate }}
-  </div>
+  <ng-container *ngIf="isKeywords">
+    <gn-ui-form-field-keywords
+      [control]="formControl"
+    ></gn-ui-form-field-keywords>
+  </ng-container>
 </ng-template>

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

@@ -27,6 +27,8 @@ 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({
   selector: 'gn-ui-form-field',
@@ -51,11 +53,12 @@ import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency
     FormFieldSpatialExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
+    FormFieldKeywordsComponent,
     TranslateModule,
   ],
 })
 export class FormFieldComponent {
-  @Input() model: string
+  @Input() model: CatalogRecordKeys
   @Input() config: FormFieldConfig
   @Input() set value(v: unknown) {
     this.formControl.setValue(v, {
@@ -76,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'
   }
@@ -137,6 +97,18 @@ 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'
+  }
 
   get withoutWrapper() {
     return this.model === 'title' || this.model === 'abstract'

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

@@ -1,7 +1,7 @@
+export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
 export * from './form-field-resource-updated/form-field-resource-updated.component'
 export * from './form-field-temporal-extents/form-field-temporal-extents.component'
-
 export * from './form-field-simple/form-field-simple.component'
 export * from './form-field-file/form-field-file.component'
 export * from './form-field-rich/form-field-rich.component'

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

@@ -15,6 +15,7 @@ import * as fromEditor from './+state/editor.reducer'
 import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
 import { WizardComponent } from './components/wizard/wizard.component'
+import { Gn4PlatformService } from '../../../../../libs/api/repository/src'
 
 @NgModule({
   declarations: [
@@ -39,7 +40,7 @@ import { WizardComponent } from './components/wizard/wizard.component'
     EffectsModule.forFeature([EditorEffects]),
   ],
   exports: [WizardComponent, WizardSummarizeComponent],
-  providers: [EditorFacade],
+  providers: [EditorFacade, Gn4PlatformService],
 })
 export class FeatureEditorModule {}
 export * from './models/index'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -5,21 +5,21 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
   {
     model: 'title',
     formFieldConfig: {
-      labelKey: 'Metadata title',
+      labelKey: marker('editor.record.form.metadata.title'),
       type: 'text',
     },
   },
   {
     model: 'abstract',
     formFieldConfig: {
-      labelKey: 'Abstract',
+      labelKey: marker('editor.record.form.abstract'),
       type: 'rich',
     },
   },
   {
     model: 'uniqueIdentifier',
     formFieldConfig: {
-      labelKey: 'Unique identifier',
+      labelKey: marker('editor.record.form.unique.identifier'),
       type: 'text',
       locked: true,
     },
@@ -27,7 +27,7 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
   {
     model: 'recordUpdated',
     formFieldConfig: {
-      labelKey: 'Record Updated',
+      labelKey: marker('editor.record.form.record.updated'),
       type: 'text',
       locked: true,
     },
@@ -61,4 +61,11 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
       type: 'list',
     },
   },
+  {
+    model: 'keywords',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.keywords'),
+      type: 'list',
+    },
+  },
 ]