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

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

@@ -1,5 +1,5 @@
 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,
@@ -12,13 +12,19 @@ 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'
+import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 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,60 @@ 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) => {
+        return thesaurus[0] as ThesaurusApiResponse[]
+      }),
+      shareReplay(1)
+    )
+
+  searchKeywords(
+    query: string,
+    keywordTypes: KeywordType[]
+  ): Observable<Keyword[]> {
+    const keywords$: Observable<KeywordApiResponse[]> = this.allThesaurus$.pipe(
+      switchMap((thesaurus) => {
+        const selectedThesauri = []
+        keywordTypes.map((keywordType) => {
+          selectedThesauri.push(
+            ...thesaurus.filter((thes) => thes.dname === keywordType)
+          )
+        })
+
+        return this.registriesApiService.searchKeywords(
+          query,
+          this.langService.iso3,
+          10,
+          0,
+          null,
+          selectedThesauri.map((thes) => thes.key),
+          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 +202,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/record/organization.model.ts

@@ -1,5 +1,6 @@
 export interface Organization {
   name: string
+  email?: string
   description?: string
   website?: URL
   logoUrl?: URL

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,8 @@
 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'
+import { KeywordType } from './model/thesaurus'
 
 export abstract class PlatformServiceInterface {
   abstract getType(): string
@@ -16,7 +16,11 @@ 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,
+    keywordTypes: KeywordType[]
+  ): 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,
@@ -52,4 +52,7 @@ export abstract class RecordsRepositoryInterface {
 
   abstract clearRecordDraft(uniqueIdentifier: string): void
   abstract recordHasDraft(uniqueIdentifier: string): boolean
+
+  /** will return all pending drafts, both published and not published */
+  abstract getAllDrafts(): Observable<CatalogRecord[]>
 }

package/src/libs/common/fixtures/src/lib/organisations.fixture.ts

@@ -5,84 +5,112 @@ export const ORGANISATIONS_FIXTURE: Organization[] = deepFreeze([
   {
     name: 'I Data Org',
     description: 'one org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo1.png'),
     recordCount: 12,
   },
   {
     name: 'H Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo2.png'),
     recordCount: 15,
   },
   {
     name: 'J Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo3.png'),
     recordCount: 6,
   },
   {
     name: 'G Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo4.png'),
     recordCount: 8,
   },
   {
     name: 'B Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo5.png'),
     recordCount: 2,
   },
   {
     name: 'D Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo6.png'),
     recordCount: 17,
   },
   {
     name: 'F Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo7.png'),
     recordCount: 14,
   },
   {
     name: 'A Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo8.png'),
     recordCount: 3,
   },
   {
     name: 'C Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo9.png'),
     recordCount: 9,
   },
   {
     name: 'E Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo10.png'),
     recordCount: 1,
   },
   {
     name: 'é Data Org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo10.png'),
     recordCount: 2,
   },
   {
     name: 'wizard-org',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo11.png'),
     recordCount: 2,
   },
   {
     name: "Université de l'Ingénierie",
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo12.png'),
     recordCount: 2,
   },
   {
     name: 'ARS / Agence régionale de santé',
     description: 'another org for testing',
+    email: 'test@gmail.com',
+    website: new URL('https://my-geonetwork.org/'),
     logoUrl: new URL('https://my-geonetwork.org/logo12.png'),
     recordCount: 2,
   },

package/src/libs/common/fixtures/src/lib/records.fixtures.ts

@@ -233,6 +233,14 @@ Malgré l'attention portée à la création de ces données, il est rappelé que
         description: 'Téléchargement du fichier',
         mimeType: 'x-gis/x-shapefile',
       },
+      {
+        type: 'service',
+        url: new URL('https://my-org.net/ogc'),
+        accessServiceProtocol: 'ogcFeatures',
+        name: 'ogcFeaturesSecondRecord',
+        description: 'This OGC service is the second part of the download',
+        identifierInService: 'my:featuretype',
+      },
     ],
     lineage: `Document d’urbanisme numérisé conformément aux prescriptions nationales du CNIG par le Service d'Information Géographique de l'Agglomération de la Région de Compiègne.
 Ce lot de données produit en 2019, a été numérisé à partir du PCI Vecteur de 2019 et contrôlé par le Service d'Information Géographique de l'Agglomération de la Région de Compiègne.`,

package/src/libs/data-access/datafeeder/src/openapi/model/datasetMetadata.api.model.ts

@@ -38,4 +38,8 @@ export interface DatasetMetadataApiModel {
    * textual description of dataset lineage
    */
   creationProcessDescription?: string
+  /**
+   * Optional, additional options for the dataset
+   */
+  options: any
 }

package/src/libs/data-access/datafeeder/src/openapi/model/datasetUploadStatus.api.model.ts

@@ -34,4 +34,6 @@ export interface DatasetUploadStatusApiModel {
    * detected charset
    */
   encoding?: string
+  format?: 'CSV' | 'SHAPEFILE'
+  options?: any
 }

package/src/libs/data-access/gn4/src/openapi/model/user.api.model.ts

@@ -21,7 +21,7 @@ export interface UserApiModel {
   emailAddresses?: Set<string>
   addresses?: Set<AddressApiModel>
   primaryAddress?: AddressApiModel
-  organisation?: string
+  organization?: string
   kind?: string
   lastLoginDate?: string
   authorities?: Array<GrantedAuthorityApiModel>

package/src/libs/feature/catalog/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/feature-catalog.module'
+export * from './lib/organization-url.token'
 export * from './lib/sources/sources.service'
 export * from './lib/sources/sources.model'
 export * from './lib/records/records.service'

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

@@ -4,7 +4,6 @@ import { UiCatalogModule } from '../../../../../libs/ui/catalog/src'
 import {
   GroupsApiService,
   SearchApiService,
-  SiteApiService,
 } from '../../../../../libs/data-access/gn4/src'
 import { CommonModule } from '@angular/common'
 import { SourceLabelComponent } from './source-label/source-label.component'

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.html

@@ -19,7 +19,7 @@
     [showContent]="!!organisation.name"
   >
     <gn-ui-organisation-preview
-      [organisation]="organisation"
+      [organization]="organisation"
       [organisationUrl]="getOrganisationUrl(organisation)"
       (clickedOrganisation)="orgSelect.emit($event)"
     ></gn-ui-organisation-preview>

package/src/libs/feature/catalog/src/lib/organisations/organisations.component.ts

@@ -10,10 +10,10 @@ import {
 import { Organization } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs'
 import { map, startWith, tap } from 'rxjs/operators'
-import { ORGANIZATION_URL_TOKEN } from '../feature-catalog.module'
 import { OrganizationsServiceInterface } from '../../../../../../libs/common/domain/src/lib/organizations.service.interface'
 import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { ORGANIZATION_PAGE_URL_TOKEN } from '../organization-url.token'
 
 @Component({
   selector: 'gn-ui-organisations',
@@ -28,7 +28,7 @@ export class OrganisationsComponent {
   constructor(
     private organisationsService: OrganizationsServiceInterface,
     @Optional()
-    @Inject(ORGANIZATION_URL_TOKEN)
+    @Inject(ORGANIZATION_PAGE_URL_TOKEN)
     private urlTemplate: string
   ) {}
 

package/src/libs/feature/catalog/src/lib/organization-url.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core'
+
+// expects the replacement key ${name}
+export const ORGANIZATION_PAGE_URL_TOKEN = new InjectionToken<string>(
+  'organization-page-url-token'
+)

package/src/libs/feature/catalog/src/lib/records/records.service.ts

@@ -1,18 +1,16 @@
 import { Injectable } from '@angular/core'
-import { Observable, of } from 'rxjs'
-import { catchError, shareReplay } from 'rxjs/operators'
+import { Observable, of, switchMap } from 'rxjs'
+import { shareReplay } from 'rxjs/operators'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable({
   providedIn: 'root',
 })
 export class RecordsService {
-  recordsCount$: Observable<number> = this.recordsRepository
-    .getMatchesCount({})
-    .pipe(
-      shareReplay(1),
-      catchError(() => of(0))
-    )
+  recordsCount$: Observable<number> = of(true).pipe(
+    switchMap(() => this.recordsRepository.getMatchesCount({})),
+    shareReplay(1)
+  )
 
   constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }

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>