geonetwork-ui 2.4.0-dev.6c8dcba0 → 2.4.0-dev.8f04e899

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -1,10 +1,11 @@
 import { Injectable } from '@angular/core'
-import { Observable, of, switchMap } from 'rxjs'
+import { Observable, combineLatest, of, switchMap } from 'rxjs'
 import { catchError, map, shareReplay, tap } from 'rxjs/operators'
 import {
   MeApiService,
   RegistriesApiService,
   SiteApiService,
+  ThesaurusInfoApiModel,
   ToolsApiService,
   UserfeedbackApiService,
   UsersApiService,
@@ -12,13 +13,18 @@ import {
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { UserModel } from '../../../../../../../libs/common/domain/src/lib/model/user/user.model'
 import {
+  Keyword,
   Organization,
   UserFeedback,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { Gn4PlatformMapper } from './gn4-platform.mapper'
 import { ltr } from 'semver'
-import { ThesaurusModel } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus/thesaurus.model'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
+import { HttpClient } from '@angular/common/http'
+import {
+  KeywordApiResponse,
+  ThesaurusApiResponse,
+} from '../../../../../../../libs/api/metadata-converter/src'
 
 const minApiVersion = '4.2.2'
 
@@ -60,7 +66,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
    * A map of already loaded thesauri (groups of keywords); the key is a URI
    * @private
    */
-  private thesauri: Record<string, Observable<ThesaurusModel>> = {}
+  private keywordsByThesauri: Record<string, Observable<Keyword[]>> = {}
 
   constructor(
     private siteApiService: SiteApiService,
@@ -70,7 +76,8 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     private toolsApiService: ToolsApiService,
     private registriesApiService: RegistriesApiService,
     private langService: LangService,
-    private userfeedbackApiService: UserfeedbackApiService
+    private userfeedbackApiService: UserfeedbackApiService,
+    private httpClient: HttpClient
   ) {
     this.me$ = this.meApi.getMe().pipe(
       switchMap((apiUser) => this.mapper.userFromMeApi(apiUser)),
@@ -121,7 +128,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
       // the thesaurus URI is inferred by removing a part of the keyword URI
       // this is not exact science but it's OK, we'll still end up loading a bunch of keywords at once anyway
       const thesaurusUri = key.replace(/\/([^/]+)$/, '/')
-      return this.getThesaurusByUri(thesaurusUri).pipe(
+      return this.getKeywordsByUri(thesaurusUri).pipe(
         map((thesaurus) => {
           for (const item of thesaurus) {
             if (item.key === key) return item.label
@@ -133,12 +140,49 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     return this.keyTranslations$.pipe(map((translations) => translations[key]))
   }
 
-  getThesaurusByUri(uri: string): Observable<ThesaurusModel> {
-    if (this.thesauri[uri]) {
-      return this.thesauri[uri]
+  private allThesaurus$ = this.httpClient
+    .get(
+      `${this.registriesApiService.configuration.basePath}/thesaurus?_content_type=json`
+    )
+    .pipe(
+      map((thesaurus) => {
+        // FIXME: find a better way to exclude place keywords
+        // thesaurus[0].filter((thes) => thes.dname !== 'place')
+        return thesaurus[0] as ThesaurusApiResponse[]
+      }),
+      shareReplay(1)
+    )
+
+  searchKeywords(query: string): Observable<Keyword[]> {
+    const keywords$: Observable<KeywordApiResponse[]> =
+      this.registriesApiService.searchKeywords(
+        query,
+        this.langService.iso3,
+        10,
+        0,
+        null,
+        null,
+        null,
+        `*${query}*`
+      ) as Observable<KeywordApiResponse[]>
+
+    return combineLatest([keywords$, this.allThesaurus$]).pipe(
+      map(([keywords, thesaurus]) => {
+        return this.mapper.keywordsFromApi(
+          keywords,
+          thesaurus,
+          this.langService.iso3
+        )
+      })
+    )
+  }
+
+  getKeywordsByUri(uri: string): Observable<Keyword[]> {
+    if (this.keywordsByThesauri[uri]) {
+      return this.keywordsByThesauri[uri]
     }
-    this.thesauri[uri] = this.registriesApiService
-      .searchKeywords(
+    const keywords$: Observable<KeywordApiResponse[]> =
+      this.registriesApiService.searchKeywords(
         null,
         this.langService.iso3,
         1000,
@@ -147,18 +191,23 @@ export class Gn4PlatformService implements PlatformServiceInterface {
         null,
         null,
         `${uri}*`
-      )
-      .pipe(
-        map((thesaurus) =>
-          this.mapper.thesaurusFromApi(
-            thesaurus as any[],
-            this.langService.iso3
-          )
-        ),
-        shareReplay(1)
-      )
+      ) as Observable<KeywordApiResponse[]>
+
+    this.keywordsByThesauri[uri] = combineLatest([
+      keywords$,
+      this.allThesaurus$,
+    ]).pipe(
+      map(([keywords, thesaurus]) => {
+        return this.mapper.keywordsFromApi(
+          keywords,
+          thesaurus,
+          this.langService.iso3
+        )
+      }),
+      shareReplay(1)
+    )
 
-    return this.thesauri[uri]
+    return this.keywordsByThesauri[uri]
   }
 
   getUserFeedbacks(uuid: string): Observable<UserFeedback[]> {

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -2,6 +2,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import type { Individual } from './contact.model'
 import type { Organization } from './organization.model'
 import type { Geometry } from 'geojson'
+import { KeywordType, ThesaurusModel } from '../thesaurus'
 
 type Uuid = string
 
@@ -60,18 +61,12 @@ export type SpatialRepresentationType =
   | 'table'
   | 'point'
 
-export type KeywordType = 'place' | 'temporal' | 'theme' | 'other'
-
-export type KeywordThesaurus = {
-  id: string
-  name?: string
-  url?: URL
-}
-
 export interface Keyword {
+  key?: string
   label: string
+  description?: string
   type: KeywordType
-  thesaurus?: KeywordThesaurus
+  thesaurus?: ThesaurusModel
 }
 // languages should be expressed using two-letters ISO 639-1 codes
 export type LanguageCode = string

package/src/libs/common/domain/src/lib/model/thesaurus/thesaurus.model.ts

@@ -1,7 +1,14 @@
-export interface ThesaurusItemModel {
-  key: string
-  label: string
-  description?: string
-}
+export type KeywordType = 'place' | 'temporal' | 'theme' | 'other'
 
-export type ThesaurusModel = ThesaurusItemModel[]
+export interface ThesaurusModel {
+  id: string
+  name?: string
+  url?: URL
+  thesaurusKey?: string
+  definition?: string
+  definitions?: object
+  uri?: string
+  value?: string
+  values?: object
+  type?: KeywordType
+}

package/src/libs/common/domain/src/lib/platform.service.interface.ts

@@ -1,8 +1,7 @@
 import type { Observable } from 'rxjs'
 import type { UserModel } from './model/user/user.model'
 import type { Organization } from './model/record/organization.model'
-import type { ThesaurusModel } from './model/thesaurus/'
-import { UserFeedback } from './model/record'
+import { Keyword, UserFeedback } from './model/record'
 
 export abstract class PlatformServiceInterface {
   abstract getType(): string
@@ -16,7 +15,8 @@ export abstract class PlatformServiceInterface {
   ): Observable<UserModel[]>
   abstract getOrganizations(): Observable<Organization[]>
   abstract translateKey(key: string): Observable<string>
-  abstract getThesaurusByUri(uri: string): Observable<ThesaurusModel>
+  abstract searchKeywords(query: string): Observable<Keyword[]>
+  abstract getKeywordsByUri(uri: string): Observable<Keyword[]>
   abstract getUserFeedbacks(recordUuid: string): Observable<UserFeedback[]>
   abstract postUserFeedbacks(recordUuid: UserFeedback): Observable<void>
 }

package/src/libs/common/domain/src/lib/repository/records-repository.interface.ts

@@ -33,7 +33,7 @@ export abstract class RecordsRepositoryInterface {
   /**
    * @param record
    * @param referenceRecordSource
-   * @returns Observable<string> Returns the source of the record as it was serialized when saved
+   * @returns Observable<string> Returns the unique identifier of the record as it was when saved
    */
   abstract saveRecord(
     record: CatalogRecord,

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

@@ -12,7 +12,7 @@ import {
 import { TableViewComponent } from './table-view/table-view.component'
 import { ChartViewComponent } from './chart-view/chart-view.component'
 import { TranslateModule } from '@ngx-translate/core'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { PopupAlertComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 
 @NgModule({
@@ -26,6 +26,7 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     TranslateModule,
     ChartComponent,
     UiInputsModule,
+    PopupAlertComponent,
   ],
   declarations: [
     GeoTableViewComponent,

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

@@ -26,3 +26,5 @@ export const saveRecordFailure = createAction(
   '[Editor] Save record failure',
   props<{ error: SaveRecordError }>()
 )
+
+export const draftSaveSuccess = createAction('[Editor] Draft save success')

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