geonetwork-ui 2.4.0-dev.573bccd7 → 2.4.0-dev.58b3c2e5

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

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/record/src/lib/state/mdview.facade.ts

@@ -1,6 +1,14 @@
 import { Injectable } from '@angular/core'
 import { select, Store } from '@ngrx/store'
-import { defaultIfEmpty, filter, map, mergeMap, scan } from 'rxjs/operators'
+import {
+  catchError,
+  defaultIfEmpty,
+  filter,
+  map,
+  mergeMap,
+  switchMap,
+  toArray,
+} from 'rxjs/operators'
 import * as MdViewActions from './mdview.actions'
 import * as MdViewSelectors from './mdview.selectors'
 import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
@@ -95,36 +103,39 @@ export class MdViewFacade {
   )
 
   geoDataLinksWithGeometry$ = this.allLinks$.pipe(
-    mergeMap((links) => {
-      return from(links)
-    }),
-    mergeMap((link) => {
-      if (this.linkClassifier.hasUsage(link, LinkUsage.GEODATA)) {
-        if (
-          link.type === 'service' &&
-          link.accessServiceProtocol === 'ogcFeatures'
-        ) {
-          return from(this.dataService.getItemsFromOgcApi(link.url.href)).pipe(
-            map((collectionRecords: OgcApiRecord) => {
-              return collectionRecords && collectionRecords.geometry
-                ? link
-                : null
-            }),
-            defaultIfEmpty(null)
-          )
-        } else {
-          return of(link)
-        }
-      } else {
-        return of(null)
-      }
-    }),
-    scan((acc, val) => {
-      if (val !== null && !acc.includes(val)) {
-        acc.push(val)
-      }
-      return acc
-    }, [])
+    switchMap((links) =>
+      from(links).pipe(
+        mergeMap((link) => {
+          if (this.linkClassifier.hasUsage(link, LinkUsage.GEODATA)) {
+            if (
+              link.type === 'service' &&
+              link.accessServiceProtocol === 'ogcFeatures'
+            ) {
+              return from(
+                this.dataService.getItemsFromOgcApi(link.url.href)
+              ).pipe(
+                map((collectionRecords: OgcApiRecord) => {
+                  return collectionRecords && collectionRecords.geometry
+                    ? link
+                    : null
+                }),
+                defaultIfEmpty(null),
+                catchError((e) => {
+                  console.error(e)
+                  return of(null)
+                })
+              )
+            } else {
+              return of(link)
+            }
+          } else {
+            return of(null)
+          }
+        }),
+        toArray(),
+        map((links) => links.filter((link) => link !== null))
+      )
+    )
   )
 
   landingPageLinks$ = this.metadata$.pipe(

package/src/libs/feature/router/src/lib/default/constants.ts

@@ -2,6 +2,7 @@ export const ROUTER_STATE_KEY = 'router'
 
 export const ROUTER_ROUTE_SEARCH = 'search'
 export const ROUTER_ROUTE_DATASET = 'dataset'
+export const ROUTER_ROUTE_ORGANIZATION = 'organization'
 
 export enum ROUTE_PARAMS {
   SORT = '_sort',