Merged PR 300: #995 #992 Apply Pending Filters On Click Searchbar Icon & Center Apply Filter Button On Small Desktop Devices

Related work items: #991, #995

apps/sales/src/app/modules/shelf/overlays/shelf-filter/shelf-filter.component.html

@@ -12,6 +12,7 @@
       (change)="setSearchFocus()"
     ></app-shelf-primary-filters>
     <app-shelf-search-input
+      [preSearchCallback]="savePendingFilters.bind(this)"
       [searchCallback]="close.bind(this)"
     ></app-shelf-search-input>
 

apps/sales/src/app/modules/shelf/overlays/shelf-filter/shelf-filter.component.scss

@@ -36,12 +36,11 @@ app-selected-filter-options {
   text-align: center;
   padding-bottom: 5px;
 
-  bottom: 0;
-  display: flex;
-  transform: translateX(-50%);
+  position: relative;
+  transform: translate(-50%);
+  bottom: 25px;
   left: 50%;
   width: min-content;
-  align-self: center;
 
   &.is-iPad {
     position: sticky;
@@ -52,14 +51,6 @@ app-selected-filter-options {
     width: min-content;
     padding-top: 10px;
   }
-
-  @include mq-desktop() {
-    position: absolute;
-    bottom: 25px;
-    left: 50%;
-    transform: translate(-50%);
-    position: relative;
-  }
 }
 
 .btn-apply-filters {

apps/sales/src/app/modules/shelf/overlays/shelf-filter/shelf-filter.component.ts

@@ -13,7 +13,7 @@ import { slideIn } from 'apps/sales/src/app/core/overlay';
 import { Observable, interval, Subject } from 'rxjs';
 import { Filter, SelectFilter } from '../../../filter';
 import { ShelfFilterService } from '../../services/shelf-filter.service';
-import { take, takeUntil } from 'rxjs/operators';
+import { map, take, takeUntil } from 'rxjs/operators';
 import { isNullOrUndefined } from 'util';
 import { ShelfSearchInputComponent } from '../../pages/shelf-search/search';
 import { cloneFilter } from '../../../filter/utils';
@@ -112,14 +112,9 @@ export class ShelfFilterComponent implements OnInit, OnDestroy {
   }
 
   applyFilters() {
-    this.pendingFilters$
-      .pipe(take(1))
-      .subscribe(
-        (pendingFilters) =>
-          pendingFilters && this.filterService.updateFilters(pendingFilters)
-      );
-
-    this.initiateSearchAndCloseOverlay();
+    this.savePendingFilters().subscribe(() =>
+      this.initiateSearchAndCloseOverlay()
+    );
   }
 
   close() {
@@ -179,6 +174,16 @@ export class ShelfFilterComponent implements OnInit, OnDestroy {
     this.filterService.pendingFilters = pendingFilters;
   }
 
+  savePendingFilters(): Observable<void> {
+    return this.pendingFilters$.pipe(
+      take(1),
+      map(
+        (pendingFilters) =>
+          pendingFilters && this.filterService.updateFilters(pendingFilters)
+      )
+    );
+  }
+
   private initiateSearchAndCloseOverlay() {
     if (this.searchInput) {
       const searchbarValue =

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

@@ -58,6 +58,11 @@ export class ShelfSearchInputComponent
 
   @Input() allowScan = false;
   @Input() hasAutocomplete = true;
+
+  // Called before search is initiated
+  @Input() preSearchCallback: () => Observable<void>;
+
+  // Called after search has been initiated
   @Input() searchCallback: () => void;
 
   @ViewChild(ShelfSearchbarComponent, { static: true })
@@ -142,6 +147,9 @@ export class ShelfSearchInputComponent
       bypassValidation: false,
     }
   ) {
+    if (this.preSearchCallback) {
+      await this.preSearchCallback().pipe(take(1)).toPromise();
+    }
     let searchQuery = value;
 
     if (this.isAutocompleteSelected()) {