#1080 [WiP] Use Pending Filters for Autocomplete

apps/sales/src/app/modules/shelf/components/searchbar/searchbar.component.html

@@ -4,7 +4,7 @@
     #searchbar
     autocomplete="off"
     class="isa-input isa-text-input"
-    [class.error]="!!errorMessage.length"
+    [class.error]="!!errorMessage?.length"
     [placeholder]="placeholder | truncateText: 35"
     type="text"
     name="shelf-search"
@@ -13,11 +13,16 @@
     (keyup.enter)="triggerSearch('search')"
     (keyup)="onInput($event)"
   />
-  <span class="isa-input-warning" *ngIf="!!errorMessage.length">{{ errorMessage }}</span>
+  <span class="isa-input-warning" *ngIf="!!errorMessage?.length">{{
+    errorMessage
+  }}</span>
   <button
     class="isa-input-reset"
     type="reset"
-    *ngIf="(!isFetchingData && searchQuery$ | async | showSearchResetPipe) || errorMessage"
+    *ngIf="
+      (!isFetchingData && searchQuery$ | async | showSearchResetPipe) ||
+      errorMessage
+    "
     (click)="resetForm()"
   ></button>
   <ng-container [ngSwitch]="isFetchingData">
@@ -26,7 +31,9 @@
       *ngSwitchDefault
       #submitButton
       class="isa-input-submit"
-      [class.scan]="isIPad | appShowScanButton: (searchQuery$ | async):errorMessage"
+      [class.scan]="
+        isIPad | appShowScanButton: (searchQuery$ | async):errorMessage
+      "
       type="submit"
       (click)="handleBtnClick(submitButton)"
     ></button>

apps/sales/src/app/modules/shelf/pages/shelf-search/search/search-input.component.ts

@@ -239,7 +239,11 @@ export class ShelfSearchInputComponent
       debounceTime(250),
       filter(this.isSearchQuery),
       distinctUntilChanged(this.filterDistinctStrings),
-      withLatestFrom(this.searchStateFacade.selectedFilter$),
+      withLatestFrom(
+        this.searchStateFacade.getPendingselectedFilter$(
+          this.filterService.pendingFilter$
+        )
+      ),
       switchMap(([queryString, selectedFilters]) => {
         if (this.isAutocompleteSelected()) {
           return NEVER;

apps/sales/src/app/store/customer/shelf/search/search.facade.ts

@@ -10,6 +10,11 @@ import {
   selectFiltersToFiltersDictionary,
   primaryFiltersToFiltersDictionary,
 } from './mappers';
+import { combineLatest } from 'rxjs';
+import {
+  selectFiltersToFiltersDictionary,
+  primaryFiltersToFiltersDictionary,
+} from './mappers';
 import { Observable } from 'rxjs';
 import { isNullOrUndefined } from 'util';
 import { SelectFilter } from 'apps/sales/src/app/modules/filter';
@@ -270,6 +275,36 @@ export class SearchStateFacade {
     }
   }
 
+  getPendingselectedFilter$(
+    pendingFilters$: Observable<SelectFilter[]>
+  ): Observable<{ [key: string]: string }> {
+    return combineLatest([pendingFilters$, this.primaryFilters$]).pipe(
+      map(([pendingSelectFilters, primaryFilters]) => {
+        const selectFilterDictionary = selectFiltersToFiltersDictionary(
+          pendingSelectFilters
+        );
+
+        const primaryFiltersDictionary = primaryFiltersToFiltersDictionary(
+          primaryFilters
+        );
+
+        const mergedFilters = {
+          ...selectFilterDictionary,
+          ...primaryFiltersDictionary,
+        };
+
+        const selectedFilters = {};
+        for (const f in mergedFilters) {
+          if (!!mergedFilters[f]) {
+            selectedFilters[f] = mergedFilters[f];
+          }
+        }
+
+        return selectedFilters;
+      })
+    );
+  }
+
   async setInput(input: string, id?: number) {
     if (id) {
       return this.store.dispatch(actions.setInput({ input, id }));