Merge branch 'hotfix/3452-Autocomplete-Abbrechen-Bei-Suche'

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { UiFilter } from '@ui/filter';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { UiFilter, UiFilterComponent } from '@ui/filter';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
@@ -20,6 +20,9 @@ export class ArticleSearchFilterComponent implements OnInit {
 
   searchboxHint$ = this.articleSearch.searchboxHint$;
 
+  @ViewChild(UiFilterComponent, { static: false })
+  uiFilterComponent: UiFilterComponent;
+
   constructor(private articleSearch: ArticleSearchService) {}
 
   ngOnInit() {
@@ -41,6 +44,7 @@ export class ArticleSearchFilterComponent implements OnInit {
   }
 
   applyFilter(value: UiFilter) {
+    this.uiFilterComponent?.cancelAutocomplete();
     this.articleSearch.setFilter(value);
     this.articleSearch.search({ clear: true });
     this.articleSearch.searchCompleted.pipe(take(1)).subscribe((s) => {

apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts

@@ -1,14 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
 import { DomainCatalogService } from '@domain/catalog';
-import { UiFilter } from '@ui/filter';
+import { UiFilter, UiFilterInputGroupMainComponent } from '@ui/filter';
 import { combineLatest, NEVER, Subscription } from 'rxjs';
 import { catchError, debounceTime, first } from 'rxjs/operators';
-import { FocusSearchboxEvent } from '../focus-searchbox.event';
 import { ArticleSearchService } from '../article-search.store';
-import { isEmpty, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 
 @Component({
   selector: 'page-article-search-main',
@@ -27,6 +26,9 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
 
   subscriptions = new Subscription();
 
+  @ViewChild(UiFilterInputGroupMainComponent, { static: false })
+  uiInputGroupMain: UiFilterInputGroupMainComponent;
+
   constructor(
     private searchService: ArticleSearchService,
     private catalog: DomainCatalogService,
@@ -69,6 +71,7 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
   }
 
   search(filter: UiFilter) {
+    this.uiInputGroupMain.cancelAutocomplete();
     this.searchService.setFilter(filter);
     this.searchService.search({ clear: true });
   }

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

@@ -1,6 +1,6 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild } from '@angular/core';
 import { SearchComponentStoreService } from '@store/search-component-store';
-import { Filter, UiFilter } from '@ui/filter';
+import { Filter, UiFilter, UiFilterComponent } from '@ui/filter';
 import { isEqual } from 'lodash';
 import { Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
@@ -21,6 +21,9 @@ export class CustomerSearchFilterComponent implements OnInit, OnDestroy {
 
   filterValuesChanged = false;
 
+  @ViewChild(UiFilterComponent, { static: false })
+  uiFilter: UiFilterComponent;
+
   constructor(public store: SearchComponentStoreService, private cdr: ChangeDetectorRef) {}
 
   ngOnInit() {}
@@ -31,6 +34,7 @@ export class CustomerSearchFilterComponent implements OnInit, OnDestroy {
   }
 
   applyFilter(filter: UiFilter) {
+    this.uiFilter?.cancelAutocomplete();
     this.store.setFilter(filter);
     this.store.search({ clear: true });
 

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

@@ -1,8 +1,8 @@
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { SearchComponentStoreService } from '@store/search-component-store';
-import { UiFilter } from '@ui/filter';
+import { UiFilter, UiFilterInputGroupMainComponent } from '@ui/filter';
 import { isEqual } from 'lodash';
 import { combineLatest, NEVER, Observable, Subject } from 'rxjs';
 import { debounceTime, filter, map, switchMap, takeUntil } from 'rxjs/operators';
@@ -26,6 +26,9 @@ export class CustomerSearchMainComponent implements OnInit, OnDestroy {
 
   message$ = this._store.message$;
 
+  @ViewChild(UiFilterInputGroupMainComponent, { static: false })
+  uiInputGroupMain: UiFilterInputGroupMainComponent;
+
   constructor(
     public cdr: ChangeDetectorRef,
     private _breadcrumb: BreadcrumbService,
@@ -90,6 +93,7 @@ export class CustomerSearchMainComponent implements OnInit, OnDestroy {
   }
 
   search(filter: UiFilter) {
+    this.uiInputGroupMain?.cancelAutocomplete();
     this._store.setFilter(filter);
     this._store.search({ clear: true });
   }

apps/page/goods-in/src/lib/goods-in-search/goods-in-search-filter/goods-in-search-filter.component.ts

@@ -1,8 +1,8 @@
-import { Component, ChangeDetectionStrategy, Output, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Output, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { Config } from '@core/config';
-import { UiFilter } from '@ui/filter';
+import { UiFilter, UiFilterComponent } from '@ui/filter';
 import { Observable, Subject } from 'rxjs';
 import { first, take, takeUntil } from 'rxjs/operators';
 import { GoodsInSearchStore } from '../goods-in-search.store';
@@ -25,6 +25,9 @@ export class GoodsInSearchFilterComponent implements OnInit, OnDestroy {
 
   private _onDestroy$ = new Subject();
 
+  @ViewChild(UiFilterComponent, { static: false })
+  uiFilter: UiFilterComponent;
+
   constructor(
     private _goodsInSearchStore: GoodsInSearchStore,
     private _breadcrumb: BreadcrumbService,
@@ -59,6 +62,7 @@ export class GoodsInSearchFilterComponent implements OnInit, OnDestroy {
   }
 
   async applyFilter() {
+    this.uiFilter?.cancelAutocomplete();
     this._goodsInSearchStore.clearResults();
     this._goodsInSearchStore.setFilter(this.filter);
     this.message = undefined;

apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.ts

@@ -1,7 +1,8 @@
-import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { Config } from '@core/config';
+import { UiFilterInputGroupMainComponent } from '@ui/filter';
 import { Subscription } from 'rxjs';
 import { first, debounceTime } from 'rxjs/operators';
 import { GoodsInSearchStore } from '../goods-in-search.store';
@@ -21,6 +22,9 @@ export class GoodsInSearchMainComponent implements OnInit, OnDestroy {
 
   private _subscriptions = new Subscription();
 
+  @ViewChild(UiFilterInputGroupMainComponent, { static: false })
+  uiFilterGroupMain: UiFilterInputGroupMainComponent;
+
   constructor(
     private _goodsInSearchStore: GoodsInSearchStore,
     private _cdr: ChangeDetectorRef,
@@ -111,6 +115,7 @@ export class GoodsInSearchMainComponent implements OnInit, OnDestroy {
   }
 
   async search() {
+    this.uiFilterGroupMain?.cancelAutocomplete();
     this._goodsInSearchStore.clearResults();
     await this.updateQueryParams();
     this.message = undefined;

apps/page/goods-out/src/lib/goods-out-search/goods-out-search-filter/goods-out-search-filter.component.ts

@@ -1,9 +1,19 @@
-import { Component, ChangeDetectionStrategy, Output, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy, Input } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  OnInit,
+  OnDestroy,
+  Input,
+  ViewChild,
+} from '@angular/core';
 import { Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { Config } from '@core/config';
 import { OrderItemListItemDTO } from '@swagger/oms';
-import { UiFilter } from '@ui/filter';
+import { UiFilter, UiFilterComponent } from '@ui/filter';
 import { Observable, Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { GoodsOutSearchStore } from '../goods-out-search.store';
@@ -29,6 +39,9 @@ export class GoodsOutSearchFilterComponent implements OnInit, OnDestroy {
 
   private _onDestroy$ = new Subject();
 
+  @ViewChild(UiFilterComponent, { static: false })
+  uiFilter: UiFilterComponent;
+
   constructor(
     private _goodsOutSearchStore: GoodsOutSearchStore,
     private _breadcrumb: BreadcrumbService,
@@ -63,6 +76,7 @@ export class GoodsOutSearchFilterComponent implements OnInit, OnDestroy {
   }
 
   async applyFilter() {
+    this.uiFilter?.cancelAutocomplete();
     this._goodsOutSearchStore.setFilter(this.filter);
     this.message = undefined;
 

apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.ts

@@ -1,7 +1,8 @@
-import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { OrderItemListItemDTO } from '@swagger/oms';
+import { UiFilterInputGroupMainComponent } from '@ui/filter';
 import { debounce, isEqual } from 'lodash';
 import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
 import { debounceTime, first, map, withLatestFrom } from 'rxjs/operators';
@@ -32,6 +33,9 @@ export class GoodsOutSearchMainComponent implements OnInit, OnDestroy {
 
   processId$ = this._activatedRoute.data.pipe(map((data) => +data.processId));
 
+  @ViewChild(UiFilterInputGroupMainComponent, { static: false })
+  filterInputGroup: UiFilterInputGroupMainComponent;
+
   constructor(
     private _goodsOutSearchStore: GoodsOutSearchStore,
     private _cdr: ChangeDetectorRef,
@@ -88,6 +92,7 @@ export class GoodsOutSearchMainComponent implements OnInit, OnDestroy {
   }
 
   async search() {
+    this.filterInputGroup?.cancelAutocomplete();
     await this.updateQueryParams(this.processId);
     this.message = undefined;
 

apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.ts

@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import { UiAutocompleteComponent } from '@ui/autocomplete';
 import { Observable, Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged, filter, switchMap, tap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, filter, switchMap, takeUntil, tap } from 'rxjs/operators';
 import { UiFilterAutocomplete, UiFilterAutocompleteProvider } from '../../providers';
 import { IUiInputGroup, UiInput, UiInputGroup } from '../../tree';
 
@@ -23,6 +23,7 @@ import { IUiInputGroup, UiInput, UiInputGroup } from '../../tree';
   templateUrl: 'filter-input-group-main.component.html',
   styleUrls: ['filter-input-group-main.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'uiFilterInputGroupMain',
 })
 export class UiFilterInputGroupMainComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild(UiAutocompleteComponent, { read: UiAutocompleteComponent, static: false })
@@ -72,6 +73,8 @@ export class UiFilterInputGroupMainComponent implements OnInit, OnDestroy, After
 
   complete = new Subject<string>();
 
+  private _cancelComplete = new Subject<void>();
+
   private changeSubscriptions: Subscription;
 
   constructor(
@@ -79,6 +82,11 @@ export class UiFilterInputGroupMainComponent implements OnInit, OnDestroy, After
     private cdr: ChangeDetectorRef
   ) {}
 
+  // cancle autocomplete
+  cancelAutocomplete() {
+    this._cancelComplete.next();
+  }
+
   ngOnInit() {
     this._autocompleteProvider = this.autocompleteProviders?.find((provider) => !!provider);
   }
@@ -115,7 +123,7 @@ export class UiFilterInputGroupMainComponent implements OnInit, OnDestroy, After
     this.autocompleteResults$ = this.complete.asObservable().pipe(
       debounceTime(this._debounceTimeAutocompleteMilliseconds()),
       distinctUntilChanged(),
-      switchMap(() => this.autocompleteProvider.complete(this.uiInput)),
+      switchMap(() => this.autocompleteProvider.complete(this.uiInput).pipe(takeUntil(this._cancelComplete))),
       tap((complete) => {
         if (complete.length > 0) {
           this.autocompleteComponent.open();

apps/ui/filter/src/lib/next/ui-filter.component.ts

@@ -12,7 +12,9 @@ import {
   Inject,
   AfterViewInit,
   HostListener,
+  ViewChild,
 } from '@angular/core';
+import { UiFilterInputGroupMainComponent } from './filter-group/filter-input-group-main';
 import { IUiFilter, UiFilter } from './tree/ui-filter';
 
 @Component({
@@ -40,6 +42,9 @@ export class UiFilterComponent implements OnChanges, AfterViewInit {
   @Input()
   scanner = false;
 
+  @ViewChild(UiFilterInputGroupMainComponent)
+  filterInputGroupMainComponent: UiFilterInputGroupMainComponent;
+
   get uiFilter() {
     return this.filter instanceof UiFilter && this.filter;
   }
@@ -89,4 +94,8 @@ export class UiFilterComponent implements OnChanges, AfterViewInit {
       this.search.emit(query);
     }, 1);
   }
+
+  cancelAutocomplete() {
+    this.filterInputGroupMainComponent?.cancelAutocomplete();
+  }
 }