#864 Fix Resetting Filters To Default on Open - Close FIlter Overlay

+ Refactor pendingFilters in FilterService

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

@@ -12,7 +12,7 @@ import { slideIn } from 'apps/sales/src/app/core/overlay';
 import { Observable, BehaviorSubject, interval } from 'rxjs';
 import { Filter, SelectFilter } from '../../../filter';
 import { ShelfFilterService } from '../../services/shelf-filter.service';
-import { startWith } from 'rxjs/operators';
+import { startWith, take } from 'rxjs/operators';
 import { isNullOrUndefined } from 'util';
 import { ShelfSearchInputComponent } from '../../pages/shelf-search/search';
 import { cloneFilter } from '../../../filter/utils';
@@ -42,7 +42,7 @@ export class ShelfFilterComponent implements OnInit {
 
   filtersByGroup$: Observable<Filter[]>;
   selectedFilter$: Observable<Filter>;
-  pendingFilters$ = new BehaviorSubject<Filter[]>(null);
+  pendingFilters$: Observable<Filter[]>;
   hasSelectedFilter$: Observable<boolean>;
   filtersChangedFromDefault$: Observable<boolean>;
 
@@ -70,7 +70,7 @@ export class ShelfFilterComponent implements OnInit {
   }
 
   getPendingFilters() {
-    this.pendingFilters$ = this.filterService.pendingFilters$;
+    this.pendingFilters$ = this.filterService.pendingFilter$;
   }
 
   getHasSelectedFilters() {
@@ -82,7 +82,7 @@ export class ShelfFilterComponent implements OnInit {
   }
 
   onFiltersChange(updatedFilters: SelectFilter[]) {
-    this.pendingFilters$.next(updatedFilters.map(cloneFilter));
+    this.setPendingFilters(updatedFilters.map(cloneFilter));
     this.setSearchFocus();
   }
 
@@ -97,9 +97,13 @@ export class ShelfFilterComponent implements OnInit {
   }
 
   applyFilters() {
-    if (this.pendingFilters$.value) {
-      this.filterService.updateFilters(this.pendingFilters$.value);
-    }
+    this.pendingFilters$
+      .pipe(take(1))
+      .subscribe(
+        (pendingFilters) =>
+          pendingFilters && this.filterService.updateFilters(pendingFilters)
+      );
+
     this.initiateSearchAndCloseOverlay();
   }
 
@@ -156,6 +160,10 @@ export class ShelfFilterComponent implements OnInit {
     }
   }
 
+  setPendingFilters(pendingFilters: Filter[]) {
+    this.filterService.pendingFilters = pendingFilters;
+  }
+
   private initiateSearchAndCloseOverlay() {
     if (this.searchInput) {
       const searchbarValue =
@@ -175,8 +183,6 @@ export class ShelfFilterComponent implements OnInit {
   private setInitialSearchbarValue(
     overlayData: OverlayContent<{ queryString: string }>
   ) {
-    console.log({ v: this.searchInput });
-
     if (this.hasOverlayData(overlayData) && this.searchbarIsAccessible()) {
       console.log({ v: this.getQueryStringFromOverlayData(overlayData) });
       this.searchInput.searchbar.setInputValue(

apps/sales/src/app/modules/shelf/services/shelf-filter.service.spec.ts

@@ -3,13 +3,13 @@ import { SearchStateFacade } from '@shelf-store';
 import { ShelfFilterService } from './shelf-filter.service';
 import { mockFilters } from '../shared/mockdata';
 import { hot, cold } from 'jasmine-marbles';
-import { Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 fdescribe('#ShelfFilterService', () => {
   let service: ShelfFilterService;
   let facade: jasmine.SpyObj<SearchStateFacade>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       providers: [
         {
@@ -22,6 +22,11 @@ fdescribe('#ShelfFilterService', () => {
         },
       ],
     });
+    const filters$ = hot('-a--b', { a: mockFilters, b: mockFilters });
+
+    spyOn(ShelfFilterService.prototype, 'initService').and.callFake(() => {
+      ShelfFilterService.prototype.filters$ = filters$;
+    });
     spyOn(
       ShelfFilterService.prototype,
       'initPendingFilters'
@@ -29,49 +34,12 @@ fdescribe('#ShelfFilterService', () => {
 
     facade = TestBed.get(SearchStateFacade);
     service = TestBed.get(ShelfFilterService);
-
-    spyOn(service, 'initService').and.callFake(() => {});
   });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
 
-  xdescribe('initPendingFilters', () => {
-    beforeEach(() => {
-      spyOn(service.pendingFilters$, 'next').and.callFake(() => {});
-      spyOn(service, 'lastFilterGroupChanged$').and.returnValue({
-        next: new Subject(),
-      });
-    });
-
-    xit('should should update pending filters only when filters change for the first time', async () => {
-      spyOnProperty(
-        service,
-        'pendingFiltersShouldUpdate$',
-        'get'
-      ).and.callThrough();
-    });
-
-    const filters$ = hot('-a---b---c|', {
-      a: mockFilters,
-      b: { ...mockFilters },
-      c: { ...mockFilters },
-    });
-    ((facade.selectFilters$ as unknown) as jasmine.Spy).and.returnValue(
-      filters$
-    );
-
-    const resetFilter$ = hot('-a', { a: true });
-    spyOnProperty(service, 'resetFilters$', 'get').and.returnValue(
-      resetFilter$
-    );
-
-    const expected = hot('-a', { a: mockFilters });
-
-    expect(service.pendingFiltersShouldUpdate$).toBeObservable(expected);
-  });
-
   describe('#filtersChangedFromDefault', () => {
     beforeEach(() => {
       spyOnProperty(service, 'filtersChangedFromDefault$').and.callThrough();

apps/sales/src/app/modules/shelf/services/shelf-filter.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { Observable, BehaviorSubject, Subject, combineLatest } from 'rxjs';
 import { SelectFilter, Filter, SelectFilterOption } from '../../filter';
-import { tap, startWith, map, filter, takeUntil, take } from 'rxjs/operators';
+import { tap, startWith, map, filter, takeUntil } from 'rxjs/operators';
 import { SearchStateFacade } from '../../../store/customer';
 import { flatten } from '../../../shared/utils';
 import { isNullOrUndefined } from 'util';
@@ -11,10 +11,10 @@ import { cloneFilter } from '../../filter/utils';
 export class ShelfFilterService implements OnDestroy {
   destroy$ = new Subject();
 
-  public filters$: Observable<SelectFilter[]>;
-  public pendingFilters$: BehaviorSubject<Filter[]> = new BehaviorSubject<
+  private _pendingFilters$: BehaviorSubject<Filter[]> = new BehaviorSubject<
     Filter[]
   >(null);
+  public filters$: Observable<SelectFilter[]>;
   public lastFilterGroupChanged$ = new BehaviorSubject<Filter>(undefined);
   public resetFilters$ = new Subject<void>();
   public overlayClosed$ = new Subject<void>();
@@ -30,11 +30,15 @@ export class ShelfFilterService implements OnDestroy {
   }
 
   get pendingFilter$(): Observable<Filter[]> {
-    return this.pendingFilters$.asObservable();
+    return this._pendingFilters$.asObservable();
+  }
+
+  set pendingFilters(filters: Filter[]) {
+    this._pendingFilters$.next(filters);
   }
 
   get hasSelectedPendingFilters$(): Observable<boolean> {
-    return this.pendingFilters$.pipe(map(this.computeHasSelectedFilters));
+    return this.pendingFilter$.pipe(map(this.computeHasSelectedFilters));
   }
 
   get filtersChangedFromDefault$(): Observable<boolean> {
@@ -56,13 +60,12 @@ export class ShelfFilterService implements OnDestroy {
 
   get pendingFiltersShouldUpdate$() {
     return combineLatest([
-      this.filters$.pipe(
-        filter((filters) => !isNullOrUndefined(filters)),
-        take(1)
-      ),
+      this.filters$.pipe(filter((filters) => !isNullOrUndefined(filters))),
       this.resetFilters$.pipe(
-        startWith(true),
-        tap(() => this.pendingFilters$.next(null))
+        startWith(),
+        tap(() => {
+          this.pendingFilters = null;
+        })
       ),
     ]);
   }
@@ -81,7 +84,7 @@ export class ShelfFilterService implements OnDestroy {
     this.pendingFiltersShouldUpdate$
       .pipe(takeUntil(this.destroy$))
       .subscribe(([filters]) => {
-        this.pendingFilters$.next(filters.map(cloneFilter));
+        this.pendingFilters = filters.map(cloneFilter);
         this.setInitialFilterGroupLastChanged(filters);
       });
   }