#966 Remove Multiple Autocomplete Requests

apps/page/customer/src/lib/customer-search/customer-search.component.ts

@@ -1,4 +1,10 @@
-import { Component, ChangeDetectionStrategy, forwardRef, NgZone, OnInit } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  forwardRef,
+  NgZone,
+  OnInit,
+} from '@angular/core';
 import { Router } from '@angular/router';
 import { EnvironmentService } from '@core/environment';
 import { CrmCustomerService } from '@domain/crm';
@@ -23,6 +29,7 @@ export class CustomerSearchComponent extends CustomerSearch implements OnInit {
 
   constructor(
     protected customerSearch: CrmCustomerService,
+    protected crmCustomerService: CrmCustomerService,
     zone: NgZone,
     router: Router,
     env: EnvironmentService,

apps/page/customer/src/lib/customer-search/customer-search.service.ts

@@ -1,6 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable, NgZone, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { EnvironmentService } from '@core/environment';
 import { CrmCustomerService } from '@domain/crm';
@@ -9,6 +8,9 @@ import { AutocompleteDTO, CustomerInfoDTO } from '@swagger/crm';
 import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
 import {
   catchError,
+  debounceTime,
+  delay,
+  distinctUntilChanged,
   map,
   shareReplay,
   switchMap,
@@ -23,6 +25,7 @@ import { NativeContainerService } from 'native-container';
 @Injectable()
 export abstract class CustomerSearch implements OnInit, OnDestroy {
   protected abstract customerSearch: CrmCustomerService;
+  protected abstract crmCustomerService: CrmCustomerService;
 
   private destroy$ = new Subject();
 
@@ -86,6 +89,7 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.initAvailableFilters();
+    this.initAutocomplete();
   }
 
   ngOnDestroy() {
@@ -107,6 +111,28 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
     );
   }
 
+  private initAutocomplete() {
+    this.autocompleteResult$ = this.inputChange$.pipe(
+      takeUntil(this.destroy$),
+      distinctUntilChanged(),
+      debounceTime(200),
+      switchMap((queryString) => {
+        if (queryString.length >= 3) {
+          return this.crmCustomerService.complete(queryString).pipe(
+            map((response) => response.result),
+            catchError(() => {
+              // TODO Dialog Service impl. fur Anzeige der Fehlermeldung
+              return [];
+            })
+          );
+        } else {
+          return of([]);
+        }
+      }),
+      shareReplay()
+    );
+  }
+
   setQueryParams(queryParams: Params) {
     this.setQuery(queryParams.query);
   }

apps/page/customer/src/lib/customer-search/shared/customer-searchbox/customer-searchbox.component.ts

@@ -1,11 +1,18 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { EnvironmentService } from '@core/environment';
 import { CrmCustomerService } from '@domain/crm';
 import { AutocompleteDTO } from '@swagger/crm';
 import { UiSearchboxAutocompleteComponent } from '@ui/searchbox';
-import { Observable, of, Subject } from 'rxjs';
-import { catchError, delay, filter, map, shareReplay, skip, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { delay, takeUntil, tap } from 'rxjs/operators';
 import { CustomerSearch } from '../../customer-search.service';
 
 @Component({
@@ -39,33 +46,25 @@ export class CustomerSearchboxComponent implements OnInit, OnDestroy {
     this.detectDevice();
     this.initAutocomplete();
 
-    this.search.queryFilter$.pipe(takeUntil(this.destroy$)).subscribe((queryFilter) => {
-      this.queryControl.patchValue(queryFilter.query || '', { emitEvent: false });
-    });
+    this.search.queryFilter$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((queryFilter) => {
+        this.queryControl.patchValue(queryFilter.query || '', {
+          emitEvent: false,
+        });
+      });
 
-    this.queryControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => this.search.setQuery(value));
+    this.queryControl.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((value) => this.search.setQuery(value));
   }
 
   ngOnDestroy() {}
 
   initAutocomplete() {
-    this.autocompleteResult$ = this.search.inputChange$.pipe(
+    this.autocompleteResult$ = this.search.autocompleteResult$.pipe(
       takeUntil(this.destroy$),
-      switchMap((queryString) => {
-        if (queryString.length >= 3) {
-          return this.crmCustomerService.complete(queryString).pipe(
-            map((response) => response.result),
-            catchError(() => {
-              // TODO Dialog Service impl. fur Anzeige der Fehlermeldung
-              return [];
-            })
-          );
-        } else {
-          return of([]);
-        }
-      }),
       tap((results) => {
-        console.log({ results, autocomplete: this.autocomplete });
         if (this.autocomplete) {
           if (results.length > 0) {
             this.autocomplete.open();
@@ -75,8 +74,7 @@ export class CustomerSearchboxComponent implements OnInit, OnDestroy {
         }
       }),
       delay(1),
-      tap(() => this.cdr.detectChanges()),
-      shareReplay()
+      tap(() => this.cdr.detectChanges())
     );
   }
 

apps/page/customer/src/lib/page-customer.component.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { Observable } from 'rxjs';
-import { first, map } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'page-customer',
@@ -13,15 +13,12 @@ import { first, map } from 'rxjs/operators';
 export class PageCustomerComponent implements OnInit {
   key$: Observable<string>;
 
-  constructor(private activatedRoute: ActivatedRoute, private breadcrumb: BreadcrumbService) {}
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private breadcrumb: BreadcrumbService
+  ) {}
 
   ngOnInit() {
     this.key$ = this.activatedRoute.data.pipe(map((data) => data['processId']));
-
-    // this.key$.pipe(first()).subscribe((key) => {
-
-    //   this.breadcrumb.addBreadcrumb({ key, name: 'Kundensuche', path: '/customer' });
-    //   this.breadcrumb.addBreadcrumb({ key, name: 'Lorenz (17 Ergebnisse)', path: '/customer/results' });
-    // });
   }
 }

apps/ui/searchbox/src/lib/ui-searchbox-input.directive.ts

@@ -46,7 +46,6 @@ export class UiSearchboxInputDirective implements ControlValueAccessor {
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
 
   writeValue(obj: any): void {
-    console.log(obj);
     this.setValue(obj, { inputType: 'init' });
   }