111731: Integrated the FilterInputSuggestionsComponent in the advanced search facets to show input suggestions (only works for filters that are also part of the facets)

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html

@@ -4,7 +4,7 @@
       (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
       (dsClickOutside)="close();">
   <div class="form-group mb-0">
-    <label *ngIf="label; else searchInput" class="mb-0">
+    <label *ngIf="label; else searchInput" class="mb-0 w-100">
       <span class="font-weight-bold">
         {{label}}
       </span>

src/app/shared/search/advanced-search/advanced-search.component.html

@@ -11,4 +11,16 @@
       {{ 'search.filters.operator.' + operator.operator + '.text' | translate }}
     </option>
   </select>
+  <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
+                               [placeholder]="'search.filters.filter.' + currentFilter + '.placeholder' | translate"
+                               [label]="'search.filters.filter.' + currentFilter + '.label' | translate"
+                               [action]="router.url"
+                               [name]="'f.' + currentFilter"
+                               [(ngModel)]="currentValue"
+                               (findSuggestions)="findSuggestions($event)"
+                               ngDefaultControl>
+  </ds-filter-input-suggestions>
+  <button [disabled]="currentValue === ''" class="btn btn-primary mt-2">
+    {{ 'search.sidebar.advanced-search.add' | translate }}
+  </button>
 </div>

src/app/shared/search/advanced-search/advanced-search.component.scss

@@ -0,0 +1,5 @@
+:host ::ng-deep {
+  ds-filter-input-suggestions label span {
+    display: none;
+  }
+}

src/app/shared/search/advanced-search/advanced-search.component.spec.ts

@@ -1,17 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AdvancedSearchComponent } from './advanced-search.component';
+import { Router } from '@angular/router';
+import { RouterStub } from '../../testing/router.stub';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { SearchFilterService } from '../../../core/shared/search/search-filter.service';
 import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub';
+import { SearchFilterServiceStub } from '../../testing/search-filter-service.stub';
 import { TranslateModule } from '@ngx-translate/core';
 
 describe('AdvancedSearchComponent', () => {
   let component: AdvancedSearchComponent;
   let fixture: ComponentFixture<AdvancedSearchComponent>;
 
+  let router: RouterStub;
   let searchConfigurationService: SearchConfigurationServiceStub;
+  let searchFilterService: SearchFilterServiceStub;
 
   beforeEach(async () => {
+    router = new RouterStub();
     searchConfigurationService = new SearchConfigurationServiceStub();
+    searchFilterService = new SearchFilterServiceStub();
 
     await TestBed.configureTestingModule({
       imports: [
@@ -21,7 +29,9 @@ describe('AdvancedSearchComponent', () => {
         AdvancedSearchComponent,
       ],
       providers: [
+        { provide: Router, useValue: router },
         { provide: SearchConfigurationService, useValue: searchConfigurationService },
+        { provide: SearchFilterService, useValue: searchFilterService },
       ],
     }).compileComponents();
 

src/app/shared/search/advanced-search/advanced-search.component.ts

@@ -1,7 +1,12 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { map, Observable } from 'rxjs';
+import { map, Observable, of as observableOf } from 'rxjs';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
 import { FilterConfig, SearchConfig } from '../../../core/shared/search/search-filters/search-config.model';
+import { SearchFilterService } from '../../../core/shared/search/search-filter.service';
+import { SearchFilterConfig } from '../models/search-filter-config.model';
+import { Router } from '@angular/router';
+import { InputSuggestion } from '../../input-suggestions/input-suggestions.model';
+import { hasValue } from '../../empty.util';
 
 @Component({
   selector: 'ds-advanced-search',
@@ -12,6 +17,8 @@ export class AdvancedSearchComponent implements OnInit {
 
   @Input() configuration: string;
 
+  @Input() filtersConfig: SearchFilterConfig[];
+
   advancedFilters$: Observable<FilterConfig[]>;
 
   advancedFilterMap$: Observable<Map<string, FilterConfig>>;
@@ -20,8 +27,20 @@ export class AdvancedSearchComponent implements OnInit {
 
   currentOperator: string;
 
+  /**
+   * The value of the input field that is used to query for possible values for this filter
+   */
+  currentValue = '';
+
+  /**
+   * Emits the result values for this filter found by the current filter query
+   */
+  filterSearchResults$: Observable<InputSuggestion[]> = observableOf([]);
+
   constructor(
+    protected router: Router,
     protected searchConfigurationService: SearchConfigurationService,
+    protected searchFilterService: SearchFilterService,
   ) {
   }
 
@@ -44,4 +63,14 @@ export class AdvancedSearchComponent implements OnInit {
     );
   }
 
+  findSuggestions(query: string): void {
+    if (hasValue(this.filtersConfig)) {
+      for (const filterConfig of this.filtersConfig) {
+        if (filterConfig.name === this.currentFilter) {
+          this.filterSearchResults$ = this.searchFilterService.findSuggestions(filterConfig, this.searchConfigurationService.searchOptions.value, query);
+        }
+      }
+    }
+  }
+
 }

src/app/shared/search/search-sidebar/search-sidebar.component.html

@@ -24,7 +24,8 @@
                                [inPlaceSearch]="inPlaceSearch"
                                (changeAppliedFilters)="changeAppliedFilters.emit($event)">
             </ds-themed-search-filters>
-            <ds-advanced-search [configuration]="configuration">
+            <ds-advanced-search [configuration]="configuration"
+                                [filtersConfig]="(filters | async)?.payload">
             </ds-advanced-search>
             <ds-themed-search-settings [currentSortOption]="currentSortOption"
                                        [sortOptionsList]="sortOptionsList"></ds-themed-search-settings>

src/assets/i18n/en.json5

@@ -3898,6 +3898,8 @@
 
   "search.sidebar.advanced-search.filter-by": "Filter by",
 
+  "search.sidebar.advanced-search.add": "Add",
+
   "search.sidebar.settings.title": "Settings",
 
   "search.view-switch.show-detail": "Show detail",