Fix Catalog Filter Commit

apps/page/catalog/src/lib/article-search/article-search-new.store.ts

@@ -131,7 +131,7 @@ export class ArticleSearchStore extends ComponentStore<ArticleSearchState> {
   );
 
   readonly orderBy$ = combineLatest([this.queryParamsOrderBy$, this.queryParamsDesc$, this.orderByOptions$]).pipe(
-    map(([orderBy, desc, orderByOptions]) => orderByOptions.find((opt) => opt.by === orderBy && !!opt.desc === Boolean(desc)))
+    map(([orderBy, desc, orderByOptions]) => orderByOptions.find((opt) => opt?.by === orderBy && !!opt?.desc === (desc === 'true')))
   );
 
   readonly queryTokenOrderBy$ = this.orderBy$.pipe(map((orderBy) => (orderBy ? [orderBy] : undefined)));

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

@@ -1,6 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ApplicationService } from '@core/application';
+import { BreadcrumbService } from '@core/breadcrumb';
 import { Filter, FilterOption } from '@ui/filter';
-import { BehaviorSubject, Observable, of } from 'rxjs';
+import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
 import { delay, map, switchMap } from 'rxjs/operators';
 import { ArticleSearchStore } from './article-search-new.store';
 
@@ -11,16 +14,65 @@ import { ArticleSearchStore } from './article-search-new.store';
   providers: [ArticleSearchStore],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ArticleSearchComponent implements OnInit {
+export class ArticleSearchComponent implements OnInit, OnDestroy {
   filterActive$ = new BehaviorSubject<boolean>(false);
   showMainContent$ = this.getShowMainContent();
   lastSelectedFilterCategory: Filter;
 
+  routerEventsSubscription: Subscription;
+
   hasFilter$: Observable<boolean> = this.store.queryParamsFilter$.pipe(map((filter) => filter !== ''));
 
-  constructor(private store: ArticleSearchStore) {}
+  constructor(
+    private store: ArticleSearchStore,
+    private breadcrumb: BreadcrumbService,
+    private application: ApplicationService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.routerEventsSubscription = this.router.events.subscribe((e) => {
+      if (e instanceof NavigationEnd) {
+        if (this.router.url.includes('?')) {
+          const url = this.router.url.substring(0, this.router.url.indexOf('?'));
+          if (url === '/product/search') {
+            this.setBreadcrumb();
+          }
+        } else if (this.router.url === '/product/search') {
+          this.setBreadcrumb();
+        }
+      }
+    });
+
+    // this.activatedProcessSubscription = this.application.activatedProcessId$.subscribe((processId) => {
+    //   if (this.router.url.includes('?')) {
+    //     const url = this.router.url.substring(0, this.router.url.indexOf('?'));
+    //     if (url === '/product/search') {
+    //       this.setBreadcrumb(processId);
+    //     }
+    //   } else if (this.router.url === '/product/search') {
+    //     this.setBreadcrumb(processId);
+    //   }
+    // });
+  }
+
+  ngOnDestroy() {
+    if (!!this.routerEventsSubscription) {
+      this.routerEventsSubscription.unsubscribe();
+    }
+  }
+
+  async setBreadcrumb() {
+    const crumb = await this.breadcrumb.addBreadcrumbIfNotExists({
+      key: this.application.activatedProcessId,
+      name: 'Artikelsuche',
+      path: '/product',
+      params: this.route.queryParams,
+      tags: ['catalog', 'filter'],
+    });
+    this.breadcrumb.removeBreadcrumbsAfter(crumb.id);
+  }
 
   getShowMainContent(animationDelayInMs: number = 500): Observable<boolean> {
     return this.filterActive$.pipe(

apps/page/catalog/src/lib/article-search/article-search.mappings.ts

@@ -101,6 +101,8 @@ export function mapSelectedFilterToParams(source: Filter[]): string {
   for (const filter of source) {
     const options: FilterOption[] = filter.options;
     const selected = options.filter((o) => o.selected);
+    // TODO: Start und Stop values bei range-filter mit in die Params
+    // console.log(selected);
     if (selected.length > 0) {
       dict[filter.key] = selected.map((o) => o.id).join(';');
     }

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

@@ -1,12 +1,12 @@
 <div class="filter-chips">
-  <page-filter-chips class="filter" (filterChange)="checkMainFilter($event)" [filter]="mainFilter$ | async"></page-filter-chips>
-  <page-filter-chips class="filter" (filterChange)="checkInputFilter($event)" [filter]="inputFilter$ | async"></page-filter-chips>
+  <page-filter-chips class="filter" (filterChange)="checkMainFilter($event)" [filter]="mainFilters$ | async"></page-filter-chips>
+  <page-filter-chips class="filter" (filterChange)="checkInputFilter($event)" [filter]="inputFilters$ | async"></page-filter-chips>
 </div>
 
-<page-article-searchbox mode="filter" (closeFilterOverlay)="closeOverlay()"></page-article-searchbox>
+<page-article-searchbox mode="filter" (closeFilterOverlay)="closeOverlayAfterSearch()"></page-article-searchbox>
 
 <ng-container *ngIf="filters$ | async; let selectedFilters">
-  <ng-container *ngIf="initialFilters$ | async; let initialFilters">
+  <ng-container *ngIf="initialFiltersBackend$ | async; let initialFilters">
     <ui-selected-filter-options [value]="selectedFilters" [initialFilter]="initialFilters" (valueChange)="updateFilter($event)">
     </ui-selected-filter-options>
 

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

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { Filter } from '@ui/filter';
+import { cloneDeep } from 'lodash';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { first, map, tap } from 'rxjs/operators';
+import { first, map } from 'rxjs/operators';
 import { ArticleSearchStore } from '../article-search-new.store';
 
 @Component({
@@ -14,18 +15,22 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
   @Output() exitFilter = new EventEmitter<void>();
   @Output() lastSelectedFilterCategory = new EventEmitter<Filter>();
 
-  readonly filters$ = this.articleSearchStore.filter$;
-  readonly initialFilters$ = this.articleSearchStore.defaultFilter$.pipe(map((filter) => filter.filter));
-  readonly searchState$ = this.articleSearchStore.searchState$;
+  readonly initialFiltersBackend$ = this.store.defaultFilter$.pipe(map((filter) => filter.filter));
 
-  readonly inputFilter$ = this.articleSearchStore.inputSelectorFilter$;
-  readonly mainFilter$ = this.articleSearchStore.mainFilter$;
+  readonly filters$ = this.store.filter$;
+  readonly inputFilters$ = this.store.inputSelectorFilter$;
+  readonly mainFilters$ = this.store.mainFilter$;
+
+  filtersCopy: Filter[];
+  inputFiltersCopy: Filter[];
+  mainFiltersCopy: Filter[];
+  isFilterApplied = false;
+
+  readonly searchState$ = this.store.searchState$;
 
   /* @internal */
   updateFilterCategory$ = new BehaviorSubject<Filter>(undefined);
 
-  isDefaultState$ = this.searchState$.pipe(map((searchState) => searchState !== 'fetching' && searchState !== 'empty'));
-
   @Input()
   get updateFilterCategory(): Filter {
     return this.updateFilterCategory$.value;
@@ -35,46 +40,46 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
     this.updateFilterCategory$.next(value);
   }
 
-  initialFilter: Filter[];
-
   searchStateSubscription: Subscription;
 
-  constructor(private cdr: ChangeDetectorRef, private articleSearchStore: ArticleSearchStore) {}
+  constructor(private cdr: ChangeDetectorRef, private store: ArticleSearchStore) {}
 
   ngOnInit() {
-    // this.filterChanges = await this.filters$.pipe(first()).toPromise();
+    this.copyFilterLatestStatus();
   }
 
   ngOnDestroy() {
-    // const filter = this.filterChanges;
-    // this.articleSearchStore.setFilter({ filter });
-    // if (!!this.searchStateSubscription) {
-    //   this.searchStateSubscription.unsubscribe();
-    // }
+    if (!this.isFilterApplied) {
+      this.resetFilterToLatestStatus();
+    }
+
+    if (!!this.searchStateSubscription) {
+      this.searchStateSubscription.unsubscribe();
+    }
   }
 
-  closeOverlay() {
+  closeOverlayAfterSearch() {
+    this.isFilterApplied = true;
     this.exitFilter.emit();
   }
 
-  async applyFilters() {
-    // this.filterChanges = await this.filters$.pipe(first()).toPromise();
-    // console.log(this.filterChanges);
-    this.articleSearchStore.search({ clear: true });
+  applyFilters() {
+    this.isFilterApplied = true;
+    this.store.search({ clear: true });
 
-    this.searchStateSubscription = this.articleSearchStore.searchState$.subscribe((state) => {
+    this.searchStateSubscription = this.store.searchState$.subscribe((state) => {
       if (state !== 'fetching' && state !== 'empty') {
-        this.closeOverlay();
+        this.closeOverlayAfterSearch();
       }
     });
   }
 
   checkInputFilter(filter: Filter[]) {
-    this.articleSearchStore.setInputSelectorFilter({ filter });
+    this.store.setInputSelectorFilter({ filter });
   }
 
   checkMainFilter(filter: Filter[]) {
-    this.articleSearchStore.setMainFilter({ filter });
+    this.store.setMainFilter({ filter });
   }
 
   updateCategory(filter: Filter) {
@@ -83,7 +88,19 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
   }
 
   updateFilter(filter: Filter[]) {
-    this.articleSearchStore.setFilter({ filter });
+    this.store.setFilter({ filter });
     this.cdr.markForCheck();
   }
+
+  async copyFilterLatestStatus() {
+    this.filtersCopy = cloneDeep(await this.filters$.pipe(first()).toPromise());
+    this.inputFiltersCopy = cloneDeep(await this.inputFilters$.pipe(first()).toPromise());
+    this.mainFiltersCopy = cloneDeep(await this.mainFilters$.pipe(first()).toPromise());
+  }
+
+  resetFilterToLatestStatus() {
+    this.store.setFilter({ filter: this.filtersCopy });
+    this.store.setInputSelectorFilter({ filter: this.inputFiltersCopy });
+    this.store.setMainFilter({ filter: this.mainFiltersCopy });
+  }
 }

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

@@ -5,7 +5,6 @@ import { Filter } from '@ui/filter';
 import { NEVER } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { ArticleSearchStore } from '../article-search-new.store';
-// import { ArticleSearchStore } from '../article-search.store';
 
 @Component({
   selector: 'page-article-search-main',

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

@@ -1,5 +1,4 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { DomainCatalogService } from '@domain/catalog';
 import { OrderByDTO } from '@swagger/cat';
 import { combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -39,7 +38,7 @@ export class OrderByFilterComponent {
     })
   );
 
-  constructor(private domainCatalogService: DomainCatalogService, private store: ArticleSearchStore) {}
+  constructor(private store: ArticleSearchStore) {}
 
   setActive(orderBy: OrderByDTO) {
     this.store.setOrderBy({ orderBy });

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

@@ -1,6 +1,6 @@
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild, AfterContentInit, AfterViewInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ItemDTO } from '@swagger/cat';
@@ -29,7 +29,6 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterCo
   constructor(
     private store: ArticleSearchStore,
     private route: ActivatedRoute,
-    private router: Router,
     private application: ApplicationService,
     private breadcrumb: BreadcrumbService,
     private cache: CacheService

apps/page/catalog/src/lib/page-catalog-routing.module.ts

@@ -5,7 +5,6 @@ import { ArticleSearchComponent } from './article-search/article-search.componen
 import { ArticleSearchMainComponent } from './article-search/search-main/search-main.component';
 import { ArticleSearchResultsComponent } from './article-search/search-results/search-results.component';
 import { PageCatalogComponent } from './page-catalog.component';
-import { PageCatalogResolver } from './page-catalog.resolver';
 
 const routes: Routes = [
   {
@@ -19,12 +18,10 @@ const routes: Routes = [
           {
             path: '',
             component: ArticleSearchMainComponent,
-            resolve: [PageCatalogResolver],
           },
           {
             path: 'results',
             component: ArticleSearchResultsComponent,
-            resolve: [PageCatalogResolver],
           },
         ],
       },
@@ -35,7 +32,6 @@ const routes: Routes = [
       {
         path: 'details/:id',
         component: ArticleDetailsComponent,
-        runGuardsAndResolvers: 'paramsOrQueryParamsChange',
       },
       {
         path: '',

apps/page/catalog/src/lib/page-catalog.module.ts

@@ -5,12 +5,10 @@ import { ArticleDetailsModule } from './article-details/article-details.module';
 import { ArticleSearchModule } from './article-search/article-search.module';
 import { PageCatalogRoutingModule } from './page-catalog-routing.module';
 import { PageCatalogComponent } from './page-catalog.component';
-import { PageCatalogResolver } from './page-catalog.resolver';
 
 @NgModule({
   imports: [CommonModule, PageCatalogRoutingModule, ShellBreadcrumbModule, ArticleSearchModule, ArticleDetailsModule],
   exports: [],
   declarations: [PageCatalogComponent],
-  providers: [PageCatalogResolver],
 })
 export class PageCatalogModule {}

apps/page/catalog/src/lib/page-catalog.resolver.ts

@@ -1,31 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { ApplicationService } from '@core/application';
-import { BreadcrumbService } from '@core/breadcrumb';
-
-@Injectable()
-export class PageCatalogResolver implements Resolve<any> {
-  constructor(private breadcrumb: BreadcrumbService, private application: ApplicationService) {}
-
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    if (state.url.includes('?')) {
-      const url = state.url.substring(0, state.url.indexOf('?'));
-      if (url === '/product/search') {
-        this.setBreadcrumb(route);
-      }
-    } else if (state.url === '/product/search') {
-      this.setBreadcrumb(route);
-    }
-  }
-
-  async setBreadcrumb(route: ActivatedRouteSnapshot) {
-    const crumb = await this.breadcrumb.addBreadcrumbIfNotExists({
-      key: this.application.activatedProcessId,
-      name: 'Artikelsuche',
-      path: '/product',
-      params: route.queryParams,
-      tags: ['catalog', 'filter'],
-    });
-    this.breadcrumb.removeBreadcrumbsAfter(crumb.id);
-  }
-}

apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.ts

@@ -7,7 +7,6 @@ import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
 import { CountryDTO, CustomerDTO, KeyValueDTOOfStringAndString } from '@swagger/crm';
 import { UiValidators } from '@ui/validators';
-import { ScrollPositionService } from 'apps/ui/common/src/lib/scroll-position/scroll-position.service';
 import { Observable } from 'rxjs';
 import { first, map, switchMap } from 'rxjs/operators';
 import { validateEmail } from '../../validators/email-validator';
@@ -37,8 +36,7 @@ export abstract class CustomerDataEditComponent implements OnInit {
     private cdr: ChangeDetectorRef,
     private location: Location,
     private breadcrumb: BreadcrumbService,
-    private application: ApplicationService,
-    private scrollPositionService: ScrollPositionService
+    private application: ApplicationService
   ) {}
 
   ngOnInit() {
@@ -136,12 +134,6 @@ export abstract class CustomerDataEditComponent implements OnInit {
 
     try {
       await this.customerService.patchCustomer(this.customerId, this.control.value).toPromise();
-      if (!!this.scrollPositionService.data) {
-        const index = this.scrollPositionService.data?.result?.findIndex((customer) => customer.id === this.customerId);
-        const obj = this.scrollPositionService.data?.result[index];
-        const updatedObj = Object.assign(obj, this.control.value);
-        this.scrollPositionService.data.result.splice(index, 1, updatedObj);
-      }
       this.location.back();
     } catch (err) {
       this.control.enable();

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

@@ -10,8 +10,8 @@ import { NativeContainerService } from 'native-container';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { delay, map, switchMap } from 'rxjs/operators';
 import { CustomerSearch } from './customer-search.service';
-import { ScrollPositionService } from 'apps/ui/common/src/lib/scroll-position/scroll-position.service';
 import { isSelectFilterOption } from 'apps/ui/filter/src/lib/type-guards';
+import { CacheService } from 'apps/core/cache/src/public-api';
 
 @Component({
   selector: 'page-customer-search',
@@ -42,9 +42,9 @@ export class CustomerSearchComponent extends CustomerSearch implements OnInit {
     nativeContainer: NativeContainerService,
     application: ApplicationService,
     breadcrumb: BreadcrumbService,
-    scrollPositionService: ScrollPositionService
+    cache: CacheService
   ) {
-    super(zone, router, application, breadcrumb, env, filterMapping, nativeContainer, scrollPositionService);
+    super(zone, router, application, breadcrumb, env, filterMapping, nativeContainer, cache);
   }
 
   ngOnInit() {

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

@@ -13,7 +13,7 @@ import { NativeContainerService } from 'native-container';
 import { StringDictionary } from '@cmf/core';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
-import { ScrollPositionService } from 'apps/ui/common/src/lib/scroll-position/scroll-position.service';
+import { CacheService } from 'apps/core/cache/src/public-api';
 
 @Injectable()
 export abstract class CustomerSearch implements OnInit, OnDestroy {
@@ -90,7 +90,7 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
     private environmentService: EnvironmentService,
     private filterMapping: UiFilterMappingService,
     private nativeContainer: NativeContainerService,
-    private scrollPositionService: ScrollPositionService
+    private cache: CacheService
   ) {}
 
   ngOnInit() {
@@ -256,17 +256,17 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
               : hitsTake;
 
             this.searchResult$.next(this.addLoadingProducts(this.searchResult, effectiveTake));
-
-            return [effectiveTake, hitsTake];
+            return [effectiveTake, hitsTake, result.hits];
           }),
-          switchMap(([effectiveTake, hitsTake]) => {
+          switchMap(([effectiveTake, hitsTake, hits]) => {
+            const cache: PagedResult<CustomerSearchType> = this.cache.get(this.createQueryParams());
+            let cacheSkip = this.numberOfResultsFetched + (cache?.skip || 0);
+            if (hits < 10) {
+              cacheSkip = hits;
+            }
             return this.customerSearch
               .getCustomers(this.queryFilter.query, {
-                skip: options.isNewSearch
-                  ? 0
-                  : !!this.scrollPositionService.data
-                  ? this.numberOfResultsFetched + this.scrollPositionService.data?.skip
-                  : this.numberOfResultsFetched - effectiveTake,
+                skip: options.isNewSearch ? 0 : !!cache ? cacheSkip : this.numberOfResultsFetched - effectiveTake,
                 take: hitsTake,
                 filter: this.getSelecteFiltersAsDictionary(),
               })
@@ -470,10 +470,15 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
   }
 
   private shouldFetchNewProducts(options: { isNewSearch: boolean; take?: number }): boolean {
+    const cache = this.cache.get(this.createQueryParams());
     if (options.isNewSearch) {
       return true;
     }
 
+    if (!!cache && this.totalResults === (this.cache?.get(this.createQueryParams()) as PagedResult<CustomerSearchType>)?.result?.length) {
+      return false;
+    }
+
     if (this.totalResults > 0) {
       return !(this.numberOfResultsFetched >= this.totalResults);
     }

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

@@ -2,7 +2,6 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy, OnIni
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { EnvironmentService } from '@core/environment';
-import { ScrollPositionService } from 'apps/ui/common/src/lib/scroll-position/scroll-position.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CustomerSearch } from '../customer-search.service';
@@ -23,14 +22,12 @@ export class CustomerSearchMainComponent implements OnInit, OnDestroy {
     public cdr: ChangeDetectorRef,
     public environmentService: EnvironmentService,
     public application: ApplicationService,
-    private breadcrumb: BreadcrumbService,
-    private scrollPositionService: ScrollPositionService
+    private breadcrumb: BreadcrumbService
   ) {}
 
   ngOnInit() {
     this.detectDevice();
     this.initBreadcrumb();
-    this.scrollPositionService.resetService();
   }
 
   initBreadcrumb() {

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

@@ -2,9 +2,10 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestro
 import { NavigationStart, Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { Breadcrumb, BreadcrumbService } from '@core/breadcrumb';
-import { ScrollPositionService } from 'apps/ui/common/src/lib/scroll-position/scroll-position.service';
+import { PagedResult } from '@domain/defs';
+import { CacheService } from 'apps/core/cache/src/public-api';
 import { Observable, Subscription } from 'rxjs';
-import { filter, first, map, take } from 'rxjs/operators';
+import { filter, map, take } from 'rxjs/operators';
 import { CustomerSearch } from '../customer-search.service';
 import { CustomerSearchType } from '../defs';
 
@@ -18,7 +19,7 @@ export class CustomerSearchResultComponent implements OnInit, OnDestroy, AfterVi
   @ViewChild('scrollContainer', { static: false }) scrollContainer: ElementRef<HTMLDivElement>;
   private _breadcrumb: Breadcrumb;
   customers$: Observable<CustomerSearchType[]>;
-  scrollSubscription: Subscription;
+  cacheSubscription: Subscription;
 
   protected readonly viewportEnterOptions: IntersectionObserverInit = {
     threshold: 0.75,
@@ -29,44 +30,32 @@ export class CustomerSearchResultComponent implements OnInit, OnDestroy, AfterVi
     private breadcrumb: BreadcrumbService,
     public search: CustomerSearch,
     private router: Router,
-    private scrollPositionService: ScrollPositionService
+    private cache: CacheService
   ) {}
 
   ngOnInit() {
     this.customers$ = this.search.searchResult$.pipe(
       map((response) => {
-        if (!!this.scrollPositionService.data) {
-          return [...this.scrollPositionService.data.result, ...response.result];
+        const cachedItems: PagedResult<CustomerSearchType> = this.cache.get(this.search.createQueryParams());
+        if (!!cachedItems) {
+          return [...cachedItems.result, ...response.result];
         }
         return response.result;
       })
     );
-    // Safe current scroll position if navigating to Customer Details
-    this.scrollSubscription = this.router.events.subscribe((events) => {
+
+    this.cacheSubscription = this.router.events.subscribe((events) => {
       if (events instanceof NavigationStart) {
         const customerId = Number.parseInt(events.url.replace(/\D/g, ''), 10);
         if (events?.url === `/customer/${customerId}`) {
-          // Safe Scrollposition
-          this.scrollPositionService.scrollPosition = this.scrollContainer.nativeElement.scrollTop;
-          // Safe prefetched data
-          if (!!this.scrollPositionService.data) {
-            const oldResult = this.scrollPositionService.data.result;
-            const newResult = this.search.searchResult$.value.result;
-            this.scrollPositionService.data = this.search.searchResult$.value;
-            this.scrollPositionService.data.result = [...oldResult, ...newResult];
-          } else {
-            this.scrollPositionService.data = this.search.searchResult$.value;
-          }
+          this.cache.set(this.search.createQueryParams(), this.search.searchResult);
         }
       }
     });
     this.initBreadcrumb();
   }
 
-  ngAfterViewInit() {
-    // Start scrolling to last remembered position
-    this.scrollPositionService.scrollToLastRememberedPosition(this.scrollContainer);
-  }
+  ngAfterViewInit() {}
 
   async initBreadcrumb() {
     await this.search.filtersLoaded$
@@ -99,8 +88,8 @@ export class CustomerSearchResultComponent implements OnInit, OnDestroy, AfterVi
   }
 
   ngOnDestroy() {
-    if (!!this.scrollSubscription) {
-      this.scrollSubscription.unsubscribe();
+    if (!!this.cacheSubscription) {
+      this.cacheSubscription.unsubscribe();
     }
   }
 

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

@@ -1,12 +1,11 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { ApplicationService } from '@core/application';
-import { ScrollPositionService } from 'apps/ui/common/src/lib/scroll-position/scroll-position.service';
 
 @Component({
   selector: 'page-customer',
   templateUrl: 'page-customer.component.html',
   styleUrls: ['page-customer.component.scss'],
-  providers: [ScrollPositionService],
+  providers: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PageCustomerComponent {

apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.ts

@@ -54,7 +54,7 @@ export class UiRangeFilterComponent implements OnInit {
     control: AbstractControl,
     compareValue: { compareControlValue: string; target: 'start' | 'stop' }
   ) {
-    value === '' ? (option.selected = true) : (option.selected = false);
+    value?.length > 0 ? (option.selected = true) : (option.selected = false);
     option.value = this.checkValue(value, option, compareValue);
     this.updateControl(option.value, control);
     this.filterGroup.toggleOption(this.filter, option);
@@ -80,11 +80,11 @@ export class UiRangeFilterComponent implements OnInit {
         : '';
 
     // Checking if start value is smaller than stop value
-    if (compareValue.target === 'stop' && compareValue.compareControlValue !== '') {
-      if (Number(compareValue.compareControlValue) < Number(validatedResult)) {
-        validatedResult = compareValue.compareControlValue;
-      }
-    }
+    // if (compareValue.target === 'stop' && compareValue.compareControlValue !== '') {
+    //   if (Number(compareValue.compareControlValue) < Number(validatedResult)) {
+    //     validatedResult = compareValue.compareControlValue;
+    //   }
+    // }
 
     // Checking if start value is smaller than stop value and vice versa
     // if (compareValue.target === 'start' && compareValue.compareControlValue !== '') {

apps/ui/filter/src/lib/filter-group/filter-group.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from '@angular/core';
-import { Filter, FilterOption, RangeFilter, RangeFilterOption, SelectFilterOption } from '../models';
-import { isBoolean } from '@utils/common';
-import { isSelectFilterOption } from '../type-guards';
+import { Filter, FilterOption } from '../models';
+import { isRangeFilterOption, isSelectFilterOption } from '../type-guards';
 
 export abstract class FilterGroup {
   abstract value: Filter[];
@@ -33,6 +32,17 @@ export abstract class FilterGroup {
       this.valueChange.emit(this.value);
       this.updateView.emit();
     }
+
+    if (isRangeFilterOption(optionRef)) {
+      console.log('BEFORE: ', optionRef, option);
+      optionRef.selected = option.selected;
+      if (isRangeFilterOption(option)) {
+        optionRef.value = option.value;
+      }
+      console.log(optionRef, option);
+      this.valueChange.emit(this.value);
+      this.updateView.emit();
+    }
   }
 
   getFilterRef(filter: Filter) {

apps/ui/filter/src/lib/type-guards/range-filter.type-guard.ts

@@ -1,5 +1,5 @@
 import { Filter, RangeFilter } from '../models';
 
-export function isRangFilter(filter: Filter): filter is RangeFilter {
+export function isRangeFilter(filter: Filter): filter is RangeFilter {
   return filter.type === 'integer-range';
 }