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

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts

@@ -11,7 +11,7 @@ import {
   AutocompleteComponent,
   AutocompleteItem,
 } from '../../../../../../libs/ui/inputs/src'
-import { Observable, firstValueFrom } from 'rxjs'
+import { firstValueFrom, Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
@@ -32,7 +32,7 @@ export class FuzzySearchComponent implements OnInit {
   @Output() inputSubmitted = new EventEmitter<string>()
   searchInputValue$: Observable<{ title: string }>
 
-  displayWithFn: (record: CatalogRecord) => string = (record) => record?.title
+  displayWithFn: (record: CatalogRecord) => string = (record) => record.title
 
   autoCompleteAction = (query: string) =>
     this.recordsRepository

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css

@@ -3,7 +3,6 @@
 }
 .clear-btn {
   width: var(--input-height);
-  right: var(--input-height);
   height: 100%;
 }
 .search-btn {

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -8,23 +8,27 @@
     [matAutocomplete]="auto"
     (keyup.enter)="handleEnter(searchInput.value)"
   />
-  <button
-    type="button"
-    class="text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0"
-    *ngIf="searchInput.value"
-    aria-label="Clear"
-    (click)="clear()"
-  >
-    <mat-icon class="material-symbols-outlined">close</mat-icon>
-  </button>
-  <button
-    type="button"
-    class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0"
-    aria-label="Trigger search"
-    (click)="handleClickSearch()"
-  >
-    <mat-icon class="material-symbols-outlined">search</mat-icon>
-  </button>
+  <div class="flex flex-row absolute inset-y-0 right-0">
+    <button
+      type="button"
+      class="text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn"
+      *ngIf="searchInput.value"
+      aria-label="Clear"
+      (click)="clear()"
+    >
+      <mat-icon class="material-symbols-outlined">close</mat-icon>
+    </button>
+    <button
+      type="button"
+      class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 search-btn rounded-r"
+      aria-label="Trigger search"
+      *ngIf="allowSubmit"
+      data-test="autocomplete-submit-btn"
+      (click)="handleClickSearch()"
+    >
+      <mat-icon class="material-symbols-outlined">search</mat-icon>
+    </button>
+  </div>
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
@@ -39,13 +43,13 @@
 <mat-autocomplete
   #auto="matAutocomplete"
   (optionSelected)="handleSelection($event)"
-  [displayWith]="displayWithFn"
+  [displayWith]="displayWithFnInternal"
 >
   <mat-option
     *ngFor="let suggestion of suggestions$ | async"
     [value]="suggestion"
     class="p-2 suggestion"
   >
-    {{ displayWithFn(suggestion) }}
+    {{ displayWithFnInternal(suggestion) }}
   </mat-option>
 </mat-autocomplete>

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -13,25 +13,29 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core'
-import { UntypedFormControl } from '@angular/forms'
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
 import {
   MatAutocomplete,
+  MatAutocompleteModule,
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
 } from '@angular/material/autocomplete'
-import { merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
+import { first, merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
 import {
   catchError,
   debounceTime,
   distinctUntilChanged,
   filter,
   finalize,
-  first,
   map,
   switchMap,
   take,
   tap,
 } from 'rxjs/operators'
+import { MatIconModule } from '@angular/material/icon'
+import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 export type AutocompleteItem = unknown
 
@@ -40,6 +44,15 @@ export type AutocompleteItem = unknown
   templateUrl: './autocomplete.component.html',
   styleUrls: ['./autocomplete.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconModule,
+    PopupAlertComponent,
+    MatAutocompleteModule,
+    CommonModule,
+    TranslateModule,
+    ReactiveFormsModule,
+  ],
 })
 export class AutocompleteComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
@@ -49,6 +62,8 @@ export class AutocompleteComponent
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
   @Input() autoFocus = false
+  @Input() minCharacterCount? = 3
+  @Input() allowSubmit = true
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -57,22 +72,28 @@ export class AutocompleteComponent
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
 
   searching: boolean
-  suggestions$: Observable<AutocompleteItem[]>
   control = new UntypedFormControl()
-  subscription = new Subscription()
   cancelEnter = true
   selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)
   lastInputValue$ = new ReplaySubject<string>(1)
   error: string | null = null
+  suggestions$: Observable<AutocompleteItem[]>
+  subscription = new Subscription()
 
-  @Input() displayWithFn: (AutocompleteItem) => string = (item) => item
+  @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
+    item.toString()
+
+  displayWithFnInternal = (item?: AutocompleteItem) => {
+    if (item === null || item === undefined) return null
+    return this.displayWithFn(item)
+  }
 
   constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
     if (value) {
-      const previousTextValue = this.displayWithFn(value.previousValue)
-      const currentTextValue = this.displayWithFn(value.currentValue)
+      const previousTextValue = this.displayWithFnInternal(value.previousValue)
+      const currentTextValue = this.displayWithFnInternal(value.currentValue)
       if (previousTextValue !== currentTextValue) {
         this.updateInputValue(value.currentValue)
       }
@@ -80,20 +101,33 @@ export class AutocompleteComponent
   }
 
   ngOnInit(): void {
-    this.suggestions$ = merge(
+    const newValue$ = merge(
+      of(''),
+      this.inputCleared.pipe(map(() => '')),
       this.control.valueChanges.pipe(
         filter((value) => typeof value === 'string'),
-        filter((value: string) => value.length > 2),
-        debounceTime(400),
         distinctUntilChanged(),
-        tap(() => (this.searching = true))
-      ),
-      this.control.valueChanges.pipe(
-        filter((value) => typeof value === 'object' && value.title),
-        map((item) => item.title)
+        debounceTime(400)
       )
+    )
+
+    const externalValueChange$ = this.control.valueChanges.pipe(
+      filter((value) => typeof value === 'object' && value.title),
+      map((item) => item.title)
+    )
+
+    // this observable emits arrays of suggestions loaded using the given action
+    const suggestionsFromAction = merge(
+      newValue$.pipe(
+        filter((value: string) => value.length >= this.minCharacterCount)
+      ),
+      externalValueChange$
     ).pipe(
-      switchMap((value) => (value ? this.action(value) : of([]))),
+      tap(() => {
+        this.searching = true
+        this.error = null
+      }),
+      switchMap((value) => this.action(value)),
       catchError((error: Error) => {
         this.error = error.message
         return of([])
@@ -101,11 +135,32 @@ export class AutocompleteComponent
       finalize(() => (this.searching = false))
     )
 
-    this.subscription = this.control.valueChanges.subscribe((any) => {
-      if (any !== '') {
-        this.cancelEnter = false
-      }
-    })
+    this.suggestions$ = merge(
+      suggestionsFromAction,
+      // if a new value is under the min char count, clear suggestions
+      newValue$.pipe(
+        filter((value: string) => value.length < this.minCharacterCount),
+        map(() => [])
+      )
+    )
+
+    // close the panel whenever suggestions are cleared
+    this.subscription.add(
+      this.suggestions$
+        .pipe(filter((suggestions) => suggestions.length === 0))
+        .subscribe(() => {
+          this.triggerRef?.closePanel()
+        })
+    )
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((any) => {
+        if (any !== '') {
+          this.cancelEnter = false
+        }
+      })
+    )
+
     this.control.valueChanges
       .pipe(filter((value) => typeof value === 'string'))
       .subscribe(this.lastInputValue$)
@@ -120,7 +175,7 @@ export class AutocompleteComponent
   }
 
   ngOnDestroy(): void {
-    this.subscription.unsubscribe()
+    this.subscription?.unsubscribe()
   }
 
   updateInputValue(value: AutocompleteItem) {
@@ -139,19 +194,16 @@ export class AutocompleteComponent
       .pipe(take(1))
       .subscribe((selection) => selection && selection.option.deselect())
     this.inputRef.nativeElement.focus()
-    this.triggerRef.closePanel()
   }
 
   handleEnter(any: string) {
-    if (!this.cancelEnter) {
+    if (!this.cancelEnter && this.allowSubmit) {
       this.inputSubmitted.emit(any)
-      this.triggerRef.closePanel()
     }
   }
 
   handleClickSearch() {
     this.inputSubmitted.emit(this.inputRef.nativeElement.value)
-    this.triggerRef.closePanel()
   }
 
   handleSelection(event: MatAutocompleteSelectedEvent) {

package/src/libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -4,7 +4,6 @@ import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { TagInputModule } from 'ngx-chips'
 import { NgxDropzoneModule } from 'ngx-dropzone'
-import { AutocompleteComponent } from './autocomplete/autocomplete.component'
 import { ButtonComponent } from './button/button.component'
 import { BadgeComponent } from './badge/badge.component'
 import { ChipsInputComponent } from './chips-input/chips-input.component'
@@ -37,7 +36,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
-    AutocompleteComponent,
     TextInputComponent,
     DragAndDropFileInputComponent,
     ChipsInputComponent,
@@ -78,7 +76,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
   ],
   exports: [
     DropdownSelectorComponent,
-    AutocompleteComponent,
     ButtonComponent,
     TextInputComponent,
     DragAndDropFileInputComponent,

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.ts

@@ -7,12 +7,16 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-popup-alert',
   templateUrl: './popup-alert.component.html',
   styleUrls: ['./popup-alert.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class PopupAlertComponent implements OnInit {
   @Input() icon: string

package/src/libs/ui/widgets/src/lib/ui-widgets.module.ts

@@ -9,7 +9,6 @@ import { TagInputModule } from 'ngx-chips'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { LoadingMaskComponent } from './loading-mask/loading-mask.component'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { PopupAlertComponent } from './popup-alert/popup-alert.component'
 import { MatIconModule } from '@angular/material/icon'
 import { SpinningLoaderComponent } from './spinning-loader/spinning-loader.component'
 import { CommonModule } from '@angular/common'
@@ -20,7 +19,6 @@ import { CommonModule } from '@angular/common'
     ProgressBarComponent,
     StepBarComponent,
     LoadingMaskComponent,
-    PopupAlertComponent,
     SpinningLoaderComponent,
   ],
   imports: [
@@ -38,7 +36,6 @@ import { CommonModule } from '@angular/common'
     ProgressBarComponent,
     StepBarComponent,
     LoadingMaskComponent,
-    PopupAlertComponent,
     SpinningLoaderComponent,
   ],
 })